De Uitdaging

Opsporing Verzocht (AVROTROS) is een van de meest kritische platforms binnen de publieke omroep, waarbij de betrouwbaarheid en snelheid van de informatievoorziening letterlijk van levensbelang kunnen zijn. De uitdaging was om een platform te bouwen dat onder extreme piekmomenten (tijdens de live-uitzending) stabiel blijft, terwijl de redactie in samenwerking met de politie razendsnel nieuwe zaken, camerabeelden en daderprofielen moet kunnen publiceren en updaten.

De Technische Oplossing

Voor de herbouw van Opsporing Verzocht is gekozen voor een Headless-architectuur die maximale controle over de data-integriteit combineert met een hoogwaardige frontend-ervaring:

• Nuxt 3 Framework: De keuze voor Nuxt 3 stelt ons in staat om gebruik te maken van Hybrid Rendering. Voor statische zaakpagina's gebruiken we snelle caching, terwijl dringende updates realtime via de client worden afgehandeld voor maximale actualiteit.

• Directus als Headless CMS: Implementatie van een strikt datamodel in Directus om de complexe relaties tussen zaken, verdachten, locaties en video-fragmenten te beheren. Hierdoor kan de redactie onder hoge tijdsdruk veilig content publiceren.

• Interactieve Zakenkaart (Leaflet): Een cruciale feature is de integratie van Leaflet.js. Ik heb een dynamische kaart ontwikkeld waarmee bezoekers op basis van hun locatie direct relevante misdaadzaken in de buurt kunnen vinden, wat de drempel voor het geven van tips verlaagt.

• Styling & PostCSS: Gebruik van PostCSS voor een efficiënte en schaalbare CSS-architectuur. Dit zorgt voor optimale prestaties van de stylesheets, wat bijdraagt aan de laadsnelheid op mobiele apparaten in het veld.

De Impact

• Stabiliteit onder hoogspanning: Het platform handelt moeiteloos tienduizenden gelijktijdige sessies af tijdens de wekelijkse tv-uitzending zonder prestatieverlies.

• Redactionele Snelheid: De redactie kan nu binnen seconden een status van een zaak aanpassen (bijv. een zaak 'opgelost' melden), wat essentieel is voor de relevantie van het platform.

• User Engagement via de Kaart: De interactieve Leaflet-kaart verhoogt de gebruikersinteractie aanzienlijk, doordat burgers sneller getriggerd worden door zaken in hun directe omgeving.

Gebruikte Technieken

• Frontend: Nuxt 3 (Vue.js, TypeScript, PostCSS)

• Kaartbibliotheek: Leaflet.js

• CMS: Directus (Node.js / PostgreSQL)

• API: High-performance REST API-koppelingen

• Workflow: Agile ontwikkeling binnen de digitale innovatiestroom van AVROTROS