Landing page đặt taxi Cát Bà online — Tailwind + Mapbox satellite + Telegram booking notification.
Brand: Taxi Cát Bà | Phục vụ: Đảo Cát Bà - Hải Phòng | Loại xe: 4 chỗ & 7 chỗ Maps provider: Mapbox (50k loads/tháng FREE, không cần thẻ)
catba-taxi-build/
├── index.html # Landing page (Tailwind + Google Maps JS API)
├── api/
│ └── book.js # Vercel Serverless: nhận booking → gửi Telegram
├── data/
│ ├── locations.csv # 25 điểm đón/trả phổ biến (anh edit)
│ ├── routes-pricing.csv # 18 tuyến + giá cố định (anh edit)
│ └── config.json # Brand info, đơn giá/km, phụ phí (anh edit)
├── scripts/
│ └── inject-key.js # Build-time: inject Google Maps key vào index.html
├── public/ # Ảnh xe, logo (anh upload)
├── vercel.json # Vercel config
├── package.json
├── .env.example # Mẫu env vars
└── SETUP-GUIDE.md # 📖 Hướng dẫn anh setup từng bước
cp .env.example .env.local
# Mở .env.local và điền 3 giá trị:
# - GOOGLE_MAPS_API_KEY (xem SETUP-GUIDE.md → Step 1)
# - TELEGRAM_BOT_TOKEN (xem SETUP-GUIDE.md → Step 2)
# - TELEGRAM_CHAT_IDnpm install -g vercel
vercel dev
# → http://localhost:3000# Lần đầu:
vercel login
vercel link
# Set env vars trên dashboard Vercel:
# Settings → Environment Variables → thêm 3 vars trên cho Production
# Deploy:
vercel --prodVercel dashboard → Settings → Domains → Add taxicatba.vn → cập nhật DNS theo hướng dẫn của Vercel (thường là 1 A record + 1 CNAME).
Khách điền form
↓
[index.html: Google Maps]
↓ render bản đồ satellite + autocomplete điểm đón/trả
↓ Directions API vẽ tuyến + tính km/ETA
↓ Pricing engine: lookup tuyến cố định OR tính theo km
↓ Hiện giá ngay
↓
Khách click "Đặt xe ngay"
↓ POST /api/book
[api/book.js: serverless]
↓ Validate + tạo Order ID (TCB-DDMM-XXX)
↓ Gọi Static Maps API → ảnh thumbnail tuyến
↓ Gửi Telegram (sendPhoto + caption Markdown)
↓
Anh + tài xế nhận noti có ảnh tuyến
↓ Gọi khách xác nhận trong 5'
↓ Đón → thanh toán tiền mặt khi xuống
- Mở
data/routes-pricing.csvbằng Excel/Numbers → sửa giá → save - Copy giá trị mới vào array
FIXED_ROUTEStrongindex.html(sau này em sẽ tự động hoá bước này) vercel --prodđể re-deploy
- Google Maps client-side key BẮT BUỘC restrict by HTTP referrer (xem SETUP-GUIDE.md Step 1.4)
- Telegram bot token KHÔNG BAO GIỜ commit vào git — chỉ set ở Vercel env vars
/api/bookcó CORS mở (*) — sau này nên restrict về domain của anh
- Đổi màu brand: sửa
tailwind.config.colorstrong<head>củaindex.html - Đổi logo: thay favicon emoji bằng SVG/PNG, upload vào
/public/ - Đổi text: search & replace trong
index.html - Thêm tuyến cố định: append vào
FIXED_ROUTESarray trongindex.html
Nếu anh gặp lỗi: chụp màn hình + console log + gửi em.