​
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

​
Bước 1: Tạo tài khoản GitHub

  1. Truy cập github.com
  2. Nhấn Sign up
  3. Đ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ự)
  4. Xác minh email sau khi đăng ký
  5. Đăng nhập github.com sau khi xác minh

​
Bước 2: Tạo Repository mới

  1. Đăng nhập github.com
  2. Nhấn nút New repository (hoặc nhấn + ở góc phải trên → New repository)
  3. Đ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)
  4. 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.

​
Bước 3: Cài GitHub Desktop

  1. Truy cập desktop.github.com
  2. Nhấn Download for Windows (hoặc Mac tùy hệ điều hành)
  3. Chạy file cài đặt
  4. 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
  5. Xong! GitHub Desktop đã sẵn sàng

​
Bước 4: Mở Repository bằng GitHub Desktop

  1. Trong GitHub Desktop, chọn File → Clone repository
  2. Chọn repository claude-code-my-dashboard từ danh sách
  3. Chọn Local path — thư mục trên máy để lưu (ví dụ: Documents/claude-code-my-dashboard)
  4. 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.

​
Bước 5: Copy code vào thư mục repo

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

​
Bước 6: Đẩy code lên GitHub

  1. Quay lại GitHub Desktop
  2. Panel bên trái hiển thị danh sách files đã thay đổi
  3. Trong ô Summary, gõ mô tả: Initial project setup
  4. Nhấn Commit to main
  5. 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

​
Bước 1: Mở thư mục repo trong VS Code

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

​
Bước 2: Cài đặt npm packages

  1. Trong VS Code, mở Terminal (nhấn phím Ctrl+` hoặc Cmd+`)
  2. Gõ lệnh sau và nhấn Enter:
npm install
  1. 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.

​
Bước 3: Tạo Firebase project

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

​
Bước 4: Tạo Web App trong Firebase project

  1. Chọn Dashboard project
  2. Nhấn nút Add app (hình web)
  3. Chọn Web
  4. 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
  5. Sau khi tạo xong, Firebase hiện ra object firebaseConfig với các thông số API key.
  6. 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 file .env.local trong thư mục gốc của dự án, 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"

​
Bước 3: Chạy dự án

  1. Trong Terminal, gõ lệnh sau và nhấn Enter:
npm run dev
  1. Terminal sẽ hiển thị URL, thường là http://localhost:3000
  2. 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

​
Bước 1: Tạo tài khoản Vercel

  1. Truy cập vercel.com
  2. Nhấn Sign Up
  3. Chọn Continue with GitHub để đăng nhập bằng tài khoản GitHub
  4. Nhấn Authorize Vercel để cấp quyền truy cập GitHub
  5. 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.

​
Bước 2: Tạo Project mới

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

​
Bước 3: Cấu hình Project

Trang Configure Project hiển thị các tuỳ chọn:
Tuỳ chọnMô tả
Framework PresetChọn Other (hoặc để Vercel tự nhận diện)
Root DirectoryĐể mặc định là . (thư mục gốc)
Build CommandĐể trống (không cần với HTML thuần)
Output Directory./ hoặc public (tùy cấu trúc dự án)

​
Bước 4: Deploy

  1. Nhấn Deploy
  2. Chờ 30-60 giây cho Vercel build và triển khai
  3. 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 đang sống trên internet. Chia sẻ URL đó để ai cũng truy cập được.

​
Cập nhật website sau này

Khi bạn chỉnh sửa code trong VS Code:
  1. Sửa file trong VS Code
  2. Mở GitHub Desktop → kiểm tra thay đổi → gõ mô tả trong ô Summary → nhấn Commit to main → Push origin
  3. Vercel tự động deploy sau 30-60 giây
Không cần làm gì thêm — auto-deploy!

​
Tóm tắt nhanh

GitHub.com          → Tạo account & repository
GitHub Desktop      → Clone repo về máy
GitHub.com          → Download ZIP → giải nén → copy vào thư mục repo
GitHub Desktop      → Commit → Push
VS Code             → Open folder → npm install → npm run dev
Vercel              → Import GitHub repo → Deploy
✅ Website chạy trên internet!