Mục tiêu

Deploy sản phẩm hoàn chỉnh, tạo landing page, và chia sẻ với cộng đồng. Hiểu vòng lặp xây dựng sản phẩm.

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

• ✅ Hoàn thiện sản phẩm theo Launch Day Checklist
• ✅ Tạo landing page chuyên nghiệp bằng AI
• ✅ Deploy lên Vercel và chia sẻ với thế giới
• ✅ Hiểu vòng lặp Build → Measure → Learn để phát triển sản phẩm tiếp

Nội dung chính

8.1 — Checklist trước ngày Launch

┌──────────────────────────────────────────────────────────────┐
│                  LAUNCH DAY CHECKLIST                         │
│                                                              │
│  CHỨC NĂNG                                                   │
│  □ Tất cả tính năng must-have trong PRD hoạt động           │
│  □ Test trên Chrome, Safari, Firefox                         │
│  □ Test trên điện thoại (iOS + Android)                      │
│  □ Loading states cho mọi data fetch                         │
│  □ Error states cho mọi trường hợp lỗi                      │
│                                                              │
│  BẢO MẬT                                                    │
│  □ Checklist bảo mật (Bài 7) đã pass                        │
│  □ API keys an toàn                                          │
│                                                              │
│  HIỆU NĂNG                                                  │
│  □ Lighthouse > 80 cho cả 4 mục                             │
│  □ Ảnh đã tối ưu (nén, lazy load)                           │
│                                                              │
│  THƯƠNG HIỆU                                                │
│  □ Favicon (icon trên tab trình duyệt)                      │
│  □ Meta tags (tiêu đề + mô tả khi share link)              │
│  □ Open Graph image (hình khi paste link lên Facebook)      │
│                                                              │
└──────────────────────────────────────────────────────────────┘

Prompt kiểm tra trước launch (pre-launch audit):

Hãy review toàn bộ @codebase và kiểm tra sẵn sàng launch.

CHỨC NĂNG:
1. Liệt kê tất cả routes/trang trong app
2. Mỗi trang: có loading state không? Có error state không?
   Có empty state không (khi chưa có data)?
3. Form nào chưa có validation?
4. Nút nào chưa hoạt động hoặc link tới "#"?

BẢO MẬT:
5. Tìm API key/secret bị hard-code trong code
6. File .env có trong .gitignore chưa?
7. Supabase RLS đã bật cho tất cả bảng chưa?

HIỆU NĂNG:
8. Ảnh nào > 500KB cần nén?
9. Component nào nên lazy load (không cần load ngay)?
10. Bundle size có quá lớn không?

SEO & META:
11. Trang chính có title tag mô tả đúng nội dung không?
12. Có meta description không?
13. Có Open Graph tags (og:title, og:description, og:image) không?
14. Có favicon không?
15. Có robots.txt và sitemap.xml không?

RESPONSIVE:
16. Test trên 3 breakpoint: mobile (375px), tablet (768px), desktop (1280px)
17. Có element nào bị tràn hoặc cắt trên mobile không?

Trả lời dạng checklist: ✅ OK hoặc ❌ Cần sửa + hướng dẫn cụ thể.
Ưu tiên sửa ❌ quan trọng nhất trước.

Mẹo: Đừng cố sửa hết 100% trước khi launch. Áp dụng quy tắc 80/20: sửa 20% vấn đề quan trọng nhất (bảo mật, tính năng chính hoạt động, responsive mobile) → đã cover 80% trải nghiệm user. Launch trước, cải thiện sau.

8.2 — Tạo Landing Page

Prompt cho AI:

Tạo landing page cho sản phẩm FocusFlow tại route /landing.

CẤU TRÚC TRANG (từ trên xuống dưới):

1. HERO SECTION:
   - Tiêu đề lớn (h1): tagline thu hút, max 10 từ
   - Mô tả ngắn (subtitle): 1-2 câu giải thích app làm gì
   - 2 nút CTA: "Dùng thử miễn phí" (primary, nổi bật)
     + "Xem Demo" (secondary, outline)
   - Background: gradient mềm matching theme app
   - Animation: text fade in từ dưới lên khi load

2. FEATURES SECTION:
   - Heading: "Tính năng nổi bật"
   - Grid 3 cột (1 cột trên mobile):
     Feature 1: icon + tiêu đề + mô tả 2 câu
     Feature 2: icon + tiêu đề + mô tả 2 câu
     Feature 3: icon + tiêu đề + mô tả 2 câu
   - Animation: cards stagger vào khi scroll đến

3. SCREENSHOT SECTION:
   - Heading: "Giao diện trực quan"
   - Hiển thị 2-3 screenshot app (dùng placeholder image)
   - Có thể dùng mockup điện thoại/laptop

4. TESTIMONIALS (placeholder):
   - Heading: "Người dùng nói gì?"
   - 3 cards: avatar + tên + quote đánh giá
   - Dùng dữ liệu giả, sau này thay bằng thật

5. CTA CUỐI TRANG:
   - Background nổi bật (accent color)
   - "Bắt đầu tập trung ngay hôm nay"
   - 1 nút lớn: "Dùng thử miễn phí"

6. FOOTER:
   - Logo + mô tả ngắn
   - Links: mạng xã hội (GitHub, Facebook, LinkedIn)
   - Bản quyền: © 2026 [tên]

Yêu cầu kỹ thuật:
- Responsive: đẹp trên cả mobile, tablet, desktop
- SEO: meta tags đầy đủ (title, description, og:image)
- Performance: lazy load ảnh, font-display: swap
- Phong cách: matching với app chính (dark theme, accent tím)
- Smooth scroll khi bấm navigation links

Mẹo: Landing page tốt nhất là landing page NGẮN. User quyết định trong 5 giây: “App này có giải quyết vấn đề của mình không?” Hero section phải trả lời câu hỏi đó ngay. Không cần 10 sections — 4-5 sections là đủ.

8.3 — Deploy lên Vercel (chi tiết)

DEPLOY LÊN VERCEL — 5 PHÚT:

Bước 1: Push code lên GitHub (nếu chưa)
  git add .
  git commit -m "Ready for launch"
  git push

Bước 2: Vào vercel.com → Sign up bằng GitHub

Bước 3: "Import Project" → chọn repo từ GitHub

Bước 4: Vercel tự detect framework (React/Vite)
  → Bấm "Deploy"

Bước 5: Chờ 1-2 phút → App live tại https://[tên-app].vercel.app

Bước 6: QUAN TRỌNG — Thêm biến môi trường:
  → Project Settings → Environment Variables
  → Thêm TẤT CẢ biến trong .env (VITE_SUPABASE_URL, v.v.)
  → Redeploy

Sau khi deploy — Kiểm tra nhanh:

□ Mở link trên trình duyệt desktop → app load đúng không?
□ Mở link trên điện thoại → responsive đúng không?
□ Thử đăng nhập → hoạt động không? (biến môi trường đúng chưa)
□ Paste link lên Facebook/Zalo → có hiện preview đẹp không? (OG tags)
□ Share link cho 1 người bạn → họ mở được không?

8.4 — Chia sẻ sản phẩm

Nơi đăng:

Nơi	Cách đăng	Mục đích
Nhóm học tập Bình Dân AI	Post link + mô tả quá trình xây dựng	Khoe + nhận feedback
Product Hunt	Submit sản phẩm	Nhận user quốc tế
Facebook / LinkedIn	Post cá nhân kèm story-telling	Xây personal brand
GitHub	Thêm README đẹp	Portfolio cho developer

Template post chia sẻ sản phẩm:

Sau [X tuần] học vibe coding, mình đã launch sản phẩm đầu tiên!

🎯 [Tên app] — [1 câu mô tả]

Vấn đề mình giải quyết:
[2-3 câu mô tả vấn đề thực tế]

Tech stack: React + Supabase + Vercel
Thời gian xây dựng: [X] tuần (học + làm)
Tool chính: Cursor AI + Claude

Link thử: [URL]
Link code: [GitHub URL]

Bài học lớn nhất: [1 insight bạn học được]

Cảm ơn cộng đồng Bình Dân AI đã hỗ trợ!
#vibecoding #AI #buildinpublic

Mẹo: Post chia sẻ hiệu quả nhất là post kể CHUYỆN, không phải post khoe sản phẩm. “Mình từ không biết code đến launch app đầu tiên trong 3 tuần” thu hút hơn nhiều so với “Mình vừa làm xong app X với Y tính năng.”

8.5 — Vòng lặp sản phẩm: Build → Measure → Learn

         ┌──────────┐
         │  BUILD   │ ← Bạn vừa ở đây (Course 1-3)
         │  Xây app │
         └────┬─────┘
              │
              ▼
         ┌──────────┐
         │ MEASURE  │ ← Thu thập feedback
         │ Đo lường │    Xem bao nhiêu người dùng
         └────┬─────┘    Họ dùng tính năng nào nhiều nhất
              │
              ▼
         ┌──────────┐
         │  LEARN   │ ← Rút kinh nghiệm
         │  Học hỏi │    Cần thêm gì? Bỏ gì?
         └────┬─────┘
              │
              └──────── → Quay lại BUILD (cải tiến V2)

Sản phẩm tốt nhất không phải ra đời từ 1 lần code. Nó ra đời từ nhiều vòng lặp Build → Measure → Learn.

Cách thu thập feedback đơn giản:

Cách	Mô tả	Phù hợp khi
Nhờ bạn bè dùng thử	Gửi link, quan sát họ dùng	Mới launch, cần feedback nhanh
Google Form	Tạo survey 5-10 câu hỏi	Có 10+ user
Vercel Analytics	Xem số lượt truy cập, trang nào hot	Miễn phí trên Vercel
Hotjar (free tier)	Xem user click vào đâu, scroll đến đâu	Muốn hiểu UX chi tiết

Prompt phân tích feedback và lên kế hoạch V2:

Tôi đã launch app [tên] và thu được feedback sau:

Feedback tích cực:
- [Liệt kê 2-3 điều user thích]

Feedback cần cải thiện:
- [Liệt kê 3-5 điều user góp ý]

Số liệu:
- [X] lượt truy cập trong [Y] ngày
- Trang được xem nhiều nhất: [tên trang]
- Trang ít được xem: [tên trang]

Dựa trên feedback và data, hãy giúp tôi:
1. Ưu tiên 3 cải tiến quan trọng nhất cho V2
2. Có nên thêm tính năng nào trong PRD mục Nice-to-have không?
3. Có nên bỏ tính năng nào ít người dùng không?
4. Đề xuất timeline thực hiện V2 (2-3 tuần)

Mẹo: “Done is better than perfect.” Launch sớm, nhận feedback, rồi cải thiện. Đừng ôm mãi sản phẩm vì sợ nó chưa đẹp, chưa hoàn hảo. User thật sẽ cho bạn insight mà bạn tự nghĩ không ra.

Lỗi thường gặp

Vấn đề: App chậm trên production — load 5-10 giây. → Giải pháp: (1) Kiểm tra ảnh: ảnh > 500KB cần nén (dùng tinypng.com hoặc squoosh.app). (2) Lazy load: trang nào không phải trang chính → lazy import. Prompt AI: “Optimize app performance: nén ảnh, lazy load routes, code splitting.” (3) Kiểm tra API: nếu Supabase query chậm → thêm index cho cột hay tìm kiếm.

Vấn đề: SEO không index — Google không tìm thấy app. → Giải pháp: (1) Kiểm tra meta tags: <title>, <meta name="description">. (2) Tạo robots.txt cho phép Google crawl. (3) Tạo sitemap.xml liệt kê tất cả trang. (4) Submit URL lên Google Search Console (miễn phí). Prompt AI: “Thêm SEO đầy đủ cho app: meta tags, robots.txt, sitemap.xml, structured data.”

Vấn đề: OG image không hiện khi share link lên Facebook/Zalo. → Giải pháp: Cần 3 meta tags trong <head>: <meta property="og:title">, <meta property="og:description">, <meta property="og:image">. Ảnh OG phải là URL full (https://…), kích thước 1200x630px. Test tại: developers.facebook.com/tools/debug/

Vấn đề: Deploy lên Vercel thành công nhưng app hiện trang trắng. → Giải pháp: 3 nguyên nhân phổ biến: (1) Build command sai — Vercel cần npm run build, kiểm tra package.json có script “build” không. (2) Output directory sai — Vite output vào dist/, Next.js vào .next/. (3) Biến môi trường thiếu — thêm vào Vercel Settings → Environment Variables → Redeploy.

Vấn đề: App hoạt động tốt nhưng không ai dùng. → Giải pháp: Đây không phải lỗi kỹ thuật mà là lỗi distribution. (1) Share cho đúng đối tượng — post vào nhóm liên quan, không spam. (2) Viết post kể chuyện, không chỉ share link. (3) Nhờ 5-10 người bạn dùng thử và cho feedback. (4) Kiên nhẫn — sản phẩm đầu tiên quan trọng nhất là KINH NGHIỆM, không phải số user.

Bài tập thực hành — ĐỒ ÁN TỐT NGHIỆP

Nhiệm vụ:

Các bước thực hiện:

1. Chạy pre-launch audit bằng prompt ở mục 8.1 (~10 phút)
2. Sửa các vấn đề quan trọng nhất (bảo mật + tính năng chính) (~10 phút)
3. Tạo landing page bằng prompt ở mục 8.2 (~10 phút)
4. Deploy phiên bản final lên Vercel (~5 phút)
5. Kiểm tra: mở trên desktop + mobile, thử login, share link (~5 phút)
6. Viết 1 post giới thiệu sản phẩm (200-300 từ) kèm link (~5 phút)
7. Đăng lên ít nhất 1 nơi (~2 phút)

Tiêu chí hoàn thành:

• App live trên Vercel, ai cũng truy cập được
• Landing page hoàn chỉnh với CTA + features + testimonials
• Meta tags + OG image đúng (share link lên Facebook hiện preview đẹp)
• Post giới thiệu đã đăng ít nhất 1 nơi
• Tất cả code đã commit lên GitHub

Gợi ý nếu bị stuck: Nếu app còn nhiều bug, focus vào 1 tính năng chính hoạt động tốt nhất. Landing page chỉ giới thiệu tính năng đó. Launch với 1 tính năng tốt tốt hơn 5 tính năng lỗi. V2 sẽ cải thiện sau.

Thời gian: 45 phút Deliverable:

• Link app hoàn chỉnh
• Link landing page
• Link post chia sẻ
• Link GitHub repo