Skip to content

README.md

Latest commit

 

History

History
217 lines (152 loc) · 6.53 KB

README.md

File metadata and controls

217 lines (152 loc) · 6.53 KB

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

React TypeScript Vite Tailwind CSS TanStack Query

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

Java Spring Boot Maven H2 Database

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