Counter & Timer App

Build a React counter and timer suite to master state updates and UI conditions

React
useState
useEffect
Event Handling
Conditional Rendering
Component Composition
Chakra UI

In this beginner React project, you will build a compact app that contains two small tools: counters and timers. The counter section must support increment, decrement, and reset actions, plus at least one configurable step value so users can change how much the number increases. The timer section must include a countdown timer and a stopwatch mode. Each timer must support start, pause, resume, and reset behavior with clear status feedback.

You will implement reliable state updates, user-driven events, and conditional UI that changes based on running/paused/completed states. Use Chakra UI to build the interface quickly with consistent buttons, spacing, and accessible form controls. The goal is a clean, predictable experience that makes state transitions obvious and keeps the UI synchronized with the underlying React state at all times.

What This Project Trains in React

This project trains the most important React habit: treating UI as a direct reflection of state. Counters and timers look simple, but they expose common mistakes in state updates, effect cleanup, and event-driven logic. You will learn to design components that update immediately on user input and remain correct over time without drifting out of sync.

By finishing this app, you build confidence with controlled UI modes - running versus paused, enabled versus disabled - and you practice writing React code that stays readable as features expand.

Prerequisites and Setup Knowledge

You should already know basic React and be comfortable running a React project locally. This task expects you to write small components, handle events, and style UI using a component library.

React fundamentals: JSX, props, and component structure
Using useState for UI state changes
Using useEffect for time-based behavior and cleanup
Basic JavaScript timing functions (setInterval, clearInterval)
Chakra UI basics: Button, Stack, Input, and layout components

Core Requirements for Counters and Timers

A strong submission is judged by correctness, clarity, and stability. Counters must update instantly and never desync. Timers must handle start/pause/reset accurately and avoid multiple intervals running at the same time. These requirements focus on React behavior rather than visual complexity.

Requirement	Explanation
Counter with increment, decrement, reset	These actions practice basic event handling and state updates in a controlled component.
Configurable step value	Step control trains input handling and shows how UI state influences interactions.
Stopwatch mode	A stopwatch tests time-based updates and ensures your UI stays consistent during frequent re-renders.
Countdown timer mode	Countdown logic trains conditional rendering for “completed” states and prevents negative time bugs.
Start, pause, resume, reset controls	Multiple states reinforce predictable transitions and force clean interval management.
Disabled states and status messaging	Clear UI rules reduce user errors and make component behavior obvious.
Proper interval cleanup	Cleanup prevents duplicated intervals and is considered essential for correct React timer behavior.
Accessible UI via Chakra UI	Chakra provides consistent components and keyboard-friendly controls without custom styling overhead.

Tips for Reliable Timer Logic

Treat timer behavior as a state machine: stopped, running, paused, completed. Drive your UI from that state so buttons enable and disable automatically. Use useEffect to start and stop intervals, and keep the interval ID in a ref so it persists without triggering re-renders. For countdown, clamp values at zero and stop the interval the moment the timer completes. For counters, prefer functional state updates to avoid stale values during rapid clicks. When you control interval lifecycle precisely, timer bugs disappear.

Use functional updates like setCount(c => c + step) to keep rapid clicks correct
Store interval IDs in useRef so you can clear timers reliably across renders
Disable “Start” when running and disable “Resume” unless paused to avoid conflicting states
Format time consistently (mm:ss or hh:mm:ss) so users read the UI instantly
Keep counter and timer logic in separate components to avoid tangled state

By completing this project, you'll gain a solid understanding of building React components that update state predictably, respond to user events, and render different UI states based on conditions. You will practice interval-based logic with correct cleanup, build clear controls for running and paused modes, and deliver a polished layout using Chakra UI. This foundation prepares you for more complex React apps that rely on timers, user input, and multi-step UI flows.