Step 1 of 9
Set up the app structure and data model
Create the React app foundation and define the habit data shape before building features.
Keep the first pass simple: one main page, one habit list, one add form, and local state wired for persistence later.
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.
Expected after this step
A working React app shell with the main sections rendered and a habit data model ready for functional features.
Should not happen
- ✕Creating a UI that looks complete but does not actually save data to localStorage
- ✕Toggling completion visually without storing it per habit for the current day
- ✕Using hardcoded sample habits instead of real user-created data
- ✕Showing a streak number that is static or incorrect
Verify before continuing
Do not move on until every check is true. The complete button stays locked until then.
Do not continue if…
- !Creating a UI that looks complete but does not actually save data to localStorage
- !Toggling completion visually without storing it per habit for the current day
- !Using hardcoded sample habits instead of real user-created data
- !Showing a streak number that is static or incorrect
- !Deleting a habit from the screen but not from persisted storage
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 React app foundation. Remove static placeholder habit cards and define actual state for habits with a data model that includes id, name, createdAt, and completion history. Keep the layout simple but implementation-ready.