PixyBlox

PixyBlox is a Photo Tile Maker app made with React and Laravel. Users can choose a layout and upload an image file to each block or tile on the layout. Users can drag and zoom on the images to customize the tile and save it to generate a tiled image.

Screenshots

Installation

Clone the repository.

git clone https://shalom2315@bitbucket.org/shalom2315/pixyblox.git

Go to the directory.

cd pixyblox

Project folder structure

The project is separated into two directories: api (Laravel framework) and client (React).

Laravel API Installation

Go to api directory

cd api

Rename .env.example file to .env. All variables are already configured, no changes needed.

Run composer command to install the Laravel framework and its dependencies.

composer install

Rename Homestead.yaml.example file to Homestead.yaml

Open the Homestead.yaml file and set the path to the PixyBlox folder.

folders:
    -
        map: ~/path/to/pixyblox/api/folder
        to: /home/vagrant/code

Add pixyblox.test to the hosts file on your machine.

192.168.10.10 pixyblox.test

Run Homestead development server.

vagrant up

Run migrations

php artisan migrate

PixyBlox uses public disk to store files so you need to create a symbolic link in order for the uploaded files to be accessible from the web. More info here.

php artisan storage:link

React Installation

Go to client directory

cd client

Install React and its dependencies

npm install

Run development web server

npm start

Production build

npm run build

Run build with a static server

serve -s build