React

A performance budget is a limit you agree on before you build. Measure a real Vite build, make CI fail when it grows too big, and watch real users’ speed.

A design system is shared tokens, components, docs and rules. Learn tokens and themes, component APIs that are hard to use wrongly, safe changes with version numbers, and who decides.

Read old React code, turn a class component into a function without changing what it does, see what React 19 removed, and plan the move for a big app.

Build a list that loads more posts as you scroll, step by step. Cursors, a Load more button, IntersectionObserver, one request at a time, errors, focus, windowing and the feed role.

Build a small task board step by step, as in a coding interview. Move cards with the mouse, a finger and the keyboard, and show where each card will land.

Build a toast system step by step, as in an interview. A provider and a hook, a portal, a timer for each toast, pause on hover, live regions and a stable API.

Build a search box with suggestions, step by step, the way an interview asks for it. Old answers, debouncing, loading and error states, the keyboard, ARIA, highlighting and a cache.

Build a file explorer step by step, as in a coding interview. A flat map of nodes, a component that renders itself, a reducer, and a tree that works with a keyboard.

Turn accessibility checks into tests. Role queries, axe-core in Vitest, keyboard tests, Oxlint, axe in real browsers, and the checks only a person can do.

Add Vitest and React Testing Library to your Vite project. Find things by role, click like a user, wait for data, read a failing test, and avoid the common traps.