https://github.com/apolinario0x21/todoapp_frontend
Interface moderna para gerenciamento de tarefas com React 18, Bootstrap 5 e integração REST. Inclui modais, drag-and-drop e feedback visual com Toastify.
https://github.com/apolinario0x21/todoapp_frontend
axios bootstrap drag-and-drop javascript react rest-api toastify vite vitest
Last synced: about 1 year ago
JSON representation
Interface moderna para gerenciamento de tarefas com React 18, Bootstrap 5 e integração REST. Inclui modais, drag-and-drop e feedback visual com Toastify.
- Host: GitHub
- URL: https://github.com/apolinario0x21/todoapp_frontend
- Owner: apolinario0x21
- Created: 2025-04-29T08:19:58.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-03T05:21:03.000Z (about 1 year ago)
- Last Synced: 2025-05-07T21:09:53.366Z (about 1 year ago)
- Topics: axios, bootstrap, drag-and-drop, javascript, react, rest-api, toastify, vite, vitest
- Language: JavaScript
- Homepage: https://github.com/apolinario0x21/toDoApp
- Size: 71.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ToDoApp - Frontend
[](https://opensource.org/licenses/MIT)
Um aplicativo web moderno para gerenciamento de tarefas, desenvolvido com React e uma arquitetura de componentes bem estruturada.
Obs.: Backend em Java e Spring Boot encontra-se no repositório: [TodoApp-Backend](https://github.com/apolinario0x21/toDoApp)
## Sobre o Projeto
ToDoApp oferece:
- Interface intuitiva e responsiva
- Gestão completa do ciclo de vida de tarefas
- Feedback visual imediato
- Arquitetura escalável e bem organizada
## Tecnologias Utilizadas
- React
- React Bootstrap
- Axios - Cliente HTTP para comunicação com APIs
- React Router - Para navegação entre páginas
- React Modal - Para modais de confirmação e edição
- Loading Spinner - Para animações de carregamento
## Componentes Principais
- TaskForm - Formulário para adicionar novas tarefas
- TaskList - Lista que renderiza as tarefas
- TaskItem - Componente que representa uma única tarefa
- EditTaskModal - Modal para edição de tarefas
- DeleteTaskModal - Modal de confirmação para exclusão
## 🚀 Instalação e Uso
### Pré-requisitos
- Node.js (v14 ou superior)
- npm ou yarn
### Configuração
1. Clone o repositório:
git clone https://github.com/seu-usuario/task-manager.git
cd task-manager
2. Instale as dependências:
npm install ou yarn install
## 📂 Estrutura do Projeto
O projeto segue uma arquitetura modular e escalável, organizada nas seguintes camadas:
- node_modules/
- src/
- components/
- task/
- TaskForm.jsx
- TaskList.jsx
- TaskItem.jsx
- EditTaskModal.jsx
- DeleteTaskModal.jsx
- ui/
- LoadingSpinner.jsx
- hooks/
- useTasks.js
- pages/
- TaskPage.jsx
- NotFoundPage.jsx
- services/
- taskService.jsx
- utils/
- dateFormatter.jsx
- App.jsx
- main.jsx
## ✅ Funcionalidades
- Visualização de tarefas com detalhes como data de criação e status
- Adição de novas tarefas
- Edição de títulos de tarefas existentes
- Marcação de tarefas como concluídas ou pendentes
- Exclusão de tarefas
- Validação de formulários
## 🔮 Roadmap (Futuras Implementações)
- Implementação de autenticação de usuários
- Filtros e ordenação de tarefas
- Categorização de tarefas
- Tema claro/escuro
- Toastify para feedbacks visuais
- Drag and drop para reordenar tarefas
- Vitest para testes unitários e de integração
## 🤝 Contribuição
Se você quiser contribuir com este projeto, siga estas etapas:
- Faça um fork do projeto
- Crie sua feature branch `git checkout -b feature/nova-funcionalidade`
- Commit suas mudanças `git commit -m 'Adiciona nova funcionalidade`
- Push para a branch `git push origin feature/nova-funcionalidade`
- Abra um Pull Request