Build a Habit Tracker React App
A step-by-step flow for building a real habit tracker app in React with working habit creation, daily check-ins, streak tracking, persistence, validation, and basic testing.
The route
9 steps to Done
- 01
Set up the app structure and data model
Create the React foundation, core components, and a clear habit data shape before building features.
Preview prompt + verify gate ▾ Hide ▴
Create the initial React app structure for a habit tracker. Add a main App component and separate components for a habit form, habit list, and habit item. Define a real habit object shape with fields for id, name, createdAt, and completions stored as date strings. Use React state placeholders with sample empty arrays, but do not use fake rendered habits beyond development scaffolding. Keep the layout simple and readable.
- ✓ App renders without errors
- ✓ There are separate components for form and list concerns
- ✓ Habit data shape includes completion history by date
- ✓ No static fake dashboard numbers are presented as real data
- 02
Implement real habit state and habit creation
Allow users to add habits through a working form with validation.
Preview prompt + verify gate ▾ Hide ▴
Add working habit state in the React app using useState. Connect the HabitForm so a user can type a habit name and submit it to create a new habit object with a unique id, name, createdAt timestamp, and empty completions array. Trim whitespace, reject empty names, clear the input after successful submit, and display a validation message for invalid submissions.
- ✓ Submitting a valid habit adds a new item to the list
- ✓ Submitting an empty form shows a validation error
- ✓ Whitespace-only input is rejected
- ✓ Input clears after a successful add
- 03
Render the habit list with empty states
Show habits clearly and handle the no-data case properly.
Preview prompt + verify gate ▾ Hide ▴
Build the HabitList and HabitItem rendering logic so the UI maps over the real habits array and displays each habit consistently. If there are no habits, show a clear empty state message that invites the user to create their first habit. For each habit item, show the name and reserve space for completion, streak, edit, and delete actions.
- ✓ No habits shows an empty state message
- ✓ Added habits render from the actual state array
- ✓ Each habit item displays the correct name
- ✓ There are no hardcoded placeholder habit entries
- 04
Add daily completion tracking
Enable users to mark a habit complete for the current day with real stored history.
Preview prompt + verify gate ▾ Hide ▴
Implement a complete-for-today action for each habit. Use a consistent date format such as YYYY-MM-DD for completion entries. When the user clicks complete, add today’s date to that habit’s completions only if it is not already present. Update the UI to show whether the habit is completed today and disable or change the action accordingly.
- ✓ Clicking complete adds today’s date to the habit
- ✓ Completing the same habit twice on the same day is blocked
- ✓ The UI clearly shows when a habit is already completed today
- ✓ Completion state is derived from stored dates, not a temporary flag
- 05
Calculate and display streaks
Show meaningful progress based on real completion history.
Preview prompt + verify gate ▾ Hide ▴
Add real streak calculation logic for each habit using its completion date strings. Sort or normalize dates as needed and compute the current streak based on consecutive completed days. Display the streak on each habit item. Keep the implementation simple and deterministic, and make sure the streak reflects actual saved data rather than UI guesses.
- ✓ Streak value is computed from completion dates
- ✓ The streak changes when new valid completion dates are added
- ✓ The streak is not just the total number of completions
- ✓ No hardcoded streak numbers appear in the UI
- 06
Implement edit and delete actions
Allow users to manage existing habits instead of only adding new ones.
Preview prompt + verify gate ▾ Hide ▴
Implement real edit and delete functionality for each habit. For edit, allow the user to change the habit name with validation that blocks empty values. For delete, remove the correct habit from state and update the list immediately. Keep the editing UX simple, such as inline editing or a small edit form, but ensure it actually saves the updated value.
- ✓ Editing a habit changes the displayed name
- ✓ Blank edited names are rejected
- ✓ Deleting a habit removes it from the list
- ✓ Actions affect the correct habit item
- 07
Persist data with localStorage
Ensure habits survive page reloads and the app behaves like a real tool.
Preview prompt + verify gate ▾ Hide ▴
Add localStorage persistence for the habits array. On app startup, load any saved habits from localStorage and initialize state from it safely. Whenever habits change, save the updated array back to localStorage. Handle the case where storage is empty or invalid without crashing. Ensure all operations including create, complete, edit, and delete are reflected after a full page refresh.
- ✓ Added habits remain after refresh
- ✓ Completion history remains after refresh
- ✓ Edited names remain after refresh
- ✓ Deleted habits do not reappear after refresh
- 08
Improve validation and UI states
Make the app resilient and understandable during normal use.
Preview prompt + verify gate ▾ Hide ▴
Improve the habit tracker UX by adding explicit validation and status states. Show helpful error text for invalid add and edit actions, visually indicate when a habit is already completed today, and keep the empty state clear and useful. Make sure buttons and labels reflect actual app state rather than generic placeholders.
- ✓ Add form errors are visible and understandable
- ✓ Edit validation errors are visible and understandable
- ✓ Completed-today habits have a distinct state
- ✓ The empty state remains visible when no habits exist
- 09
Test key user flows manually and fix issues
Verify the app works end to end and close the common gaps AI builders leave behind.
Preview prompt + verify gate ▾ Hide ▴
Perform a focused implementation review of the habit tracker and fix problems in the main user flows. Verify that a user can add a habit, see it render, complete it for today once, view a correct streak based on saved dates, edit the habit name, delete the habit, and refresh the page without losing data. Correct any bugs, stale UI updates, localStorage sync issues, or state mutation mistakes you find.
- ✓ All core actions work in sequence without breaking state
- ✓ No duplicate same-day completion is possible
- ✓ Streak display is based on saved completion history
- ✓ Refresh preserves the real current app data
- ✓ No buttons appear functional while doing nothing