Signs for Trucks is an online store to buy custom vinyl designs for trucks. This repo contains the fronted app developed using Next Js for a better React js experience
Signs for Trucks is an online store to buy pre-designed vinyls with custom lines of letters (often call truck letterings). The store also allows clients to upload their own designs and to customize them on the website as well. Aside from the vinyls that are the main product of the store, clients can also purchase simple lettering vinyls with no truck logo, a fire extinguisher vinyl, and/or a vinyl with only the truck unit number (or another number selected by the client).
Selecting a pre-designed vinyl or uploading one: In the principal view of the website the client can select one of the pre-designed vinyls available to edit, or the client can upload a png, jpg, ... photo to use as the template for the vinyl. After this the client is redirected to the edit-vinyl section.
Editing the selected/uploaded vinyl: In this page the client selects what lines of lettering should be added to the selected/uploaded vinyl as well as the color of the lettering (note that the background of the vinyl will be the color of the physical truck). The client can also leave a comment about more specific/custom instructions, and should always provide an email to contact or send a pre-view of the product. After this the client is redirected to the make-payment section.
Making a Payment: The payment is managed via Stripe. The client should provide the required information that will be processed in the backend (DJANGO API). Then, the vinyl is sent to production.
Clone the repo:
git clone https://github.com/Ceci-Aguilera/truck_signs_frontend.git
Install Docker and Docker Compose
Configure the environment variables: Create an .env.local file inside the root folder and set up the following environment variables:
NEXT_PUBLIC_API_DOMAIN_NAME (The url of the backend, for example, https://backend_api.com/)
Run the command:
docker-compose up --build
Congratulations =) !!! the app should be running in localhost:3000
Clone the repo:
git clone https://github.com/Ceci-Aguilera/truck_signs_frontend.git
Install dependencies:
npm install
Configure the environment variables: Create an .env.local file inside the root folder and set up the following environment variables:
NEXT_PUBLIC_API_DOMAIN_NAME (The url of the backend, for example, https://backend_api.com/)
Run the app
npx next dev
Congratulations =) !!! the app should be running in localhost:3000
Note: Before following these steps clone this repository. From now on the selected folder that contains the clone will be referred as project_root. So far, it should look like this:
project_root
truck_signs_frontend
git clone https://github.com/Ceci-Aguilera/truck_signs_api.git
Now the project_root folder should look like:
project_root
truck_signs_frontend
truck_signs_api
Copy the content of the docker-compose-connect.yml to a new file docker-compose.yml in the project_root. The docker-compose-connect.yml file can be found at the root of this repository and also at the root of the Django Backend API repository (Either file is fine to copy).
Follow the instruction to configure the environment variables of the Django backend API that can be found in the section Install (Run) with Docker in the Readme.md of the Django Backend API repository
Follow the instructions on the Install (Run) with Docker section of this Readme.md to configure the environment variables for this repo. The only env variable needed is the Flask Backend url, which by default should be http://localhost:80. Note: Right now the project_root should look like:
project_root
truck_signs_frontend
truck_signs_api
docker-compose.yml
Run the command:
docker-compose up --build
Congratulations =) !!! the frontend app should be running in localhost:3000 while the backend is at localhost:80
(Optional step) To create a super user run:
docker-compose run api ./manage.py createsuperuser
NOTE: To create Truck vinyls with Truck logos in them, first create the Category Truck Sign, and then the Product (can have any name). This is to make sure the frontend retrieves the Truck vinyls for display in the Product Grid as it only fetches the products of the category Truck Sign.
NOTE: To create Truck vinyls with Truck logos in them, first create the Category Truck Sign, and then the Product (can have any name). This is to make sure the frontend retrieves the Truck vinyls for display in the Product Grid as it only fetches the products of the category Truck Sign.
NOTE: Some of the components of the original design have been changed, such as banner images, logos, fonts, and color tones. The main difference from the original design and the final result is footer that was extended to show more information, aside from this change there should not by any other major difference between the original design and the final result.