To-Do List com ReactJS

Este é um projeto simples e funcional de To-Do List desenvolvido com ReactJS. O objetivo foi praticar e consolidar conceitos fundamentais, como manipulação de estado, componentes funcionais e estilização com CSS. Essa aplicação oferece uma interface intuitiva para gerenciar tarefas de forma prática, utilizando o design da rocketseat.

---

🚀 Funcionalidades

• Adicionar tarefas: Insira o conteúdo e ele será adicionado à lista.
• Marcar como concluída: Indique tarefas concluídas com apenas um clique.
• Excluir tarefas: Remova tarefas desnecessárias para manter a lista organizada.
• Responsividade: A aplicação foi projetada para funcionar bem em diferentes dispositivos.

---

🛠️ Tecnologias Utilizadas

• ReactJS: Biblioteca JavaScript para construção de interfaces.
• CSS Modules: Para organização e escopo local das estilizações.
• Phosphor Icons: Ícones modernos e flexíveis para enriquecer a interface.

---

📦 Como Executar o Projeto

Pré-requisitos

Certifique-se de ter o Node.js e o npm instalados em sua máquina.

Passo a Passo

1. Clone o repositório:

  git clone https://github.com/Arthuz2/todo-react.git

2. Acesse a pasta do projeto:

  cd todo-react

3. Instale as dependências:

  npm install

4. Execute o projeto:

  npm run start

5. Abra o navegador e acesse:

  http://localhost:5173

---

📂 Estrutura do Projeto

src/
├── assets/
│   └── Logo.png                # Logo do projeto.
├── components/                 # Componentes reutilizáveis da aplicação.
│   ├── EmptyTasks/             # Mensagem exibida quando não há tarefas cadastradas.
│   │   ├── index.tsx
│   │   └── styles.module.css
│   ├── Header/                 # Cabeçalho principal da aplicação.
│   │   ├── index.tsx
│   │   └── styles.module.css
│   ├── NewTaskForm/            # Formulário para criar novas tarefas.
│   │   ├── index.tsx
│   │   └── styles.module.css
│   ├── TaskCard/               # Card de tarefa, com opções para marcar como concluída ou excluir.
│   │   ├── index.tsx
│   │   └── styles.module.css
│   └── Tasks/                  # Listagem principal de tarefas.
│       ├── index.tsx
│       └── styles.module.css
├── App.tsx                     # Componente principal da aplicação.
├── App.module.css              # Estilos gerais do componente App.
├── global.css                  # Estilos globais da aplicação.
├── main.tsx                    # Ponto de entrada da aplicação React.
└── vite-env.d.ts               # Configuração de ambiente do Vite.

🎯 Melhorias Futuras

• Adicionar filtro para visualizar tarefas "Pendentes".
• Incluir testes automatizados para validar o comportamento dos componentes.
• Melhorar a interface com animações suaves e transições ao adicionar, marcar ou excluir tarefas.

📸 Demonstração

Sem tarefas

Tarefas concluídas e pendentes

❤️ Agradecimentos

Este projeto é um marco no meu aprendizado com ReactJS. Cada funcionalidade implementada me trouxe novas lições e desafios, reforçando minha paixão pelo desenvolvimento. Estou motivado a continuar evoluindo e aprimorando minhas habilidades!

Contribuições, sugestões e feedbacks são sempre bem-vindos! 😊

🔗 Contato

Arthur Porcino Pereira

📧 Email: arthur.porcino43@gmail.com

📱 LinkedIn: https://linkedin.com/in/arthurporcino