UCRK

FullStack web application for a training center of excellence using React / Django for development and Nginx / Gunicorn for deployment.

---

Project Status

Completed ✓

---

Functionality

• React dynamic generation of child routes
• Django mailer API using component hash
• CI/CD pipeline using Github Actions

Technologies and Frameworks

• Python 3.11
• Django 4.2
• DRF 3.14
• ReactJS 6.0
• PostgreSQL
• CI/CD
• Nginx / Gunicorn

---

Installation

1. Clone the repository to the local machine

   git clone https://github.com/Segfaul/ucrk.git

2. Go to the repository directory

   cd ucrk/

3. Create and activate a virtual environment

   python -m venv env
   source env/bin/activate

4. Set project dependencies

   pip install -r requirements.txt

5. Go to /backend directory and configure .env file (similar to .env-ex)

   cd backend/
   nano .env

6. Go to /frontend directory, install depencies, build project

   cd ../frontend
   npm install
   npm run build

7. Move back to /backend directory, make migrations & run the application

   cd ../backend
   python manage.py makemigrations
   python manage.py migrate
   python manage.py runserver

---

Production

1. Configure mailer platform & api keys in settings

   EMAIL_HOST = 'smtp.gmail.com' # mail / yahoo / hotmail / etc...
   EMAIL_USE_TLS = True
   EMAIL_PORT = 587
   EMAIL_HOST_USER = env('EMAIL_HOST_USER')
   EMAIL_HOST_PASSWORD = env('EMAIL_HOST_PASSWORD')

2. Configure API host & port for axios client

   const client = axios.create({
       baseURL: 'http://127.0.0.1:8000',
       withCredentials: true,
   });

3. Configure Gunicorn Socket & Service

   # sudo nano /etc/systemd/system/gunicorn-project.socket
   
   [Unit]
   Description=gunicorn project socket
   
   [Socket]
   ListenStream=/run/gunicorn-project.sock
   
   [Install]
   WantedBy=sockets.target

   # sudo nano /etc/systemd/system/gunicorn-project.service
   
   [Unit]
   Description=gunicorn project daemon
   After=network.target
   
   [Service]
   User=root
   Group=root
   WorkingDirectory=/home/user/path/to/django/
   ExecStart=/home/user/path/to/venv/bin/gunicorn \
       --access-logfile - \
       --workers 3 \
       --bind unix:/run/gunicorn-project.sock \
       config.wsgi:application
   
   [Install]
   WantedBy=multi-user.target

   # Start & Enable socket
   
   sudo systemctl start gunicorn-project.socket
   sudo systemctl enable gunicorn-project.socket

4. Configure Nginx

   # sudo nano /etc/nginx/sites-available/project
   server {
       server_name domain_or_ip;
       
       location = /favicon { access_log off; log_not_found off; }
   
       location / {
           include proxy_params;
           proxy_pass http://unix:/run/gunicorn-project.sock;
       }
   
       location /static/ {
           root /home/user/path/to/django;
       }
   
       location /media/ {
           root /home/user/path/to/django;
       }
   }

   # Copy link on project & Start Nginx
   sudo ln -s /etc/nginx/sites-available/project /etc/nginx/sites-enabled
   sudo systemctl restart nginx
   sudo ufw allow 'Nginx Full'

---