Overview
States I've Visited is a personal travel portfolio that turns where I've been in the U.S. into an interactive map and a small content-management workflow behind it. The public side centers on a clickable map; the admin side is built for real editing at scale with draft tracking before save. Under the hood it's a full-stack Next.js 14 app with Neon Postgres, Tailwind, and deployment on Vercel. The data model is layered—state → cities → places—so the map stays simple while detail lives one click deeper.
Problem
Tracking where I've been across 50 states, and the cities and specific places within them, doesn't work well in spreadsheets or flat notes. There's no instant sense of progress, and a single list can't reflect how trips actually nest: state, then city, then park, restaurant, or landmark.
Solution
A public map with visited states in blue and unvisited in neutral gray, plus a stats row (states visited, percent covered, cities recorded). Clicking a visited state opens a modal with cities and places instead of cluttering the map. A password-protected admin supports search, visited filters, nested city/place editing, and batch Save all so multiple states can be updated in one commit.
Design decisions
- Blue visited states (#3B82F6) vs. one uniform unvisited gray (#E2E8F0)—progress reads instantly; nothing looks partially visited
- Inter for UI typography, system-ui on map labels so two-letter state codes stay sharp in the SVG without an extra font layer
- Stats cards instead of intro copy—the title, numbers, and map give context without redundant explanation
- Drill-down via modal on state click—cities and places stay scannable on the map while still showing the nested data model
- Admin search and visited filters (All / Visited / Not visited), including smarter matching for Washington, D.C., so updates don't mean scrolling 50+ rows
Technical highlights
- Password-protected writes with a public read-only map
- Draft and dirty-state tracking before batch save with Save all
- Legacy data migration from flat places text into structured city rows
Stack
Next.js 14, React, TypeScript, Neon Postgres, Tailwind CSS, Vercel
Outcome
The app gives a clear picture of travel progress on the map while keeping rich trip detail accessible when I want it—and the admin flow makes adding cities and places practical as the list grows.
Qualitative assessment for portfolio demonstration—not based on real analytics or client results.