Todo App - API Flask + React

Projeto de exemplo com backend em Flask conectando a um banco MySQL e frontend em React com Vite.

Estrutura do projeto

• docker-compose.yml - orquestra a API Flask e o banco MySQL
• api/ - backend Python
  • app.py - ponto de entrada da aplicação
  • database/db.py - configuração do SQLAlchemy
  • models/task_model.py - modelo Task
  • repositories/task_repository.py - acesso ao banco
  • routes/tasks_routes.py - rotas REST de tarefas
  • services/task_service.py - lógica de negócio
• frontend/ - aplicação React com Vite

Tecnologias

• Python 3
• Flask
• Flask-SQLAlchemy
• PyMySQL
• MySQL 8
• React
• Vite
• Axios

Como rodar

Usando Docker Compose

No diretório raiz do projeto:

docker-compose up --build

O serviço da API ficará disponível em http://localhost:5000 e o banco MySQL em localhost:3306.

Executando localmente

Backend

1. Acesse api/
2. Crie e ative um ambiente virtual Python
3. Instale as dependências:

pip install -r requirements.txt

4. Configure as variáveis de ambiente (opcional):

• DB_USER (padrão: root)
• DB_PASSWORD (padrão: 1234)
• DB_HOST (padrão: localhost)
• DB_PORT (padrão: 3306)
• DB_NAME (padrão: todo_db)
• PORT (padrão: 5000)

5. Rode a API:

python app.py

Frontend

1. Acesse frontend/
2. Instale dependências:

npm install

3. Inicie o servidor de desenvolvimento:

npm run dev

O frontend estará disponível no endereço exibido pelo Vite (normalmente http://localhost:5173).

Configuração opcional do frontend

O frontend usa a variável VITE_API_BASE para apontar para a API.

Exemplo no .env do frontend:

VITE_API_BASE=http://localhost:5000

Endpoints da API

• GET /tasks - lista todas as tarefas
• GET /tasks/<id> - retorna uma tarefa pelo ID
• POST /tasks - cria uma tarefa
  • Body JSON: { "title": "Nova tarefa" }
• PUT /tasks/<id> - atualiza uma tarefa
  • Body JSON: { "title": "Texto", "completed": true }
• DELETE /tasks/<id> - remove uma tarefa

Modelo de dados

Tabela: tb_tasks

• id - inteiro, chave primária
• title - string
• completed - boolean

Notas

• O docker-compose.yml já cria o banco todo_db e expõe o MySQL em 3306
• O backend usa SQLAlchemy com mysql+pymysql
• O frontend consome a API por meio do axios

---

Qualquer dúvida, posso também adicionar instruções de deploy ou exemplos de comandos adicionais.