Complete Project: Todo App

In this hands-on project, we will build a complete task management application (Todo App) using React and everything you learned in the previous tutorials.

Project structure

todo-app/
├── src/
│   ├── components/
│   │   ├── TodoList.jsx
│   │   ├── TodoItem.jsx
│   │   ├── TodoForm.jsx
│   │   ├── TodoFilter.jsx
│   │   └── TodoStats.jsx
│   ├── hooks/
│   │   └── useTodos.js
│   ├── context/
│   │   └── TodoContext.jsx
│   ├── utils/
│   │   └── localStorage.js
│   ├── styles/
│   │   └── TodoApp.css
│   └── App.jsx
├── public/
│   └── index.html
└── package.json

Initial setup

npx create-react-app todo-app
cd todo-app
npm install @mui/material @emotion/react @emotion/styled

Creating the components

TodoItem.jsx

import React from 'react';
import { ListItem, ListItemText, IconButton, Checkbox } from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';

function TodoItem({ todo, onToggle, onDelete }) {
  return (
    <ListItem>
      <Checkbox
        checked={todo.completed}
        onChange={() => onToggle(todo.id)}
        color="primary"
      />
      <ListItemText
        primary={todo.text}
        style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
      />
      <IconButton onClick={() => onDelete(todo.id)} color="error">
        <DeleteIcon />
      </IconButton>
    </ListItem>
  );
}

export default TodoItem;