Over NuKoken
Het verhaal van een uit de hand gelopen hobby project dat begon als een simpel receptenboekje en uitgroeide tot een volledige website vol moderne functionaliteiten.
🚀 Van Simpel naar Ingewikkeld
Fase 1: De Basis
Gewoon een paar recepten online zetten
Geen wordpress, dat zou echt te laf zijn. Gewoon lekker vibe coden en het begon met een beetje HTML en CSS. Een simpele lijst met recepten, wat styling, klaar toch? Maar toen dacht ik: "Het zou handig zijn als ik kon zoeken..."
Fase 2: Zoekfunctionaliteit
JavaScript toevoegen voor interactiviteit
Oké, dus JavaScript erbij. Een zoekbalk, wat filters op categorie en bereidingstijd. Werkte prima! Maar toen dacht ik: "Een database zou eigenlijk handiger zijn..."
Fase 3: Database & Backend
Next.js, Neon database, TypeScript
Nu wordt het serieus! Next.js voor server-side rendering, een PostgreSQL database via Neon, TypeScript voor type safety. Plots had ik een "echte" web applicatie...
Fase 4: Design & UX
Tailwind CSS, logo design, responsive layout
Het moest er ook mooi uitzien! Tailwind CSS voor styling, een eigen logo ontwerpen, responsive design voor mobiel. En natuurlijk dark mode overwogen (maar niet geïmplementeerd... nog niet).
Fase 5: Moderne Features
Contact formulieren, analytics, optimalisaties
Nu moesten er formulieren bij voor feedback, email integratie, image optimalisatie, SEO metadata, performance optimalisaties... Het simple receptenboekje was officieel een full-stack applicatie geworden!
🛠️ Wat er nu allemaal in zit
🔍 Geavanceerd Zoeken
Zoek op ingrediënten, tags, bereidingstijd, moeilijkheidsgraad
🗄️ Database Integratie
PostgreSQL via Neon voor schaalbare data opslag
📱 Responsive Design
Werkt perfect op desktop, tablet en mobiel
📧 Contact Formulier
Direct email verzenden via Nodemailer
🎨 Custom Logo
Zelf ontworpen logo en huisstijl
⚡ Performance
Image optimalisatie, caching, snelle laadtijden
🔗 SEO Vriendelijk
Metadata, sitemap, search engine optimalisatie
📊 Analytics Ready
Server-side tagging en tracking mogelijkheden
🍪 Cookie Management
GDPR compliant cookie banner (work in progress)
💻 Technische Stack
Frontend
- • Next.js 14 - React framework met server-side rendering
- • TypeScript - Voor type safety en betere development
- • Tailwind CSS - Utility-first CSS framework
- • React Hooks - Voor state management
Backend & Database
- • Next.js API Routes - Server-side endpoints
- • PostgreSQL - Relationele database via Neon
- • Nodemailer - Email functionaliteit
- • Vercel - Hosting en deployment
🍽️ Deel je eigen recepten!
Heb je een geweldig recept dat je wilt delen? Of feedback over de website? Ik hoor graag van je!