✨Comprehensive Directory • 100 Practical Tasks✨

All 100 React Practice Tasks

Search, filter by difficulty, or jump across pages to practice real-world frontend machine coding solutions.

Per page:

Showing 1–12 of 100 tasks

🔑

🟢 Beginner

Password Generator

Build a tool that creates secure, random passwords with customizable length, numbers, and symbols.

useStateCheckboxesCopy to Clipboard

~20m

📝

🟢 Beginner

To-Do List with Filters

Create a complete task manager to add, complete, delete, and filter tasks with localStorage saving.

Array StatelocalStorageForm Events

~30m

🎮

🟢 Beginner

Tic-Tac-Toe Game

Build the classic two-player Tic-Tac-Toe game with turn switching, win detection, and game reset.

2D Grid StateWin CheckingGame Reset

~25m

🔢

🟢 Beginner

Interactive Calculator

Create a functional on-screen calculator that performs basic math operations (+, -, *, /).

Button KeypadString ParsingMath Logic

~20m

⭐

🟢 Beginner

Star Rating Component

Build an interactive 5-star rating widget with hover preview and dynamic mood feedback.

Hover EffectsMouse EventsConditional Styling

~15m

🖼️

🟢 Beginner

Image Carousel Slider

Build an image slider with Next/Prev buttons, dot indicators, and automatic sliding timer.

useEffect TimersIndex WrappingTransitions

~25m

👤

🟢 Beginner

User Profile Editor

Create an editable user profile card that toggles between view mode and edit mode.

Controlled InputsEdit TogglingObject State

~20m

⚽

🟢 Beginner

Drag the Ball

Build an interactive draggable ball that follows your mouse inside a bounded container box.

Mouse CoordinatesBoundary LimitsCSS Transforms

~20m

🔢

🟢 Beginner

OTP 6-Digit Verification Box

Build an accessible 6-digit verification code input with auto-advance, backspace retreat, and clipboard paste support.

useRef Array FocusClipboard APIKeydown Handlers

~20m

🪟

🟢 Beginner

Accessible Modal Dialog System

Create an accessible popup dialog with ESC key dismiss, backdrop click-outside detection, and focus traps.

ESC Key ListenerClick-Outside BackdropBody Scroll Lock

~20m

📂

🟢 Beginner

Accordion & Multi-Collapse

Build an interactive accordion supporting single vs multi-expand mode, live search, and smooth height animations.

Array State TogglingHeight TransitionsSearch Filtering

~20m

⏱️

🟢 Beginner

Countdown Timer & Stopwatch

Build a dual-mode timekeeper with millisecond stopwatch, lap splits, and Pomodoro countdown timer.

Date.now() Drift PreventionsetInterval CleanupLap Recording

~25m

Page 1 of 9

•••

Jump: