Build 2: star rating (controlled, hover preview, keyboard)
The parent owns value, so the component is controlled and reusable (a form can hold the rating). hover is local UI state; the shown stars are derived from hover || value. Each star has an accessible name, and arrow keys move both value and focus.
A machine coding round asks you to build a small working UI (tabs, a star rating, nested comments, a file explorer, a stopwatch, a progress bar, pagination) in 45–90 minutes; you pass by clarifying first, planning the state shape, building a working skeleton, then adding behaviour, accessibility and polish while you talk through your choices.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a Pagination component that receives page, pageCount and onChange, renders Prev, page numbers and Next, disables Prev/Next at the ends, and marks the current page with aria-current="page".
Write the recursive Node component for the file explorer state plan above.
Explain it without notes
Walk through how you approach a 60-minute machine coding round, step by step.
How would you design the state for a file explorer with expand and collapse?
What makes a tabs component accessible?
Why build a stopwatch from timestamps instead of counting interval ticks?
Preview
Console
Nothing logged yet.Expected console output
click star 3: You rated 3 of 5, focus on 3 stars
ArrowRight: You rated 4 of 5, focus on 4 stars
ArrowLeft x2: You rated 2 of 5, focus on 2 stars