Step 1 of 9
Set up the app structure and data model
Create the React foundation, core components, and a clear habit data shape before building features.
Start with a minimal but real structure so later features attach to stable state.
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.
Expected after this step
A React app with a basic layout and component structure ready for real habit state and interactions.
Should not happen
- ✕Building a static UI that looks like a tracker but does not update real React state
- ✕Marking habits complete visually without storing completion history per day
- ✕Showing fake streak numbers instead of calculating them from recorded dates
- ✕Forgetting localStorage sync so data disappears on refresh
Verify before continuing
Do not move on until every check is true. The complete button stays locked until then.
Do not continue if…
- !Building a static UI that looks like a tracker but does not update real React state
- !Marking habits complete visually without storing completion history per day
- !Showing fake streak numbers instead of calculating them from recorded dates
- !Forgetting localStorage sync so data disappears on refresh
- !Allowing duplicate check-ins for the same habit on the same day
- !Implementing edit buttons that do not actually save updated habit data
If the AI messes this up
Use this when the AI fakes progress or breaks the feature. It forces a real fix.
Refactor this into a real state-driven React habit tracker foundation. Remove hardcoded habit cards and placeholder analytics that are not backed by state. Create App, HabitForm, HabitList, and HabitItem components and define a habit object with id, name, createdAt, and completions as an array of date strings.