TaskFlow - Practice Project Requirements

Tổng quan

TaskFlow là hệ thống quản lý task cho team nhỏ, được thiết kế để thực hành toàn bộ Light Development Stack.

Mục tiêu học tập

Sau khi hoàn thành dự án, học viên có thể:

• [ ] Deploy Next.js app lên Cloudflare Workers
• [ ] Thiết kế database schema với Supabase
• [ ] Implement authentication với Supabase Auth
• [ ] Sử dụng Row Level Security
• [ ] Xây dựng Queue processing (Supabase + Cloudflare)
• [ ] Implement Cron jobs (pg_cron + Cron Triggers)
• [ ] Setup CI/CD với GitHub Actions
• [ ] Deploy multi-environment (Staging/Production)

---

Tech Stack

Layer	Technology
Frontend	Next.js 14+ (App Router)
Styling	Tailwind CSS
Backend	Cloudflare Workers
Database	Supabase PostgreSQL
Auth	Supabase Auth
Storage	Supabase Storage
Queue	pgmq + Cloudflare Queue
Cron	pg_cron + Cron Triggers
CI/CD	GitHub Actions

---

Features Specification

Phase 1: Project Setup

Mục tiêu: Thiết lập cấu trúc dự án và kết nối các services.

Tasks: - [ ] Tạo Next.js project với TypeScript - [ ] Cài đặt và cấu hình OpenNext adapter - [ ] Tạo Supabase project - [ ] Setup environment variables - [ ] Cấu hình wrangler.toml - [ ] Test local development

Deliverables: - Next.js app chạy local - Kết nối thành công với Supabase - Deploy thử lên Cloudflare

---

Phase 2: Database Design + REST API

Mục tiêu: Thiết kế database schema và sử dụng auto-generated REST API.

Schema:

-- Organizations (multi-tenant)
CREATE TABLE organizations (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  slug TEXT UNIQUE NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Profiles (extends auth.users)
CREATE TABLE profiles (
  id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
  full_name TEXT,
  avatar_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Organization members
CREATE TABLE organization_members (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  organization_id UUID REFERENCES organizations(id) ON DELETE CASCADE,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  role TEXT DEFAULT 'member' CHECK (role IN ('owner', 'admin', 'member')),
  created_at TIMESTAMPTZ DEFAULT NOW(),
  UNIQUE(organization_id, user_id)
);

-- Projects
CREATE TABLE projects (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  organization_id UUID REFERENCES organizations(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  description TEXT,
  status TEXT DEFAULT 'active' CHECK (status IN ('active', 'archived')),
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Tasks
CREATE TABLE tasks (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  project_id UUID REFERENCES projects(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  description TEXT,
  status TEXT DEFAULT 'todo' CHECK (status IN ('todo', 'in_progress', 'review', 'done')),
  priority TEXT DEFAULT 'medium' CHECK (priority IN ('low', 'medium', 'high', 'urgent')),
  assignee_id UUID REFERENCES auth.users(id) ON DELETE SET NULL,
  due_date DATE,
  created_by UUID REFERENCES auth.users(id),
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Task comments
CREATE TABLE task_comments (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  task_id UUID REFERENCES tasks(id) ON DELETE CASCADE,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  content TEXT NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Task attachments
CREATE TABLE task_attachments (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  task_id UUID REFERENCES tasks(id) ON DELETE CASCADE,
  file_name TEXT NOT NULL,
  file_path TEXT NOT NULL,
  file_size INTEGER,
  uploaded_by UUID REFERENCES auth.users(id),
  created_at TIMESTAMPTZ DEFAULT NOW()
);

Tasks: - [ ] Tạo migrations cho tất cả tables - [ ] Setup RLS policies - [ ] Test CRUD via REST API - [ ] Generate TypeScript types - [ ] Tạo seed data

---

Phase 3: Authentication

Mục tiêu: Implement authentication flow với Supabase Auth.

Features: - [ ] Email/Password registration - [ ] Email/Password login - [ ] Google OAuth login - [ ] Session management - [ ] Protected routes (middleware) - [ ] Auth context provider

Pages: - /login - Login form - /register - Registration form - /auth/callback - OAuth callback - /auth/confirm - Email confirmation

---

Phase 4: Core Features

Mục tiêu: Xây dựng các tính năng chính của TaskFlow.

Pages:

Route	Description
/dashboard	Organization overview
/projects	Project list
/projects/[id]	Kanban board
/projects/[id]/tasks/[taskId]	Task detail
/settings	User & org settings

Features: - [ ] Dashboard với statistics - [ ] Project CRUD - [ ] Task CRUD - [ ] Kanban drag-and-drop - [ ] Task comments - [ ] File upload (attachments) - [ ] Realtime updates (optional)

API Routes: - POST /api/tasks - Create task - PATCH /api/tasks/[id] - Update task - DELETE /api/tasks/[id] - Delete task - POST /api/tasks/[id]/comments - Add comment - POST /api/upload - Upload file

---

Phase 5: Queue Processing

Mục tiêu: Implement background job processing với Queue.

Use Cases:

1. Email Notifications (Cloudflare Queue)
2. Task assigned notification
3. Comment mention notification

4. Due date reminder

5. Activity Logging (Supabase pgmq)

6. Log all task changes
7. Audit trail

Implementation:

// Producer (API Route)
export async function POST(request: Request) {
  const task = await createTask(data);

  // Enqueue notification
  await env.NOTIFICATION_QUEUE.send({
    type: 'task_assigned',
    taskId: task.id,
    assigneeId: task.assignee_id,
  });

  return Response.json(task);
}

// Consumer (Cloudflare Worker)
export default {
  async queue(batch: MessageBatch) {
    for (const msg of batch.messages) {
      await sendNotification(msg.body);
      msg.ack();
    }
  }
};

Tasks: - [ ] Setup Cloudflare Queue - [ ] Setup Supabase pgmq - [ ] Implement notification producer - [ ] Implement notification consumer - [ ] Implement activity logging

---

Phase 6: Scheduled Jobs

Mục tiêu: Implement cron jobs cho scheduled tasks.

Use Cases:

1. Daily Digest (Cloudflare Cron)
2. Send daily summary email
3. List overdue tasks

4. Upcoming deadlines

5. Cleanup Jobs (pg_cron)

6. Archive completed tasks > 30 days
7. Clean orphan attachments

8. Update statistics

9. Reminders (Cloudflare Cron)

10. Due date reminders (1 day before)
11. Overdue task notifications

Implementation:

// wrangler.toml
[triggers]
crons = [
  "0 9 * * *",   # Daily digest at 9 AM
  "0 8 * * *",  # Due date reminders
]

-- pg_cron: Archive old tasks
SELECT cron.schedule(
  'archive-completed-tasks',
  '0 2 * * *',
  $$
    UPDATE tasks
    SET archived_at = NOW()
    WHERE status = 'done'
    AND updated_at < NOW() - INTERVAL '30 days'
    AND archived_at IS NULL;
  $$
);

Tasks: - [ ] Setup Cloudflare Cron Triggers - [ ] Setup pg_cron jobs - [ ] Implement daily digest - [ ] Implement due date reminders - [ ] Implement cleanup jobs

---

Phase 7: CI/CD & Deployment

Mục tiêu: Setup automated deployment pipeline.

Environments:

Environment	Branch	Supabase	Cloudflare
Development	-	Local	wrangler dev
Staging	staging	staging project	staging worker
Production	main	production project	production worker

GitHub Actions Workflows:

1. Build & Test (on PR)
2. Lint
3. Type check
4. Unit tests

5. Build

6. Deploy Staging (on push to staging)

7. Build
8. Run Supabase migrations

9. Deploy to Cloudflare staging

10. Deploy Production (on push to main)

11. Build
12. Run Supabase migrations
13. Deploy to Cloudflare production

Tasks: - [ ] Setup GitHub environments - [ ] Configure secrets - [ ] Create CI workflow - [ ] Create staging deploy workflow - [ ] Create production deploy workflow - [ ] Test full pipeline

---

Project Structure

taskflow/
├── .github/
│   └── workflows/
│       ├── ci.yml
│       ├── deploy-staging.yml
│       └── deploy-production.yml
│
├── app/
│   ├── (auth)/
│   │   ├── login/
│   │   └── register/
│   ├── (dashboard)/
│   │   ├── dashboard/
│   │   ├── projects/
│   │   └── settings/
│   ├── api/
│   │   ├── tasks/
│   │   ├── upload/
│   │   └── webhooks/
│   └── layout.tsx
│
├── components/
│   ├── ui/
│   ├── auth/
│   ├── tasks/
│   └── projects/
│
├── lib/
│   ├── supabase/
│   │   ├── client.ts
│   │   ├── server.ts
│   │   └── admin.ts
│   ├── queue/
│   └── utils/
│
├── supabase/
│   ├── config.toml
│   ├── migrations/
│   └── seed.sql
│
├── types/
│   └── supabase.ts
│
├── workers/
│   └── queue-consumer.ts
│
├── open-next.config.ts
├── wrangler.toml
├── next.config.js
└── package.json

---

Evaluation Criteria

Criteria	Weight	Description
Functionality	40%	All features working correctly
Code Quality	20%	Clean, readable, maintainable
Architecture	20%	Proper use of stack components
DevOps	20%	CI/CD, migrations, multi-env

---

Timeline

Phase	Duration	Cumulative
Phase 1: Setup	1 hour	1 hour
Phase 2: Database	1.5 hours	2.5 hours
Phase 3: Auth	1.5 hours	4 hours
Phase 4: Features	2 hours	6 hours
Phase 5: Queue	1 hour	7 hours
Phase 6: Cron	0.5 hours	7.5 hours
Phase 7: CI/CD	0.5 hours	8 hours

Total: ~8 hours

---

Resources

• Next.js Documentation
• Supabase Documentation
• Cloudflare Workers Documentation
• OpenNext Documentation
• GitHub Actions Documentation

---

Getting Help

1. Refer to course slides
2. Check official documentation
3. Ask instructor
4. Review solution code (after attempting)