Build a Habit Tracker App in React
Create a working React habit tracker app with habit creation, completion toggles, streak tracking, local persistence, validation, and basic QA checks.
The route
9 steps to Done
- 01
Set up the app structure and data model
Create the React app foundation and define the habit data shape before building features.
Preview prompt + verify gate ▾ Hide ▴
Create the initial React app structure for a habit tracker. Use a single main page with clearly separated components or sections for: app header, summary stats, add habit form, empty state, and habit list. Define and use a real habit data shape with fields for id, name, createdAt, and completion history keyed by date or an equivalent structure that supports marking habits complete for the current day. Initialize state with an empty habit array, not hardcoded demo habits, and keep the code organized and readable for a beginner React project.
- ✓ The app renders without errors
- ✓ There is a visible title or header for the habit tracker
- ✓ The code includes a defined habit object structure
- ✓ The initial habit state is an empty array or equivalent real state
- ✓ The UI includes placeholders or sections for form, list, and summary
- 02
Implement add habit form with validation
Let users create new habits through a working form and prevent invalid input.
Preview prompt + verify gate ▾ Hide ▴
Implement the add habit form in the React habit tracker. Include a controlled input for habit name, a submit button, and form state management. On submit, trim the input, reject empty values, show a visible validation message, and if valid create a new habit object with a unique id, name, createdAt timestamp, and empty completion history. Add the new habit into app state immediately and reset the form after successful submission.
- ✓ Typing a valid habit name and submitting adds a new item
- ✓ Submitting an empty input does not create a habit
- ✓ A validation message appears for invalid input
- ✓ The input clears after a successful add
- ✓ Each new habit has a unique identifier in code
- 03
Render the habit list and empty state
Display created habits clearly and handle the no-data state cleanly.
Preview prompt + verify gate ▾ Hide ▴
Implement the habit list rendering using the real habits state. For each habit, display at least the habit name and a place for completion status and streak information. If the habits array is empty, show a friendly empty state message with guidance like adding the first habit. Make sure the empty state disappears once a habit is added and the list updates reactively.
- ✓ With no habits, a clear empty state message is visible
- ✓ After adding a habit, the empty state disappears
- ✓ The habit list is generated from real state data
- ✓ Each rendered habit uses a stable key
- ✓ The list updates immediately after adding a habit
- 04
Add complete or incomplete toggle for today
Make each habit interactive so users can track whether it was completed today.
Preview prompt + verify gate ▾ Hide ▴
Implement per-habit completion toggling for the current day in the React app. Use a consistent date key format such as YYYY-MM-DD to represent today. For each habit, show a button or checkbox that reflects whether the habit is completed today. Clicking it should update that habit's completion history in state, allowing both marking complete and undoing completion. The UI should update instantly and should be based on stored state, not temporary visual-only effects.
- ✓ Toggling one habit does not affect another habit
- ✓ A habit can be marked complete for today
- ✓ A completed habit can be toggled back to incomplete
- ✓ The control clearly reflects today's current state
- ✓ The implementation stores completion data per habit
- 05
Add streak or completion count calculations
Show useful progress data that is derived from real completion history.
Preview prompt + verify gate ▾ Hide ▴
Add a derived progress metric for each habit in the habit tracker. Prefer a current streak calculation based on consecutive completed days including today or recent days; if needed, also show total completions. The value must be computed from the habit's stored completion history, not stored as a static field that can get out of sync. Display the metric next to each habit and keep the logic readable and maintainable.
- ✓ Each habit shows a visible progress metric
- ✓ The metric changes when completion is toggled
- ✓ The metric is derived from completion history
- ✓ Unchecking completion updates the metric correctly
- ✓ No hardcoded streak or count values remain
- 06
Implement delete habit functionality
Allow users to remove habits they no longer want to track.
Preview prompt + verify gate ▾ Hide ▴
Implement a delete control for each rendered habit in the React habit tracker. Clicking delete should remove only the selected habit from state immediately. Keep the UI clear so the user can identify which habit is being removed. If you add a confirmation, keep it simple and functional.
- ✓ Each habit has a visible delete control
- ✓ Deleting one habit does not remove other habits
- ✓ The deleted habit disappears immediately from the UI
- ✓ The remaining habits still function correctly
- ✓ No errors occur after deletion
- 07
Persist data with localStorage
Make habits and completion data survive page refreshes.
Preview prompt + verify gate ▾ Hide ▴
Implement localStorage persistence for the React habit tracker. On app load, read saved habits from localStorage, safely parse the data, and initialize state from it if present. Whenever habits change, write the updated array back to localStorage. Persist full habit objects including names, timestamps, and completion history. Handle empty or missing storage gracefully and do not overwrite saved data with hardcoded defaults.
- ✓ Adding a habit persists after page refresh
- ✓ Today's completion status persists after refresh
- ✓ Deleted habits stay deleted after refresh
- ✓ The app does not crash if localStorage is empty
- ✓ No demo data unexpectedly reappears after reload
- 08
Add summary metrics and polish core states
Give the user quick visibility into overall progress and improve usability.
Preview prompt + verify gate ▾ Hide ▴
Implement a summary section in the React habit tracker that displays derived metrics from the real habits state. Include at minimum total habits and number completed today, and optionally completion percentage. Base all values on current data using the same today date key used for habit toggles. Keep the UI simple and ensure the summary updates immediately after adding, deleting, or toggling a habit.
- ✓ Total habits count matches the number of rendered habits
- ✓ Completed today count changes when a habit is toggled
- ✓ Deleting a habit updates the summary correctly
- ✓ Adding a habit updates the summary correctly
- ✓ No placeholder summary numbers remain
- 09
Run manual QA and fix broken behaviors
Verify the app is truly functional and patch the most common issues AI builders leave behind.
Preview prompt + verify gate ▾ Hide ▴
Perform a full manual QA pass on the React habit tracker and fix any issues found. Test these flows: initial empty state, invalid form submission, valid habit creation, multiple habit creation, independent completion toggles, undo completion, delete habit, summary accuracy, and localStorage persistence after refresh. If any feature is visual-only, not wired to state, or not saved correctly, repair it with real implementation changes. Clean up any leftover mock data, dead code, or inconsistent state handling.
- ✓ The app starts in a correct empty state when no habits exist
- ✓ Form validation blocks blank submissions
- ✓ Multiple habits can be tracked independently
- ✓ Refresh preserves habits and completion state
- ✓ Delete removes habits from both UI and storage
- ✓ Summary metrics remain accurate after all actions