Signs for Trucks

Table of Contents

1. Description
2. Install (Run) with Docker
3. Installation without Docker
4. Connect to the Django Backend API
5. Screenshots of the Frontend Next js App
6. Screenshots of the Django Backend Admin Panel
7. Screenshots of the Original Frontend Design

Description

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).

Services Explained

1. 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.

2. 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.

3. 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.

Install (Run) with Docker

1. Clone the repo:

   git clone https://github.com/Ceci-Aguilera/truck_signs_frontend.git

2. Install Docker and Docker Compose

3. 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/)
   

4. Run the command:

   docker-compose up --build

5. Congratulations =) !!! the app should be running in localhost:3000

Installation without Docker

1. Clone the repo:

   git clone https://github.com/Ceci-Aguilera/truck_signs_frontend.git

2. Install dependencies:

   npm install

3. 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/)
   

4. Run the app

   npx next dev

5. Congratulations =) !!! the app should be running in localhost:3000

Run with the Django Backend (with and without Docker)

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

1. Assuming that your are at the project_root, clone the Django Backend API repository:

      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

• If Using Docker and Docker Compose

  1. 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).

  2. 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

  3. 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

  4. Run the command:

     docker-compose up --build

  5. Congratulations =) !!! the frontend app should be running in localhost:3000 while the backend is at localhost:80

  6. (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.

• Running without Docker and Docker Compose

  1. Follow the instructions of the Installation without Docker section in the Readme.md of the Django Backend API repository to configure and run the backend.
  2. Follow the instructions of section Installation without Docker of this Readme.md. Modify the NEXT_PUBLIC_API_DOMAIN_NAME to be the url of the Django Backend API (by default it is http://localhost:8000).
  3. Congratulations =) !!! the frontend app should be running in localhost:3000 while the backend is at localhost:8000

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.

---

Screenshots of the Frontend NEXT JS App

Mobile View

---

Desktop View

---

---

---

Screenshots of the Django Backend Admin Panel

Mobile View

---

Desktop View

---

---

---

Screenshots of the Original Frontend Design

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.