Bagres FC
Aplicativo web mobile-first (PWA) para gestão de peladas semanais — lista de presenca, sorteio de times, controle de partidas ao vivo, estatisticas e votacao entre jogadores.
Acesse: https://bagres-fc.vercel.app
Stack
| Camada | Tecnologia |
|---|
| Frontend | React + Vite (PWA) |
| Estilo | Tailwind CSS + shadcn/ui |
| Backend + Banco | Supabase (PostgreSQL + Auth + Storage) |
| Hospedagem | Vercel |
| Notificacoes | Web Push + Supabase Edge Functions |
Rodando localmente
npm install
npm run dev
Crie um arquivo .env na raiz com:
VITE_SUPABASE_URL=sua_url_aqui
VITE_SUPABASE_ANON_KEY=sua_chave_aqui
Perfis de Acesso
| Perfil | Acesso |
|---|
| Admin | Todas as telas + exclusivas (3A e 6) |
| Usuario Aprovado | Telas 1, 2, 3B, 4 e 5 |
| Pendente | Somente tela de bloqueio "Aguardando aprovacao" |
Todo cadastro novo comeca como Pendente e so recebe acesso apos aprovacao manual do admin via Tela 6.
Ciclo Semanal da Rodada
| Periodo | Estado |
|---|
| Segunda a Quinta (antes das 14h) | Lista fechada — admin pode abrir manualmente |
| Quinta as 14h | Lista abre automaticamente; admins entram confirmados primeiro |
| Quinta as 18h (ou todos pagos) | Lista fecha; times sorteados sao revelados |
| Segunda | Dia do jogo |
| Pos-jogo | Admin finaliza a rodada, estatisticas atualizadas, votacao aberta manualmente |
Telas
Tela 1 — Login / Cadastro
Acesso: Todos
Porta de entrada do app.
- Formulario de login (email + senha)
- Formulario de criacao de conta
- Redirecionamento automatico por perfil:
- Admin -> painel de controle da rodada
- Aprovado -> visao do jogador na rodada
- Pendente -> tela de bloqueio "Aguardando aprovacao"
Tela 2 — Perfis e Rodadas
Acesso: Todos os aprovados
Hub de informacoes publicas e historico do grupo.
- Lista de todos os jogadores aprovados com foto, nome e rating atual
- Historico de rodadas passadas
- Detalhes de cada rodada no historico:
- Artilheiro (maior numero de gols)
- Garcao (lider de assistencias)
- Time da Rodada (time com melhor desempenho)
Tela 3A — Administracao da Rodada
Acesso: Somente Admin
Painel de controle completo do evento semanal, dividido em tres fases:
Pre-jogo
- Abrir a lista manualmente (disponivel a partir de segunda-feira)
- Gerenciar a lista: remover jogadores, visualizar status de pagamento
- Validar ou rejeitar pagamentos individualmente
- Adicionar convidados (jogadores avulsos) a lista
- Sortear os 4 times manualmente
- Limpar a lista inteira
Durante o jogo
- Botao "Iniciar Jogos"
- Visualizacao dos 4 times sorteados; admin seleciona o confronto ativo
- Interface da partida ativa:
- Fotos dos jogadores em campo
- Cronometro da partida
- Registro de gols e assistencias por jogador especifico
- Marcar o time vitorioso
- Botao "Finalizar Jogo" (zera o cronometro e libera o proximo confronto)
Pos-jogo
- Botao "Finalizar Rodada": encerra o evento e atualiza estatisticas no banco
- Resumo oficial gerado automaticamente: Time da Rodada, Artilheiro e Garcao
Tela 3B — Rodada do Jogador
Acesso: Usuarios aprovados
Visao do jogador sobre o evento da semana. O conteudo muda conforme a fase da rodada:
| Fase | O que o jogador ve |
|---|
| Antes de quinta as 14h | "Aguardando rodada" |
| Lista aberta | Botao "Entrar na lista" |
| Na lista principal | Lista completa + "Confirmar Pagamento" ou "Retirar nome" |
| Na lista de espera | Lista completa + posicao atual na fila |
| Quinta as 18h / todos pagos | Times sorteados revelados |
| Fim da rodada | Resumo oficial (Artilheiro, Garcao, Time da Rodada) |
Tela 4 — Votacao
Acesso: Todos os aprovados
Sistema de avaliacao entre jogadores para gerar os ratings exibidos na Tela 2.
- Interface para avaliar os colegas apos cada rodada
- Cada usuario vota uma unica vez por ciclo — apos votar a tela fica bloqueada
- Admin pode reabilitar a votacao manualmente quando necessario
Tela 5 — Perfil
Acesso: Todos os aprovados
Area pessoal do usuario.
- Estatisticas individuais: gols, assistencias, jogos disputados e times em que atuou
- Edicao de dados pessoais e foto de perfil
Tela 6 — Administracao de Usuarios
Acesso: Somente Admin
Backoffice de gestao de pessoas e acessos.
- Lista de contas com status Pendente para Aprovar ou Rejeitar
- Criacao manual de usuarios comuns ou admins
- Edicao e exclusao de contas existentes
Banco de Dados
Execute supabase/schema.sql e supabase/functions.sql no SQL Editor do Supabase para criar as tabelas, triggers, RLS e funcoes auxiliares.
Tabelas principais
| Tabela | Descricao |
|---|
profiles | Jogadores (estende auth.users) |
rodadas | Rodadas semanais |
presencas | Lista de confirmados e fila de espera |
times | Times sorteados por rodada |
time_jogadores | Relacao jogador <-> time |
partidas | Resultados das partidas |
eventos | Gols e assistencias por partida |
ciclos_votacao | Ciclos de avaliacao |
votos | Avaliacoes entre jogadores |
push_subscriptions | Assinaturas de push notification |
Notificacoes Push
O app envia notificacoes via Web Push (PWA) nos seguintes eventos:
- Lista da rodada aberta
- Promocao da lista de espera para a lista principal
- Pagamento confirmado ou rejeitado
- Times sorteados
- Votacao aberta
Edge Function: send-push
Secrets necessarios: VAPID_PUBLIC_KEY, VAPID_PRIVATE_KEY
Deploy
# Frontend
npx vercel --prod
# Edge Function
npx supabase functions deploy send-push --no-verify-jwt
Design
Inspirado no Cartola FC — dark mode com sotaque futebolistico.
- Background:
#0D0D0D / #111827
- Acento verde (acoes principais):
#00C853
- Acento amarelo (destaques):
#FFD600
- Danger:
#EF4444
- Navegacao por bottom navigation bar fixa
- Cards com
rounded-2xl e avatares circulares
- Fonte: Inter / Roboto
