RateHub

Descubra, avalie e organize seus lugares favoritos em um só lugar.

Uma aplicação full-stack moderna para cadastrar, avaliar e gerenciar cafeterias, restaurantes, bares e outros estabelecimentos. Perfeita para aprender integração frontend-backend com as melhores práticas do mercado.

---

🛠️ Tecnologias

Frontend

Principais bibliotecas:

• Radix UI: Componentes acessíveis e sem estilo
• React Router: Roteamento lado do cliente
• Axios: Cliente HTTP
• Zod: Validação de schemas
• Sonner: Notificações estilosas
• Lucide React: Ícones SVG
• React Hook Form: Gerenciamento de formulários

Backend

Principais dependências:

• Spring Web: REST APIs
• Spring Data JPA: Acesso ao banco de dados
• Lombok: Reduz boilerplate
• Validation: Validação de dados
• Cloudinary: Armazenamento de imagens

---

📋 Pré-requisitos

• Node.js 18+ e npm
• Java 21+
• Conta Cloudinary (gratuita) para upload de imagens

---

🚀 Como rodar

Backend

1. Configurar variáveis de ambiente

Crie o arquivo server/src/main/resources/application-local.properties:

# Cloudinary
cloudinary.cloud-name=seu_cloud_name
cloudinary.api-key=sua_api_key
cloudinary.api-secret=seu_api_secret

# H2 Database (configuração padrão para desenvolvimento)
spring.datasource.url=jdbc:h2:mem:ratehub
spring.datasource.driverClassName=org.h2.Driver
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect

Como obter as credenciais Cloudinary:

1. Acesse cloudinary.com
2. Crie uma conta gratuita
3. Acesse o dashboard e copie: Cloud Name, API Key e API Secret

2. Iniciar o servidor

cd server

# Compilar e rodar com Maven
./mvnw spring-boot:run -Dspring-boot.run.arguments="--spring.profiles.active=local"

# Ou compilar apenas
./mvnw clean package

# E rodar o JAR
java -jar target/rate-hub-0.0.1-SNAPSHOT.jar --spring.profiles.active=local

O backend estará disponível em: http://localhost:8080

---

Frontend

1. Criar arquivo .env

Na pasta client, crie o arquivo .env baseado no .env.example:

cd client
cp .env.example .env

Se o arquivo .env.example não existir, crie manualmente client/.env com o seguinte conteúdo:

VITE_API_URL=http://localhost:8080

2. Instalar dependências

npm install

3. Rodar em desenvolvimento

npm run dev

O frontend estará disponível em: http://localhost:5173

4. Compilar para produção

npm run build
npm run preview

---

📚 Estrutura do projeto

lab-software-engineering-spring-boot/
├── client/                          # Frontend React + TypeScript
│   ├── src/
│   │   ├── components/              # Componentes React reutilizáveis
│   │   ├── pages/                   # Páginas da aplicação
│   │   ├── lib/
│   │   │   ├── api.ts               # Funções de chamadas HTTP
│   │   │   ├── types.ts             # Tipos TypeScript
│   │   │   ├── schemas.ts           # Validação com Zod
│   │   │   └── axios.ts             # Configuração do axios
│   │   └── hooks/                   # Hooks customizados
│   ├── .env.example                 # Template de variáveis de ambiente
│   └── package.json
│
├── server/                          # Backend Spring Boot
│   ├── src/main/java/network/webtech/rate_hub/
│   │   ├── controller/              # Controladores REST
│   │   ├── service/                 # Lógica de negócio
│   │   ├── repository/              # Acesso ao banco de dados
│   │   ├── entity/                  # Modelos JPA
│   │   ├── dto/                     # Data Transfer Objects
│   │   └── config/                  # Configurações
│   ├── src/main/resources/
│   │   └── application-local.properties  # Variáveis locais
│   └── pom.xml                      # Dependências Maven
│
└── README.md                        # Este arquivo

---

🎯 Fluxo da aplicação

1. Frontend: Usuário interage com a interface em React
2. Axios: Frontend faz requisições HTTP para o backend
3. Spring Boot: Backend processa requisições e acessa o banco
4. Banco de dados: Persiste os dados dos lugares
5. Cloudinary: Armazena imagens enviadas pelo usuário

---

📖 Workshop

Se está participando do workshop, consulte o arquivo client/docs/INTEGRACAO.md para um guia passo a passo sobre como implementar a integração frontend-backend.

---

🔗 APIs disponíveis

O backend expõe os seguintes endpoints:

Método	Endpoint	Descrição
GET	/places	Listar todos os lugares
GET	/places/{id}	Buscar um lugar pelo ID
GET	/places/favorites	Listar apenas favoritos
POST	/places	Cadastrar novo lugar
PUT	/places/{id}	Atualizar lugar
PATCH	/places/{id}/favorite	Alternar favorito
DELETE	/places/{id}	Excluir lugar

---

📝 Licença

Este projeto é fornecido como material educacional.

---

🤝 Contribuindo

Feedbacks e sugestões são bem-vindos! Sinta-se livre para abrir issues ou pull requests.

---

Desenvolvido com ❤️ para ensinar integração frontend-backend moderna