Test project 3 Jan 2024
hamal - a React-internals learning repo rebuilt into a 28-specimen interactive logbook
- React 18
- React Router 6
- styled-components
- CRA
- SCSS
- OKLCH
- Responsive
- Accessible
A learning repo that was a single unstyled page of about a dozen React demos, every one hardcoded to a single purple, with blocking alert() dialogs, duplicate-id todo bugs and a login button the header never noticed. Rebuilt and expanded into 'Bench Notes' - 28 live, categorised 'specimens' (core and concurrent hooks, the HOC and render-prop patterns, an external store, portals, error boundaries, the class lifecycle next to its useEffect twin) on a bespoke OKLCH lab-logbook design system, with the real bugs fixed and a full accessibility and responsive pass. Ejected Create React App, React 18, styled-components.
The challenge
Turn a sprawling, unstyled React-demo dump - one hardcoded colour, blocking alerts, real state bugs and a login that never reached the header - into a coherent, comprehensive and genuinely interactive reference for React in practice, without abandoning its ejected Create React App stack.
Approach
Keep the ejected CRA and React 18 build, but rebuild the UI end to end around one design-system module and a signature 'specimen card', lift auth into context so shared state actually propagates, and fix every real bug (monotonic todo ids, useRef over createRef-in-render, live regions instead of alert(), a NaN-free stopwatch). Then expand the catalogue from roughly eleven demos to twenty-eight, grouped by category, each a real working demonstration, and add a full accessibility floor and a 390-to-1440 responsive pass.
Result
Bench Notes: 28 categorised, live React specimens on an OKLCH light/dark lab-logbook system (Space Grotesk and JetBrains Mono, numbered monospace registration headers, a masonry catalogue, scroll reveals and a custom favicon), with the shared-state and todo bugs fixed, a real accessibility floor and a 390-to-1440 responsive pass. Ejected Create React App, React 18, React Router 6 and styled-components, self-hosted on a Hetzner box behind Caddy.