TaskFlow - Ung dung Quan ly Cong viec Ca nhan

Ung dung To-do List hien dai voi he thong xac thuc nguoi dung, cho phep moi user quan ly cong viec cua rieng minh.

Demo: https://todo-app-topaz-nine-36.vercel.app

Tinh nang

Xac thuc va Phan quyen

• Dang ky / dang nhap bang Email va Password
• Dang nhap bang Google OAuth
• Moi user chi xem va thao tac tren cong viec cua chinh minh
• Dang xuat

Quan ly Cong viec (CRUD)

• Tao cong viec moi (tieu de, mo ta, trang thai, deadline)
• Sua cong viec
• Xoa cong viec
• Xem danh sach cong viec

Tim kiem - Loc - Sap xep

• Tim kiem theo tieu de
• Loc theo trang thai (Todo / In Progress / Done)
• Loc theo deadline (hom nay, tuan nay, qua han)
• Sap xep theo deadline, trang thai, thoi gian tao

Giao dien

• Responsive (desktop + mobile)
• Mau sac ro rang cho tung trang thai
• Hien thi deadline sap den va qua han
• Kanban Board (keo tha task giua cac cot)
• Calendar view hien thi task theo ngay
• Loading states, empty states, thong bao

Tech Stack

Frontend

• Next.js 14 (App Router)
• TypeScript
• Tailwind CSS
• React Hot Toast (thong bao)
• React Icons

Backend

• Next.js API Routes
• NextAuth.js (xac thuc)
  • Credentials Provider (email/password)
  • Google OAuth Provider

Database

• PostgreSQL (Neon - serverless)
• Prisma ORM

Validation

• Zod

Deployment

• Vercel (hosting)
• Neon (PostgreSQL database)

Cau truc 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

Huong dan cai dat

1. Clone va cai dat dependencies

cd todo-app
npm install

2. Cau hinh bien moi truong

Copy file .env.example thanh .env va cap nhat cac gia tri:

cp .env.example .env

# Database (PostgreSQL - Neon)
DATABASE_URL="postgresql://user:password@host/database?sslmode=require"
DIRECT_URL="postgresql://user:password@host/database?sslmode=require"

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

# Google OAuth (lay tu Google Cloud Console)
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

3. Thiet lap Google OAuth

1. Vao Google Cloud Console (https://console.cloud.google.com/)
2. Tao project moi hoac chon project co san
3. Vao APIs & Services > Credentials
4. Tao OAuth 2.0 Client IDs
5. Them Authorized redirect URIs:
   • http://localhost:3000/api/auth/callback/google
   • https://your-domain.vercel.app/api/auth/callback/google
6. Copy Client ID va Client Secret vao file .env

4. Khoi tao 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. Chay ung dung

npm run dev

Mo http://localhost:3000 de xem ket qua.

API Endpoints

Authentication

Method	Endpoint	Mo ta
POST	/api/auth/register	Dang ky tai khoan moi
POST	/api/auth/[...nextauth]	NextAuth handlers

Tasks (Yeu cau xac thuc)

Method	Endpoint	Mo ta
GET	/api/tasks	Lay danh sach tasks cua user
POST	/api/tasks	Tao task moi
GET	/api/tasks/:id	Lay chi tiet task
PUT	/api/tasks/:id	Cap nhat task
DELETE	/api/tasks/:id	Xoa task

Query Parameters cho GET /api/tasks:

• search: Tim kiem theo tieu de
• status: Loc theo trang thai (TODO, IN_PROGRESS, DONE)
• deadline: Loc theo deadline (today, this_week, overdue)
• sortBy: Sap xep theo (deadline, status, createdAt)
• sortOrder: Thu tu (asc, desc)

Bao mat

• Middleware Protection: API routes duoc bao ve bang NextAuth middleware
• User Isolation: Moi task duoc gan voi userId, API chi tra ve tasks cua user hien tai
• Password Hashing: Mat khau duoc hash bang bcrypt
• Input Validation: Tat ca input duoc validate bang Zod

Trang thai Task

Status	Label	Mau
TODO	Chua lam	Vang
IN_PROGRESS	Dang lam	Xanh duong
DONE	Hoan thanh	Xanh la
Overdue	Qua han	Do

Deploy

Vercel

1. Push code len Git repository
2. Import project vao Vercel
3. Cau hinh Environment Variables:
   • DATABASE_URL
   • DIRECT_URL
   • NEXTAUTH_URL (URL production)
   • NEXTAUTH_SECRET
   • GOOGLE_CLIENT_ID
   • GOOGLE_CLIENT_SECRET
4. Deploy

Demo Account

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

License

MIT