Twee decennia complexe projecten, opgeleverd naar productie.

Context
Voor Edunivo werkte ik als senior frontend developer / frontend lead aan de doorontwikkeling van Musicbox: een uitgebreid webplatform voor muziekonderwijs. Mijn rol lag niet alleen in het bouwen van nieuwe features, maar vooral ook in het verhogen van de technische kwaliteit, schaalbaarheid en onderhoudbaarheid van de applicatie.

Wat ik bouwde
Ik werkte aan complexe functionaliteit voor verschillende gebruikersrollen, waaronder studenten, docenten en superadmins. Denk aan beheerfunctionaliteit, trainer-progress flows, vertaalworkflows, PDF-viewer verbeteringen en drag-and-drop beheerinterfaces.

Technische basis
Daarnaast heb ik veel geïnvesteerd in de technische basis van het project: betere TypeScript-types, type-safe vertalingen, Storybook, geautomatiseerde tests, ESLint/Prettier, GitHub Actions en snellere CI/CD-workflows. Daarmee werd niet alleen mijn eigen output hoger, maar werd ook de ontwikkelervaring en kwaliteit voor het hele team verbeterd.

AI-assisted development
Een belangrijk onderdeel van mijn werkwijze was het bewust inzetten van AI-assisted development. Niet als vervanging van senior engineering, maar als versneller binnen een gecontroleerd proces: AI helpt bij snelheid en herhalend werk, terwijl architectuurkeuzes, review, kwaliteit en verantwoordelijkheid bij mij blijven.

Resultaat

• Een hogere ontwikkelsnelheid.
• Betere testbaarheid.
• Sterkere type-safety.
• Meer consistente codekwaliteit.
• Een robuustere basis voor verdere productontwikkeling.

Context & uitdaging
Twee eerdere pogingen met meerdere developers leverden geen onderhoudbare, productieklare configurator op. Het bedrijf had een robuuste, gebruiksvriendelijke oplossing nodig die complexe afhankelijkheidslogica aankon, ongeldige combinaties voorkwam en makkelijk uit te breiden was.

Oplossing
Ik bouwde een React/TypeScript-applicatie met URL als Single Source of Truth (deep-linkbare, deelbare configuraties), een type-safe GraphQL-laag (codegen, strikte typings) en een modulaire componentarchitectuur gedocumenteerd in Storybook. Strikte validaties en slimme UI-flows begeleiden gebruikers stap voor stap, blokkeren onmogelijke combinaties en lichten keuzes toe met directe feedback.

Belangrijkste functionaliteit

• Gedetailleerde configuratie: afmetingen, vakverdelingen, draairichtingen, profielen, afwerkingen, glasopties, accessoires.
• Directe feedback & validatie: alleen geldige combinaties; duidelijke error-, lege en laadstates.
• Deelbare URL's: configuraties openen, bewerken en hergebruiken via één link.
• Toegankelijkheid & UX: toetsenbordnavigatie, ARIA-attributen, consistent focusbeheer.
• Performance: gerichte memoization en code-splitting waar dat loont.

Architectuur & kwaliteit

• Frontend: React + TypeScript (strict), Zustand voor state, React Router, Storybook voor documentatie.
• Data: GraphQL met schema-gedreven types en veilige datamapping, robuuste foutafhandeling.
• Kwaliteit & DX: Jest + React Testing Library, Playwright-basis, ESLint/Prettier, pre-commit hooks.
• CI/CD: GitHub Actions-gates voor lint/test/build; voorspelbare, herhaalbare releases.

Impact

• Succesvolle turnaround: als solo developer opgeleverd naar live productie — sneller, met minder mensen en op hogere kwaliteit dan eerdere pogingen.
• Schaalbaar fundament: de architectuurpatronen worden nu platformbreed toegepast in het e-commerceplatform.

Links
Live · Artikel