# 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