221 lines
5.3 KiB
Markdown
221 lines
5.3 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
cd todo-app
|
|
npm install
|
|
```
|
|
|
|
### 2. Cau hinh bien moi truong
|
|
|
|
Copy file .env.example thanh .env va cap nhat cac gia tri:
|
|
|
|
```bash
|
|
cp .env.example .env
|
|
```
|
|
|
|
```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
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
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
|