Vibe CodingGeplaatst door ruben.w19 dagen geleden

SaaS dashboard gebouwd met Next.js en Supabase: volledig met AI

De afgelopen twee weken heb ik een analytics dashboard gebouwd voor mijn startup. Volledig met AI, van database schema tot deployment. Hier is hoe. Tech stack: - Next.js 15 (App Router) - Supabase (auth + database + realtime) - Vercel (hosting) - Tailwind + shadcn/ui (design) - Recharts (grafieken) Ik heb alles in Cursor gedaan met Claude Opus als model. Mijn aanpak was om eerst een claude.md bestand te maken met al onze conventies, de database structuur en de gewenste architectuur. Daarna per feature een branch en Claude het laten bouwen. Wat goed ging: - Auth met Supabase was in 20 minuten klaar (magic links, row level security, het werkte meteen) - Dashboard layout met shadcn components ging heel snel - Recharts grafieken: ik beschreef de data en het gewenste chart type en Claude leverde werkende code Waar ik tegenaan liep: - Realtime subscriptions waren tricky, Claude maakte fouten met de channel setup. Moest ik handmatig fixen - Performance optimalisatie moest ik grotendeels zelf doen. AI genereert werkende code maar niet altijd efficiente code - Testing: Claude schrijft tests maar ze zijn vaak te oppervlakkig Totale bouwtijd: ~40 uur verspreid over 2 weken. Zonder AI was dit makkelijk 3-4 maanden geweest. Vragen? Ik deel graag meer details over specifieke onderdelen.
12
💬 6 reacties🔗 Delen

Reageer

stijn.p19 dagen geleden

Dat probleem met realtime subscriptions herken ik. Supabase realtime is krachtig maar de documentatie is soms onduidelijk over wanneer je broadcast vs presence vs postgres changes moet gebruiken. Ik heb er een halve dag aan verspild voor ik het doorhad.

bas.vdl19 dagen geleden

40 uur voor een volledig dashboard is echt snel. Welke shadcn componenten gebruik je het meest? Ik merk dat de Table en DataTable componenten nog best wat handwerk nodig hebben voor sorteren en filteren.

ruben.w18 dagen geleden

Table, Card, Dialog en Sheet zijn mijn top 4. Voor de table heb ik TanStack Table eronder gezet, dat werkt goed samen met shadcn. Sorteren, filteren en paginatie out of the box. Claude zette het in een keer goed op nadat ik het schema en een voorbeeld rij meegaf.

dennis_9318 dagen geleden

Hoe heb je de auth opgezet? Ik twijfel tussen Supabase Auth en Clerk. Clerk is makkelijker maar je zit weer met een extra dependency. Supabase Auth is ingebouwd maar de docs zijn soms verwarrend.

ruben.w18 dagen geleden

Supabase Auth met magic links. Was verrassend simpel, in 20 min klaar. Je maakt een signUp functie, een login functie en een auth callback route. Row Level Security regelt de rest. Ik had Clerk overwogen maar wilde alles in een platform houden.

niels_8718 dagen geleden

Tip voor je performance probleem: als je veel data rendert in Recharts, gebruik dan useMemo voor je dataset transformaties. Ik had een dashboard met 10k+ datapunten dat lag als een gek tot ik dat deed. Scheelde letterlijk 2 seconden rendertime.