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

Van idee naar SaaS: een habit tracker voor coaches

Elke week werken coaches met dezelfde frustratie: clients beloven thuis aan hun gewoontes te werken, maar niemand houdt bij wat er echt gebeurt. Een WhatsApp-berichtje hier, een spreadsheet daar. Niets werkt. Vandaag bouw je daar een oplossing voor. Geen gezeur over frameworks of databases, want Claude Code doet het zware werk. Jij stuurt, Claude bouwt.

Wat je aan het einde van deze sessie hebt: een werkende web-app waar coaches clients kunnen uitnodigen, gewoontes kunnen instellen en dagelijkse check-ins kunnen bijhouden. Inclusief een simpel dashboard.

Het probleem en de doelgroep

Doelgroep: Lifecoaches, business coaches en sportcoaches die 5 tot 30 actieve clients hebben.

Het probleem: Coaches weten niet of clients hun opdrachten uitvoeren. Clients vergeten te rapporteren. De coach besteedt de helft van elke sessie aan terugkijken in plaats van vooruitkijken.

De oplossing: Een eenvoudige web-app met twee kanten. De coach-kant: clients aanmaken, habits instellen, voortgang zien. De client-kant: elke dag simpel inchecken (deed ik het of niet?), eventueel een korte notitie.

Tech-stack: Next.js (frontend + API routes), Supabase (database + auth), Tailwind CSS (styling). Gehost op Vercel. Allemaal gratis te starten.

Stap 1: Project opzetten met Claude Code

Open je terminal, ga naar de map waar je projecten zet, en start Claude Code:

npx claude

Geef Claude Code nu de eerste grote prompt om de basis neer te zetten:

Maak een nieuw Next.js 14 project aan met TypeScript en Tailwind CSS. Gebruik de App Router. Noem het project "habitcoach". Installeer ook de Supabase client (@supabase/supabase-js en @supabase/ssr). Maak een .env.local bestand aan met placeholder-waarden voor NEXT_PUBLIC_SUPABASE_URL en NEXT_PUBLIC_SUPABASE_ANON_KEY. Maak ook een lib/supabase.ts bestand met een client-side en server-side Supabase client.

Laat Claude dit volledig uitvoeren. Controleer daarna of het project draait:

npm run dev

Als je http://localhost:3000 ziet werken, ga je door naar stap 2.

Stap 2: Database structuur in Supabase

Ga naar supabase.com, maak een gratis project aan en kopieer je project-URL en anon key naar je .env.local.

Geef Claude Code nu de volgende prompt om je database-schema te bouwen:

Maak een SQL-migratiebestand aan in de map supabase/migrations/ met de naam 001_initial_schema.sql. Het schema bevat de volgende tabellen:

1. profiles - gekoppeld aan auth.users, met velden: id (uuid, FK naar auth.users), full_name (text), role (text: 'coach' of 'client'), coach_id (uuid, nullable, FK naar profiles.id)
2. habits - met velden: id (uuid), coach_id (uuid, FK naar profiles), client_id (uuid, FK naar profiles), title (text), description (text, nullable), active (boolean, default true), created_at (timestamptz)
3. checkins - met velden: id (uuid), habit_id (uuid, FK naar habits), client_id (uuid, FK naar profiles), checked_date (date), completed (boolean), note (text, nullable), created_at (timestamptz)

Voeg Row Level Security toe zodat coaches alleen hun eigen clients en habits zien, en clients alleen hun eigen data. Geef ook de exacte instructies om dit schema in Supabase te runnen via de SQL editor.

Kopieer het gegenereerde SQL naar de Supabase SQL editor en voer het uit. Controleer in de Supabase table editor of je drie tabellen ziet.

Stap 3: Auth en onboarding flow

Nu wil je dat coaches zich kunnen registreren en clients kunnen uitnodigen. Geef Claude Code:

Bouw de auth-flow voor de habitcoach app. Ik heb de volgende pagina's nodig:

1. /login - email + wachtwoord login met Supabase Auth, inclusief een link naar /register
2. /register - registratieformulier met naam, email en wachtwoord. Na registratie wordt automatisch een profiel aangemaakt in de profiles tabel met role='coach'
3. Een middleware.ts in de root die niet-ingelogde gebruikers doorstuurt naar /login wanneer ze /dashboard of /coach proberen te bezoeken

Gebruik de Supabase SSR client voor server-side auth checks. Maak de forms met React state, geen externe form library. Styling met Tailwind, simpel en professioneel.

Clients uitnodigen

Na de auth-flow voeg je client-beheer toe:

Maak een pagina /coach/clients aan. Op deze pagina kan een ingelogde coach:

1. Een lijst zien van al zijn clients (uit de profiles tabel waar coach_id = ingelogde user)
2. Een nieuw formulier om een client uit te nodigen: naam + email. Gebruik Supabase Auth Admin via een API route (/api/invite-client) om de gebruiker aan te maken met een tijdelijk wachtwoord, sla daarna het profiel op met role='client' en coach_id van de ingelogde coach
3. Klikbare clientnamen die doorlinken naar /coach/clients/[clientId]

De API route draait server-side en gebruikt de Supabase service role key (SUPABASE_SERVICE_ROLE_KEY, toe te voegen aan .env.local).

Stap 4: Habits instellen per client

Nu de kern van de app: habits aanmaken en toewijzen. Prompt:

Maak de pagina /coach/clients/[clientId] aan. Op deze pagina ziet de coach:

1. De naam van de client bovenaan
2. Een lijst van actieve habits voor deze client (uit de habits tabel)
3. Een formulier om een nieuwe habit toe te voegen: titel (verplicht) en beschrijving (optioneel). Bij submit wordt de habit opgeslagen in de database met de juiste coach_id en client_id
4. Een toggle-knop per habit om hem actief/inactief te zetten
5. Een sectie "Recente check-ins" met een tabel: datum, habit-naam, voltooid (ja/nee), notitie. Haal de laatste 14 dagen op.

Gebruik Server Components voor de data-fetching en een Client Component voor de formulieren. Invalideer de cache na elke mutatie met revalidatePath.

Stap 5: Het client-dashboard en dagelijkse check-in

Dit is wat de client ziet. Eenvoud is hier key:

Maak een pagina /dashboard voor ingelogde clients. Op deze pagina:

1. Bovenaan: een begroeting met de naam van de client en de datum van vandaag
2. Een lijst van alle actieve habits van deze client
3. Per habit: een grote checkbox of toggle met de titel en beschrijving. Als de client vandaag al heeft ingecheckt, toon dan de status (groen = voltooid, grijs = niet voltooid)
4. Bij het aanklikken van een habit opent een kleine modal of inline-sectie met: "Heb je dit vandaag gedaan?" (ja/nee knoppen) en een optioneel tekstveld voor een notitie
5. Na opslaan wordt de checkin weggeschreven naar de database. Als er al een checkin is voor vandaag en dit habit, update die dan (upsert op habit_id + client_id + checked_date)

Maak het mobiel-vriendelijk want coaches gebruiken dit op hun telefoon.

Coach-overzicht: voortgang in één oogopslag

Maak een pagina /coach/dashboard. Toon:

1. Het totaal aantal actieve clients
2. Een lijst van clients met per client: naam, aantal actieve habits, en hoeveel procent van de habits gisteren is ingevuld (check-ins van gisteren / totaal actieve habits * 100)
3. Markeer clients rood als ze 2 of meer dagen geen enkele check-in hebben gedaan

Haal alle data op met een enkele Supabase query met joins. Geef de query ook als commentaar in de code.

Stap 6: Afwerking en deployment

Voordat je deployt, laat Claude Code nog twee dingen regelen:

Voeg een eenvoudige navigatiebalk toe die verschijnt voor ingelogde gebruikers. Voor coaches: links naar Dashboard, Mijn Clients en Uitloggen. Voor clients: links naar Mijn Habits en Uitloggen. Detecteer de rol uit het profiel via een Server Component in de root layout.

En dan deployment:

Maak een vercel.json aan in de root met de juiste configuratie voor Next.js. Schrijf ook een README.md met de stappen om dit project te deployen op Vercel, inclusief welke environment variables ingesteld moeten worden in het Vercel dashboard.

Push naar GitHub en koppel aan Vercel. Binnen 2 minuten staat je app live.

git init
git add .
git commit -m "initial habitcoach MVP"
git remote add origin https://github.com/jouwgebruikersnaam/habitcoach.git
git push -u origin main

Wat te checken na afloop

Loop deze checklist door voordat je de app aan je eerste coach laat zien:

• Kan je inloggen als coach en een client aanmaken?
• Zie je de client in de lijst op /coach/clients?
• Kan je een habit aanmaken voor die client?
• Log in als client: zie je de habit op /dashboard?
• Inchecken als client: verschijnt de check-in in het coach-overzicht?
• Werkt de rode markering voor clients die 2+ dagen niet hebben ingecheckt?
• Werkt de app op mobiel (test in Chrome DevTools)?

Wat zou je daarna nog willen toevoegen?

Een MVP is een MVP. Dit zijn de logische volgende stappen die je op een volgende bouwdag kunt aanpakken:

• E-mailreminders: stuur clients via Resend of Supabase Edge Functions elke avond om 20:00 een reminder als ze nog niet hebben ingecheckt
• Weekreport voor de coach: een automatisch PDF-overzicht per client, gegenereerd met een Edge Function, verstuurd elke maandag
• Streak-teller: toon hoe veel dagen op rij een client een habit heeft voltooid, want dat motiveert enorm
• Betalingen: koppel Stripe zodat je maandelijks per actieve coach kunt factureren. De gratis tier: max 3 clients. Betaald: onbeperkt
• Notificaties in de app: een eenvoudig notificatiesysteem zodat de coach een seintje krijgt als een client voor het eerst incheckt

De basis staat. Nu is het jouw taak om te bepalen wat echt waarde toevoegt voor jouw eerste gebruikers, en dát als volgende te bouwen.