Build production apps from a single prompt.

1{
2  "name": "forge-todo",
3  "version": "0.1.0",
4  "private": true,
5  "scripts": {
6    "dev": "next dev",
7    "build": "next build",
8    "start": "next start"
9  },
10  "dependencies": {
11    "next": "^15.0.0",
12    "react": "^19.0.0",
13    "react-dom": "^19.0.0",
14    "zustand": "^5.0.0"
15  }
16}

1import { TodoList } from "@/components/TodoList";
2 
3export default function Page() {
4  return (
5    <main className="mx-auto max-w-xl p-8">
6      <h1 className="text-2xl font-semibold">My Tasks</h1>
7      <TodoList />
8    </main>
9  );
10}

1"use client";
2import { useStore } from "@/lib/store";
3 
4export function TodoList() {
5  const { items, add, toggle } = useStore();
6  return (
7    <ul className="mt-4 space-y-2">
8      {items.map((t) => (
9        <li key={t.id} onClick={() => toggle(t.id)}
10            className="cursor-pointer rounded border p-2">
11          <span className={t.done ? "line-through opacity-60" : ""}>
12            {t.text}
13          </span>
14        </li>
15      ))}
16    </ul>
17  );
18}

1import { create } from "zustand";
2 
3type Todo = { id: string; text: string; done: boolean };
4 
5export const useStore = create<{
6  items: Todo[];
7  add: (text: string) => void;
8  toggle: (id: string) => void;
9}>((set) => ({
10  items: [],
11  add: (text) =>
12    set((s) => ({ items: [...s.items, { id: crypto.randomUUID(), text, done: false }] })),
13  toggle: (id) =>
14    set((s) => ({
15      items: s.items.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
16    })),
17}));