Van 500 Errors tot Livegang: Hoe ik deze site bouwde met mijn AI Co-piloot (en per ongeluk de database wiste)

De "Solo" Developer bestaat niet meer

Je kijkt nu naar de nieuwe versie van Nossie.nl. Strak, snel, en volledig dynamisch. Maar als je denkt dat ik hier wekenlang in een donkere kamer in eentje binaire codes zat te kloppen, heb je het mis.

Ik heb deze site gebouwd met een partner. Een partner die nooit slaapt, die soms briljante oplossingen aandraagt, en die soms... nou ja, keihard liegt over API-endpoints die niet bestaan. Ik heb het natuurlijk over AI (in dit geval Google's Gemini).

Dit is het verhaal van onze samenwerking. Over de tech-stack, de overwinningen, en die keer dat we per ongeluk helemaal opnieuw moesten beginnen.

De Stack: Nuxt 4 & Directus

Het doel was helder: een modern portfolio dat voelt als een Single Page Application (SPA), maar met de beheersbaarheid van een goed CMS.

• Frontend: Nuxt 4 (Vue.js). Voor de snelheid en de developer experience.

• Backend: Directus. Een headless CMS dat je database omtovert tot een API.

Op papier een gouden combinatie. In de praktijk? Een avontuur.

Deel 1: De "500 Error" hel

Het begin ging voorspoedig. De frontend stond, Directus draaide. Maar toen kwam de connectie.

"Hé AI, haal even alle projecten op." AI: "Tuurlijk, hier is een stukje code." Ik: Run code. Browser: 500 Internal Server Error.

We hebben urenlang "ping-pong" gespeeld. Ik stuurde errors uit mijn terminal, de AI analyseerde ze. Wat bleek? We trapten in de klassieke valkuilen van Headless CMS development:

1. De Rechten-Politie: Alles werkte in mijn browser (omdat ik admin was), maar de site zelf kreeg een 403 Forbidden. We waren vergeten de Public Role leesrechten te geven.

2. Object vs String: De AI dacht dat category een simpele tekst was. Directus zei: "Nee vriend, dat is een relationeel object." Resultaat: een crash.

3. Veldnamen raden: De AI gokte dat het veld titel heette. In mijn database was het title (Engels). Een kleine mismatch met grote gevolgen.

Deel 2: Het Grote Database Drama (Oeps...)

Halverwege het project hadden we de structuur lekker staan. Categorieën, tags, projecten... het zag er goed uit. En toen besloten we de boel "even op te schonen".

Ik weet niet meer precies wie de schuldige was (ik geef de AI de schuld, hij geeft mij de schuld), maar door een combinatie van docker volumes verplaatsen en een iets te enthousiaste reset, was alles weg.

Geen projecten meer. Geen tags. Een leeg canvas.

Het leermoment: Op dat moment baal je. Maar eigenlijk was het een zegen. We (her)bouwden de datastructuur, maar nu schoner.

• We maakten mappen aan in Directus (Blog, Portfolio, Global).

• We ruimden de Many-to-Many relaties op.

• We leerden dat je directus_files_id soms "plat" moet slaan op de server voordat je het naar de frontend stuurt.

De tweede keer bouwen ging 10x sneller dan de eerste keer.

Deel 3: De Finishing Touch

Het coolste aan samenwerken met AI is niet dat hij de code schrijft, maar dat hij helpt met denken. Toen ik een notificatiesysteem wilde voor nieuwe contactformulier-inzendingen, stelde de AI voor om Directus Flows te gebruiken. Geen ingewikkelde mail-servers opzetten in Nuxt, maar gewoon een "No-Code" flow in de backend die mij een ping geeft.

Ook de Project Gallery (die chique image slider die je misschien hebt gezien) was een co-productie. Ik had de visie voor de animaties, de AI hielp met de TypeScript logica om de array van afbeeldingen correct uit te lezen.

Conclusie: Is AI de nieuwe developer?

Nee. Als ik blind de code van de AI had gekopieerd, had ik nu een site vol bugs en security-lekken gehad.

• De AI kende de context van mijn specifieke database niet (totdat ik JSON logs voerde).

• De AI vergat soms dat project.gallery leeg kon zijn.

Maar als Co-piloot? Onmisbaar. We hebben deze site in recordtijd gebouwd. Ik was de architect en de troubleshooter, de AI was de razendsnelle metselaar en de documentatie-expert.

Kijk gerust rond op de site. En als je ergens nog een bugje tegenkomt... dan heeft de AI dat gedaan. 😉

Tips voor als je dit ook wilt doen:

1. Loggen is weten: Gebruik console.log in je server routes. De browser vertelt je maar de helft.

2. Check je Types: TypeScript is streng, maar het redt je leven.

3. Directus Permissions: Check altijd of je 'Public' rol mag zien wat je probeert op te halen.

4. Backups: Maak ze. Echt.