Voltar aos projetos

Status

Concluído

Criado em

30 de março de 2026

Visualizações

15

Tecnologias

React Query
JavaScript
React
Vercel

Tags

#API#Backend#Node.js#Tailwind

Legends Data

Uma plataforma interativa não-oficial para explorar o universo de League of Legends, focada em imersão, performance e simulação tática.

🎮 Legends Data Dashboard

Uma plataforma interativa não-oficial para explorar o universo de League of Legends, focada em imersão, performance e simulação tática.


📖 Visão Geral do Projeto

O Legends Data Dashboard nasceu da paixão por dados e por esports. O objetivo principal foi criar uma aplicação robusta que permitisse aos jogadores não apenas buscar informações detalhadas sobre os campeões, mas também interagir de forma imersiva através de um Simulador de Draft no formato competitivo focado em uma UI premium.

🎯 O Que Foi Desenvolvido

Para tornar a plataforma o mais completa possível, estruturei o sistema nestes três pilares:

  • 1. Explorador de Campeões: Enciclopédia ágil com filtros por classe e exibição detalhada de atributos nativos de cada personagem.
  • 2. Galeria de Skins e Chromas: Interface focada 100% no visual, com splash arts em alta resolução, raridade, custo e chromas.
  • 3. Simulador de Draft (Pick & Ban): Uma ferramenta complexa que recria a fase de escolhas dos campeonatos, com revezamento Blue/Red side e turnos de tempo real.

🛠️ Tecnologias e Arquitetura

Optei por tecnologias modernas para garantir performance:

  • Ecossistema: React 18 e Vite para interface veloz.
  • Roteamento: React Router DOM v7 para Single Page Application fluida.
  • Estilização Direta: Construí um Design System do zero usando Vanilla CSS, demonstrando forte domínio sobre Grid, Flexbox e técnicas como glassmorphism ao invés de atalhos (como Tailwind).
  • Internacionalização (i18n): Estrutura própria através da Context API para troca instantânea de idioma (PT/EN).

💡 Desafios e Aprendizados

  1. Gestão de Estado Complexa no Draft: Aprender a orquestrar toda a máquina de estados para recriar a lógica rigorosa do Pick & Ban competitivo.
  2. Design e Responsividade: Otimização para lidar com imagens de altíssima resolução sem engasgos de performance na interface e uso do glassmorphism.
  3. Modelagem dos Dados: Processamento de bases contendo +160 campeões em estruturas ágeis (JSON) para a listagem performar sem delays.

🌟 Por que este projeto se destaca?

  • Atenção aos Detalhes: Micro-interações em cada etapa.
  • Produto com Utilidade Real: O simulador não é só um CRUD, atende uma dor direta da comunidade (organização de drafts táticos e campenatos amadores).