A Couples Accountability App Built in a Weekend

Built: May 2026 (2-3 days) | Type: PWA + React | Status: Live & in daily use

The Idea

Me and my partner made a rule: minimum 4 workouts per week, together.

Whoever hits 4+ wins. If one of us hits it and the other doesn't, the loser gets a dare. If we both fail, we both get punished.

We needed an app that:

• Tracked daily workouts (simple checkbox logging)

• Calculated weekly scores (Mon-Sun)

• Generated fun dares/rewards/punishments automatically

• Showed history so we could celebrate streaks (or laugh at failures)

No spreadsheet felt right. So I built FitStreak.

The Design-to-Code Pipeline

1. Designed in Figma: All screens, colors, interactions

2. Prompted Claude Code: Gave it Figma specs + feature requirements

3. Iterated in code: Adjusted spacing, fixed timezone bugs, tweaked AI prompts

4. Deployed on Vercel: Every push to GitHub goes live instantly

This workflow proved that you don't need a separate frontend dev team. Design spec + prompt engineering + rapid iteration = shipped product.

It's the daily moment of truth. Every morning, one of us opens the app and logs. The colors are honest shows exactly who's ahead, who's behind.

What's here:

• Week date range (May 5-10)

• Henan's progress (2/4 days logged)

• Tarek's progress (2/4 days logged)

• Big purple button: "LOG TODAY'S WORKOUT"

• Win streak counter at bottom (Henan wins: 12, Tarek wins: 8)

The Mechanic

Every Saturday at midnight, the app calculates:

• IF Henan >= 4 AND Tarek >= 4 → BOTH WIN (Color: Teal)

• ELSE IF Henan >= 4 → HENAN WINS (Color: Purple)

• ELSE IF Tarek >= 4 → TAREK WINS (Color: Green)

• ELSE → BOTH LOSE (Color: Orange)

Colors auto-assign based on results. Dares/rewards/punishments generated by Claude Sonnet (with reroll option because sometimes the AI gets weird). Once you accept, the app resets and you're back to the home screen for the new week.

How It Works (The Stack)

Frontend: React 18 + Vite (PWA-enabled)

• Install on homescreen like a native app

• Works offline (service worker caching)

• Real-time sync when you come back online

Backend: Supabase (PostgreSQL) + Realtime WebSockets

• One shared database (both users read/write to same tables)

• Real-time notifications (when Tarek logs a workout, I see it instantly)

• Race-condition safe week-close logic (prevents duplicate AI calls)

AI: Claude Sonnet API

• Generates unique dare/reward/punishment each Sunday

• You can reroll if it's off-vibe

• Prompts trained on our actual personalities (inside jokes work)

Deployment: Vercel (auto-deploys on every GitHub push)
URL-based identity: /henan vs /tarek

• No login needed (it's just a shared app between us)

• Different users see their own color + their own streaks

Design Decisions

Color System (Auto-Assigned)

• Henan's color: Purple

• Tarek's color: Green

• Both Win: Teal (mix)

• Both Lose: Orange (neutral, keeps it light)

Why? Each person has their own identity in the app. You know instantly which outcome happened by the card color alone.

The Reroll Button

Dares/rewards aren't always hits. So you can reroll if Claude generates something that doesn't vibe. This gives the AI a second chance without feeling locked in.

PWA (Progressive Web App)

Instead of "open in browser," it's installed on our home screens like a native app. Faster, feels more real, actually gets used daily.