Codstak
    • Home
    • DSA
    • JavaScript
    • TypeScript
    • Node.js
    • React
    • More↓
      14-Day PrepDiscordNewsletterLeaderboard
    React track

    Learn React by building.

    Work through focused interface challenges with a live preview, saved progress, and an AI coach when you need a useful next step.

    21

    Challenges

    0

    Completed

    Recommended next · Components and props

    Profile Tabs

    Path 1 of 21. Every challenge remains open, so you can skip ahead whenever you like.

    Continue path

    Concept progress

    Your React coverage

    0/21 challenges
    Components & props0/4
    State & events0/17
    Accessibility0/8
    Conditional rendering0/5
    Forms0/9
    Lists0/8
    Derived state0/6
    Effects0/3
    Async data0/2
    Composition0/5
    Persistence0/1
    Reducers0/1

    21 challenges

    Start small. Ship the solution.

    easyPath 1/21

    Profile Tabs

    Render tab content from data while preserving accessible relationships.

    Components and props

    Components & propsState & eventsAccessibility
    25-30 min
    #react#components#accessibility
    mediumPath 2/21

    FAQ Accordion

    Create an accessible accordion with reusable components and lifted state.

    Components and props

    Components & propsState & eventsConditional renderingAccessibility
    30-40 min
    #react#components#accessibility
    easyPath 3/21

    Counter Card

    Practice React state and event handling by building a counter with a reset action.

    State and events

    State & events
    15-20 min
    #react#useState#events
    easyPath 4/21

    Accessible Toggle Switch

    Build a keyboard-friendly preference toggle with clear state feedback.

    State and events

    State & eventsConditional renderingAccessibility
    15-20 min
    #react#useState#accessibility
    easyPath 5/21

    Color Picker Card

    Synchronize a color input, text value, and visual preview.

    State and events

    State & eventsForms
    20-25 min
    #react#forms#useState
    easyPath 6/21

    Character Counter

    Create a controlled textarea with a live character limit.

    Conditional rendering

    State & eventsConditional renderingFormsAccessibility
    15-20 min
    #react#forms#useState
    easyPath 7/21

    Searchable User List

    Filter a rendered collection from a controlled search input.

    Lists and forms

    ListsFormsDerived state
    20-30 min
    #react#forms#filtering
    easyPath 8/21

    Simple Todo List

    Add, complete, and remove tasks using immutable React state.

    Lists and forms

    ListsFormsState & events
    25-35 min
    #react#forms#arrays
    mediumPath 9/21

    Signup Form Validation

    Validate a controlled form and show field-level feedback after submission.

    Lists and forms

    FormsConditional renderingAccessibility
    35-45 min
    #react#forms#validation
    mediumPath 10/21

    Paginated Gallery

    Paginate a collection and derive the visible slice from the current page.

    Lists and forms

    ListsState & eventsDerived state
    30-40 min
    #react#arrays#pagination
    mediumPath 11/21

    Sortable Data Table

    Sort typed tabular data in ascending and descending order.

    Lists and forms

    ListsState & eventsDerived stateAccessibility
    35-45 min
    #react#sorting#tables
    mediumPath 12/21

    Shopping Cart

    Manage structured cart state and derive totals from item quantities.

    Lists and forms

    ListsFormsState & eventsDerived state
    40-50 min
    #react#state#arrays
    easyPath 13/21

    Repair a Drifting Order Summary

    Debug an order subtotal that stops matching the current seat selection.

    Lists and forms

    ListsState & eventsDerived state
    20-30 min
    #react#debugging#state
    mediumPath 14/21

    Stopwatch

    Coordinate timers and cleanup with React effects.

    Effects and data fetching

    EffectsState & events
    35-45 min
    #react#useEffect#timers
    hardPath 15/21

    Async Autocomplete

    Build a debounced search box that handles loading, errors, and stale requests.

    Effects and data fetching

    EffectsAsync dataFormsAccessibility
    60-75 min
    #react#useEffect#async
    hardPath 16/21

    Analytics Dashboard

    Coordinate asynchronous dashboard data, filters, and derived metrics.

    Effects and data fetching

    EffectsAsync dataListsDerived state
    75-90 min
    #react#async#filtering
    mediumPath 17/21

    Gradient Generator

    Build an interactive CSS gradient editor with dynamic color stops.

    Component composition

    Components & propsCompositionState & eventsForms
    35-45 min
    #react#components#ui
    mediumPath 18/21

    Theme Preference

    Create a reusable theme context and persist the user's preference.

    Component composition

    Components & propsCompositionState & eventsPersistence
    35-45 min
    #react#context#localStorage
    hardPath 19/21

    Multi-Step Checkout

    Build a validated checkout flow that preserves data across steps.

    Real-world mini-apps

    FormsState & eventsConditional renderingComposition
    60-75 min
    #react#forms#state-machine
    hardPath 20/21

    Kanban Board

    Move task cards across columns using normalized immutable state.

    Real-world mini-apps

    ListsState & eventsCompositionAccessibility
    60-75 min
    #react#state#drag-and-drop
    hardPath 21/21

    Undo/Redo Editor

    Implement reversible text state with past, present, and future history.

    Real-world mini-apps

    ReducersState & eventsComposition
    60-80 min
    #react#useReducer#history