Tổng hợp các công nghệ được chọn để xây dựng ứng dụng quản lý công việc (task management) theo kiến trúc serverless, tối ưu cho tốc độ phát triển và triển khai.

​
Tổng quan

Next.js

Framework React cho web app, hỗ trợ SSR, SSG và App Router

Firebase

Backend serverless: Firestore, Auth, Storage, Cloud Functions

Vercel

Nền tảng deploy tối ưu cho Next.js với CDN toàn cầu

Tailwind CSS

Utility-first CSS framework, phiên bản 4.x

shadcn/ui

Bộ UI components có thể tùy biến, xây trên Radix UI

react-table

Headless table library mạnh mẽ cho React

​
Chi tiết từng công nghệ

​
Web framework — Next.js

Next.js là framework React được sử dụng để xây dựng toàn bộ giao diện web của ứng dụng. Lý do chọn:
  • App Router cho phép tổ chức routing trực quan theo cấu trúc thư mục
  • Hỗ trợ Server Components giúp tối ưu hiệu năng và SEO
  • Tích hợp tốt với Vercel (cùng nhà phát triển)
  • Hỗ trợ API Routes để viết backend nhẹ nếu cần
Phiên bản khuyến nghị: Next.js 15+ (App Router) 
npx create-next-app@latest my-task-app

​
Serverless backend — Firebase

Firebase cung cấp toàn bộ hạ tầng backend dưới dạng serverless, không cần quản lý server. Các dịch vụ sử dụng:
NoSQL realtime database. Lưu trữ tasks, projects, users và các dữ liệu nghiệp vụ. Hỗ trợ realtime listeners để cập nhật giao diện tức thì khi dữ liệu thay đổi.
Xác thực người dùng qua Email/Password, Google, GitHub. Quản lý phiên đăng nhập an toàn không cần tự xây dựng auth server.
Lưu trữ file đính kèm trong task: ảnh, tài liệu, hình ảnh avatar.
Chạy server-side logic khi cần: gửi email thông báo, tự động cập nhật trạng thái task, xử lý webhook.
npm install firebase

​
Deploy — Vercel

Vercel là nền tảng deploy được tối ưu riêng cho Next.js. Lý do chọn:
  • Zero-config deployment, chỉ cần kết nối Git repository
  • Preview deployment tự động cho mỗi Pull Request
  • Edge Network toàn cầu giúp tốc độ tải trang nhanh
  • Miễn phí cho dự án cá nhân và nhóm nhỏ
Quy trình deploy:
1

Kết nối repository

Đăng nhập Vercel, import Git repository (GitHub/GitLab/Bitbucket)
2

Cấu hình biến môi trường

Thêm các biến NEXT_PUBLIC_FIREBASE_* vào Vercel Environment Variables
3

Deploy

Mỗi lần push lên main, Vercel tự động build và deploy lên production

​
CSS — Tailwind CSS 4.x

Tailwind CSS 4.x là phiên bản mới nhất với engine được viết lại hoàn toàn bằng Rust (Lightning CSS). Thay đổi quan trọng trong v4:
  • Không còn file tailwind.config.js — cấu hình được viết trực tiếp trong CSS
  • Import bằng @import "tailwindcss" thay vì @tailwind base/components/utilities
  • Tốc độ build nhanh hơn đáng kể so với v3
/* app/globals.css */
@import 'tailwindcss';

@theme {
  --color-primary: #3b82f6;
  --font-sans: 'Inter', sans-serif;
}

npm install tailwindcss@next @tailwindcss/vite
Tailwind CSS 4.x thay đổi cú pháp cấu hình so với v3. Nếu bạn đang dùng v3, tham khảo hướng dẫn migration trước khi nâng cấp.

​
UI components — shadcn/ui

shadcn/ui không phải là thư viện npm truyền thống — nó cho phép bạn copy trực tiếp source code của các component vào dự án để tùy biến tự do. Lý do chọn:
  • Component được xây dựng trên Radix UI (accessible by default)
  • Style bằng Tailwind CSS, dễ tùy biến theo design system
  • Không bị lock-in vào thư viện bên ngoài
  • Hỗ trợ dark mode sẵn có
Các component dùng trong task management app:
ComponentMục đích
ButtonNút thao tác (tạo task, lưu, xóa)
DialogModal tạo/chỉnh sửa task
SelectChọn trạng thái, priority, assignee
BadgeHiển thị trạng thái task
AvatarẢnh đại diện người dùng
SidebarNavigation panel
CheckboxĐánh dấu task hoàn thành
DatePickerChọn deadline
npx shadcn@latest init
npx shadcn@latest add button dialog select badge

​
Data table — react-table (TanStack Table)

TanStack Table (react-table v8) là headless table library — cung cấp logic, bạn tự quyết định UI. Lý do chọn:
  • Hỗ trợ sorting, filtering, pagination, row selection sẵn có
  • Headless: toàn quyền kiểm soát giao diện, dùng kết hợp với shadcn/ui
  • Hiệu năng tốt với dataset lớn (virtualization support)
  • TypeScript-first
Tính năng sử dụng trong task management:
  • Hiển thị danh sách task dạng bảng với cột có thể sắp xếp
  • Lọc task theo trạng thái, người phụ trách, deadline
  • Phân trang phía client
  • Chọn nhiều task để bulk action (xóa, đổi trạng thái)
npm install @tanstack/react-table

​
Tổng hợp dependencies

{
  "dependencies": {
    "next": "^15.0.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "firebase": "^11.0.0",
    "@tanstack/react-table": "^8.0.0"
  },
  "devDependencies": {
    "tailwindcss": "^4.0.0",
    "@tailwindcss/vite": "^4.0.0",
    "typescript": "^5.0.0"
  }
}
shadcn/ui được cài bằng CLI (npx shadcn@latest add) và copy source trực tiếp vào dự án — không xuất hiện trong dependencies.

​
Kiến trúc tổng thể

Browser
  └── Next.js App (Vercel Edge Network)
        ├── App Router (pages & layouts)
        ├── Server Components (data fetching)
        ├── Client Components (interactivity)
        │     ├── shadcn/ui components
        │     ├── TanStack Table
        │     └── Tailwind CSS styles
        └── Firebase SDK
              ├── Firestore (database)
              ├── Authentication
              ├── Storage (files)
              └── Cloud Functions (background jobs)