Notes App

This document outlines the process making a note taking app to sastify below user stories.

Requirements

• 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.

User Stories

See docs/requirement.md

Build & Deploy Guide

See docs/contribute.md

Architecture

Tech Stack

• 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

Technical Details

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

Database schema

Dbdiagram Link

Preview

Deployment note

Client Request
                 │
                 ▼
    ┌────────────────────────┐
    │        Caddy           │
    └────────────────────────┘
                 │
                 ▼
        Is path api/*?
        │            │
     No │            │ Yes
        │            │
        ▼            ▼
┌──────────────┐ ┌──────────────┐
│ Serve        │ │ Forward to   │
│ index.html   │ │ Django       │
│ (React App)  │ │ Backend      │
└──────────────┘ └──────────────┘

Backend API Specifications (Django)

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

Frontend screens

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

Frontend Screen flow

Home
│
├───► Login ───────────────────────────────┐
│                                          │
├───► SignUp ───► CheckEmail ───► EmailVerified
│                                          │
│                                          ▼
│                                      Dashboard
│                                          │
└───► Shared                               │
                                           │
    ┌───────────────────────────────────────────────┐
    │                     │                         │
    ▼                     ▼                         ▼
AssignPermission     User Profile                 Roles
    │                     │                         │
    │                     │                         ▼
    │                     │                   Manage Roles
    │                     │                   (Create/Edit/Delete)
    │                     │
    └─────────────────────┼───────────────────┐
                          │                   │
                          ▼                   ▼
                        Logout             NotFound

Legend:
───► : User navigation
 │   : Hierarchical relationship

User Flows

Sign Up

Login

Create Note

Update Note

Delete Note

Create Role

Update Role

Delete Role

Assign Role