React Todo List

Uma aplicação simples e prática de lista de tarefas (Todo List) construída com React e Vite. Permite adicionar, editar, concluir e remover tarefas, com persistência local via localStorage.

Demo

Gravacao.de.Tela.2026-05-14.175306.mp4

---

Funcionalidades

• Adicionar novas tarefas (limite de até 10 simultâneas)
• Editar tarefas existentes através de um modal
• Marcar tarefas como concluídas
• Remover tarefas individualmente
• Mover ordenação das tarefas com @dnd-kit
• Limpar todas as tarefas de uma só vez
• Persistência automática no localStorage (suas tarefas continuam ali ao recarregar a página)
• Mensagem de parabéns ao concluir todas as tarefas
• Contador de tarefas concluídas vs. total

Tecnologias

• React 19
• Vite
• ESLint
• dnd-kit
• CSS puro

Como executar o projeto

Pré-requisitos

• Node.js (versão 18 ou superior)
• npm

Passos

1. Clone o repositório:

   git clone https://github.com/seu-usuario/react-todo-list.git

2. Entre na pasta do projeto:

   cd react-todo-list/app/todo-list

3. Instale as dependências:

   npm install

4. Inicie o servidor de desenvolvimento:

   npm run dev

5. Abra o navegador em http://localhost:5173

Scripts disponíveis

Comando	Descrição
npm run dev	Inicia o servidor de desenvolvimento
npm run build	Gera a build de produção
npm run preview	Pré-visualiza a build de produção
npm run lint	Executa o ESLint

Estrutura do projeto

react-todo-list/
└── app/
    └── todo-list/
        ├── public/
        ├── src/
        │   ├── App.jsx        # Componente principal com toda a lógica
        │   ├── App.css        # Estilos da aplicação
        │   ├── main.jsx       # Ponto de entrada do React
        │   └── index.css      # Estilos globais
        ├── index.html
        ├── package.json
        └── vite.config.js

Autor

Feito por Kevin Contri.