| Home | Escopo e Cronograma | Fluxo de Trabalho | Mockups | Configuração | Arquitetura | Padrões | Banco de Dados | Testes | Utilização |
|---|
⚙ ️ Guia de Configuração — Projeto Se Doce Fosse
Este guia contém o necessário para rodar o projeto fullstack (frontend + backend) em ambiente local, utilizando ou não o Docker.
🧱 Estrutura do Projeto
O projeto é dividido em dois repositórios:
-
Frontend: Se-Doce-Fosse/frontend
Desenvolvido em React + TypeScript, com Vite e SCSS Modules. -
Backend: Se-Doce-Fosse/backend
Desenvolvido em Java + Spring Boot, com integração a PostgreSQL, MongoDB e AWS S3.
🐳 Opção 1 — Rodar com Docker (Recomendado)
1. Clonar os repositórios
git clone https://github.com/Se-Doce-Fosse/backend.git
git clone https://github.com/Se-Doce-Fosse/frontend.git
2. Iniciar os containers
🖥 ️ Backend
cd backend
docker compose up -d backend-dev
Acesse: http://localhost:8080/api/hello
💻 Frontend
cd ../frontend
docker compose up -d
Acesse: http://localhost:80 ou http://localhost:5173
💻 Opção 2 — Rodar Manualmente (sem Docker)
Backend
Pré-requisitos: Java 17+, Maven 3.6+, Git
cd backend
mvn clean compile
mvn spring-boot:run
Acesse: http://localhost:8080/api/hello
Frontend
Pré-requisitos: Node.js 20+, npm, Git
cd frontend
npm install
npm run prepare
npm run dev
Acesse: http://localhost:5173
🧩 Tecnologias Utilizadas
| Camada | Tecnologias |
|---|---|
| Frontend | React, TypeScript, Vite, SCSS Modules, Testing Library |
| Backend | Java 17, Spring Boot 3.5.4, JPA, PostgreSQL, MongoDB |
| Infraestrutura | Docker, AWS (S3, RDS, DocumentDB, EC2, CloudFront, Route53) |
🏗 ️ Arquitetura em Resumo
Usuário → CloudFront → Frontend (React)
↓
Backend (Spring Boot)
↓
PostgreSQL + MongoDB + AWS S3
- O frontend consome a API REST do backend.
- O backend é responsável por lógica de negócio, persistência e integração com os bancos e S3.
- Ambos são executados de forma independente, mas integrados via HTTP.
- O uso do Docker garante padronização entre ambientes.
✅ Convenções Importantes
Git e Versionamento
- Branches e commits em português, conforme padrão definido na Wiki.
- Formato de branch:
tipo/numeroticket-descricao
Exemplo:feat/3422-componente-de-botao - Formato de commit:
tipo: descrição
Exemplo:fix: ajusta cor do botão de envio
Código
-
Frontend:
- Nomes em inglês.
- camelCase (variáveis e funções).
- PascalCase (componentes e arquivos
.tsx). - Testes: um arquivo de teste por componente (cobertura mínima 80%).
-
Backend:
- Padrão de camadas:
Controller → Service → Repository → Model. - Segue boas práticas de separação, testabilidade e reuso.
- Padrão de camadas:
☁ ️ Integração com AWS
| Serviço | Função |
|---|---|
| S3 | Armazenamento de imagens |
| RDS | Banco de dados relacional (PostgreSQL) |
| DocumentDB | Banco de dados NoSQL (MongoDB) |
| EC2 | Hospedagem dos containers |
| CloudFront | Distribuição e cache global |
| Route 53 | Gerenciamento de DNS |
Projeto desenvolvido pela equipe AGES III — PUCRS