This document outlines the process making a note taking app to sastify below user stories.
- Document (following template) → required to estimate tasks.
- Write unit tests for both FE & BE.
- Actively discuss requirements, technical issues, and documentation writing via meeting/Skype/call.
- Report: Daily progress report in daily standup (10:30 AM), demo work at the end of each week.
- FE: ReactJS / TypeScript / react-router-dom / @tanstack/react-query / tailwindcss / @testing-library/react / React Hooks Form / Shacdn UI
- BE: Django Rest Framework (Django 5.0)
- DB: Postgres 16
- Deployment: Docker/Caddy
Backend
- Python 3.11.8
- Django 5.0 with Django rest framework 3.15.2
- Postgres 16
- JWT authentication with djangorestframework-simplejwt
- CORS protection with django-cors-headers
- Argon2 password hashing
- HTTPS for transmiting with Caddy 2
Frontend
- ReactJS for UI
- Tailwindcss/ShadcUI for styling
- React-hook-form for form handling
- React-Query form manage async state
- Axios for http client
Preview
Client Request
│
▼
┌────────────────────────┐
│ Caddy │
└────────────────────────┘
│
▼
Is path api/*?
│ │
No │ │ Yes
│ │
▼ ▼
┌──────────────┐ ┌──────────────┐
│ Serve │ │ Forward to │
│ index.html │ │ Django │
│ (React App) │ │ Backend │
└──────────────┘ └──────────────┘
| HTTP Method | API Path | Description |
|---|---|---|
| GET | /api/v1/notes/ | List all notes |
| POST | /api/v1/notes/ | Create a new note |
| GET | /api/v1/notes/{id}/ | Retrieve a specific note |
| PUT | /api/v1/notes/{id}/ | Update a specific note |
| PATCH | /api/v1/notes/{id}/ | Partially update a specific note |
| DELETE | /api/v1/notes/{id}/ | Delete a specific note |
| POST | /api/v1/notes/assign-permission/ | Assign permission to a note |
| DELETE | /api/v1/notes/assign-permission/ | Remove permission from a note |
| GET | /api/v1/notes/health-check/ | Check the health status of the API |
| GET | /api/v1/notes/shared/ | Retrieve shared notes |
| POST | /api/v1/users/login/ | User login to obtain access and refresh tokens |
| GET | /api/v1/users/me/ | Retrieve current user's profile |
| POST | /api/v1/users/refresh/ | Refresh the access token |
| GET | /api/v1/users/roles/ | List all user roles |
| POST | /api/v1/users/roles/ | Create a new user role |
| GET | /api/v1/users/roles/{id}/ | Retrieve a specific user role |
| PUT | /api/v1/users/roles/{id}/ | Update a specific user role |
| PATCH | /api/v1/users/roles/{id}/ | Partially update a specific user role |
| DELETE | /api/v1/users/roles/{id}/ | Delete a specific user role |
| GET | /api/v1/users/search/ | Search for users by username |
| POST | /api/v1/users/sign-up/ | Register a new user |
| GET | /api/v1/users/verify/{token}/ | Verify a user's account |
| File Name | Description |
|---|---|
| AssignPermission.tsx | Component for assigning permissions |
| CheckEmail.tsx | Component for email verification process |
| EmailVerified.tsx | Component to display email verification status |
| Home.tsx | Home page component |
| Login.tsx | User login component |
| Logout.tsx | User logout component |
| NotFound.tsx | 404 Not Found page component |
| Shared.tsx | Component for shared content or functionality |
| SignUp.tsx | User registration component |
Home
│
├───► Login ───────────────────────────────┐
│ │
├───► SignUp ───► CheckEmail ───► EmailVerified
│ │
│ ▼
│ Dashboard
│ │
└───► Shared │
│
┌───────────────────────────────────────────────┐
│ │ │
▼ ▼ ▼
AssignPermission User Profile Roles
│ │ │
│ │ ▼
│ │ Manage Roles
│ │ (Create/Edit/Delete)
│ │
└─────────────────────┼───────────────────┐
│ │
▼ ▼
Logout NotFound
Legend:
───► : User navigation
│ : Hierarchical relationship
