Brawl Lookup (estilo Brawlify) — React + Vite + Node/Express

Projeto full-stack pronto para rodar localmente.

1) Requisitos

• Node.js 18+
• npm 9+

2) Instalação

Windows (PowerShell)

cd .\backend
npm i
cd ..\frontend
npm i
cd ..

Linux/Mac

cd backend && npm i
cd ../frontend && npm i
cd ..

3) Configurar Token

Crie backend/.env baseado em backend/.env.example e cole seu token da API oficial do Brawl Stars.

Windows (PowerShell)

copy backend\.env.example backend\.env
notepad backend\.env

Linux/Mac

cp backend/.env.example backend/.env
nano backend/.env

4) Rodar tudo com UM comando

Na raiz do projeto:

Dev (backend + frontend)

npm run dev:all

• Frontend: http://localhost:5173
• Backend: http://localhost:4000

Produção (build + serve)

npm run build
cd backend
npm start

Abra: http://localhost:4000

5) Testar tags

• Jogador: #ABCDEFG (exemplo) → /player/ABCDEFG
• Clube: #XXXXXXX → /club/XXXXXXX

6) Modo demo offline (sem token)

Se BRAWL_TOKEN estiver ausente, a UI abre normalmente com dados de demonstração, mostra um aviso “Token ausente”, e desabilita buscas reais.

7) Estrutura

• frontend/ React + Vite + Router
• backend/ Express proxy/cache + tracking (SQLite)

8) Endpoints principais

• GET /api/health
• GET /api/player/:tag
• GET /api/club/:tag
• GET /api/battlelog/:tag
• GET /api/rankings/players/:country (global permitido)
• GET /api/rankings/clubs/:country
• GET /api/rankings/brawlers/:country?brawlerId=16000000
• Tracking:
  • POST /api/track/start?tag=...
  • POST /api/track/stop?tag=...
  • GET /api/track/history/:tag

9) Observações sobre histórico

A API oficial fornece apenas as 25 batalhas mais recentes. Este projeto salva snapshots e battle logs retornados em visitas anteriores para estender o histórico sem inventar dados.

10) Deploy no Render (web service)

Este repositório já inclui render.yaml.

Passos (Render):

1. Crie um novo Web Service a partir do seu repositório.
2. Confirme:
   • Build Command: npm install && npm run build:all
   • Start Command: npm run start:all
3. Configure as variáveis de ambiente:
   • BRAWL_TOKEN = seu token da API oficial (obrigatório para modo online)
   • (opcional) CACHE_TTL_SECONDS, RATE_LIMIT_MAX, TRACK_AUTOMATIC
4. Deploy.

Em produção, o backend serve o build do frontend e todas as chamadas /api/* funcionam na mesma origem (sem CORS).

10) Publicar no Render (recomendado)

Este projeto foi pensado para subir como um serviço web (backend serve o build do frontend).

Passos no Render

1. Suba o repositório no GitHub (ou faça upload do ZIP e conecte).
2. No Render, crie um Web Service a partir do repo.
3. Configure:
   • Build Command: npm install && npm run build:all
   • Start Command: npm run start:all
   • Runtime: Node 18+
4. Variáveis de ambiente (Environment):
   • BRAWL_TOKEN = seu token da API oficial
   • (opcionais) CACHE_TTL_SECONDS, RATE_LIMIT_MAX, UPSTREAM_TIMEOUT_MS

Observação

• Se BRAWL_TOKEN não for informado, o site abre em modo DEMO (sem travar).

Solução de problemas

Loop infinito no npm install

Se o terminal ficar repetindo postinstall em loop, isso era causado por um script postinstall chamando npm install novamente. Nesta versão o postinstall foi removido. Faça uma instalação limpa:

# na raiz
rm -rf node_modules package-lock.json
npm install

No Windows PowerShell:

rd /s /q node_modules
del package-lock.json
npm install

"# repododiabo"