Fudge
At a glance
- What
- A PWA that coordinated a 16-person Mackinac Island trip
- My role
- One developer, one AI partner
- Outcome
- Shipped, installed, and used for the real trip
- Stack
- Next.js 15 · React 19 · Supabase · PWA
Built for real people, by one.
0
Trip Members
0
Core Pages
0+
Features
0
Developer
The Story
Every year, the same group of friends heads to Mackinac Island for a three-day conference at The Grand Hotel. Sixteen people, scattered flights, complicated room assignments, and one group text that nobody can keep up with.
In past years, trip logistics lived in a Google Sheet nobody updated, a group iMessage that buried important details under memes, and a flurry of Venmo requests that nobody could track. People missed events. Nobody knew their room assignment. Someone always asked about the ferry schedule for the hundredth time.
So for 2026, I decided to build the app myself. Not as a side project for my portfolio, but because my friends genuinely needed it. The app had to feel native on everyone's phone, require zero downloads, and handle everything from room assignments to restaurant recommendations. And it had to be done fast.
The Problem
Group trips are chaos.
Everyone knows it.
The Spreadsheet Trap
Google Sheets, iMessages, emails — logistics scattered across five-plus platforms that nobody consistently checks.
Payment Headaches
Who paid the hotel deposit? Who owes what for dinner? Venmo requests lost in the noise.
Decision Paralysis
Sixteen opinions on rooms, travel plans, and activities. No single source of truth to cut through the back-and-forth.
The Organizer Burden
One person ends up fielding every question, tracking every detail, and repeating themselves constantly.
Information Decay
Important details buried in old messages. Drive times, ferry schedules, packing lists — all gone when you need them.
"How do you turn trip chaos into something that actually works — for everyone?"
The Build
One developer. One AI partner.
Full-stack in weeks.
I didn't use Claude as a code autocomplete tool. I used it as a full engineering partner — one that could implement complex features, debug production issues, and iterate on solutions while I focused on product decisions, design direction, and quality control.
What I Did
- • Defined every feature from real trip pain points
- • Chose the Dorothy Draper visual direction
- • Selected the full tech stack and architecture
- • Tested every flow, caught every edge case
- • Deployed to production with custom domain + SSL
What Claude Did
- • Implemented features across React, API routes, SQL
- • Debugged cross-browser CSS and auth edge cases
- • Built database schemas and Row Level Security
- • Generated responsive layouts from my descriptions
- • Iterated rapidly based on my feedback
"The skill isn't in writing the code — it's in knowing what to build, how to direct the build, and when the result is good enough to ship."
Features
Seven pages. Ten-plus features.
One cohesive experience.
Every screen was designed mobile-first with a Dorothy Draper-inspired aesthetic — bold botanicals, rich greens, and warm copper accents echoing The Grand Hotel's iconic interior.
Passwordless Authentication
No passwords to remember or reset. Users enter their email, tap a magic link, and they're in. After signing in, they claim their pre-created profile from a list of trip members. The organizer pre-seeds all 16 profiles with room assignments, roles, and travel details — so the app works before anyone even signs up.
Dynamic Itinerary
The heart of the app. A day-by-day schedule that auto-advances to the current day during the trip. Events are filterable by role — judges see their obligations, non-judges see theirs. The admin edits the schedule in real time, and changes appear instantly for all users.
Rooms & Travel
Room assignments show who's staying where with profile photos and tappable phone numbers. The travel coordinator surfaces booking guidelines, driving logistics, and ferry info — with a dismissable (but re-accessible) travel advisory for first-time visitors covering drive times, flight recommendations, and airport pickup coordination.
Explore & Resources
A curated island guide with activities, restaurants, nightlife, and a map — complete with cost estimates, time commitments, and direct links to directions. Veteran trip-goers' picks are highlighted. The resource hub centralizes everything from the group playlist to packing lists, judging guides, and professional development info.
From architecture to polish.
Architecture
The stack behind the scenes.
Next.js 15
App Router & Server Components
React 19
Component-based UI
Supabase
Auth, PostgreSQL, Storage
Tailwind CSS
Utility-first styling
Vercel
Edge deployment & CI/CD
Sharp
Server-side image compression
Key Architecture Decisions
Identity Claiming System
Pre-populated all 16 user rows. When someone signs up via magic link, they select their name and "claim" their profile — migrating all foreign key references to their authenticated UUID.
Server-Side Image Compression
Profile photos compressed on upload using Sharp (256×256, JPEG Q75). The 16 pre-loaded avatars total just 188KB — keeping the app fast even on spotty island Wi-Fi.
Fixed Header with ResizeObserver
CSS position: sticky silently fails when any ancestor has overflow: hidden. After two failed attempts, landed on position: fixed with a dynamic spacer that adjusts to the header's rendered height.
PWA-First Architecture
Service worker, web app manifest, and Add to Home Screen tutorial built in from the start. Most users don't know PWAs can be installed — the app teaches them on first login.
Challenges
The bugs that taught me something.
No real project ships without hitting walls. Every debugging session reinforced the same lesson: understanding your own codebase matters, even when AI writes the code.
The Phantom Events Problem
The itinerary page showed events that didn't exist in the database. The culprit? A fallback mechanism that displayed hardcoded seed data when the database returned zero events. Simple fix, but finding it required tracing the data flow from query to render.
Registration Tracker False Positives
The admin dashboard said everyone had already "joined" the app — before anyone signed up. The logic checked for an @ symbol in the email field, but all pre-created rows had real email addresses. Fix: add a claimed_at timestamp column that only gets set when someone actually completes the identity claiming flow.
Git Push Size Limits
Sixteen profile photos at original resolution totaled 2MB, causing GitHub to reject the push. Batch-compressed all avatars to 256×256 JPEG Q75 using ImageMagick, dropping from 2MB to 188KB. Then implemented Sharp for server-side compression on future uploads.
Reflections
What building Fudge taught me.
AI pair programming is a skill, not a shortcut.
Directing Claude effectively required clear communication, strong technical literacy, and the judgment to know when something was right. Every bug needed me to describe the symptom accurately. Every design decision needed me to think about 16 different users.
Ship for your users, not your resume.
The hardest product decisions were about what to leave out. Payment tracking is admin-only. The judging schedule is separate from the main itinerary. Resources live in a hub, not scattered across tabs. Every feature was weighed against a simple question: does this reduce confusion?
PWAs are underrated.
Most users don't know progressive web apps exist. But once they install Fudge on their home screen, it feels native. No app store, no downloads, no updates to push. Just a URL, a service worker, and a manifest file.
Scope is the real enemy.
Feature creep almost killed the timeline twice. The breakthrough was treating the trip date as a hard deadline — if it wasn't essential for the trip, it didn't ship. Constraints breed focus.
Skills Demonstrated
My Roles
- Product Manager
- Designer (UX + Visual)
- Technical Architect
- AI Collaborator & Director
- Stakeholder Manager
- QA & Deployment
Timeline
- Feb 2026 — Architecture & auth system
- Feb 2026 — Core pages (itinerary, rooms, travel)
- Mar 2026 — Admin dashboard, payment tracking
- Mar 2026 — Explore, resources, PWA polish
- Mar 2026 — Production deployment
- May 2026 — Trip day (the real test)
"I didn't just build an app. I managed a product, led an AI-powered engineering effort, and shipped something real that 16 people will rely on."
Get in Touch