Terug naar projecten
CMSEigen demo van VirtuoLab

ContentLab · Contentbeheersysteem

Demo: een CMS voor de website van het fictieve Verhoeven Installatietechniek, met artikelen, vacatures, productpagina's, review, inplannen en live voorbeeld.

Screenshot van de demo ContentLab · Contentbeheersysteem (CMS), gebouwd door VirtuoLab

Over ContentLab · Contentbeheersysteem

Soort
Eigen demo van VirtuoLab
Technologieën
ReactNext.jsTypeScriptTailwind CSS

ContentLab is een hands-on demo van VirtuoLab: een contentbeheersysteem voor de website van Verhoeven Installatietechniek, een verzonnen installatiebedrijf voor warmtepompen en zonne-energie. De demo is gebouwd met Next.js als React-pagina in TypeScript. Ten eerste toont de contentlijst 12 voorbeelditems: artikelen, vacatures, productpagina's en vaste pagina's, met de status gepubliceerd, gepland, in review of concept. Zoeken en filteren op type, status en auteur werken. Ten tweede opent een klik een editor met een Markdown-werkbalk, eigen velden per contenttype, een samenvatting die ook als metaomschrijving dient, en knoppen om te publiceren of in te plannen. Daarnaast werkt een voorbeeld op desktop- en mobiele breedte bij terwijl je typt. Mobiel telt: volgens StatCounter kwam ongeveer 65% van het Nederlandse webverkeer van telefoons in september 2026. ContentLab heeft geen database: wijzigingen blijven bewaard tot de pagina ververst, en alle content is voorbeelddata.

CMSRedactieflowLive preview
01

Wat laat de demo ContentLab zien?

De demo ContentLab is een contentbeheersysteem voor de website van Verhoeven Installatietechniek, een verzonnen installatiebedrijf, door VirtuoLab gebouwd met React, Next.js en TypeScript. Een rondleiding kent drie stappen. Stap 1 is de contentlijst met 12 voorbeelditems: artikelen, vacatures, productpagina's en vaste pagina's, elk met de status gepubliceerd, gepland, in review of concept. Zoeken en filteren op type, status en auteur werken. Stap 2 is een klik op een item, die de editor opent met een Markdown-werkbalk en een teller voor woorden en leestijd. Elk contenttype heeft eigen velden, zoals salaris bij een vacature of prijs bij een product, en de samenvatting dient ook als metaomschrijving voor Google. Stap 3 is publiceren: direct, ter review of ingepland op datum en tijd, met vertalingen in het Nederlands, Engels en Duits. Een voorbeeld op desktop- en mobiele breedte werkt bij terwijl je typt. Mobiel telt: 68% van de Nederlandse telefoons draaide op het besturingssysteem van Google (Android) en 32% op iOS, volgens StatCounter in september 2026. Schermen voor media, contenttypes, talen, gebruikers en instellingen maken de demo compleet, maar er is geen database.

02

Welk probleem lost een CMS op maat zoals ContentLab op, en voor wie?

Een CMS op maat zoals ContentLab is een beheeromgeving die past bij de content van één bedrijf. Het lost het probleem op van redacteuren die het resultaat van een wijziging pas zien als de pagina live staat. Marketingteams, uitgevers, webshops met veel productpagina's en organisaties met content in meerdere talen hebben er het meeste aan. Een live preview per apparaat toont binnen een seconde wat een bezoeker ziet en scheelt correctierondes. Duidelijke statussen geven een klein team een eenvoudige goedkeuringsflow: 1) concept, 2) review en 3) gepubliceerd. Ook kan een CMS op maat velden afdwingen voor vindbaarheid via Google, zoals een SEO-titel. Maatwerk loont vooral als content een vaste structuur heeft, zoals producten, vacatures of locaties. Voor een eenvoudige bedrijfswebsite is WordPress vaak de betere en goedkopere keuze: volgens W3Techs draaide WordPress in oktober 2026 op 39,7% van alle websites. Wel vraagt WordPress onderhoud, want 91% van de nieuwe WordPress-kwetsbaarheden in 2025 zat in plugins (Patchstack 2026). VirtuoLab geeft over beide opties een eerlijk advies.

03

Hoe bouwt VirtuoLab een contentbeheersysteem voor een echt bedrijf?

VirtuoLab bouwt een contentbeheersysteem voor een echt bedrijf vanuit het contentmodel, niet vanuit de editor. Stap 1 is een scopegesprek over contenttypes, velden, talen, rollen en de goedkeuringsflow. Stap 2 is ontwerp en validatie: de editor en de preview worden getest met echte teksten. Stap 3 is bouwen en testen, bijvoorbeeld als headless opzet met Next.js voor de website en PostgreSQL voor de content. In een echt project voegt VirtuoLab echte inlog met rollen, een database, mediaopslag via Amazon S3 en een publicatiegeschiedenis toe, want de demo toont rollen en media alleen als scherm. Media verdienen aandacht: volgens de Web Almanac 2025 van HTTP Archive is het grootste element op 76% van de mobiele pagina's een afbeelding. Google noemt een laadtijd tot 2,5 seconde voor dat element goed, en slechts 62% van de mobiele pagina's haalt dat. Uploads worden daarom automatisch verkleind. Tot slot is stap 4 lancering en support. Als indicatie kost een middelgrote web app €10.000 tot €25.000. De doorlooptijd is 6 tot 12 weken, en de exacte prijs volgt na een gratis kennismaking.