Product · Web app · Travel planning

TripBase

Trip-planning workspace · Live demo

Prototype

Open tripbase.me (opens in new tab) All projects

TripBase timeline of a ten-night road trip: lanes for where you are, where you sleep, the rental car and each travel day, from Las Vegas through Zion, Bryce, Page and the Grand Canyon
01The story

Problem, approach, outcome

A long trip's details end up scattered across email confirmations, booking sites, a planning doc and a task list. The hard part isn't storing them — it's seeing at a glance whether every night has a bed, which day is the long drive, and what still needs doing before a deadline passes.

Model the trip around nights and legs rather than a flat list of events. Every day knows which bed it ends in, so a timeline can show where you are, where you sleep, the car and each travel day as parallel lanes — and a missing night stands out immediately. A route view on the map draws the trip in day order, in the same colours. Time-sensitive items — permits, check-in deadlines, time-zone traps — are pinned above everything else.

For the public version, a build script assembles the demo from an approved file list and refuses to ship if any real name, trip or confirmation number gets in.

As a planning tool, it did its job: laid out on a timeline, the trip's gaps, deadlines and still-unplanned days were easy to spot, and it helped me find and close them before leaving.

On the road, a Google Doc won — not on design, but on access. The doc was on my phone and quick to edit; TripBase lived on my laptop, and by then parts of it had gone stale or were still open-ended. I wanted TripBase's visual layout, but I settled for the simplicity of the doc. The lesson is plain: a trip tool is only as useful as it is current and within reach.

So TripBase continues as three things: a portfolio piece, an experiment in UX and UI, and a product idea that may have legs — one that lives on your phone, stays current, and maybe keeps itself up to date by working alongside an AI assistant on the next trip.

02Overview

About TripBase

TripBase started as the tool I wanted for planning a multi-week European trip: one place for every flight, stay, rental car and confirmation number, laid out the way you actually think about a trip — where you are, where you sleep, and how you get between them.

It's deliberately simple. Plain HTML, CSS and JavaScript, each trip one readable data file, no framework and no build step. It's also an exploration of how far a careful layout can go: a timeline of the whole trip, a route drawn in day order, and the things that need attention pinned above everything else.

After using it on the trip, I turned it into a public demo that runs on a fictional road trip, so the work can be explored without exposing anyone's real plans.

03Features

What it does

  • Flights, stays and rental cars with confirmation numbers, times and prices
  • Timeline view: lanes for where you are, where you sleep, the car and each travel day
  • Day-by-day itinerary that knows which bed each day ends in, with drive legs
  • Map with pins by category, plus a Route view of the trip in day order
  • “Needs attention” alerts for permits, deadlines and time-zone traps
  • Checklist by due date and a budget table that splits costs between travelers
  • Place library of everywhere you have been or want to go
04Stack

How it’s built

  • HTML, CSS and vanilla JavaScript — no framework, no build step
  • Leaflet + OpenStreetMap (Google Maps when a key is configured)
  • Trip data as plain JavaScript files
  • jsdom and Playwright test harnesses
  • Node build script for the public demo, with a check that blocks real trip data
05Roadmap

Where it’s going

  1. Shipped

    Public demo

    A fictional ten-night road trip at tripbase.me, built so no real trip data can ship.

  2. Shipped

    Timeline and route views

    The whole trip in lanes, and the route drawn on the map in day order.

  3. Exploring

    On your phone, kept current

    The gap the real trip exposed: access and freshness, not layout.

  4. Exploring

    Planning alongside an AI assistant

    Keeping the trip file up to date as plans change, instead of by hand.

Have a problem a small, focused tool could solve?

This is the kind of work I do at 321 Enterprise. Tell me what slows your team down and we’ll see what we can build.

Start a conversation See all projects