Dự án Dashboard mẫu

Mục tiêu bài viết

Sau bài này, bạn sẽ:

Tạo được một repository trên GitHub
Mở và chạy dự án trên máy tính
Deploy dự án lên Vercel để ai cũng truy cập được

Không cần biết code. Không cần dùng terminal. Chỉ cần làm theo từng bước.

Phần 1: Tạo Repository trên GitHub

Tạo tài khoản GitHub

Truy cập github.com
Nhấn Sign up
Điền thông tin:
- Username — tên tài khoản (duy nhất, không đổi được sau)
- Email — email xác thực
- Password — mật khẩu (tối thiểu 8 ký tự)
Xác minh email sau khi đăng ký
Đăng nhập github.com sau khi xác minh

Tạo Repository mới

Đăng nhập github.com
Nhấn nút New repository (hoặc nhấn + ở góc phải trên → New repository)
Điền thông tin:
- Repository name: claude-code-my-dashboard
- Description: Dự án dashboard đầu tiên (tùy chọn)
- Visibility: Chọn Public (ai cũng xem được, miễn phí)
- ❌ KHÔNG tick “Add a README file” (để repo trống, sẽ copy files vào sau)
Nhấn Create repository

Xong! Repository claude-code-my-dashboard đã được tạo. Ghi lại đường link, ví dụ: https://github.com/your-username/claude-code-my-dashboard.

Cài GitHub Desktop

Truy cập desktop.github.com
Nhấn Download for Windows (hoặc Mac tùy hệ điều hành)
Chạy file cài đặt
Khi mở lên, đăng nhập GitHub account:
- Nhấn Sign in to GitHub.com
- Hoàn tất đăng nhập trên trình duyệt
Xong! GitHub Desktop đã sẵn sàng

Mở Repository bằng GitHub Desktop

Trong GitHub Desktop, chọn File → Clone repository
Chọn repository claude-code-my-dashboard từ danh sách
Chọn Local path — thư mục trên máy để lưu (ví dụ: Documents/claude-code-my-dashboard)
Nhấn Clone

Kết quả: Repository được tải về máy tính. GitHub Desktop đang theo dõi thư mục này.

Copy code vào thư mục repo

Quay lại trình duyệt, mở repository https://github.com/ngothanhtung/claude-code-shadcn-dashboard trên github.com
Nhấn nút Code (màu xanh lá)
Nhấn Download ZIP: https://github.com/ngothanhtung/claude-code-shadcn-dashboard/archive/refs/heads/main.zip
Mở file ZIP đã tải về, giải nén (Extract) vào thư mục tạm trên máy tính của bạn (ví dụ: Desktop → thư mục “temp”)
Mở thư mục đã giải nén, chọn tất cả files bên trong
Copy (Ctrl+C hoặc Cmd+C)
Mở thư mục claude-code-my-dashboard mà bạn đã clone ở Bước 4
Paste (Ctrl+V hoặc Cmd+V) vào thư mục đó

Thư mục repo đang được GitHub Desktop theo dõi. Khi paste xong, GitHub Desktop sẽ phát hiện các files mới.

Đẩy code lên GitHub

Quay lại GitHub Desktop
Panel bên trái hiển thị danh sách files đã thay đổi
Trong ô Summary, gõ mô tả: Initial project setup
Nhấn Commit to main
Nhấn Push origin (nút mũi tên hướng lên ở thanh toolbar)

Kết quả: Code đã lên GitHub. Kiểm tra trên github.com → mở repository claude-code-my-dashboard, bạn sẽ thấy tất cả files.

Phần 2: Chạy dự án trên máy tính

Mở thư mục repo trong VS Code

Mở VS Code
Chọn File → Open Folder
Tìm và chọn thư mục claude-code-my-dashboard (thư mục mà GitHub Desktop đã clone)
Nhấn Open

Cài đặt npm packages

Trong VS Code, mở Terminal (nhấn phím Ctrl+` hoặc Cmd+`)
Gõ lệnh sau và nhấn Enter:

npm install

Chờ vài phút cho đến khi Terminal hiển thị dấu > trở lại (không còn chạy)

npm install tải tất cả thư viện cần thiết cho dự án. Cần internet để chạy lệnh này.

Tạo Firebase project

Truy cập firebase.google.com
Nhấn Get started
Nhấn Add project
Điền thông tin:
- Project name: claude-code-my-dashboard
- Description: Dự án dashboard đầu tiên (tùy chọn)
Nhấn Continue
Nhấn Create project

Tạo Web App trong Firebase project

Chọn Dashboard project
Nhấn nút Add app (hình web)
Chọn Web
Register app:
- App nickname: đặt tên tùy ý (ví dụ: my-dashboard)
- Firebase Hosting: BỎ TICK (chỉ dùng Firestore, không dùng hosting)
- Nhấn Register app
Sau khi tạo xong, Firebase hiện ra object firebaseConfig với các thông số API key.
Tạo file .env.local trong thư mục gốc dự án, sao chép đoạn mã cấu hình Firebase và dán vào, thay thế các giá trị tương ứng như sau:

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=""

AUTH_SECRET="870001443408011dd237241a19b3575ffa357429d136a1b953ab6ed83405688c"

Chạy dự án

Trước khi chạy dự án, cấu hình các phần sau ở Firebase:

Firebase Auth

Email/Password Provider

Vào Authentication
Chọn Sign-in method
Chọn Email/Password
Nhấn Enable

Google Provider

Vào Authentication
Chọn Sign-in method
Chọn Google
Nhấn Enable

Firebase Firestore

Vào Firestore Database
Nhấn Create database
Chọn Start in test mode
Chọn khu vực (Region) gần nhất với vị trí người dùng
Nhấn Enable

Khởi động dự án

Trong Terminal, gõ lệnh sau và nhấn Enter:

npm run dev

Terminal sẽ hiển thị URL, thường là http://localhost:3000
Nhấn giữ Ctrl (hoặc Cmd) + click vào URL đó để mở trình duyệt

Kết quả: Trang web của bạn đang chạy trên máy tính. Mỗi khi bạn sửa file và lưu, trình duyệt tự động cập nhật.

Phần 3: Deploy lên Vercel

Tạo tài khoản Vercel

Truy cập vercel.com
Nhấn Sign Up
Chọn Continue with GitHub để đăng nhập bằng tài khoản GitHub
Nhấn Authorize Vercel để cấp quyền truy cập GitHub
Chọn All repositories hoặc Only select repositories rồi nhấn Install

Việc kết nối Vercel với GitHub cho phép Vercel tự động lấy code mỗi khi bạn push thay đổi lên GitHub.

Tạo Project mới

Từ Vercel Dashboard, nhấn Add New… → Project
Vercel hiển thị danh sách repository GitHub
Tìm và chọn repository claude-code-my-dashboard
Nhấn Import

Cấu hình Project

Trang Configure Project hiển thị các tuỳ chọn:

Tuỳ chọn	Mô tả
Framework Preset	Chọn Next.js
Root Directory	Để mặc định là `.` (thư mục gốc)
Build Command	Để trống
Output Directory	`./` hoặc `public` (tùy cấu trúc dự án)

Deploy

Nhấn Deploy
Chờ 30-60 giây cho Vercel build và triển khai
Khi hoàn tất, Vercel gán URL dạng: https://claude-code-my-dashboard.vercel.app

Kết quả: Website của bạn đã hoạt động trên internet. Chia sẻ URL đó để mọi người truy cập được.

Phần 4: Cập nhật ứng dụng sau khi deploy lần đầu

Khi bạn chỉnh sửa code trong VS Code:

Sửa file trong VS Code

Mở file cần chỉnh sửa trong VS Code và lưu lại (Ctrl+S hoặc Cmd+S).

Commit và push lên GitHub

Mở GitHub Desktop → kiểm tra thay đổi → gõ mô tả trong ô Summary → nhấn Commit to main → Push origin.

Vercel tự động deploy

Vercel phát hiện thay đổi trên GitHub và tự động deploy sau 30-60 giây. Không cần làm gì thêm — auto-deploy!

Phần 5: Tạo Firebase Admin SDK

Firebase Admin SDK cho phép ứng dụng Next.js phía server (API Routes, Server Actions) giao tiếp với Firebase với quyền quản trị — không bị giới hạn bởi Security Rules.

Tạo Service Account

Truy cập Firebase Console → chọn project của bạn
Nhấn Project settings (biểu tượng bánh răng ⚙️ ở thanh bên trái)
Chọn tab Service accounts
Nhấn Generate new private key
Xác nhận bằng cách nhấn Generate key
Firebase tải về một file JSON — lưu an toàn, không commit file này lên GitHub

File JSON chứa private key nhạy cảm. Không bao giờ commit file này lên GitHub. Thêm vào .gitignore nếu cần.

Lấy 3 thông số từ file JSON

Mở file JSON vừa tải về, tìm và sao chép 3 giá trị sau:

Thông số	Key trong file JSON	Mô tả
Project ID	`project_id`	ID của Firebase project
Client Email	`client_email`	Email của Service Account
Private Key	`private_key`	Khóa bí mật (chuỗi dài bắt đầu bằng `-----BEGIN RSA PRIVATE KEY-----`)

Ví dụ file JSON trông như sau:

{
  "type": "service_account",
  "project_id": "claude-code-my-dashboard",
  "private_key": "-----BEGIN RSA PRIVATE KEY-----\nMIIE...\n-----END RSA PRIVATE KEY-----\n",
  "client_email": "firebase-adminsdk-xxxx@claude-code-my-dashboard.iam.gserviceaccount.com",
  ...
}

Thêm vào file .env.local

Mở file .env.local trong thư mục gốc dự án, thêm 3 dòng sau:

FIREBASE_PROJECT_ID="claude-code-my-dashboard"
FIREBASE_CLIENT_EMAIL="firebase-adminsdk-xxxx@claude-code-my-dashboard.iam.gserviceaccount.com"
FIREBASE_PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----\nMIIE...\n-----END RSA PRIVATE KEY-----\n"

Giá trị FIREBASE_PRIVATE_KEY phải để trong dấu nháy kép "..." và giữ nguyên các ký tự \n trong chuỗi.

Thêm biến môi trường lên Vercel

Các biến Admin SDK không có tiền tố NEXT_PUBLIC_ nên chỉ hoạt động phía server và cần thêm vào Vercel riêng:

Mở Vercel Dashboard → chọn project
Vào Settings → Environment Variables
Thêm lần lượt 3 biến:
- FIREBASE_PROJECT_ID
- FIREBASE_CLIENT_EMAIL
- FIREBASE_PRIVATE_KEY
Nhấn Save
Redeploy project để áp dụng

Sau khi thêm biến môi trường mới trên Vercel, bạn phải redeploy để ứng dụng nhận được giá trị mới.

Tóm tắt nhanh

GitHub.com          → Tạo account & repository
GitHub Desktop      → Clone repo về máy và đồng bộ với GitHub  
VS Code             → Open folder → npm install → npm run dev
Firebase Console    → Tạo project & web app
Firebase Console    → Tạo collection & document mẫu
VS Code             → Chỉnh sửa code → npm run dev (để test)
Vercel              → Import GitHub repo → Deploy
✅ Website chạy trên internet!

Tổng quan

Tạo tài khoản và thiết lập

Development tools

Kiến thức nền tảng

Công nghệ

Kiến trúc phần mềm

Thực chiến

Mục tiêu bài viết

Phần 1: Tạo Repository trên GitHub

Phần 2: Chạy dự án trên máy tính

Firebase Auth

Firebase Firestore

Khởi động dự án

Phần 3: Deploy lên Vercel

Phần 4: Cập nhật ứng dụng sau khi deploy lần đầu

Phần 5: Tạo Firebase Admin SDK

Tóm tắt nhanh

​Mục tiêu bài viết

​Phần 1: Tạo Repository trên GitHub

​Phần 2: Chạy dự án trên máy tính

​Firebase Auth

​Firebase Firestore

​Khởi động dự án

​Phần 3: Deploy lên Vercel

​Phần 4: Cập nhật ứng dụng sau khi deploy lần đầu

​Phần 5: Tạo Firebase Admin SDK

​Tóm tắt nhanh

Mục tiêu bài viết

Phần 1: Tạo Repository trên GitHub

Phần 2: Chạy dự án trên máy tính

Firebase Auth

Firebase Firestore

Khởi động dự án

Phần 3: Deploy lên Vercel

Phần 4: Cập nhật ứng dụng sau khi deploy lần đầu

Phần 5: Tạo Firebase Admin SDK

Tóm tắt nhanh