Two decades of complex projects, shipped to production.

Context
For Edunivo I worked as senior frontend developer / frontend lead on the continued development of Musicbox: an extensive web platform for music education. My role was not only building new features, but above all raising the technical quality, scalability and maintainability of the application.

What I built
I worked on complex functionality for several user roles — students, teachers and superadmins. Think management functionality, trainer-progress flows, translation workflows, PDF-viewer improvements and drag-and-drop management interfaces.

Technical foundation
I invested heavily in the technical base of the project: better TypeScript types, type-safe translations, Storybook, automated tests, ESLint/Prettier, GitHub Actions and faster CI/CD workflows. This raised not only my own output, but also the developer experience and quality for the whole team.

AI-assisted development
A deliberate part of my way of working was using AI-assisted development — not as a replacement for senior engineering, but as an accelerator within a controlled process: AI helps with speed and repetitive work, while architecture decisions, review, quality and responsibility stay with me.

Result

• Higher development speed.
• Better testability.
• Stronger type-safety.
• More consistent code quality.
• A more robust base for further product development.

Context & challenge
Two prior multi-developer attempts failed to deliver a maintainable, production-ready configurator. The business needed a robust, user-friendly solution that could express complex dependency logic, prevent invalid combinations, and be easy to extend.

Solution
I built a React/TypeScript application with URL as Single Source of Truth (deep-linkable, shareable configurations), a type-safe GraphQL layer (codegen, strict typings), and a modular component architecture documented in Storybook. Strict validations and smart UI flows guide users step-by-step, blocking impossible combinations and explaining choices with instant feedback.

Key capabilities

• Detailed configuration: dimensions, pane layouts, opening directions, profiles, finishes, glass options, accessories.
• Instant feedback & validation: only valid combinations; clear error/empty/loading states.
• Shareable URLs: open, edit, and re-use configurations via a single link.
• Accessibility & UX: keyboard navigation, ARIA attributes, consistent focus management.
• Performance: targeted memoization and code-splitting where beneficial.

Architecture & quality

• Frontend: React + TypeScript (strict), Zustand for state, React Router, Storybook for docs.
• Data: GraphQL with schema-driven types and safe data mapping, robust error handling.
• Quality & DX: Jest + React Testing Library, Playwright groundwork, ESLint/Prettier, pre-commit hooks.
• CI/CD: GitHub Actions gates for lint/test/build; predictable, repeatable releases.

Impact

• Successful turnaround: delivered to live production as a solo developer—faster, with fewer resources, and at higher quality than previous efforts.
• Scalable foundation: architectural patterns now applied across the broader e-commerce platform.

Links
Live · Write-up