ReactCHALLENGES

Filter by

#1 Counter Component

beginner15 mins

#2 ToDo List

beginner30 mins

#3 Uncontrolled Form

beginner15 mins

#4 Wikipedia Search

intermediate45 mins

#5 Memory Card Game

intermediate60 mins

#6 Rick & Morty: Double Fetching

intermediate60 mins

#7 React Chrono: Start/Pause & Stop

beginner45 mins

#8 Accessible Accordion

beginner30 mins

#9 Typewriter Effect

beginner30 mins

#10 Airbnb Card Composition Component

intermediate60 mins

#11 useToDo & useLocalStorage Hooks

beginner15 mins

#12 Kanban board

intermediate60 mins

#13 Users List with Search, Filter and Pagination

intermediate60 mins

#14 useDebounce vs useThrottle

intermediate30 mins

#15 form useActionState

intermediate30 mins

#16 useMemo vs useCallback vs React.memo

intermediate20 mins

#17 Minesweeper

advanced90 mins

#18 Traffic Light

intermediate20 mins

#19 Calculator

advanced60 mins

#20 Calculator with reducer

intermediate30 mins

#21 Filter AND | OR

intermediate30 mins

#22 Wordle

advanced90 mins

#23 Wordle simplified version

intermediate60 mins

#24 ToDo List with reducer

beginner30 mins

#25 Arrays - The Must Have

beginner30 mins

#26 Tic Tac Toe

intermediate60 mins

#27 Objects - The Must have

intermediate30 mins

#28 Strong Password

intermediate30 mins

#29 Shopping cart

advanced45 mins

#30 Building a Reusable useFetch Hook

intermediate45 mins

#31 Progress Bar

beginner30 mins

#32 Sortable Table

intermediate30 mins

#33 Connect Four

advanced60 mins

#34 Simon Says

advanced90 mins

#35 Equalizer

beginner30 mins

#36 Days Old Counter

intermediate30 mins

#37 Event Creation Wizard

intermediate60 mins

#38 Phone Number Field

intermediate60 mins

#39 Color Game

intermediate45 mins

#40 Digital Segment Clock

beginner30 mins

#41 React Quiz

intermediate60 mins

#42 Countdown

beginner30 mins

#43 Tetris

advanced120 mins

#44 Tetris II

intermediate45 mins

#45 Reflex Click Game

beginner45 mins

#46 New Way of Data Fetching

beginner30 mins

#47 Play Soroban

intermediate45 mins

#48 Airbnb Card Compound Component (Context)

intermediate60 mins

#49 Passing refs in React 19

beginner20 mins

#50 File explorer

intermediate45 mins

#51 Shopping cart with Redux

advanced45 mins

#52 Use optimistic

intermediate30 mins

#53 Best practices

intermediate20 mins

#54 Spreadsheet

advanced90 mins

#55 Simple pagination

intermediate45 mins

#56 Tier List

intermediate60 mins

#57 Invoker Modal

beginner30 mins

#58 useEffect vs useLayoutEffect

beginner15 mins

#59 GitHub Contribution Heatmap

intermediate30 mins

#60 Calendar

intermediate45 mins

#61 Calendar Events

intermediate45 mins

# 61
45 MIN
Calendar Events

Overview

Build a calendar that renders events on their days, supports selecting a day, and lets you add and delete events — practicing state management and data transformation keyed by absolute date strings.

Requirements

Select a day by clicking it, highlighting the selected cell.
Show the events of the selected day in a panel below the calendar, including a heading with the selected date.
Add a new event to the selected day via a text input and an "Add" button; empty or whitespace-only titles are ignored.
Delete an event from the selected day via its delete button.
Show a "no events" message for a selected day without events.
Keep events intact when navigating between months (events are keyed by absolute YYYY-MM-DD dates, independent of the visible month).
Show an event dot on every day that has at least one event; a day with several events shows several dots.

Notes

Components.tsx and utils.ts are read-only — the calendar grid, the Day cells (which render the event dots from each cell's eventCount), and the month-grid logic are already wired.
The starter App.tsx already handles month navigation. Your job is the events state: events, the selected day, filtering, and add/delete.
utils.ts exports buildMonthDays(date, events) (returns cells with date and eventCount) and toISODate(date). Pass your events state to buildMonthDays instead of [] — the dots then appear automatically.
EventsPanel is a prop-driven component — its starter markup is hardcoded, so inspect it to figure out which props it needs.
Filter events per day by comparing each event's date to the selected day; this keeps events stable across month navigation.
Give each new event a unique id (e.g. crypto.randomUUID()).
Some tests pass right away (empty state) — that's expected; the rest cover add, delete, selection, and persistence across months.

Tests

does not show dots on a day without events
selecting a day highlights it
shows the selected date in the panel heading
adds a new event via the Add button
adds a new event when pressing Enter
ignores empty titles when adding
shows a dot on the day of a newly added event
supports multiple events on the same day
shows only the events of the selected day
deletes an event from the selected day
keeps events when navigating between months

Back

Challenges

;

# 61
45 MIN
Calendar Events

Overview

Requirements

Select a day by clicking it, highlighting the selected cell.
Show the events of the selected day in a panel below the calendar, including a heading with the selected date.
Add a new event to the selected day via a text input and an "Add" button; empty or whitespace-only titles are ignored.
Delete an event from the selected day via its delete button.
Show a "no events" message for a selected day without events.
Keep events intact when navigating between months (events are keyed by absolute YYYY-MM-DD dates, independent of the visible month).
Show an event dot on every day that has at least one event; a day with several events shows several dots.

Notes

Components.tsx and utils.ts are read-only — the calendar grid, the Day cells (which render the event dots from each cell's eventCount), and the month-grid logic are already wired.
The starter App.tsx already handles month navigation. Your job is the events state: events, the selected day, filtering, and add/delete.
utils.ts exports buildMonthDays(date, events) (returns cells with date and eventCount) and toISODate(date). Pass your events state to buildMonthDays instead of [] — the dots then appear automatically.
EventsPanel is a prop-driven component — its starter markup is hardcoded, so inspect it to figure out which props it needs.
Filter events per day by comparing each event's date to the selected day; this keeps events stable across month navigation.
Give each new event a unique id (e.g. crypto.randomUUID()).
Some tests pass right away (empty state) — that's expected; the rest cover add, delete, selection, and persistence across months.

Tests

does not show dots on a day without events
selecting a day highlights it
shows the selected date in the panel heading
adds a new event via the Add button
adds a new event when pressing Enter
ignores empty titles when adding
shows a dot on the day of a newly added event
supports multiple events on the same day
shows only the events of the selected day
deletes an event from the selected day
keeps events when navigating between months

Back

# 6145 MINCalendar Events

Overview

Requirements

Notes

Tests

Challenges

# 6145 MINCalendar Events

Overview

Requirements

Notes

Tests

# 61
45 MIN
Calendar Events

# 61
45 MIN
Calendar Events