🌎 Languages:
🇧🇷 Português |
🇺🇸 English
O Brincadeiras é um aplicativo que permite ao usuário buscar ou receber sugestões de atividades criativas para crianças, utilizando materiais simples como papel, palito, barbante, etc.
O objetivo é estimular a criatividade e o brincar livre com ideias práticas e acessíveis.
O backend do projeto está hospedado no Render, que pode hibernar após algum tempo sem uso. O frontend está hospedado normalmente na Vercel.
Para garantir que tudo funcione corretamente, siga estes passos:
Antes de abrir o site, acesse:
Isso fará o Render “acordar” o servidor.
- O processo costuma levar 20 a 40 segundos.
- Caso pareça travado, aguarde — é normal na versão gratuita.
- Quando a página mostrar algo como "Backend Ativo!" ou mensagem semelhante, já estará pronto.
Depois que o backend estiver acordado, abra o app:
Agora todas as funcionalidades estarão disponíveis:
- Buscar por atividades
- Gerar sugestões aleatórias
- Filtrar por faixa etária
- Ver detalhes das atividades
O Render Free Tier coloca projetos para “hibernar” após um período sem acessos. Quando isso acontece, a primeira requisição do dia precisa “acordar” o servidor — o que causa essa espera inicial.
Durante a infância, o brincar é essencial para o desenvolvimento cognitivo e social. Como aluno de Ciências da Computação, este projeto surgiu da necessidade de criar brincadeiras criativas e educativas para minhas filhas, combinando interesse pessoal com aprendizado profissional.
Além de proporcionar atividades práticas e acessíveis para crianças, o projeto permitiu desenvolver competências em desenvolvimento full-stack, integração com banco de dados, tratamento de APIs REST, implementação de inteligência artificial e deploy de aplicações web completas.
Durante o desenvolvimento do projeto, foram aplicadas e aprimoradas habilidades em:
- Frontend: React, Vite, CSS responsivo, React Router, Axios, React-Toastify.
- Backend: Spring Boot, API REST, Spring Security, tratamento global de exceções, logging.
- Banco de Dados: Modelagem e integração com MongoDB Atlas.
- Inteligência Artificial: Integração com OpenAI GPT-3.5 para geração automática de atividades.
- Deploy: Backend no Render e frontend no Vercel.
| Camada | Tecnologia | Função Principal |
|---|---|---|
| Frontend | React + Vite | Interface para visualizar, filtrar, adicionar, editar e gerar atividades com IA |
| Backend | Spring Boot | API REST com logs, tratamento global de exceções e geração automática via IA |
| Banco de Dados | MongoDB | Armazena atividades e materiais |
| IA | OpenAI GPT-3.5 | Geração automática de ideias de atividades |
- ✅ React 18+
- ✅ Axios
- ✅ React Router
- ✅ CSS3 responsivo
- ✅ Vite
- ✅ React-Toastify
- ✅ ModalGerarIA.jsx
Funcionalidades atuais:
- Cards de atividades do backend
- Filtros por título, faixa etária e materiais
- Comunicação correta via Axios
- Home, DetalheAtividade e NovaAtividade
- Navbar e Footer responsivos
- Modal de geração IA com scroll interno e desativação de botões durante geração
Exemplo de visualização de cards:
- ✅ Spring Boot 3+
- ✅ Spring Web (APIs REST)
- ✅ Spring Data MongoDB
- ✅ Lombok
- ✅ Spring Boot DevTools
- ✅ Spring Security (SecurityConfig.java)
- ✅ CORS configurado (WebConfig.java)
- ✅ Tratamento de exceções centralizado (GlobalExceptionHandler.java)
- ✅ Endpoint
/atividades/gerar - ✅ Suporte à geração automática via IA (OpenAI GPT-3.5-turbo)
- ✅ Estrutura de dados ajustada: retorna titulo, descricao, materiais, faixaEtaria, id e tipo
- ✅ Tratamento de erros da API da OpenAI e logging aprimorado
- ✅ Dependências adicionadas para integração com OpenAI
Endpoints implementados:
| Método | Rota | Função | Status |
|---|---|---|---|
| GET | /atividades | Lista todas as atividades | ✅ |
| POST | /atividades | Cadastra nova atividade (usar CadastrarAtividadeRequest) |
✅ |
| GET | /atividades/{id} | Detalha uma atividade | ✅ |
| PUT | /atividades/{id} | Atualiza uma atividade | ✅ |
| DELETE | /atividades/{id} | Remove uma atividade | ✅ |
| POST | /atividades/gerar | Gera atividade automaticamente via IA | ✅ |
- ✅ Cluster criado e conectado ao Spring Boot
- ✅ Testes via Compass e Postman concluídos
- ✅ Estrutura do documento:
{
"titulo": "Pintura com palitos de sorvete",
"descricao": "Monte um pincel com palitos e barbante e pinte figuras coloridas",
"materiais": ["palitos de sorvete", "barbante", "tinta guache", "papel"],
"faixaEtaria": "4-6 anos"
}- ✅ Endpoint /atividades/gerar
- ✅ Conexão com OpenAI GPT-3.5-turbo
- ✅ Frontend integrado via ModalGerarIA.jsx
- ✅ Atividades retornam título, descrição, materiais, faixaEtaria, id e tipo
- ✅ Botão “✨ Gerar ideia com IA” estilizado, funcional e desativa botões durante a geração
Exemplo de geração via IA:
Usuário → Frontend (React)
↓
API REST (Spring Boot, Spring Security, logs, tratamento de exceções, geração de IA)
↓
MongoDB (Atlas)
↑
(IA gera ideias automáticas e retorna ao frontend)| Área | Status | Descrição |
|---|---|---|
| Backend | ✅ Concluído | CRUD completo + geração automática via IA + MongoDB + logs + validações + tratamento global |
| Frontend | ✅ Concluído | Home, filtros, detalhe, cadastro e geração de IA integrados |
| Integração | ✅ Testada | Axios + Spring Boot funcionando |
| Banco de Dados | ✅ Operacional | Sincronizado com backend |
| IA | ✅ Implementada | Endpoint e frontend integrados com OpenAI |
| Deploy | ✅ Concluído | Backend → Render, Frontend → Vercel |
brincadeiras/
├─ .idea/
│ ├─ .gitignore
│ ├─ brincadeiras.iml
│ ├─ misc.xml
│ ├─ modules.xml
│ ├─ vcs.xml
│ └─ workspace.xml
├─ .vscode/
│ └─ settings.json
├─ backend/
│ ├─ .idea/
│ │ ├─ .gitignore
│ │ ├─ compiler.xml
│ │ ├─ encodings.xml
│ │ ├─ jarRepositories.xml
│ │ ├─ misc.xml
│ │ ├─ vcs.xml
│ │ └─ workspace.xml
│ ├─ .mvn/
│ │ └─ wrapper/
│ │ └─ maven-wrapper.properties
│ ├─ src/
│ │ ├─ main/
│ │ │ ├─ java/
│ │ │ │ └─ com/
│ │ │ │ └─ brincadeiras/
│ │ │ │ ├─ config/
│ │ │ │ │ ├─ RequestLoggingFilter.java
│ │ │ │ │ ├─ SecurityConfig.java
│ │ │ │ │ └─ WebConfig.java
│ │ │ │ ├─ controller/
│ │ │ │ │ ├─ advice/
│ │ │ │ │ │ └─ GlobalExceptionHandler.java
│ │ │ │ │ ├─ RootController.java
│ │ │ │ │ └─ AtividadeController.java
│ │ │ │ ├─ dto/
│ │ │ │ │ ├─ ErrorResponse.java
│ │ │ │ │ └─ GerarAtividadeRequest.java
│ │ │ │ ├─ model/
│ │ │ │ │ └─ Atividade.java
│ │ │ │ ├─ repository/
│ │ │ │ │ └─ AtividadeRepository.java
│ │ │ │ ├─ service/
│ │ │ │ │ └─ AtividadeService.java
│ │ │ │ └─ BrincadeirasBackendApplication.java
│ │ │ └─ resources/
│ │ │ ├─ static/
│ │ │ ├─ templates/
│ │ │ ├─ application-secret.properties
│ │ │ └─ application.properties
│ │ └─ test/
│ │ └─ java/
│ │ └─ com/
│ │ └─ brincadeiras/
│ │ └─ BrincadeirasBackendApplicationTests.java
│ ├─ .gitattributes
│ ├─ .gitignore
│ ├─ Dockerfile
│ ├─ HELP.md
│ ├─ mvnw
│ ├─ mvnw.cmd
│ └─ pom.xml
├─ frontend/
│ ├─ .vite/
│ │ └─ deps/
│ │ ├─ _metadata.json
│ │ └─ package.json
│ ├─ public/
│ │ ├─ brincadeiras-bg.jpg
│ │ ├─ favicon.ico
│ │ └─ gis-de-cera.png
│ ├─ src/
│ │ ├─ assets/
│ │ ├─ components/
│ │ │ ├─ CardAtividade.jsx
│ │ │ ├─ FiltroAtividades.jsx
│ │ │ ├─ Footer.jsx
│ │ │ └─ ModalGerarIA.jsx
│ │ ├─ pages/
│ │ │ ├─ DetalheAtividade.jsx
│ │ │ ├─ Home.jsx
│ │ │ └─ NovaAtividade.jsx
│ │ ├─ services/
│ │ │ └─ api.js
│ │ ├─ utils/
│ │ │ └─ toast.js
│ │ ├─ App.jsx
│ │ ├─ index.css
│ │ └─ main.jsx
│ ├─ .env
│ ├─ .env.example
│ ├─ .gitignore
│ ├─ eslint.config.js
│ ├─ index.html
│ ├─ package-lock.json
│ ├─ package.json
│ └─ vite.config.js
├─ .gitattributes
├─ .gitignore
├─ LICENSE
└─ README.mdEste projeto está sob a licença MIT — sinta-se à vontade para usar, estudar e modificar.
Piter Gomes - Estudante de Ciências da Computação (5° Período) e Full-Stack Developer.
📧 E-mail | 💼 LinkedIn | 💻 GitHub | 🌐 Portfólio