ASJ Note App 📝

Asj Note App is a simple web application for taking short notes. It is a full-stack application built using React (TypeScript) as Frontend with TailwindCSS for styling, Django-Rest-Framework as Backend, PostgreSQL for Database and Deployment on Docker.

Watch Video Demo

This project is made to improve my knowledge on React, Django and deploying and managing multi-container applications using Docker Compose.

Tech Stack

	Frontend
	Backend
	Database
	Deployment

Core Features

• 🔒 Basic Authentication with JWT Tokens (SignUp/Login).
• 💻 Desktop Optimised UI with readjustable panels.
• 📝 Basic Note operations (Add, Edit, and Delete Note).
• 🌓 Dark and Light Theme Support.

Implementation

Frontend

• Built on React + TypeScript in Vite development environment.
• React Router DOM for routing.
• Axios for communication with the API backend.
• Tailwind CSS for styling.
• Zustand for Global State Management.
• Uses NGINX server in production.

Backend

• Python based backend using Django.
• Acts as an API using Django-Rest-Framework.
• Uses JWT tokens for secure authentication and validating sessions using Django Simple JWT.
• Uses psycopg for communication with the database.
• Uses python gunicorn server in production.

Database

• Uses PostgreSQL 17 for database.
• The psycopg interface in backend does the communication with the db.

Deployment (OPERATION SMILING WHALE 🐳)

• Docker Compose is used to deployement.
• Uses a multi-container structure dividing the application into three containers.
  • 🐘 DB container:
    • Starts first
    • Uses a postgres17:alpine image.
    • Takes an healthcheck if it is set up correctly.
  • 🐍 Backend conatiner:
    • Starts only after DB container is ready.
    • Uses a python:3.12alpine image.
    • Runs migrations and takes an healthcheck if it is set up correctly.
  • ⚛️ Frontend container:
    • Starts only after Backend container is ready.
    • Uses a node:20-alpine image as builder to compile the react files to static files.
    • Then uses an nginx:alpine image to serve these static files in an nginx server.
    • It also ensures the setup is free from cors issues when communicating with the backend.

How to Run this Project?

Prerequisite: Make sure you have Docker installed in your computer and is running without any issues.

Step 1: Download or clone this repository to a folder.

Step 2: Navigate to the project folder in your terminal/command prompt.

Step 3: Build the Application.

docker-compose build

Have a cup of coffee 🍵 while Docker builds the images for frontend and backend.

Step 4: Start the Containers.

Run the command

docker-compose up

Check if the three containers are running

On a new terminal, run

docker ps -all

Find the below containers are running or not

CONTAINER ID   IMAGE                       COMMAND                  CREATED         STATUS                     PORTS                    NAMES
bf17ed4826a3   note-app-backend            "/app/entrypoint.sh"     2 minutes ago   Up 2 minutes (unhealthy)   0.0.0.0:8000->8000/tcp   backend
f0c31f44425c   note-app-frontend-nginx     "/docker-entrypoint.…"   2 minutes ago   Created                                             frontend
361a2d2f88fd   postgres:17-alpine3.22      "docker-entrypoint.s…"   2 minutes ago   Up 2 minutes (healthy)     5432/tcp                 db

Start the frontend container if its status is Created

docker start frontend

Step 5: If all containers running properly, open your browser and navigate to port 80

localhost:80

Sign Up with some random credentials and start testing the app out 😊.

Screenshots

Add Note	Edit Note
Change Password	Login
Register	Dark Theme

References I used for making this project

• Docker Docs
  • Multi Stage | Docker Docs
  • Docker Compose | Docker Docs
• Django Documentation
  • Databases | Django Documentation
  • Django Settings | Django Documentation | Django
• Django-Rest-Api Docs
  • 1 - Serialization - Django REST framework
  • 2 - Requests and Responses - Django REST framework
• PostgreSQL Documentation
  • PostgreSQL:Documentation
  • PostgreSQL Tutorial | W3Schools
• References for Frontend
  • Vite
  • Zustand
  • Tailwind CSS
  • Axios
  • Nginx
• You-Tube References
  • Django & React Web App Tutorial - Authentication, Databases, Deployment & More... by Tech With Tim
  • Django REST Framework - Build an API from Scratch by Caleb Curry
  • Docker + Django: Containerize the Right Way with Nginx, Postgresql & Gunicorn by Better Stack

I've also used ChatGPT and Claude for optimising CSS, debugging and understanding console errors.