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.
First time here? Paste the Context Pack first so the AI understands your project - open it from the header above.
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.
Quick is short. Full Build is recommended for most steps. Strict forces real logic when the AI keeps faking output.
Actual change check
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
- An existing feature broke
- A button only logs to console
- Data disappears after refresh
- Errors fail silently with no visible state
This is what should exist before you continue. If reality does not match, do not move on.
Track what changed, failed, or needs follow-up. Notes export with the flow.