Criei um app para acompanhar a Copa do Mundo 2026 em tempo real (React + TypeScript)
### Do que você é capaz e ainda não sabe?
Olá, comunidade! Tudo bem?
Com a Copa do Mundo 2026 acontecendo — a primeira edição com 48 seleções, sediada em México, Estados Unidos e Canadá — resolvi unir duas coisas que gosto: futebol e front-end. Nasceu assim o Copa 2026 App, um projeto para acompanhar grupos, seleções, jogos e o mata-mata do torneio de forma visual e interativa.
🔗 Demo: https://worldcup2026-app-two.vercel.app/
💻 Repositório: https://github.com/devbdallagnol/worldcup2026-app
### O problema
Acompanhar a Copa costuma significar abrir várias abas: uma para a tabela de grupos, outra para o chaveamento do mata-mata, outra para saber quando é o próximo jogo. Faltava um lugar único, bonito e responsivo para ver tudo isso de forma organizada — e, de quebra, um projeto real para praticar uma stack moderna de front-end do zero.
Meus objetivos eram:
- centralizar grupos, seleções, jogos e mata-mata em um só lugar;
- ter um contador regressivo para a abertura do torneio;
- permitir favoritar a seleção "do coração";
- funcionar bem tanto no desktop quanto no celular;
- servir como vitrine de boas práticas com React, TypeScript e Tailwind.
### A solução
Construí uma aplicação web em React 18 + TypeScript, usando Vite como build tool e Tailwind CSS para estilização. O resultado é um site com identidade visual escura, cores de destaque em amarelo/verde e navegação simples entre quatro áreas: Início, Grupos, Seleções, Jogos e Mata-mata.
**Imagem da Home, com o contador regressivo e os destaques do torneio:**
Na página de Grupos, é possível ver os 12 grupos (A a L) com a classificação completa de cada seleção: pontos, jogos, vitórias, empates, derrotas, gols pró e saldo de gols — tudo já indicando quais times avançam direto ao mata-mata.
**Imagem da tela de Grupos:**
Já a página de Mata-mata mostra um chaveamento interativo, das oitavas de final até a grande decisão, com rolagem horizontal para navegar entre as fases.
**Imagem do Chaveamento:**
### Como utilizar
1. Acesse a demo publicada: https://worldcup2026-app-two.vercel.app/
2. Navegue pelo menu superior entre Início, Grupos, Seleções, Jogos e Mata-mata.
3. Use os botões Ver Grupos e Ver Mata-mata na home para ir direto ao conteúdo.
4. Favorite sua seleção do coração (o dado fica salvo localmente no navegador).
5. Alterne entre modo claro e escuro conforme sua preferência.
Quem quiser rodar o projeto localmente também pode clonar o repositório:
```bash
git clone https://github.com/devbdallagnol/worldcup2026-app.git
cd worldcup2026-app
npm install
npm run dev
```
O projeto sobe em `http://localhost:5173` e já funciona com dados mockados, sem necessidade de configurar nenhuma API externa.
### Stack utilizada
| Categoria | Tecnologia |
|---------------------|------------------------|
| Build tool | Vite |
| Linguagem | TypeScript |
| UI | React 18 |
| Estilização | Tailwind CSS |
| Animações | Framer Motion |
| Roteamento | React Router DOM |
| Cache/dados remotos | TanStack Query |
| Estado global | Zustand |
| Ícones | Lucide React |
| Deploy | Vercel |
### Funcionalidades
- ⏱️ Contador regressivo para a abertura da Copa
- 🌎 Visualização dos grupos e classificação
- ⚽ Lista de jogos com filtro por data, seleção e estádio
- 🏟️ Detalhes de seleções (elenco, bandeira, histórico)
- 🥇 Chaveamento interativo do mata-mata
- ⭐ Sistema de favoritos (seleção "do coração" salva localmente)
- 🌗 Modo claro / escuro
- 📱 Totalmente responsivo (mobile-first)
### Limitações
Por enquanto o app trabalha com dados mockados (`src/data/worldcup2026.json`), já que a fase de grupos real do torneio ainda não aconteceu. Conforme os jogos forem definidos oficialmente, pretendo integrar uma API real de estatísticas ao vivo.
Também está no roadmap:
- [ ] Internacionalização (PT-BR / EN / ES)
- [ ] Integração com API real de estatísticas ao vivo
- [ ] PWA (uso offline)
- [ ] Página de estatísticas por jogador
- [ ] Testes E2E com Playwright
### Por que decidi compartilhar?
Sou apaixonado por futebol e por front-end, e este projeto foi uma forma de praticar uma stack completa — TypeScript, gerenciamento de estado com Zustand, cache de dados com TanStack Query, animações com Framer Motion e testes com Vitest — construindo algo que eu mesmo uso para acompanhar a Copa.
Se você também está começando na área ou quer treinar React e TypeScript em um projeto com tema divertido, sinta-se à vontade para explorar o código, abrir uma issue ou até enviar um Pull Request. Toda sugestão e melhoria é bem-vinda!
Essa é minha contribuição de hoje aqui na comunidade. Um abraço e bons estudos! ⚽🏆
**Links do projeto:**
- 🔗 Demo: https://worldcup2026-app-two.vercel.app/
- 💻 Repositório: https://github.com/devbdallagnol/worldcup2026-app
