Hoe AI en Supabase ZZP'ers 2 Uur Per Offerte Besparen: Het Verhaal Achter HupOfferte

De meeste developers bouwen software voor andere developers. Dat is veilig en comfortabel, je begrijpt je gebruiker omdat je zelf je gebruiker bent. Maar de meest bevredigende projecten die ik heb gebouwd, lossen problemen op voor mensen die niets met code te maken hebben.

HupOfferte is daar het bewijs van.

Het probleem

ZZP'ers in de bouw, schilderwerk en installatie besteden gemiddeld 2 uur per offerte. Twee uur voor een document dat misschien niet eens wordt geaccepteerd. Vermenigvuldig dat met 5 tot 10 offertes per week, en je hebt een vakman die een volle werkdag per week kwijt is aan administratie in plaats van zijn vak.

Dat is niet alleen inefficient. Het is demotiverend. Veel vakmensen sturen uiteindelijk te weinig offertes, of schrijven ze zo kort dat ze niet professioneel overkomen.

De oplossing

HupOfferte reduceert die 2 uur naar 5 minuten. De vakman vult een multi-step formulier in met basisinformatie: type werk, omvang, specifieke wensen. OpenAI's GPT-4 genereert vervolgens een volledige, professionele offerte op maat.

Geen templates. Geen copy-paste. Elke offerte is uniek en afgestemd op het specifieke project.

Waarom Supabase

Bij het kiezen van de backend had ik meerdere opties: Firebase, een eigen Laravel API, of Supabase. De keuze viel op Supabase om drie redenen:

1. PostgreSQL onder de motorkap

Supabase draait op een volwaardige PostgreSQL database. Dat betekent echte relaties, complexe queries, en Row Level Security op databaseniveau. Voor een applicatie die klantgegevens, offertes en betalingen beheert, is dat geen luxe maar een vereiste.

2. Authenticatie uit de doos

Het auth-systeem van Supabase is verrassend compleet. E-mail/wachtwoord, magic links, OAuth: het werkt zonder dat je weken bezig bent met het opzetten van een eigen auth-laag. En het integreert naadloos met Row Level Security, zodat elke gebruiker alleen zijn eigen data ziet.

3. Realtime zonder gedoe

Wanneer een klant een offerte bekijkt, wil de vakman dat weten. Supabase Realtime maakt dit mogelijk met een paar regels code. Geen WebSocket-servers opzetten, geen extra infrastructuur.

De architectuur

De tech stack:

• Frontend: Next.js 16, React 19, TypeScript 5, Tailwind CSS 4
• UI: shadcn/ui + Radix UI voor toegankelijke componenten
• Backend: Supabase PostgreSQL met Row Level Security
• AI: OpenAI GPT-4 API voor offertegeneratie
• Betalingen: bunq API voor het credit-systeem
• PDF: React PDF voor export met eigen branding
• Deployment: Vercel

De flow is bewust simpel gehouden:

1. Gebruiker logt in (Supabase Auth)
2. Vult het multi-step offerte formulier in (React Hook Form + Zod validatie)
3. AI genereert de offerte (server-side API route naar OpenAI)
4. Gebruiker reviewt en past aan (live preview)
5. Export naar PDF of deel via e-mail/WhatsApp
6. Klant bekijkt de offerte (publieke weergave, view tracking)

Het credit-systeem

Een belangrijk ontwerpbesluit: geen abonnementen. ZZP'ers hebben een hekel aan vaste maandelijkse kosten voor tools die ze niet elke dag gebruiken. In plaats daarvan werkt HupOfferte met credits:

• Eerste offerte: gratis
• 5 credits: 10 euro
• Enkele credit: losse aankoop mogelijk

Dit verlaagt de drempel enorm. Een vakman kan het proberen zonder commitment, en betaalt alleen als hij daadwerkelijk offertes maakt.

Row Level Security: de onzichtbare held

Een van de krachtigste features van Supabase die weinig aandacht krijgt: Row Level Security (RLS). Met RLS definieer je op databaseniveau wie wat mag zien en doen.

Voor HupOfferte betekent dit:

• Een gebruiker ziet alleen zijn eigen offertes
• Een gebruiker kan alleen zijn eigen klantgegevens bewerken
• Publieke offerte-links zijn toegankelijk voor iedereen, maar alleen lezen
• Admin-operaties zijn beperkt tot geautoriseerde gebruikers

Dit is geen applicatie-logica die omzeild kan worden. Het is database-level beveiliging. Zelfs als er een bug in de frontend zit, kan een gebruiker nooit bij de data van een ander.

De impact

Het resultaat in cijfers:

• Tijdsbesparing: 2+ uur per offerte teruggebracht naar 5 minuten
• Kwaliteit: Professionele, op maat gemaakte offertes die de acceptatiegraad verhogen
• Toegankelijkheid: Volledig Nederlands, mobiel-vriendelijk, geen technische kennis vereist

Maar de echte impact zit in de verhalen. Een schilder die me vertelde dat hij nu drie keer zoveel offertes stuurt als voorheen. Een installateur die zei dat zijn klanten opmerkten dat zijn offertes er "ineens zo professioneel" uitzien.

Dat is waarom je software bouwt.

Wat ik geleerd heb

Drie inzichten die ik meeneem naar elk volgend project:

1. Bouw voor echte mensen. De beste technische architectuur is waardeloos als je gebruiker het niet snapt. Elke UI-beslissing bij HupOfferte is getest met mensen die geen technische achtergrond hebben.

2. Supabase is productie-klaar. Ik was aanvankelijk voorzichtig om het voor een betalend product te gebruiken. Die twijfel was onterecht. De combinatie van PostgreSQL, Auth, RLS en Realtime is solide.

3. AI is een middel, geen doel. GPT-4 is de motor achter de offertegeneratie, maar de waarde zit in de workflow eromheen. De AI alleen is niet genoeg. Het is de integratie met een goed ontworpen gebruikerservaring die het verschil maakt.