Build a Todo App

Create a task management app with React, TypeScript, and local storage.

Step 1: Project Setup

Initialize React app with TypeScript

⏱️ 1-2 hours

🎬 Video Walkthrough

📝 Code

bash

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

💡 Hints (2 available)

Hint 1 (unlocks after 5min)

Use Vite for faster builds

Hint 2 (unlocks after 10min)

Install Tailwind CSS for styling

⚠️ Common Pitfalls:

Configure Tailwind in tailwind.config.js
Add Tailwind directives to index.css

Step 2: Todo Components

Create TodoItem and TodoList components

⏱️ 2-3 hours

🎬 Video Walkthrough

📝 Code

typescript

interface Todo {
  id: string
  text: string
  completed: boolean
  createdAt: Date
}

tsx

export function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {
  return (
    <div className="flex items-center gap-2 p-4 border rounded">
      <input type="checkbox" checked={todo.completed} onChange={() => onToggle(todo.id)} />
      <span className={todo.completed ? "line-through" : ""}>{todo.text}</span>
      <button onClick={() => onDelete(todo.id)}>Delete</button>
    </div>
  )
}

💡 Hints (2 available)

Hint 1 (unlocks after 5min)

Create a types.ts file for TypeScript interfaces

Hint 2 (unlocks after 10min)

Use props destructuring in components

⚠️ Common Pitfalls:

Add unique keys when mapping todos
Handle empty todo list state

Step 3: State Management

Add CRUD operations with useState

⏱️ 2-3 hours

🎬 Video Walkthrough

📝 Code

typescript

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

const addTodo = (text: string) => {
  const newTodo: Todo = {
    id: crypto.randomUUID(),
    text,
    completed: false,
    createdAt: new Date()
  }
  setTodos([...todos, newTodo])
}

💡 Hints (2 available)

Hint 1 (unlocks after 5min)

Use useState to manage todo list

Hint 2 (unlocks after 10min)

Generate unique IDs with crypto.randomUUID()

⚠️ Common Pitfalls:

Validate input before adding
Use functional updates for state

Step 4: Local Storage

Persist todos to localStorage

⏱️ 1-2 hours

🎬 Video Walkthrough

📝 Code

typescript

useEffect(() => {
  const stored = localStorage.getItem("todos")
  if (stored) {
    setTodos(JSON.parse(stored))
  }
}, [])

useEffect(() => {
  localStorage.setItem("todos", JSON.stringify(todos))
}, [todos])

💡 Hints (2 available)

Hint 1 (unlocks after 5min)

Use useEffect to sync with localStorage

Hint 2 (unlocks after 10min)

Handle JSON parsing errors

⚠️ Common Pitfalls:

Check if localStorage is available
Handle quota exceeded errors

Step 5: Filters & Sorting

Add filter options (All/Active/Completed)

⏱️ 1-2 hours

🎬 Video Walkthrough

📝 Code

typescript

const filteredTodos = todos.filter(todo => {
  if (filter === "active") return !todo.completed
  if (filter === "completed") return todo.completed
  return true
})

💡 Hints (2 available)

Hint 1 (unlocks after 5min)

Use state for active filter

Hint 2 (unlocks after 10min)

Filter before mapping todos

⚠️ Common Pitfalls:

Use radio buttons or tabs for filters
Show count of active todos

Step 6: Polish & Deploy

Add animations and deploy to Vercel

⏱️ 1-2 hours

🎬 Video Walkthrough

📝 Code

bash

npm run build
npm install -g vercel
vercel --prod

💡 Hints (2 available)

Hint 1 (unlocks after 5min)

Test production build locally first

Hint 2 (unlocks after 10min)

Add loading states for better UX

⚠️ Common Pitfalls:

Test build locally first
Add meta tags for SEO

Study Timer

🎯 Focus

25:00

Stay focused!

Total Study Time

💡 Work: 25 min • Break: 5 min

⚙️ Technologies

ReactTypeScriptTailwind CSS