[GOOD FIRST ISSUE] Add 'Create Goal' form UI to GoalTracker

[Priyanshu-byte-coder]

What needs to be done

Add a form inside the GoalTracker component that lets users create a new weekly goal directly from the dashboard — no API client needed.

Why this matters

Currently GoalTracker only displays goals. Creating one requires hitting the API manually. This form is the missing UX piece.

Exact file to edit

src/components/GoalTracker.tsx (lines 38–70 — the return block)

What to build

Add a small form below the goals list (or a toggle button that reveals it):

// State to add at the top of the component
const [label, setLabel] = useState("");
const [target, setTarget] = useState(7);
const [creating, setCreating] = useState(false);

// Submit handler
async function handleCreate(e: React.FormEvent) {
  e.preventDefault();
  setCreating(true);
  await fetch("/api/goals", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ label, target }),
  });
  setLabel("");
  setTarget(7);
  setCreating(false);
  // re-fetch goals here
}

Form fields needed:

• label — text input, e.g. "Commit every day"
• target — number input, e.g. 7 (commits per week)
• Submit button — shows spinner while creating === true

Acceptance criteria

• Form renders below existing goals (or behind a "+ Add goal" toggle)
• Submitting calls POST /api/goals with { label, target }
• Goals list refreshes after successful creation
• Empty state updates once first goal is created
• npm run lint and npm run type-check pass

Setup

See DEVELOPMENT.md to get running locally.

Mentorship

Comment "I'd like to work on this" to get assigned.

[Muragesh-24]

@Priyanshu-byte-coder I would like to work on this issue, please assign it to me.

[shivangii123]

hi @Priyanshu-byte-coder
I would like to work on this issue
Can you assign this to me if available?
I will start working on it right now.