TaskFlow - Ứng dụng Quản lý Công việc Cá nhân

Ứng dụng To-do List hiện đại với hệ thống xác thực người dùng, cho phép mỗi user quản lý công việc của riêng mình.

🚀 Tính năng

Xác thực & Phân quyền

• ✅ Đăng ký / đăng nhập bằng Email & Password
• ✅ Đăng nhập bằng Google OAuth
• ✅ Mỗi user chỉ xem và thao tác trên công việc của chính mình
• ✅ Đăng xuất

Quản lý Công việc (CRUD)

• ✅ Tạo công việc mới (tiêu đề, mô tả, trạng thái, deadline)
• ✅ Sửa công việc
• ✅ Xóa công việc
• ✅ Xem danh sách công việc

Tìm kiếm – Lọc – Sắp xếp

• ✅ Tìm kiếm theo tiêu đề
• ✅ Lọc theo trạng thái (Todo / In Progress / Done)
• ✅ Lọc theo deadline (hôm nay, tuần này, quá hạn)
• ✅ Sắp xếp theo deadline, trạng thái, thời gian tạo

Giao diện

• ✅ Responsive (desktop + mobile)
• ✅ Màu sắc rõ ràng cho từng trạng thái
• ✅ Hiển thị deadline sắp đến & quá hạn
• ✅ Loading states, empty states, thông báo

🛠 Tech Stack

Layer	Technology
Frontend	Next.js 14 (App Router) + TypeScript
Styling	Tailwind CSS
Auth	NextAuth.js (Credentials + Google OAuth)
Database	PostgreSQL + Prisma ORM
Validation	Zod

📁 Cấu trúc Project

todo-app/
├── prisma/
│   ├── schema.prisma      # Database schema
│   └── seed.ts            # Seed data
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   ├── auth/      # NextAuth handlers
│   │   │   └── tasks/     # Tasks CRUD API
│   │   ├── login/         # Login page
│   │   ├── register/      # Register page
│   │   ├── layout.tsx
│   │   ├── page.tsx       # Main dashboard
│   │   └── globals.css
│   ├── components/
│   │   ├── ui/            # Reusable UI components
│   │   ├── tasks/         # Task-related components
│   │   ├── Navbar.tsx
│   │   └── Providers.tsx
│   ├── lib/
│   │   ├── auth.ts        # NextAuth config
│   │   ├── prisma.ts      # Prisma client
│   │   ├── utils.ts       # Utility functions
│   │   └── validations.ts # Zod schemas
│   ├── types/             # TypeScript types
│   └── middleware.ts      # Auth middleware
└── package.json

🔧 Hướng dẫn cài đặt

1. Clone và cài đặt dependencies

cd todo-app
npm install

2. Cấu hình biến môi trường

Copy file .env.example thành .env và cập nhật các giá trị:

cp .env.example .env

# Database (PostgreSQL)
DATABASE_URL="postgresql://user:password@localhost:5432/todoapp?schema=public"

# NextAuth
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-super-secret-key-here"

# Google OAuth (lấy từ Google Cloud Console)
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

3. Thiết lập Google OAuth

1. Vào Google Cloud Console
2. Tạo project mới hoặc chọn project có sẵn
3. Vào APIs & Services > Credentials
4. Tạo OAuth 2.0 Client IDs
5. Thêm Authorized redirect URIs:
   • http://localhost:3000/api/auth/callback/google
6. Copy Client ID và Client Secret vào file .env

4. Khởi tạo Database

# Generate Prisma client
npm run db:generate

# Push schema to database
npm run db:push

# (Optional) Seed sample data
npm run db:seed

5. Chạy ứng dụng

npm run dev

Mở http://localhost:3000 để xem kết quả.

📊 API Endpoints

Authentication

Method	Endpoint	Mô tả
POST	/api/auth/register	Đăng ký tài khoản mới
POST	/api/auth/[...nextauth]	NextAuth handlers

Tasks (Yêu cầu xác thực)

Method	Endpoint	Mô tả
GET	/api/tasks	Lấy danh sách tasks của user
POST	/api/tasks	Tạo task mới
GET	/api/tasks/:id	Lấy chi tiết task
PUT	/api/tasks/:id	Cập nhật task
DELETE	/api/tasks/:id	Xóa task

Query Parameters cho GET /api/tasks:

• search - Tìm kiếm theo tiêu đề
• status - Lọc theo trạng thái (TODO, IN_PROGRESS, DONE)
• deadline - Lọc theo deadline (today, this_week, overdue)
• sortBy - Sắp xếp theo (deadline, status, createdAt)
• sortOrder - Thứ tự (asc, desc)

🔐 Bảo mật

• Middleware Protection: API routes được bảo vệ bằng NextAuth middleware
• User Isolation: Mỗi task được gắn với userId, API chỉ trả về tasks của user hiện tại
• Password Hashing: Mật khẩu được hash bằng bcrypt
• Input Validation: Tất cả input được validate bằng Zod

🎨 Trạng thái Task

Status	Label	Màu
TODO	Chưa làm	🟡 Vàng
IN_PROGRESS	Đang làm	🔵 Xanh dương
DONE	Hoàn thành	🟢 Xanh lá
Overdue	Quá hạn	🔴 Đỏ

📱 Screenshots

Dashboard

• Thống kê tổng quan
• Bộ lọc và tìm kiếm
• Danh sách công việc

Task Form

• Tạo / sửa công việc
• Chọn trạng thái
• Đặt deadline

Authentication

• Đăng nhập / Đăng ký
• Google OAuth

🚀 Deploy

Vercel (Recommended)

1. Push code lên GitHub
2. Import project vào Vercel
3. Thêm biến môi trường
4. Deploy!

Docker

docker-compose up -d

📝 Demo Account

• Email: demo@example.com
• Password: demo123456

📄 License

MIT License