📝 Todo Pro

A production-grade full-stack task management system with enterprise-level security, caching, and modern UI/UX.

🎯 Overview

Todo Pro is a sophisticated task management application featuring JWT authentication, Redis caching, rate-limited APIs, and a polished React 19 frontend with ShadCN components [web:11][web:18]. Built for scalability and security with comprehensive validation layers and modern development practices [web:15][web:18].

✨ Key Features

• Secure Authentication: JWT-based auth with refresh tokens and bcrypt password hashing [web:2]
• Modern UI: React 19.2 with ShadCN components, Tailwind CSS, and responsive design [web:6][web:18]
• Type-Safe Forms: React Hook Form + Zod validation on frontend, Joi validation on backend [web:10]
• Performance: Redis caching and API rate limiting [web:5]
• File Uploads: Cloudinary integration with Multer [web:4]
• Database Security: MongoDB Atlas and Mongoose ODM [web:4]
• State Management: React Context API for auth and todo state [web:9]

🛠️ Tech Stack

Frontend
React 19.2 Vite Tailwind CSS ShadCN Zod React Hook Form Axios React Router

Backend
Node.js Express 5 JWT Bcrypt Joi Multer Redis Express Rate Limit

Database
MongoDB Atlas Mongoose

Others
Cloudinary CORS Cookie Parser Nodemon

🚀 Quick Start

Prerequisites

Ensure you have the following installed and configured [web:18]:

• Node.js v18+
• MongoDB Atlas account
• Redis instance
• Cloudinary account

Installation

1. Clone repository

git clone https://github.com/yourusername/todo-pro.git
cd todo-pro

2. Backend setup

cd Backend
npm install

Create Backend/.env:

MONGO_URI=your-mongo-atlas-uri

SERVER_PORT=3000

CLOUDINARY_CLOUD_NAME=your-cloud-name
CLOUDINARY_API_KEY=your-cloud-api-key
CLOUDINARY_API_SECRET=your-cloud-api-secret

ACCESS_TOKEN_SECRET=your-access-token
ACCESS_TOKEN_EXPIRY=your-token-expiry
REFRESH_TOKEN_SECRET=your-refresh-token
REFRESH_TOKEN_EXPIRY=your-token-expiry

REDIS_URL=redis://localhost:6379

CORS_ORIGIN=http://localhost:5173

3. Frontend setup

cd ../Frontend
npm install

Create Frontend/.env:

VITE_API_URL=http://localhost:3000/api/v1

4. Run application

# Terminal 1 - Backend
cd Backend && npm start

# Terminal 2 - Frontend
cd Frontend && npm run dev

Access at http://localhost:5173 [web:18]

📂 Project Structure

Backend/
├── src/
│   ├── controllers/          # Route handlers
│   ├── middlewares/          # Auth, validation, rate limiting
│   ├── models/               # Mongoose schemas
│   ├── routes/               # API routes
│   ├── utils/                # Helpers, error handling
│   ├── db/                   # Database connection
│   ├── app.js                # Express configuration
│   └── index.js              # Entry point

Frontend/
├── src/
│   ├── components/
│   │   ├── auth/             # Login, Register, PrivateRoute
│   │   ├── todos/            # Todo components
│   │   ├── layout/           # Dashboard, Navbar
│   │   └── ui/               # ShadCN components
│   ├── context/              # Global state
│   ├── services/             # API layer
│   ├── validations/          # Zod schemas
│   └── lib/                  # Utilities

🔌 API Endpoints

Base URL: http://localhost:3000/api

Authentication

Method	Endpoint	Description	Auth
POST	/users/register	Register with avatar	No
POST	/users/login	Login	No
POST	/users/logout	Logout	Yes
POST	/users/refresh-token	Refresh access token	Yes

Todos

Method	Endpoint	Description	Auth
GET	/todos	Get all user todos	Yes
GET	/todos/:id	Get single todo	Yes
POST	/todos/create	Create todo	Yes
PUT	/todos/:id/update	Update todo	Yes
PATCH	/todos/:id/toggle	Toggle status	Yes
DELETE	/todos/:id/delete	Delete todo	Yes

Request Examples

Register:

{
  "fullName": "John Doe",
  "email": "[email protected]",
  "password": "SecurePass123#",
  "avatar": "multipart/form-data"
}

Create Todo:

{
  "title": "Complete project",
  "description": "Finish Todo Pro",
  "priority": "high",
  "dueDate": "2025-12-21T23:59:59.000Z"
}

🔒 Security

Authentication & Authorization

• Stateless JWT authentication with refresh token rotation [web:2]
• HttpOnly cookies for token storage [web:2]
• Bcrypt password hashing (salt rounds: 10) [web:2]

Input Validation

• Client: Zod schemas with React Hook Form [web:10]
• Server: Joi middleware validation [web:2]
• File upload sanitization with Multer [web:4]

API Security

• Rate limiting (100 requests/15 min per IP) [web:2]
• CORS whitelist configuration [web:2]
• Request size limits [web:4]

Infrastructure

• Redis session management and caching [web:5]
• MongoDB Atlas encrypted connections [web:4]
• Environment variable isolation [web:18]

📦 Core Dependencies

Backend: [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

Frontend: [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

👨‍💻 Author

M Umair Malik
GitHub: @devsiffy

---