Build Website Du Lịch [Part 2]: 3 Tháng Development - Build Website Du Lịch Từ Zero

Tác giả CoderKiemCom Team
By CoderKiemCom Team
Ảnh bìa: Build Website Du Lịch [Part 2]: 3 Tháng Development - Build Website Du Lịch Từ Zero

3 Tháng Development: Build Website Du Lịch Từ Zero

📌 Series: Build Website Du Lịch Journey - Part 2/7

  • Part 1: Ý Tưởng
  • Part 2: Development ← Bạn đang đọc
  • Part 3: Tháng 1-3 (Coming tomorrow)

Decision đã made. Ý tưởng đã có. Giờ là lúc code.

3 tháng development journey từ zero đến launch. Đây là breakdown chi tiết: tech stack tôi chọn, workflow hàng ngày, và những gì tôi build.

🗓️ Timeline Overview

Duration: 3 tháng (Tháng 1-3/2024)
Mode: Part-time (after work + weekends)
Total hours: ~300 giờ
Result: MVP ready to launch

Month 1: Planning & Architecture (40 giờ)

Month 2: Coding Like Crazy (140 giờ)

Month 3: Polish & Launch (120 giờ)

📋 Tháng 1: Planning & Architecture

Week 1-2: Research & Planning

Tôi không lao vào code ngay. Lesson từ previous projects: Plan first, code later = save time.

Research đối thủ (20 giờ)

Tôi spent 2 tuần analyze competitors:

1. Traveloka

  • ✅ UI/UX tốt, trải nghiệm smooth
  • ✅ Search functionality mạnh
  • ❌ Quá phức tạp cho SME
  • ❌ Over-engineered cho mục đích của tôi

2. Booking.com

  • ✅ Focus vào hotels, làm tốt
  • ✅ Trust signals mạnh (reviews, badges)
  • ❌ Không có all-in-one (chỉ hotels)
  • ❌ Interface hơi cũ

3. Các website du lịch local

  • ❌ Thiết kế cũ, không mobile-friendly
  • ❌ Slow loading (5-10 seconds)
  • ❌ Không có payment online
  • ✅ Gap: Đây là opportunity!

Key insight: Không ai làm all-in-one platform affordable cho SME. Niche rõ ràng.

Define MVP Features (10 giờ)

Tôi list out 50+ features ước. Rồi cut xuống còn must-haves cho MVP:

Must-have (Phase 1):

  • ✅ Trang chủ với search bar prominent
  • ✅ Module đặt khách sạn (focus vào cái dễ nhất trước)
  • ✅ Module thuê xe (high margin, dễ close)
  • ✅ Payment gateway integration
  • ✅ Admin dashboard cơ bản
  • ✅ Email confirmation automation

Nice-to-have (Phase 2+):

  • Vé máy bay (quá phức tạp cho MVP)
  • Tours
  • BĐS du lịch
  • Loyalty program
  • Mobile app

Philosophy: Ship fast, iterate based on real feedback.

Tech Stack Decision (10 giờ)

Đây là critical decision. Tôi compare nhiều options:

Frontend:

✅ Next.js 14 (React)
   - SEO-friendly (SSR built-in)
   - Fast performance
   - Easy deployment
   - Familiar stack

❌ Vue.js / SvelteKit
   - Học curve mới
   - Ecosystem nhỏ hơn

Styling:

✅ TailwindCSS
   - Rapid development
   - Utility-first
   - Consistent design

❌ Styled Components / CSS Modules
   - Slower to write

Backend:

✅ Node.js + Express
   - Same language (JavaScript)
   - Easy to maintain
   - Large ecosystem

❌ Django / Laravel
   - Context switching (Python/PHP)
   - Slower development

Database:

✅ PostgreSQL
   - Relational data (bookings, users)
   - ACID compliance
   - Scalable

❌ MongoDB
   - Overkill cho use case này

Hosting:

✅ Vercel (Frontend)
   - Free tier generous
   - Auto CI/CD
   - Global CDN

✅ Railway (Backend + DB)
   - $5/month
   - Easy setup
   - PostgreSQL included

❌ AWS / GCP
   - Too complex cho MVP
   - Expensive

Payment:

✅ PayOS
   - Local payment methods (MoMo, ZaloPay, Banking)
   - 2% fee (competitive)
   - Vietnamese support
   - Easy integration

❌ Stripe
   - International focus
   - Higher fees
   - Overkill

Total tech cost: ~$5-10/month

💻 Tháng 2: Coding Like Crazy

My Daily Routine

Vì làm part-time, tôi phải optimize mọi giờ có thể:

Weekdays:

  • 6:00 - 8:00 AM: Code 2 giờ trước khi đi làm
  • 12:00 - 1:00 PM: Code lúc nghỉ trưa (ăn vội + code)
  • 6:00 - 11:00 PM: Code sau khi về nhà (5 giờ)

Weekends:

  • 8:00 AM - 10:00 PM: Code cả ngày (10-12 giờ)

Total: ~60-70 giờ/tuần

Intense? Yes. Sustainable? No. Nhưng đây là sprint, không phải marathon.

Week 1-2: Frontend Core (50 giờ)

Completed:

  • ✅ Project setup (Next.js 14, TypeScript, TailwindCSS)
  • ✅ Homepage với hero section
  • ✅ Search UI (khách sạn + thuê xe)
  • ✅ Listing pages với filters
  • ✅ Detail pages
  • ✅ Responsive design (mobile-first)

Challenges:

  • TypeScript errors (learning curve)
  • TailwindCSS responsive breakpoints
  • Image optimization (next/image)

Time: Underestimated. Planned 30h, took 50h.

Week 3-4: Backend API (40 giờ)

Completed:

  • ✅ Express.js server setup
  • ✅ PostgreSQL schema design
  • ✅ Prisma ORM integration
  • ✅ Authentication (JWT)
  • ✅ Booking API endpoints (CRUD)
  • ✅ Payment webhook handlers
  • ✅ Email service (Nodemailer)

Challenges:

  • Database design (nhiều iterations)
  • Auth flow (JWT refresh tokens)
  • Webhook security (signature verification)

Wins:

  • Prisma migrations smooth
  • API structure clean, RESTful

Week 5-6: Integration & Testing (30 giờ)

Completed:

  • ✅ Connect frontend → backend
  • ✅ PayOS integration (sandbox testing)
  • ✅ Email automation (booking confirmation)
  • ✅ Bug fixes (dozens of them)
  • ✅ Error handling
  • ✅ Loading states

Major bugs found:

  • Race conditions trong booking flow
  • Payment webhook không reliable
  • Email template broken on mobile

Fixes: 3 all-nighters debugging. Not fun, but necessary.

Week 7-8: Admin Dashboard (20 giờ)

Completed:

  • ✅ Dashboard layout
  • ✅ Order list & details
  • ✅ Customer management
  • ✅ Basic revenue analytics
  • ✅ Settings page

Philosophy: Keep it simple. Fancy charts can wait. Focus on must-haves.

🎨 Tháng 3: Polish & Launch

Week 1-2: Content & SEO (40 giờ)

SEO Setup:

  • ✅ Google Analytics 4
  • ✅ Google Search Console
  • ✅ Sitemap.xml generation
  • ✅ Meta tags optimization
  • ✅ Schema markup (LocalBusiness, Product)
  • ✅ robots.txt

Content Creation:

  • ✅ 20 destination pages
  • ✅ 10 hotel listings
  • ✅ 15 xe cho thuê listings
  • ✅ About, Contact, Terms pages

Lesson: Content takes longer than expected. Each page needs copy, images, SEO optimization.

Week 3: Testing (30 giờ)

Testing checklist:

  • ✅ Cross-browser (Chrome, Safari, Firefox)
  • ✅ Mobile testing (iOS, Android)
  • ✅ Payment flow (end-to-end)
  • ✅ Email delivery
  • ✅ Load testing (100 concurrent users)
  • ✅ Security audit (basic)

Issues found: 23 bugs. Fixed 21. 2 labeled "nice-to-fix-later".

Week 4: Soft Launch → Official Launch

March 15: Soft Launch

Invited 10 bạn bè test:

  • Positive feedback on UI/UX
  • Found 5 more bugs
  • 3 suggestions implemented
  • 0 bookings (expected - they're just testing)

March 20: Official Launch

Posted on:

  • Facebook cá nhân (500 friends)
  • LinkedIn (200 connections)
  • 5 Facebook groups du lịch
  • ProductHunt (got 5 upvotes)
  • Reddit r/VietNam (got downvoted - too promotional)

Day 1 Results:

  • 150 visitors
  • 0 bookings
  • Nhiều questions về trust/legitimacy

Feeling: Excited but anxious. "Okay, bình tĩnh. SEO cần thời gian."

📊 Final Tech Stack Summary

Frontend:

  • Next.js 14 + TypeScript
  • TailwindCSS
  • Zustand (state management)
  • React Hook Form + Zod (forms)
  • date-fns (date handling)

Backend:

  • Node.js + Express
  • PostgreSQL + Prisma ORM
  • JWT authentication
  • Nodemailer (email)

Infrastructure:

  • Vercel (frontend hosting)
  • Railway (backend + DB)
  • AWS S3 (image storage)
  • Cloudflare (DNS + caching)

Services:

  • PayOS (payment gateway)
  • SendGrid (email delivery)
  • Google Analytics (tracking)

Total monthly cost: $5-10

💡 Key Learnings From Development Phase

What Went Well:

  1. Next.js choice: Excellent decision. Fast development, great DX.
  2. MVP scope: Focusing on must-haves helped ship on time.
  3. Part-time feasible: 300 giờ part-time trong 3 tháng = doable.

What I'd Do Differently:

  1. More user research: Built features nobody asked for.
  2. Simpler admin: Over-engineered dashboard early.
  3. Better testing: Should've written tests from day 1.
  4. Content earlier: Don't wait until last month.

Biggest Challenge:

Motivation dips. Vài tuần code alone, không feedback, tự hỏi "Có ai dùng không?"

Solution: Set small milestones. Celebrate small wins. Share progress với bạn bè.

🚀 What's Next?

Website đã live. MVP đã launch.

Part 3 sẽ cover: Tháng 1-3 sau launch - reality check khi có 0 bookings, panic mode, và first booking sau 6 tuần.

Spoiler: Không như tôi expect. Nhưng đó là part of journey.

📚 Series: Build Website Du Lịch Journey

  • Part 1: Ý Tưởng
  • Part 2: Development ← Bạn đang đọc
  • Part 3: Tháng 1-3 Reality Check (Coming tomorrow)
  • Part 4-7: Coming soon

💬 Questions?

  • Tech stack questions?
  • Development workflow unclear?
  • Want to see code snippets?

Comment hoặc DM tôi! Happy to help.

Part 2 of 7 - Build Website Du Lịch Journey
Published: 05/11/2025