Van idee naar SaaS: bouw een habit tracker voor coaches met Claude Code

Van idee naar SaaS: een habit tracker voor coaches

Stel je voor: je bent lifecoach of business coach. Je werkt met 10 tot 30 klanten tegelijk. Elke week checkt een klant in over z'n gewoontes. 'Heb je drie keer gesport?' 'Heb je je ochtend-routine gedaan?' Op dit moment gaat dat via WhatsApp, losse Google Sheets, of een duur platform dat eigenlijk voor grote corporate-programma's is gebouwd.

Er zit een echte pijn: coaches missen een simpel, branded overzicht van wie het doet en wie niet. En klanten willen erkenning voor hun progressie.

Dit is precies het soort niche-SaaS dat jij in een weekend kunt bouwen met Claude Code, zelfs als je geen developer bent.

Het probleem en de doelgroep

Doelgroep: ZZP-coaches (life, health, business) met een actieve klantenkring van 5 tot 50 mensen.

Pijn: Geen centrale plek om habit-check-ins bij te houden. Handmatig rondfragen kost tijd. Excel is niet sexy voor klanten.

Oplossing: Een mini-SaaS waarbij:

• De coach habits aanmaakt per klant of per groep
• Klanten dagelijks/wekelijks inchecken via een simpele webpagina (geen app nodig)
• De coach een dashboard ziet met streaks, percentages en wie achterblijft

Naam voor dit voorbeeld: HabitLoop

Stap 1: Zet de projectstructuur op met Claude Code

Open Claude Code in een lege map en geef deze eerste prompt:

Maak een nieuw Next.js 14 project met App Router, Tailwind CSS en TypeScript. De app heet HabitLoop en is een habit tracker SaaS voor coaches. Maak de volgende mapstructuur aan:

• /app met een coach-dashboard route en een client check-in route
• /components voor herbruikbare UI-onderdelen
• /lib voor Supabase client en helper-functies Voeg ook een basis README.md toe met een beschrijving van het project.

Claude Code zet de structuur op, inclusief de juiste imports en config-bestanden. Controleer daarna of je package.json klopt en run npm install.

Stap 2: Bouw het datamodel in Supabase

Ga naar Supabase, maak een nieuw project aan, en geef Claude Code daarna deze prompt:

Schrijf de SQL-migratie voor een habit tracker SaaS met de volgende tabellen:

• coaches (id, name, email, created_at)
• clients (id, coach_id, name, email, created_at)
• habits (id, coach_id, client_id, title, frequency (daily/weekly), created_at)
• check_ins (id, habit_id, client_id, checked_at, note) Voeg Row Level Security toe zodat een coach alleen zijn eigen data ziet. Geef ook de Supabase TypeScript types die ik kan gebruiken in mijn project.

Je krijgt kant-en-klare SQL die je in de Supabase SQL-editor plakt. De TypeScript types plak je in /lib/database.types.ts.

-- Voorbeeld van wat Claude Code genereert
create table habits (
  id uuid primary key default gen_random_uuid(),
  coach_id uuid references coaches(id) on delete cascade,
  client_id uuid references clients(id) on delete cascade,
  title text not null,
  frequency text check (frequency in ('daily', 'weekly')) default 'daily',
  created_at timestamptz default now()
);

alter table habits enable row level security;

create policy "Coach ziet eigen habits"
  on habits for all
  using (coach_id = auth.uid());

Stap 3: Bouw het coach-dashboard

Nu de echte UI. Geef Claude Code deze prompt:

Bouw de coach-dashboard pagina op /app/dashboard/page.tsx. Deze pagina toont:

1. Een lijst van alle klanten van de ingelogde coach
2. Per klant: hoeveel habits er actief zijn en de check-in score van de afgelopen 7 dagen (percentage)
3. Een knop om een nieuwe klant toe te voegen (modal met naam en e-mail)
4. Een knop per klant om habits te beheren Gebruik Tailwind voor de styling. Haal data op via Supabase. Gebruik loading states en laat een lege state zien als er nog geen klanten zijn.

Claude Code genereert de volledige pagina. Let op: vraag daarna specifiek om de lege staat en loading state als die er nog niet goed uitzien.

// Fragment van wat je terugkrijgt:
export default async function Dashboard() {
  const supabase = createServerClient()
  const { data: clients } = await supabase
    .from('clients')
    .select('*, habits(id, check_ins(checked_at))')

  if (!clients || clients.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen">
        <p className="text-gray-500">Nog geen klanten. Voeg je eerste klant toe.</p>
        <AddClientButton />
      </div>
    )
  }
  // ... rest van de component
}

Stap 4: Bouw de klant check-in pagina

Dit is de pagina die klanten krijgen, zonder dat ze hoeven in te loggen. Gebruik een geheime token per klant.

Maak een publieke check-in pagina op /app/checkin/[token]/page.tsx. De token is een unieke string die gekoppeld is aan een client in de database. De pagina:

1. Laadt alle actieve habits van die klant
2. Toont per habit een simpele checkbox met de naam van de habit
3. Bij submit slaat het een check_in op in Supabase voor elke aangevinkte habit
4. Toont een success-bericht na het opslaan De pagina moet ook werken op mobiel. Voeg een motiverende begroeting toe met de naam van de klant.

Deze pagina heeft geen authenticatie nodig. Claude Code regelt de token-lookup en de insert.

Stap 5: Voeg streak-logica en e-mail reminders toe

Hier wordt het interessant. Geef deze twee aparte prompts:

Prompt voor streak-berekening:

Schrijf een helper-functie in /lib/streaks.ts die voor een gegeven habit_id de huidige streak berekent. Een streak telt het aantal opeenvolgende dagen (of weken bij weekly habits) waarop een check_in is gedaan. Retourneer een getal. Schrijf ook een functie die de longest streak ooit berekent.

Prompt voor e-mail reminders:

Maak een API-route op /app/api/send-reminders/route.ts die ik kan aanroepen via een cron-job. De route:

1. Haalt alle klanten op die vandaag nog niet hebben ingecheckt
2. Stuurt ze een reminder-e-mail via Resend met een directe link naar hun check-in pagina Gebruik de Resend SDK. Voeg de benodigde environment variabelen toe aan .env.local.example.

# .env.local die Claude Code aanmaakt
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
RESEND_API_KEY=
NEXT_PUBLIC_APP_URL=

Stap 6: Maak het verkoopbaar met een simpele Stripe-integratie

Voeg een Stripe Checkout toe waarmee coaches een maandabonnement van 29 euro kunnen afsluiten. Gebruik Stripe Checkout (hosted page, geen custom UI nodig). Maak:

1. Een API-route /app/api/checkout/route.ts die een Checkout Session aanmaakt
2. Een webhook-handler /app/api/webhooks/stripe/route.ts die na betaling een is_active veld op de coach-record zet in Supabase
3. Middleware die niet-actieve coaches doorstuurt naar een upgrade-pagina Geef ook de stappen om dit te testen met de Stripe CLI.

Stap 7: Deploy naar Vercel

Maak een vercel.json aan met de juiste configuratie voor deze Next.js app. Geef ook een checklist van alle environment variabelen die ik in het Vercel dashboard moet instellen, en leg uit hoe ik de Supabase connection string goed configureer voor server-side rendering.

Na deze prompt heb je alles wat je nodig hebt om te deployen. git push naar GitHub, koppel in Vercel en je bent live.

Wat zou je daarna nog willen toevoegen?

Een werkende MVP is nu in principe klaar. Maar er zijn logische volgende stappen als je verder wilt bouwen:

• Groeps-habits: niet per klant maar per cohort, handig voor groepsprogramma's
• Foto check-ins: klanten uploaden een foto als bewijs (sport, maaltijd)
• Coach-notities: de coach kan per check-in feedback geven
• Voortgangs-rapport: automatisch een weekoverzicht als PDF naar de klant
• White-label: coaches kunnen hun eigen logo en kleur instellen
• Integratie met Calendly: automatisch habits aanmaken na een intake-gesprek

Elk van deze features is een aparte Claude Code-sessie van een paar uur. Begin klein, valideer met echte coaches (zoek er 2 of 3 in je netwerk die gratis willen proberen), en bouw alleen wat mensen echt vragen.

Dat is de manier waarop een niche-SaaS levensvatbaar wordt: niet door alle features, maar door de pijn van een specifieke doelgroep precies goed te raken.