Initial commit: Todo app with Jira-style board
This commit is contained in:
PhongMacbook
214
README.md
Normal file
214
README.md
Normal file
@@ -0,0 +1,214 @@
|
||||
# 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
|
||||
|
||||
```bash
|
||||
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ị:
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
```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](https://console.cloud.google.com/)
|
||||
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
|
||||
|
||||
```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. Chạy ứng dụng
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Mở [http://localhost:3000](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](https://vercel.com)
|
||||
3. Thêm biến môi trường
|
||||
4. Deploy!
|
||||
|
||||
### Docker
|
||||
|
||||
```bash
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
## 📝 Demo Account
|
||||
|
||||
- **Email**: demo@example.com
|
||||
- **Password**: demo123456
|
||||
|
||||
## 📄 License
|
||||
|
||||
MIT License
|
||||
Reference in New Issue
Block a user