What you'll build

A complete task management application with React. You'll be able to add new tasks, mark them as completed with a click, delete them, and filter by status (all, active, completed). Tasks will be saved in localStorage so they persist even after closing the browser. It's the perfect project to learn React fundamentals: components, state, and events.

Step 1: Ask an AI for the complete project

I need a Todo App with React that:
- Uses Vite as bundler
- Has TypeScript
- Uses Tailwind CSS for styles
- Saves tasks in localStorage
- Has filters (all/active/completed)

Give me the commands to create the project and the code for each file.

Step 2: Follow the instructions

The AI will give you something like:

npm create vite@latest todo-app -- --template react-ts
cd todo-app
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then it will give you code for:

src/App.tsx - Main component
src/components/TodoItem.tsx - Each task
tailwind.config.js - Configuration

Step 3: Run it

npm run dev

Open http://localhost:5173

Key React concepts

Concept	What it is
`useState`	Local component state
`props`	Data passed from parent to child
`map()`	Render lists
`key`	Unique identifier for lists

Code example

const [todos, setTodos] = useState<Todo[]>([])

const addTodo = (text: string) => {
  setTodos([...todos, { id: Date.now(), text, completed: false }])
}

const toggleTodo = (id: number) => {
  setTodos(todos.map(todo =>
    todo.id === id ? { ...todo, completed: !todo.completed } : todo
  ))
}

If something failed

Error	Cause	Solution
`Module not found`	Missing dependency	`npm install`
Tailwind not working	Wrong config	Check `tailwind.config.js`
Not saving to localStorage	Wrong key	Check `localStorage.setItem`

Next step

→ REST API with Express — Your first backend

Todo App with React

📋 Suggested prerequisites