DealsGamer
Criador do projeto — desenvolvi toda a aplicação front-end e a integração com a API da IsThereAnyDeal, incluindo arquitetura, proxy de API, UX e deploy.
- Nuxt 3
- Vue 3
- TypeScript
- Tailwind CSS
- Nuxt UI
- Pinia
- Chart.js
Problema
Acompanhar promoções de jogos para PC exige checar várias lojas separadamente. O projeto resolve isso centralizando ofertas em um só lugar, com dados atualizados da API da IsThereAnyDeal, sem estourar o consumo da API (que tem limites de requisição).
Solução
Aplicação Nuxt 3 com SSR para melhor SEO e performance, consumindo a IsThereAnyDeal via um proxy Nitro no servidor — decisão que protege a chave da API (ITAD_API_KEY nunca chega ao client) e permite normalizar e controlar o consumo de requisições. O catálogo tem carregamento incremental com auto-load, busca global com autocomplete, página de detalhe com tabela de preços e histórico visual (Chart.js), URLs amigáveis por slug e favoritos/filtros locais persistidos via Pinia.
Visão geral
Comparador de ofertas de jogos para PC que consolida preços e promoções de diversas lojas em uma interface única, usando dados da IsThereAnyDeal. O foco é entregar boa experiência de usuário mantendo o consumo da API baixo e previsível.
Funcionalidades
- Home estilo loja: destaque com arte da Steam e prateleiras temáticas.
- Catálogo
/ofertascom filtros sempre visíveis (painel lateral no celular), aplicados na hora com estado na URL, e coleções como/ofertas/gratise/ofertas/acabando. - Carregamento incremental com auto-load + botão manual “Carregar mais”.
- Busca global com sugestões que já mostram capa, preço, desconto e menor preço da história; buscas recentes e atalhos
/eCtrl+K. - Página do jogo com caixa de compra, lojas ordenadas por preço e histórico visual.
- URL amigável por slug (
/game/cyberpunk-2077). - Favoritos em
/favoritoscom o melhor preço atual, salvos no navegador. - SEO: meta por página, JSON-LD de produto, canonical, sitemap e robots.
Decisões técnicas e arquitetura
- SSR com Nuxt 3: melhora SEO (importante para indexação de catálogo) e performance de primeiro carregamento.
- Rotas de API no servidor (Nitro,
server/api/**): a chave da IsThereAnyDeal fica apenas no servidor, evitando exposição no bundle do client e centralizando a normalização dos dados. - Cache SWR nas rotas: respostas reaproveitadas entre visitantes, mantendo o consumo da API baixo e previsível.
- TypeScript strict em todo o código, reforçando a confiabilidade da integração com dados externos.
- Normalização centralizada no composable
useGamesApi.ts, mantendo páginas desacopladas do formato da API. - Estado global via Pinia (
stores/games.ts) para favoritos e filtros, sem dependência de armazenamento server-side. - Grafo de preços com Chart.js + vue-chartjs na página de detalhe.
- Yarn 4 com
node_moduleslinker para instalação mais rápida e reprodutível.
Aprendizados
- Como projetar um proxy de API para proteger credenciais em aplicações SSR.
- Padrões de carregamento incremental e autocomplete com foco em baixo custo de requisições.
- Deploy contínuo no Vercel com variáveis de ambiente para ambientes Production/Preview/Development.