CASE STUDY · PERSONAL · 2026

Nola Field Guide

A self-contained interactive trip planner for New Orleans I built for myself, then kept refining. 50+ curated stops, day-by-day tabs, a live map with category-coded markers, ranked priorities. No backend; no build step; one HTML file. A small project that quietly says a lot about how I work.

Open the field guide →

Live preview

Embedded right here. Click around — it's the real thing.

— interactive · day tabs · live map · category swatches —

Why this exists

Pretrip planning for New Orleans was buried in a Google Doc, a Notes app, three browser tabs, and a half-remembered conversation with a friend who'd been. None of those things had the shape of the trip — what's near what, what closes Monday, which night should be Frenchmen Street, which cemetery requires a guide.

So I built the shape of the trip. One file. Five day-tabs. A live map. Category swatches. Ranked priorities (Must See → OK to Skip). It started as a planner. Then friends asked for it. Now it's a small artifact that's just useful enough to share.

Design moves that made it click

Category as color, not as label

Food / Museum / Music / Shop / Sight / Tour / Drink each got a hue inspired by NOLA itself — saffron, cypress, plum, Creole cottage. The map and the cards share the palette so a glance at either gives you the shape of the day.

Food Museum Music Shop Sight Tour Drink

Rank, don't sort

Every stop carries a rank — Must See → High Priority → Great If Time → Nice → OK to Skip — but the day's order is geographic, not by rank. Real trips don't optimize for "best first." They optimize for "next door."

Warnings live with the place, not the trip

"Closed Monday." "Book the guided tour." "Long lines at peak lunch." These ride on the stop card itself, so by the time you're picking what to do you already know what to do about it.

The hotel is a known waypoint

Place d'Arms is hard-coded as the home base, with a dedicated marker. Every stop is rendered relative to it — including the implicit "yes you can walk to dinner" subtext.

Decisions I'd make again

DECISION · Single-file HTML

No build, no framework, no backend. Vanilla JS, Leaflet for the map, system fonts. Loads in a blink, works offline once cached, hosts itself on any static server, survives whatever-happens-to-React in three years. The trip information is the data; everything else got out of the way.

DECISION · Print stylesheet

A real @media print block: hides the map, the tabs, the resize handle. What prints is a clean checklist of cards. Because — yeah — there is a real chance somebody wants paper in their pocket on Frenchmen Street.

DECISION · Mobile-first map split

On a phone, the map is the top half and the cards are the bottom half, with a draggable resize. On a laptop, they're side by side. The same data; the right shape per device; no extra code.

What this is actually about

A trip planner is a small tool. The interesting part is what shape a small tool wants to be. It doesn't want to be a full app with auth and a backend. It wants to be a document with state — readable on paper, scriptable on web, ownable by the person using it.

Nola is what I do with a small problem. The same instincts — "what's the shape of this?" — drive the bigger ones.

Take it with you

Open the live field guide; print a day; use it; ignore it; the artifact stands on its own.

Open the field guide → More projects