Window & Door Configurator

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