Jabeja
Onze eigen digitale showcase van expertise
Webdesign & Development
Eigen Website
Doorlopend
Next.js 16, React 19, TypeScript, PostgreSQL
De context
Als webdesign bureau is onze website meer dan een visitekaartje. Het is een levend bewijs van onze expertise, een showcase van wat we kunnen bouwen en een leadgeneratie machine.
De vorige versie van jabeja.be deed zijn werk, maar weerspiegelde niet meer onze technische capaciteiten. We wilden een website die niet alleen mooi is, maar ook technisch op het hoogste niveau staat.
Dit project was een kans om zonder compromissen te bouwen. Geen legacy code, geen beperkingen van klantbudgetten, gewoon de beste oplossing voor elk onderdeel.
De uitdaging
We stelden ambitieuze doelen voor de nieuwe website:
- Performance: Sub-2 seconde laadtijden, Lighthouse score van 100
- SEO: Volledige Schema.org implementatie, dynamische sitemap, perfect geoptimaliseerde meta tags
- Schaalbaarheid: Een content systeem dat moeiteloos groeit van 10 naar 100+ artikelen
- Security: GDPR-compliant, multi-layer spam bescherming, veilige admin authenticatie
- Developer Experience: Makkelijk te onderhouden, type-safe codebase
De grootste technische uitdaging was het bouwen van een automatisch internal linking systeem voor de Academy sectie, dat keywords herkent en intelligent linkt naar relevante artikelen.
Onze aanpak
We kozen voor een moderne JAMstack architectuur met Next.js als fundament:
- Next.js 16.1 App Router: De nieuwste versie met Turbopack voor snelle builds
- React 19.2: Server Components voor optimale performance
- TypeScript 5.9: Strict mode voor maximale type safety
- Tailwind CSS 4.1: Utility-first styling met custom design tokens
- PostgreSQL + Prisma: Zelf-gehoste database met type-safe ORM
- Cloudflare R2: S3-compatible storage voor afbeeldingen met globaal CDN
- Resend: Betrouwbare transactionele email delivery
De architectuur is bewust gekozen voor schaalbaarheid. Server Components renderen waar mogelijk, Client Components alleen waar interactiviteit nodig is.
Academy & Content Systeem
Het hart van de website is de Academy sectie, ons kennisplatform met 14+ artikelen over webdesign, SEO en development.
Technische highlights:
- MDX Content: Markdown met embedded React componenten voor rijke content
- Automatische Internal Linking: Remark plugin die keywords herkent en linkt
- AI Image Generation: FAL.ai integratie voor het genereren van blog thumbnails
- Scheduled Publishing: Plan posts vooruit met automatische publicatie via cron jobs
- Reading Time: Automatisch berekende leestijd per artikel
- Related Posts: Scoring algoritme op basis van categorie en tags
Het internal linking systeem analyseert alle gepubliceerde posts, extraheert 2-4 woord keywords uit titels en tags, en linkt automatisch bij eerste vermelding. Dit verbetert zowel SEO als user experience.
Admin Panel & Beveiliging
Een volledig beveiligd admin panel voor content beheer:
- NextAuth.js: JWT-based authenticatie met secure cookies
- Middleware Protection: Server-side check op admin routes
- Role-based Access: Admin en super_admin rollen
- Soft Delete: Data wordt nooit definitief verwijderd
- Export Functionaliteit: CSV export van submissions
Formulieren zijn beschermd met meerdere lagen:
- Honeypot Velden: Onzichtbaar voor gebruikers, gevuld door bots
- Timing Checks: Submissions onder 3 seconden worden geweigerd
- Rate Limiting: 3-5 requests per minuut per IP
- Zod Validatie: Server-side schema validatie
- Fake Success: Bots krijgen een success response om detectie te verhullen
SEO & Performance
Elke pagina is geoptimaliseerd voor zoekmachines en snelheid:
- Structured Data: Organization, LocalBusiness, BlogPosting, FAQ, BreadcrumbList schemas
- Dynamic Sitemap: 60+ URLs automatisch gegenereerd
- ISR: Incremental Static Regeneration voor instant page loads
- Image Optimization: Next.js Image component met WebP conversie
- Core Web Vitals: LCP < 2.5s, FID < 100ms, CLS < 0.1
Analytics stack met privacy-first aanpak:
- Google Analytics 4: Met consent mode voor GDPR compliance
- Leadinfo: B2B lead identificatie
- Microsoft Clarity: Session recordings en heatmaps
- Cookie Banner: Duidelijke opt-in/opt-out zonder dark patterns
Het resultaat
Een website die onze expertise demonstreert op elk niveau:
- Lighthouse Score: Consistent 100/100 op alle metrics
- Build Tijd: Onder 60 seconden voor volledige rebuild
- First Load: Onder 2 seconden op gemiddelde verbinding
- Academy: 14+ diepgaande artikelen over webdesign en SEO
- Case Studies: 10+ uitgewerkte projecten met resultaten
- Lead Generatie: Geoptimaliseerde formulieren met dubbele bevestiging
De website is niet alleen een showcase, maar ook een productie-ready template. Alle patronen, componenten en architectuur beslissingen worden hergebruikt in klantprojecten.
Dit is waar we voor staan: websites bouwen die niet alleen mooi zijn, maar technisch op het hoogste niveau functioneren.
Resultaten
Ook een project in gedachten?
Laten we bespreken hoe we jouw digitale aanwezigheid kunnen versterken.