Signs for Trucks is an online store to buy custom vinyl designs for trucks. This repo contains the backend api developed with Django and Django Rest Framework.
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).
NOTE: This is also the section Basic Workflow of the Website of the frontend (NEXT js) documentation.
Selecting a pre-designed vinyl or uploading one: In the principal view of the website (NEXT js frontend) 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.
The backend functionalities can be divided into 2 categories, those that serve the frontend app (NEXT js), and those used for the administration of the store because the creation of a custom administration panel (aside from the Django Admin) is currently under consideration. Almost all of the views of the app have been created using CBVs.
The settings folder inside the trucks_signs_designs folder contains the different setting's configuration for each environment (so far the environments are development, docker testing, and production). Those files are extensions of the base.py file which contains the basic configuration shared among the different environments (for example, the value of the template directory location). In addition, the .env file inside this folder has the environment variables that are mostly sensitive information and should always be configured before use. By default, the environment in use is the decker testing. To change between environments modify the __init.py__ file.
Most of the models do what can be inferred from their name. The following dots are notes about some of the models to make clearer their propose:
To manage the payments, the payment gateway in use is Stripe.
Most of the views are CBV imported from rest_framework.generics, and they allow the backend api to do the basic CRUD operations expected, and so they inherit from the ListAPIView, CreateAPIView, RetrieveAPIView, ..., and so on.
The behavior of some of the views had to be modified to address functionalities such as creation of order and payment, as in this case, for example, both functionalities are implemented in the same view, and so a GenericAPIView was the view from which it inherits. Another example of this is the UploadCustomerImage View that takes the vinyl template uploaded by the clients and creates a new product based on it.
There are currently 3 services in use: the api (Django App), the db (the postgrSQL database), and the nginx (Nginx configuration). - api: The Django Dockerfile is in the root directory, and it has an entrypoint file that connects the backend to the database and runs migrations as well as collects the statics. - db: This is built from the postgres:13-alpine image. The default environment variables are set in the docker-compose.yml file. - nginx: The default configuration for nginx is inside the nginx folder in the nginx.conf file.
Clone the repo:
git clone https://github.com/Ceci-Aguilera/truck_signs_api.git
Configure the environment variables.
Copy the content of the example env file that is inside the truck_signs_designs folder into a .env file:
cd truck_signs_designs/settings
cp simple_env_config.env .env
The new .env file should contain all the environment variables necessary to run all the django app in all the environments. However, the only needed variables for docker to run are the following:
DOCKER_SECRET_KEY
DOCKER_DB_NAME
DOCKER_DB_USER
DOCKER_DB_PASSWORD
DOCKER_DB_HOST
DOCKER_DB_PORT
DOCKER_STRIPE_PUBLISHABLE_KEY
DOCKER_STRIPE_SECRET_KEY
DOCKER_EMAIL_HOST_USER
DOCKER_EMAIL_HOST_PASSWORD
For the database, the default configurations should be:
DOCKER_DB_NAME=docker_trucksigns_db
DOCKER_DB_USER=docker_trucksigns_user
DOCKER_DB_PASSWORD=docker_supertrucksignsuser!
DOCKER_DB_HOST=db
DOCKER_DB_PORT=5432
The DOCKER_SECRET_KEY is the django secret key. To generate a new one see: Stackoverflow Link
The DOCKER_STRIPE_PUBLISHABLE_KEY and the DOCKER_STRIPE_SECRET_KEY can be obtained from a developer account in Stripe.
The DOCKER_EMAIL_HOST_USER and the DOCKER_EMAIL_HOST_PASSWORD are the credentials to send emails from the website when a client makes a purchase. This is currently disable, but the code to activate this can be found in views.py in the create order view as comments. Therefore, any valid email and password will work.
Run docker-compose:
docker-compose up --build
Congratulations =) !!! The App should be running in localhost:80
(Optional step) To create a super user run:
docker-compose run api ./manage.py createsuperuser
Clone the repo:
git clone https://github.com/Ceci-Aguilera/truck_signs_api.git
Configure a virtual env and set up the database. See Link for configuring Virtual Environment and Link for Database setup.
Configure the environment variables.
Copy the content of the example env file that is inside the truck_signs_designs folder into a .env file:
cd truck_signs_designs/settings
cp simple_env_config.env .env
The new .env file should contain all the environment variables necessary to run all the django app in all the environments. However, the only needed variables for the development environment to run are the following:
SECRET_KEY
DB_NAME
DB_USER
DB_PASSWORD
DB_HOST
DB_PORT
STRIPE_PUBLISHABLE_KEY
STRIPE_SECRET_KEY
EMAIL_HOST_USER
EMAIL_HOST_PASSWORD
For the database, the default configurations should be:
DB_NAME=trucksigns_db
DB_USER=trucksigns_user
DB_PASSWORD=supertrucksignsuser!
DB_HOST=localhost
DB_PORT=5432
The SECRET_KEY is the django secret key. To generate a new one see: Stackoverflow Link
The STRIPE_PUBLISHABLE_KEY and the STRIPE_SECRET_KEY can be obtained from a developer account in Stripe.
The EMAIL_HOST_USER and the EMAIL_HOST_PASSWORD are the credentials to send emails from the website when a client makes a purchase. This is currently disable, but the code to activate this can be found in views.py in the create order view as comments. Therefore, any valid email and password will work.
Run the migrations and then the app:
python manage.py migrate
python manage.py runserver
Congratulations =) !!! The App should be running in localhost:8000
(Optional step) To create a super user run:
python manage.py createsuperuser
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_api
git clone https://github.com/Ceci-Aguilera/truck_signs_frontend.git
Now the project_root folder should look like:
project_root
├── truck_signs_api
└── truck_signs_frontend
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 Next js Frontend repository (Either file is fine to copy).
Follow the instruction to configure the environment variables of the Next js frontend that can be found in the section Install (Run) with Docker in the Readme.md of the Next js Frontend repository. The only env variable needed is the Flask Backend url, which by default should be http://localhost:80.
Follow the instructions on the Install (Run) with Docker section of this Readme.md to configure the environment variables for this repo. Note: Right now the project_root should look like:
project_root
├── truck_signs_api
├── truck_signs_frontend
└── 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.
git clone https://github.com/Ceci-Aguilera/truck_signs_api.git
sudo apt-get update
sudo apt-get install python3-pip python3-dev libpq-dev postgresql postgresql-contrib nginx
virtualenv myprojectenv
source myprojectenv/bin/activate
pip install -r requirements.txt
pip install gunicorn
python manage.py migrate
python manage.py runserver