Build 1: accessible tabs with arrow keys
State is one number. useId makes ids unique if the component is used twice. Only the selected tab is in the Tab order (roving tabindex); the arrows wrap and focus follows the selection.
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
ArrowRight: Security focused, panel: Password and 2FA
ArrowRight: Billing focused, panel: Cards and invoices
ArrowRight: Profile focused, panel: Name and photo
End: Billing focused, panel: Cards and invoices
Home: Profile focused, panel: Name and photo