O StudyList é um projeto de gerenciamento de lista de estudos, criado com o propósito de estudar os principais hooks do React como: useRef, useEffect, useState e outros conceitos como componentização, Prop-Drilling, Use Context API, entre outros. Ele foi desenvolvido durante minha realização do curso React: utilizando hooks para gerenciador estados da Alura.
- CRUD completo de tarefas: Adição, edição e exclusão de tarefas.
- Organização das tarefas em "Para estudar" e "Concluído"
- Marcação de tarefas como concluídas.
- Feedback visual para lista vazia (empty state)
- Modal para adicionar/editar tarefas
- Lista animada de tarefas
O desenvolvimento do projeto aborda as seguintes técnicas e tecnologias:
- useState e useEffect: Gerenciamento de estado e persistência no localStorage
- useContext: Contexto global para compartilhar estado das tarefas
- Componentização: Componentes reutilizáveis como Button, FabButton, Dialog, TodoForm, TodoItem e TodoGroup
- Estilização com CSS Modules: Organização dos estilos por componente
- Manipulação de formulários controlados
- Persistência local com localStorage: Salva as tarefas mesmo fechando o app
- Ícones SVG personalizados
- Boas práticas de organização de código
- React (versão utilizada: 19.1.1)
- Vite para build e desenvolvimento rápido
- CSS Modules para encapsular estilos por componente
- JavaScript
Após baixar o projeto, siga os passos abaixo para executar localmente:
- Certifique-se de que você já tem Node.js instalado (guia oficial).
- No terminal, navegue até a pasta do projeto e instale as dependências:
npm install- Execute o projeto:
npm run dev- Acesse no navegador: http://localhost:5173 (Vite).