Notes Application

A full-stack note-taking application with categorization and archiving capabilities.

Features

• Phase 1

  • Create, edit, and delete notes
  • Archive/unarchive notes
  • List active/archived notes
  • Responsive UI

• Phase 2

  • Add/remove categories to notes
  • Filter notes by category
  • Category management

Technologies

Frontend

• React 18.3.1
• TypeScript 5.5.3
• Vite 5.4.1
• TanStack Query 5.59.0
• Tailwind CSS 3.4.13
• React Hook Form 7.53.0
• Zustand 5.0.0

Backend

• Python 3.11.1
• Django 5.1.5
• Django REST Framework 3.15.2
• PostgreSQL 15
• Gunicorn 21.2.0
• WhiteNoise 6.6.0

Infrastructure (optional, you can run the run.sh script)

• Docker 24+
• Docker Compose 2.23+
• Render (Production)
• Vercel (Frontend Deployment)

Prerequisites

• Node.js 18.17+
• npm 9.6+
• Python 3.11.1
• pip 23.0+
• PostgreSQL 15
• Docker 24+ (optional)

Installation

1. Clone Repository

git clone https://github.com/hirelens-challenges/Sondon-6b36f4.git

2. Running the project

From project root

chmod +x run.sh ./run.sh

Docker setup

docker-compose up --build

Configuration

Environment files will be auto-generated by run.sh with these defaults

Backend (.env)

DEBUG=True SECRET_KEY= (auto-generated) DATABASE_URL=postgres://user:password@localhost:5432/mydb ALLOWED_HOSTS=localhost,127.0.0.1 CORS_ALLOWED_ORIGINS=http://localhost:3000,http://localhost:5173 CSRF_TRUSTED_ORIGINS=http://localhost:3000,http://localhost:5173

Frontend (.env) VITE_BACKEND_URL=http://localhost:8000

Manual Setup

Backend Setup

cd backend/core python -m venv venv source venv/bin/activate pip install -r requirements.txt Frontend Setup

cd ../../frontend npm install

Deployment

Live Instances Frontend: https://sondon-6b36f4-4144.vercel.app

Backend: https://sondon-6b36f4.onrender.com

Notes Endpoints

Endpoint	Method	Description	Parameters	Request Body	Response
/api/notes/	GET	List all notes	-	-	List of notes
/api/notes/create/	POST	Create new note	-	{title: string, content: string, categories: number[]}	Created note

| /api/notes/{id}/update/ | PUT | Update note | id: number | {title?: string, content?: string} | Updated note |

| /api/notes/{id}/delete/ | PUT | Soft delete note | id: number | - | 204 No Content | | /api/notes/{id}/archive/ | PUT | Archive note | id: number | - | 204 No Content | | /api/notes/{id}/unarchive/ | PUT | Unarchive note | id: number | - | 204 No Content | | /api/notes/{id}/add-category/{category_id}/ | POST | Add category to note | id: number, category_id: number | - | 204 No Content | | /api/notes/{id}/remove-category/{category_id}/ | DELETE | Remove category from note | id: number, category_id: number | - | 204 No Content | | /api/notes/filter-by-category/ | GET | Filter notes by category | category_id: number (query param) | - | Filtered notes list |

---

Categories Endpoints

Endpoint	Method	Description	Parameters	Request Body	Response
/api/notes/category-list/	GET	List all categories	-	-	List of categories
/api/notes/category-create/	POST	Create new category	-	{name: string}	Created category
/api/notes/{id}/category-delete/	PUT	Delete category	id: number	-	204 No Content

I added a login screen with the following endpoints

Endpoint	Method	Description	Parameters	Request Body	Response
/api/users/csrf/	GET	Get CSRF token	-	-	CSRF token
/api/users/login/	POST	Login user	-	{username: string, password: string}	Successful login

The default user is created with the credentials of "saul" and "12345"

Please note: Slower response times may occur as this site uses Render's free hosting tier. Thank you for your patience during initial load.