Skip to content

Django and React fullstack web to administrate the business Home Key Renovations. The project is meant to work as a Digital Warehouse and as an Administration System.

Notifications You must be signed in to change notification settings

Ceci-Aguilera/fullstack-web-home-key-renovations

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Fullstack Web Home Key Renovations

HKR Logo

Python version Django version Django-RestFramework version PostgreSQL version React version

Table of Contents

  1. Description
  2. Tech Stack and Packages Installed
  3. Install (Run) with Docker
  4. Install without Docker
  5. Structure for Docker-Compose Explained
  6. Django Files and Folders of Interest
  7. React Files and Folders of Interest
  8. About Nginx Configuration
  9. Screenshots of the Frontend
  10. Useful Links

Description

This repository is intended to be both a Digital Warehouse and an Administration system for the business Home Key Renovations.

Tech Stack and Packages Installed

React Image Django Image Nginx Image PostgreSQL Image Docker Image

  • Django: This is the backbone of the backend api, and has the following packages installed:

    • Django Rest Framework (For the Rest API)
    • Pillow (For managing images uploading)
    • Django-Cors-Headers (For the CORS config to allow React js to make calls)
    • Django-Environ (To Fetch the environment variables in the settings.py files)
    • Psycopg2-binary (To manage the PostgreSQL Database)
    • Gunicorn (To manage the running instance of the django web app)
    • Django-Rest-Knox (To manage user authentication via Token)

    Note: All this packages are specified in the requirements.txt file inside the django_backend folder. Links to their official documentation can be found at the Useful Links section.

  • React: The frontend library in use. This was created via npx create-react-app. The only extra packages that were installed (ignoring the ones that are automatically pre-installed) are:

    • Bootstrap and React-Bootstrap (For styling)
    • Axios (To make calls to the Django Backend)
    • React-Router-Dom and Router-Dom (For managing routing)

    Note: The bootstrap css link has been added to the index.js file that is inside the react_frontend/src folder. The links to the official documentation of these packages is included in the Useful Links section.

  • Nginx: This is the server for the Docker-Compose testing build. The default configuration in use can be found at the nginx/nginx.conf file.

  • PostgreSQL: This is the default configured database for this repository. A link to How to install/configure it for Linux/Windows/MacOS is included in the Useful Links section (This is only necessary for when not running with docker-compose). In addition, a link to How to change to MySQL in Django is included as well in the Useful Links section.

Install (Run) with Docker

  1. Clone the repo:

    git clone https://github.com/Ceci-Aguilera/react_django_boilerplate.git
  2. Copy a default setup of the environment variables for the project:

    cp example_env .env
    cp django_backend/django_backend/settings/example_env django_backend/django_backend/settings/.env
  3. (optional) Edit the values in the previous copied files to create a custom config. Note that the one set by default should work just fine for development.

  4. Add django backend url in an .env file inside react_frontend as REACT_APP_BACKEND_API_URL

  5. Run Docker-Compose:

    docker-compose up -d --build

    Congratulations !!! The app should be up and running. To access the React frontend go to localhost:80, and to access the Django backend go to localhost:80/api. From now on, any call made to localhost:80/api will be redirected to Django while every other path (localhost:80/*) will lead to the React frontend, with localhost:80/admin being the only exception (localhost:80/admin is an special url path that redirects to the Django Admin). In other words, the urls localhost:80/api and localhost:80/admin are reserved for the Django backend, while any other url of the form localhost:80/* redirects to the React frontend.

  6. (optional) To create a super user:

       docker-compose run backend ./manage.py createsuperuser 

Install without Docker

  1. Clone the repo:

    git clone https://github.com/Ceci-Aguilera/react_django_boilerplate.git
  2. Copy a default configuration of the environment variables for Django:

    cp django_backend/django_backend/settings/example_env django_backend/django_backend/settings/.env
  3. (optional) Edit the values in the previous file that was copied to create a custom config. Note that the one set by default should work just fine for development.

  4. Set up the database. In this case the one in use by default is PostgreSQL. Assuming that PostgreSQL is already installed in the OS, and that the needed configurations for PostgreSQL to run in the OS are done, create a database and an user using the credentials specified in the django_backend/django_backend/settings/.env file that was just created/edited. Note: To now how to install and configure PostgreSQL, see the Useful Links section of this documentation.

  5. Change the default settings.py file in use from docker to development. To do this, go to the file django_backend/django_backend/settings/__init__.py and modify the line

    from .docker import *

    to

    from .dev import *
  6. Create and activate a virtual environment (See the Useful Links section if not know how)

  7. Install the necessary dependencies

    cd django_backend
    pip install -r requirements.txt
  8. Run Django:

    cd django_backend
    python manage.py makemigrations
    python manage.py migrate
    python manage.py runserver
  9. To configure React, from the project root folder go to react_frontend and install the necessary dependencies:

    cd react_frontend
    npm install
  10. Add django backend url in an .env file inside react_frontend as REACT_APP_BACKEND_API_URL

  11. Run React while inside the react_frontend folder:

    npm start

Congratulations !!! The app should be up and running. To access the React frontend go to localhost:3000, and to access the Django backend go to localhost:8000.

Structure for Docker-Compose Explained

This repository is divided into 3 main folders (not counting the .readme_assets as it contains only the images displayed in the Readme). These folders are:

  • django_backend: Has the Django project created with django-admin startproject.
  • react_frontend: Has the React project create with npx create-react-app.
  • nginx: Has the Dockerfile used in the docker-compose.yml file and the default config to run Django + React. When running the project locally without Docker this folder can be ignored.

Each project (Django and React as separate projects) is intended to be self contained, and so it can be separately tested without the need of docker-compose.

When running with Docker Compose, there are 4 images that are created: A Django backend Image, a React frontend Image, a Nginx Image, and a PostgreSQL Image. The Dockerfiles for Django, React, and Nginx can be found in their respective folders, i.e, the Django Dockerfile is inside the django_backend folder, and so on. The PostgreSQL image has no custom Dockerfile, instead it is pulled from the Docker Hub, and the environment variables for the docker-compose file can be found at the .env file in the project root folder. This repository does not include that file, instead it offers an example_env file that can be renamed to .env and it should work out of the box (the default environment variables set do not need to be modified).

Django Files and Folders of Interest

The django_backend/django_backend folder contains different settings.py files for different environment. For example, the dev.py file has the default settings to run in the development environment, while the docker.py file has the default settings to run when using docker-compose. All of these files has the base.py file as their parent file (the base.py file has the settings to be shared among the environments), and so they all should have

from .base import *

as their first line. To change between environments, go to the django_backend/django_backend/__init__.py file and edit its first line. By default it should be

from .docker import *

To change to the environment x, replace that line with

from .x import *

Next, the templates, static, and media folders have been created (and configured in the settings) to store the hml, css, ... files.

React Files and Folders of Interest

The following structure is used by the owner of this repository when working on a React project, and it was taken from the Next js workflow:

    react_frontend
    |___ src 
          |____ components
          |____ pages
          |____ styles
          |____ assets

Screenshots of the Frontend

Clients Mobile New Client Mobile Order Mobile

Landing Desktop

New Order Desktop

Edit Order Desktop


Useful Links

PostgreSQL and other Databases

Docker

Django and DRF

React

Miscellaneous

About

Django and React fullstack web to administrate the business Home Key Renovations. The project is meant to work as a Digital Warehouse and as an Administration System.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published