BibJournal
Web Application Design
Built a personal race memory archive in 72 hours because dorm rooms don't have space for medal racks. Sometimes the best design solution is just building exactly what you need—complete with bib cropping, auto background removal, and route visualization.
Role
Lead UX/UI Designer
Developer
Timeline
3 Days
Skills
Product Thinking
Interface Design
Information Architecture
Interaction Design
Rapid Prototyiping
Cross-Functional Ability
Tools
Figma
Cursor
React
Vite
Vercel
Firebase
Github
The Problem (That Only I Had)
As a college runner living in a dorm, I started collecting race bibs, medals, and finisher photos—but had nowhere to display them. Those physical medal racks? Not happening in a 10x12 dorm room.
Sure, Strava and Nike Run Club exist, but they're social platforms. I didn't need another feed to maintain or compare my times with strangers. I just wanted a private, permanent place to archive my races with all the details that mattered to me: the bib, the medal, the route, my time, how it felt.
So I built it.
The Solution
A personal digital journal for cataloging race memories, built exactly how I wanted it. No feature bloat, no social features, just a clean archive of my running journey.
Custom Bib Cropping
Upload and crop race bibs to a consistent format for a clean, uniform display
Auto Background Removal
Automatically remove backgrounds from medal photos without manual editing
Smart Location Search
Google Places API integration for quick, accurate race location entry
Route Visualization
Upload GPX files to display actual race routes with elevation data
Personal Stats Tracking
Time, distance, PRs, placement, and personal notes for each race
Secure & Private
Firebase authentication with cloud storage—your data stays yours
Concept & Planning
Started in my sketchbook mapping out what data I actually wanted to capture. Realized I needed more than just photos—location, route data, personal notes, stats. Decided on a two-step form flow to keep the entry process simple and not overwhelming.
Build
Set up React app with Firebase for auth and Firestore for data storage. Integrated Google Places API for location autocomplete and built the image upload/cropping functionality. The medal background removal was trickier than expected but got it working with a combination of image processing libraries and some manual tweaking.
Polish & Deploy
Added GPX parsing for route visualization using Leaflet maps, refined the UI based on entering my own race data, and tested the full flow multiple times. Deployed to Vercel and immediately started using it for real. The best validation is when you actually want to use your own product.
Dashboard View
Clean card-based layout showing all races at a glance, with filtering and sorting options
Two-Step Entry Form
Step 1 captures basic info, Step 2 handles media uploads—keeping the process simple and focused
Race Detail Page
Complete race memory with bib, medal, finisher photo, route map, elevation data, and personal notes
Why This Project Matters
This represents a different kind of design process—one driven by immediate personal need rather than weeks of user research and iteration. When you're both the designer and the only user, you can move fast and make opinionated decisions without second-guessing every choice.
It also forced me to think about the full product stack: data structure, user authentication, API integration, image processing, file uploads, and deployment. Not just "how should this look" but "how does this actually work."
Most importantly, I actually use it. Every race I run gets logged here. That's the best validation.
What I Learned
Constraints Breed Creativity
The 3-day timeline meant I had to prioritize ruthlessly. No time for feature creep or perfect polish—just ship what matters.
Build What You Need
Sometimes the best design solution is just making the thing exist. No permission needed, no stakeholder buy-in required.
Technical Skills Matter
Being able to implement my own designs gave me complete control over the experience. No compromises, no "is this technically possible?"
Personal Projects Hit Different
No stakeholders, no compromises, just pure vision. This is what design feels like when you're solving your own problem.
What I'd Do Differently
If I rebuilt this today, I'd add:
Photo galleries for each race (multiple finisher photos)
Better mobile experience (built desktop-first, mobile second)
Export functionality (PDF race report or shareable cards)
Analytics dashboard (total miles, PRs over time, etc.)
Weather data integration (temperature and conditions on race day)
But honestly? It works exactly how I need it to. Sometimes done is better than perfect.
