Bài tập thực chiến: Landing Page + Dashboard với Firebase Firestore

Giới thiệu

Bài tập này gồm 2 phần liên tiếp — từ landing page đến dashboard quản lý:

Phần 1: Landing page với form liên hệ, lưu dữ liệu vào Firebase Firestore
Phần 2: Dashboard đọc và quản lý dữ liệu từ Firestore

Sau khi hoàn thành, bạn sẽ có:

Một landing page cho phép người dùng đăng ký tư vấn
Dashboard để xem, chỉnh sửa, xóa từng khách hàng

Phần 1 — Đề bài

Bài 1.1: Landing Page với HTML/CSS/JS thuần

Tạo một landing page gồm các phần như đã làm bài trước, nhưng cải tiến phần form liên hệ để gửi dữ liệu lên Firebase Firestore.

Form Liên hệ

Form đăng ký tư vấn gồm 4 trường:

Trường	Loại input
Họ và tên	Text input
Email	Email input
Số điện thoại liên lạc	Tel input
Nội dung cần tư vấn	Textarea

Form có nút Gửi đăng ký và hiển thị thông báo thành công sau khi gửi.

Yêu cầu kỹ thuật:

Sử dụng HTML, CSS, JavaScript thuần — không dùng framework
Responsive: Desktop và Mobile
Form validation phía client (các trường bắt buộc, định dạng email, số điện thoại hợp lệ)
Khi bấm Gửi đăng ký: gửi dữ liệu lên Firebase Firestore, collection tên là register_users, rồi hiện thông báo thành công
Dữ liệu gửi lên Firestore gồm: name, email, phone, message, createdAt (timestamp)

Bài 1.2: Tích hợp Firebase Firestore

Cấu hình Firebase trong landing page:

Đăng ký tài khoản Firebase Console, tạo project mới
Bật Firestore Database ở chế độ Test Mode
Lấy cấu hình Firebase config và nhúng vào file HTML

Dữ liệu mỗi document trong register_users:

{
  "name": "Nguyễn Văn A",
  "email": "nguyenvana@email.com",
  "phone": "0909123456",
  "message": "Tôi muốn được tư vấn về khóa học Claude Code",
  "createdAt": "2026-05-01T10:00:00Z"
}

Phần 2 — Đề bài

Bài 2.1: Dashboard quản lý khách hàng tư vấn

Xây dựng dashboard trên nền Next.js + shadcn/ui với các yêu cầu sau:

Đọc dữ liệu từ Firestore

Sử dụng shadcn/ui Data Table để hiển thị danh sách khách hàng đăng ký tư vấn. Mỗi hàng hiện: STT, Họ và tên, Email, Số điện thoại, Ngày đăng ký.

Chức năng CRUD

Thêm, sửa, xóa khách hàng:

Thêm: Nút “Thêm khách hàng” mở Dialog/Sheet chứa form tương tự landing page
Sửa: Bấm icon sửa trên mỗi hàng → Sheet chỉnh sửa với form pre-filled
Xóa: Bấm icon xóa → Alert Dialog xác nhận trước khi xóa

Xem chi tiết (Sheet)

Bấm vào hàng hoặc icon mắt → Mở Sheet bên phải hiển thị toàn bộ thông tin khách hàng: Họ tên, email, phone, message, ngày đăng ký, thời gian tạo document

Tìm kiếm & Lọc

Thanh tìm kiếm theo tên hoặc email
Lọc theo ngày đăng ký (tuần này, tháng này, tùy chọn)

Sử dụng các shadcn/ui components đã học:

Component	Dùng cho
`Data Table`	Danh sách khách hàng
`Sheet`	Xem chi tiết & Form thêm/sửa
`Dialog`	Dialog xác nhận xóa
`Alert Dialog`	Xác nhận trước khi xóa
`Input`	Ô nhập liệu trong form
`Button`	Nút hành động
`Badge`	Trạng thái, nhãn
`Sonner`	Thông báo thành công/lỗi

Phần 3 — Gợi ý hướng dẫn làm bài

Gợi ý Prompt để tạo với Claude Code

Landing Page

Cập nhật cho tôi một landing page với các phần đăng ký với nội dung sau:
1. Form liên hệ gồm 4 trường: Họ và tên, Email, Số điện thoại, Nội dung cần tư vấn
2. Nút Gửi đăng ký — khi bấm thì lưu data vào Firebase Firestore collection "register_users"

Đây là thông tin cấu hình Firebase:

NEXT_PUBLIC_FIREBASE_API_KEY=""
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=""
NEXT_PUBLIC_FIREBASE_PROJECT_ID=""
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=""
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=""
NEXT_PUBLIC_FIREBASE_APP_ID=""
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=""


Lưu ý: Responsive: desktop và mobile

Dashboard

Mở rộng dashboard shadcn/ui để thêm trang quản lý khách hàng tư vấn:
- Đọc dữ liệu từ collection "register_users" trong Firestore
- Hiển thị bằng Data Table: STT, Họ tên, Email, SĐT, Ngày đăng ký
- Nút Thêm khách hàng (mở Sheet form)
- Mỗi hàng có icon: xem chi tiết (mở Sheet), sửa (Sheet form), xóa (Alert Dialog xác nhận)
- Sheet chi tiết hiện đầy đủ: tên, email, phone, message, ngày đăng ký
- Toast thông báo Sonner khi thao tác thành công

Kết quả thực tế

**Landing page: **

https://claude-code-basic-pages.vercel.app/landing-page.html

Dashboard quản lý khách hàng tư vấn:

https://claude-code-shadcnui-task-managemen.vercel.app/register-users

Tham khảo

Firebase: console.firebase.google.com
Firestore: firebase.google.com/docs/firestore
shadcn/ui components: ui.shadcn.com/docs/components
TanStack Table: tanstack.com/table
Bài shadcn/ui dashboard: /claude-code/best-practices/nextjs/shadcn-ui-dashboard
Bài tạo landing page: /claude-code/best-practices/landingpage/how-to-prompt

​Giới thiệu

​Phần 1 — Đề bài

​Bài 1.1: Landing Page với HTML/CSS/JS thuần

Form Liên hệ

​Bài 1.2: Tích hợp Firebase Firestore

​Phần 2 — Đề bài

​Bài 2.1: Dashboard quản lý khách hàng tư vấn

​Phần 3 — Gợi ý hướng dẫn làm bài

​Gợi ý Prompt để tạo với Claude Code

​Landing Page

​Dashboard

​Kết quả thực tế

​Tham khảo