Um sistema completo de gerenciamento de tarefas desenvolvido com PHP, MySQL e React JS.
Este projeto implementa uma aplicação web para gerenciamento de tarefas pessoais, permitindo aos usuários criar, visualizar, editar, marcar como concluídas e excluir tarefas. A aplicação foi desenvolvida seguindo o padrão MVC (Model-View-Controller) e utiliza Programação Orientada a Objetos.
- Listagem de todas as tarefas
- Filtragem de tarefas por status (Todas, Pendentes, Em andamento, Concluídas)
- Adição de novas tarefas
- Edição de tarefas existentes
- Marcação de tarefas como concluídas ou em andamento
- Exclusão de tarefas
- Interface responsiva e amigável
- PHP 8.0 (sem frameworks)
- MySQL 8.0
- Padrão MVC
- Programação Orientada a Objetos
- RESTful API
- React JS
- Tailwind CSS
- Axios para requisições HTTP
- date-fns para manipulação de datas
- Docker e Docker Compose para containerização
- Apache como servidor web
agenda-tarefas/
├── backend/
│ ├── database/
│ │ └── init.sql
│ ├── public/
│ │ └── index.php
│ ├── src/
│ │ ├── config/
│ │ │ └── Database.php
│ │ ├── controllers/
│ │ │ └── TarefaController.php
│ │ └── models/
│ │ └── Tarefa.php
│ └── Dockerfile
├── frontend/
│ ├── public/
│ │ └── index.html
│ ├── src/
│ │ ├── components/
│ │ │ ├── EmptyState.js
│ │ │ ├── Header.js
│ │ │ ├── LoadingSpinner.js
│ │ │ ├── StatusFilter.js
│ │ │ ├── TarefaForm.js
│ │ │ └── TarefasList.js
│ │ ├── services/
│ │ │ └── TarefaService.js
│ │ ├── App.js
│ │ ├── index.js
│ │ ├── index.css
│ │ └── reportWebVitals.js
│ ├── Dockerfile
│ ├── package.json
│ └── tailwind.config.js
└── docker-compose.yml
- Docker e Docker Compose
- Navegador web moderno
-
Clone o repositório:
git clone https://github.com/seu-usuario/agenda-tarefas.git cd agenda-tarefas -
Inicie os containers com Docker Compose:
docker-compose up -d
-
Acesse a aplicação:
- Frontend: http://localhost
- Backend API: http://localhost:8000/api/tarefas
- phpMyAdmin: http://localhost:8080 (usuário: agenda_user, senha: Dlf_d88Ff0asCC)
A aplicação utiliza uma tabela principal tarefas com a seguinte estrutura:
| Campo | Tipo | Descrição |
|---|---|---|
| id | INT | Identificador único da tarefa (chave primária) |
| titulo | VARCHAR(255) | Título da tarefa |
| descricao | TEXT | Descrição detalhada da tarefa |
| status | ENUM | Status da tarefa (pendente, em_andamento, concluida) |
| data_criacao | DATETIME | Data e hora de criação da tarefa |
| data_prazo | DATETIME | Data e hora limite para conclusão |
| data_conclusao | DATETIME | Data e hora em que a tarefa foi concluída |
| Método | Endpoint | Descrição |
|---|---|---|
| GET | /api/tarefas | Listar todas as tarefas |
| GET | /api/tarefas/{id} | Obter uma tarefa específica |
| POST | /api/tarefas | Criar uma nova tarefa |
| PUT | /api/tarefas/{id} | Atualizar uma tarefa existente |
| DELETE | /api/tarefas/{id} | Excluir uma tarefa |
- Implementação do padrão MVC para separação de responsabilidades
- Utilização de POO com classes para modelos e controladores
- Conexão com banco de dados utilizando PDO para segurança
- Tratamento de erros e exceções
- Validação de dados de entrada
- Respostas em formato JSON
- Componentização com React JS
- Estilização moderna com Tailwind CSS
- Estado gerenciado com React Hooks
- Comunicação assíncrona com a API
- Feedback visual para o usuário (loading, mensagens de sucesso/erro)
- Interface responsiva para diferentes dispositivos
- Validação de dados no backend e frontend
- Proteção contra SQL Injection usando PDO e prepared statements
- Sanitização de dados de entrada
- Tratamento adequado de erros
Se você encontrar o erro Could not find a required file. Name: index.js, verifique se os seguintes arquivos estão presentes no diretório frontend/src:
- index.js
- index.css
- reportWebVitals.js
Estes arquivos são necessários para a inicialização correta da aplicação React.
Jesse Santos
Desenvolvido como parte de um projeto de avaliação técnica.