Habaneras de Lino

Table of Contents

• Description and New Version 2
• Useful Notes
• Install (Run) with Docker
• Installation without Docker
• Deploy on VPS
• Screenshots of the Frontend Next js App
• Screenshots of the Django Backend Admin Panel
• Useful Links

Description

Habaneras de Lino is an online store to buy linen and cotton clothes that offers its customers an experience of comfort, luxury ,and modernity. The clients can filter the clothing by category, collection, and other characteristics, as well as customize the product (set color, size, sleeve cut, ...), and save them in their cart as well as apply coupons for discount.

New Version Now Availeble: To see the latest version of Habaneras de Lino, please visit the repo habaneras-de-lino-drf-api. It contains an improved and more intuitive Custom Admin Interface, and better structured API design.

• Link to the Backend of Habaneras de Lino Version 2
• Link to the Frontend of Habaneras de Lino Version 2
• Link to Client Website of Habaneras de Lino Version 2

Useful Notes

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 (which is different from the Django Admin). Almost all of the views of the app have been created using CBVs.

Settings

The settings folder inside the mom_style_api 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.

Install (Run) with Docker

About the Builds and Images in use:

There are currently 3 services in use: the api (Django App), the db (the postgreSQL 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.

Runing Docker-Compose

1. Clone the repo:

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

2. Configure the environment variables.

   1. Copy the content of the example env file that is inside the mom_style_api folder into a .env file:

      cd mom_style_api/settings
      cp simple_env_conf.env .env

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

   3. For the database, the default configurations should be:

      DOCKER_DB_NAME=docker_habanerasdelino_db
      DOCKER_DB_USER=docker_habanerasdelino_user
      DOCKER_DB_PASSWORD=docker_habanerasdelinouser!
      DOCKER_DB_HOST=db
      DOCKER_DB_PORT=5432

   4. The DOCKER_SECRET_KEY is the django secret key. To generate a new one see: Stackoverflow Link

   5. The DOCKER_STRIPE_PUBLISHABLE_KEY and the DOCKER_STRIPE_SECRET_KEY can be obtained from a developer account in Stripe.

      • To retrieve the keys from a Stripe developer account follow the next instructions:
        1. Log in into your Stripe developer account (stripe.com) or create a new one (stripe.com > Sign Up). This should redirect to the account's Dashboard.
        2. Go to Developer > API Keys, and copy both the Publishable Key and the Secret Key.

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

3. Run docker-compose:

   docker-compose up --build

4. Congratulations =) !!! The App should be running in localhost:80

5. (Optional step) To create a super user run:

   docker-compose run api ./manage.py createsuperuser

Installation without Docker

1. Clone the repo:

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

2. Configure a virtual env and set up the database. See Link for configuring Virtual Environment and Link for Database setup.

3. Configure the environment variables.

   1. Copy the content of the example env file that is inside the mom_style_api folder into a .env file:

      cd mom_style_api/settings
      cp simple_env_conf.env .env

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

   3. For the database, the default configurations should be:

      DB_NAME=habanerasdelino_db
      DB_USER=habanerasdelino_user
      DB_PASSWORD=habanerasdelinouser!
      DB_HOST=localhost
      DB_PORT=5432

   4. The SECRET_KEY is the django secret key. To generate a new one see: Stackoverflow Link

   5. The STRIPE_PUBLISHABLE_KEY and the STRIPE_SECRET_KEY can be obtained from a developer account in Stripe.

      • To retrieve the keys from a Stripe developer account follow the next instructions:
        1. Log in into your Stripe developer account (stripe.com) or create a new one (stripe.com > Sign Up). This should redirect to the account's Dashboard.
        2. Go to Developer > API Keys, and copy both the Publishable Key and the Secret Key.

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

4. Run the migrations and then the app:

   python manage.py migrate
   python manage.py runserver

5. Congratulations =) !!! The App should be running in localhost:8000

6. (Optional step) To create a super user run:

   python manage.py createsuperuser
   
   
   
   

Deploy on VPS

1. Clone the repo:

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

2. Install the dependencies:

   sudo apt-get update
   sudo apt-get install python3-pip python3-dev libpq-dev postgresql postgresql-contrib nginx

3. Set up the postgresql database Setup Database
4. Create an .env file and configure the environment variables
5. Create a virtual env and activate it:

   virtualenv myprojectenv
   source myprojectenv/bin/activate

6. Pip install the requirements:

   pip install -r requirements.txt

7. Pip install gunicorn:

   pip install gunicorn

8. Run the migrations and then test the the app:

   python manage.py migrate
   python manage.py runserver

9. Complete the setup of the website with this Link
10. Configure the CORS to allow the Frontend to make api calls. See Link

Screenshots of the Frontend NEXT JS App

Mobile View

---

Desktop View

---

---

---

---

---

---

---

Screenshots of the Django Backend Admin Panel

---

---

Useful Links

Postgresql Databse

• Setup Database: Digital Ocean Link for Django Deployment on VPS

Docker

• Docker Oficial Documentation
• Dockerizing Django, PostgreSQL, guinicorn, and Nginx:
  • Github repo of sunilale0: Link
  • My repo to Dockerize Django + Postgresql + Nginx + React js: Ceci-Aguilera/django-react-nginx-mysql-docker
  • Michael Herman article on testdriven.io: Link

Django and DRF

• Django Official Documentation
• Generate a new secret key: Stackoverflow Link
• Modify the Django Admin:
  • Small modifications (add searching, columns, ...): Link
  • Modify Templates and css: Link from Medium
• Django Rest Framework Official Documentation
• More about Nested Serializers: Stackoverflow Link
• More about GenericViews: Testdriver.io Link

Miscellaneous

• Create Virual Environment with Virtualenv and Virtualenvwrapper: Link
• Configure CORS
• Setup Django with Cloudinary