Back to projects

2026 · LIVE · 3 min read

Cambodia Odyssey – Trip Planner

  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • GitHub Pages
Cambodia Odyssey – Trip Planner preview
On this page6 parts
  1. What it does
  2. Four pages
  3. Planning a trip
  4. How a plan is made
  5. How it's built
  6. What changed in this version

What it does

Cambodia Odyssey is a trip planner for people visiting Cambodia's three best-known areas: the temples of Siem Reap, the capital Phnom Penh, and the beaches and islands of Preah Sihanouk. You choose where to go, how many days, your pace, budget and interests, and it builds a day-by-day plan with things to do, how to travel between provinces, where to stay and roughly what it all costs.

You can try it here: hour3333.github.io/cambodia-trip-planner

Provinces
3
Things to do
29
Travel routes
7
Lines of TypeScript
2.7k

Four pages

The app has four pages, with tabs at the top on a computer and at the bottom on a phone.

  • Plan: the trip form, your day-by-day plan and a budget breakdown.
  • Provinces: a guide to each province, with sights, local food, tips and a photo gallery. A "Plan a trip here" button fills in the form for that province.
  • Transport: the real ways to travel between provinces, such as the VIP bus, domestic flights, the Royal Railway train, the overnight sleeper bus and the island speedboat, each with time, price and a booking tip.
  • Tips: visas, money (US dollars and Riel), the best time of year to go, and temple etiquette.

Planning a trip

  • Where: pick any of the three provinces.
  • How long: 1 to 30 days, with quick buttons for a weekend, 1, 2 or 3 weeks.
  • Pace: Relaxed (two activities a day), Balanced (three) or Packed (every slot filled, even on travel days).
  • Budget: Budget, Comfort or Luxury. This sets the hotel and food costs.
  • Interests: temples, food, beaches, nature, history, and arts & culture.
  • Travellers: how many people are going, so the costs are for the whole group.

Each day has a morning, afternoon and evening, a place to stay, and travel on the days you move to a new province. The total cost can be shown in US dollars or Khmer Riel with one click, and the plan can be printed or saved as a PDF.

How a plan is made

  1. The provinces you chose are put in route order: Siem Reap, then Phnom Penh, then Preah Sihanouk.
  2. Your days are shared between them based on how much there is to see in each, with at least one day per province.
  3. On the first day in a new province, the morning is spent travelling, using a real route from the transport guide.
  4. Each free slot is filled with an activity that matches your interests, and the same activity is never used twice in one stay. When nothing fits, the slot is left as free time instead of being filled with something made up.
  5. Finally it adds up hotels, food, transport and activities for the whole group.

How it's built

Trip data

TypeScript files

  • Provinces & guides
  • Activities & photos
  • Transport routes & prices

React app

Runs in the browser

  • Trip form
  • Plan builder
  • Budget & province guides

GitHub Pages

Free hosting

  • Built by GitHub Actions
  • New version on every push
How it fits together: the data and the app are built with Vite, and GitHub publishes the result.

It's a React app written in TypeScript, built with Vite and styled with Tailwind CSS. There is no server and no database: all the provinces, activities, prices and photos live in the app itself, so once it has loaded, everything works instantly.

Every time I push to GitHub, a GitHub Actions workflow builds the app and publishes it to GitHub Pages automatically.

What changed in this version

The first version tried to cover the whole country. This version focuses on three provinces and covers them properly: a full guide and real photos for each, a smarter plan builder that shares out the days and respects your pace, and a simpler design with four clear pages.

HomeSection on the homepage
AboutSection on the homepage
ExperienceSection on the homepage
ProjectsPage
ContactSection on the homepage
AI Trading Signal BotC++ · Python · Gemini AI
Personal PortfolioNext.js · React · TypeScript
Cambodia Odyssey – Trip PlannerReact · TypeScript · Vite
Copy emailchounlyhour13@gmail.com
Send an emailOpens your email app
Switch to dark themeChange how the site looks