Implement real habit state and habit creation

Allow users to add habits through a working form with validation.

Creation is the first proof that the app is truly interactive.

First time here? Paste the Context Pack first so the AI understands your project - open it from the header above.

Prompt Capsule

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.

Paste into EmergentFull Build: complete implementation prompt with explicit requirements

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

Users can add habits through the form and see them appear immediately in the list.

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.

Your notes for this step

Track what changed, failed, or needs follow-up. Notes export with the flow.

Pass the Verify Gate to complete this step

Verify before continuing

Do not move on until every check is true. The complete button stays locked until then.

Submitting a valid habit adds a new item to the listSubmitting an empty form shows a validation errorWhitespace-only input is rejectedInput clears after a successful add

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

If the AI messes this up

Use this when:

- it only made visual forms or placeholder UI
- buttons do nothing or only log to console
- data is not persisted - state disappears on refresh
- something that worked before is now broken

Use this when the AI fakes progress or breaks the feature. It forces a real fix.

The form is not truly creating habits in React state. Fix it so submit adds a new habit object to a real habits array in state, re-renders the list, trims input, blocks empty submissions, and clears the field after success.