Mobile App · React Native · Expo · Solo Project
A solo project — I handled UX/UI design and development end-to-end. It started as a mobile concept centered on AR storytelling — scan a QR code at a landmark, watch its history play out. I later built it into a real, working app: a React Native / Expo national parks companion that pulls live data from the National Park Service's public API across all 474 parks, monuments, and historic sites. Five tabs — Explore, For You, Navigate, Saved, and Activity — cover the full arc of a trip: finding a park, learning about it, getting there, saving it for later, and logging the visit afterward.
1. Make search and browsing feel instant across 474 parks.
The NPS dataset covers far more than the handful of famous parks — monuments, historic sites, seashores. I wanted browsing that many options to feel like scrolling a curated list, not searching a government database: live search, category filters, and a difficulty/rating/mileage summary on every card.
2. Turn dense trail data into something you can read at a glance.
Elevation gain, mileage, and difficulty are usually just numbers in a table. I designed a color-banded elevation chart — green/orange/red, like a ski map — that you can scrub across to feel the shape of a hike before you're on it. There's a live version of it below.
3. Let a visit outlive the visit.
Saved and Activity turn the app into a personal passport: bookmark parks you want to see, then log a visit with a timestamp once you've been — all stored locally, no account required.
The Explore tab is the front door — live search and category filters across all 474 NPS-listed parks, each card showing difficulty, rating, distance, and elevation gain at a glance. Tapping in opens the Park Detail screen: real photos, an About section pulled from the NPS API, a trail map, live weather, and the elevation profile below.
Problem: trail elevation used to be a wall of numbers — min, max, gain, mileage — that told you nothing about the actual shape of the hike.
Fix:a color-banded pill-bar chart (green/orange/red by relative difficulty) that you can scrub across to see the exact elevation at any point on the trail — like scrubbing a video timeline. Rebuilt below directly from the app's real ElevationProfile.tsx component — same colors, same scrub interaction, minus the haptic tick you'd feel on a phone.
Half Dome Trail
Yosemite National Park
My original plan for this project leaned heavily on AR: scan a QR code at a landmark, watch its history play out. When I sat down to actually build the app, I made the call to cut it. AR was going to eat most of my build time for a feature that only mattered at a handful of physical landmarks — and the app didn't have a real backbone yet: no live park data, no way to search 474 parks, no way to save one for later. I built that backbone first, wiring the app to the real National Park Service API instead of static mock content.
Once search, park details, saving, and visit-tracking were real and working, the AR feature didn't feel like the missing piece anymore — the app was already useful without it. That's the biggest lesson from taking this from a Figma concept to a shipped app: a flashy feature is easy to design around, but you don't find out what an app actually needs until you're building the boring parts.
I'd still like to revisit AR as a later addition, but I'm glad I built the parts people would actually use first.
A few more screens from the app — click any of them to see a larger version.