React Project: Todo Task Tracker with LocalStorage

1. Capstone Project Overview

In this hands-on capstone project, we build a production-grade Todo Task Tracker featuring state management, form handling, filtering, and persistent synchronization with browser localStorage.

2. Complete Single-File Component Implementation

import React, { useState, useEffect } from 'react';

export default function TodoApp() {
  // Initialize state from localStorage
  const [todos, setTodos] = useState(() => {
    const saved = localStorage.getItem("cbt_todos");
    return saved ? JSON.parse(saved) : [
      { id: 1, text: "Revise Physics Formulae", completed: true },
      { id: 2, text: "Attempt Chemistry Mock Test 03", completed: false },
      { id: 3, text: "Review Biology Flashcards", completed: false }
    ];
  });

  const [inputVal, setInputVal] = useState("");
  const [filter, setFilter] = useState("all"); // "all" | "active" | "completed"

  // Sync to localStorage whenever todos change
  useEffect(() => {
    localStorage.setItem("cbt_todos", JSON.stringify(todos));
  }, [todos]);

  // Add new item
  const handleAddTodo = (e) => {
    e.preventDefault();
    if (!inputVal.trim()) return;

    const newTodo = {
      id: Date.now(),
      text: inputVal.trim(),
      completed: false
    };

    setTodos(prev => [newTodo, ...prev]);
    setInputVal("");
  };

  // Toggle completion
  const handleToggle = (id) => {
    setTodos(prev => prev.map(t => t.id === id ? { ...t, completed: !t.completed } : t));
  };

  // Delete item
  const handleDelete = (id) => {
    setTodos(prev => prev.filter(t => t.id !== id));
  };

  // Filtered list
  const filteredTodos = todos.filter(t => {
    if (filter === "active") return !t.completed;
    if (filter === "completed") return t.completed;
    return true;
  });

  return (
    

      
Candidate Daily Study Tracker

      

         setInputVal(e.target.value)}
          style={{ flex: 1, padding: 8 }}
        />
        Add
      

      

         setFilter("all")} disabled={filter === "all"}>All ({todos.length})
         setFilter("active")} disabled={filter === "active"}>Active
         setFilter("completed")} disabled={filter === "completed"}>Completed
      

      

        {filteredTodos.map(todo => (
          

             handleToggle(todo.id)}
              style={{ textDecoration: todo.completed ? "line-through" : "none", cursor: "pointer", color: todo.completed ? "#888" : "#000" }}
            >
              {todo.completed ? "☑ " : "☐ "} {todo.text}
            
             handleDelete(todo.id)} style={{ color: "red", border: "none", background: "none", cursor: "pointer" }}>
              ✕
            
          
        ))}
      
    
  );
}