Habaneras de Lino

Table of Contents

• Description
  • What is Habaneras de Lino ?
  • Tech stack and components
• Installation
  • Install (Run) with Docker, or
  • Installation without Docker
• Deploy on VPS
• Screenshots of the Frontend Next js App
• Screenshots of the Django Backend Admin Store
• Useful Links

Description

Visit the new version of the store at habanerasdelino.com

What is Habaneras de Lino?

Habaneras de Lino is an online store to buy linen and cotton clothes that offer an experience of comfort, luxury ,and modernity. The clients can filter the clothing by category, collection, and other characteristics, as well as customize the products (set color, size, sleeve cut, ...). It uses Stripe for managing the payments.

Tech Stack and Components

The main components of Habaneras de Lino are:

• Django and Django_Rest_Framework (This repo):
  • API(store_app folder): For managing user requests such as making CRUD operations over the store Cart and making payments and orders. The code for this API can be found inside the store_app folder of this repo.
  • The store administration (admin_app folder): Intended to be used by the store administrator. It is different from Django's Admin, and it allows advanced filtering and CRUD operations over products, collections, configs, orders, payments, ... .
• Stripe SDK (Third Party): For managing payments. It is accessed by Django when the user makes a purchase. Link to Stripe.
• Next.js and React.js store Frontend (GitHub repo): The store UI that is visible to the clients was created using Next.js which connects to the Django API when making API calls and to Cloudinary when fetching the products', collections', and categories' images.
• Cloudinary for storing images and as CDN (Third Party): Used for storing all images uploaded using the Django custom store administration. The images can be seen at the store's admin and in the store frontend by clients. Link to Cloudinary.
• PostgreSQL as database (Third Party): Connected to the Django API. Contains all the information about the store administration.

Note: The Installation and the Useful Links sections contain more-in-detail information about each component.

Installation

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-drf-api.git

2. Configure the environment variables.

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

      cd habaneras_de_lino_drf_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.

3. Run docker-compose:

   docker-compose up --build

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

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 habaneras_de_lino_drf_api folder into a .env file:

      cd habaneras_de_lino_drf_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.

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-drf-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

Should be updated soon

Screenshots of the custom Admin

Should be updated soon

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