🎮 G3 Gamer Store

Landing page moderna e responsiva para loja de produtos gamer, desenvolvida com as mais recentes tecnologias web.

🚀 Tecnologias Utilizadas

Frontend Framework

• React 18.3 - Biblioteca JavaScript para construção de interfaces
• TypeScript 5.8 - Superset JavaScript com tipagem estática
• Vite 5.4 - Build tool e dev server extremamente rápido

Estilização

• Tailwind CSS 3.4 - Framework CSS utility-first
• Tailwind Animate - Animações CSS com Tailwind
• Framer Motion 12.27 - Biblioteca de animações para React
• Class Variance Authority - Gerenciamento de variantes de classes CSS
• clsx & tailwind-merge - Utilitários para manipulação de classes CSS

Componentes UI

• shadcn/ui - Coleção de componentes reutilizáveis e acessíveis
• Radix UI - Primitivos de UI acessíveis e não-estilizados:
  • Accordion, Alert Dialog, Avatar, Checkbox
  • Dialog, Dropdown Menu, Navigation Menu
  • Popover, Progress, Radio Group, Select
  • Slider, Switch, Tabs, Toast, Tooltip
  • E muitos outros...

Ícones e Assets

• Lucide React - Biblioteca de ícones moderna e customizável

Formulários

• React Hook Form 7.61 - Gerenciamento de formulários performático
• Zod 3.25 - Validação de schemas TypeScript-first
• @hookform/resolvers - Integração de validadores com React Hook Form

Carrossel e UI Avançada

• Embla Carousel - Carrossel leve e performático
• Vaul - Drawer/Sheet components
• Sonner - Notificações toast elegantes
• input-otp - Componente de input OTP
• React Day Picker - Seletor de datas
• date-fns - Manipulação e formatação de datas

Gráficos

• Recharts 2.15 - Biblioteca de gráficos para React

Roteamento

• React Router DOM 6.30 - Roteamento declarativo para React

Estado e Data Fetching

• TanStack Query (React Query) 5.83 - Gerenciamento de estado assíncrono e cache

Temas

• next-themes - Gerenciamento de temas (dark/light mode)

Qualidade de Código

• ESLint 9.32 - Linter JavaScript/TypeScript
• TypeScript ESLint - Regras ESLint específicas para TypeScript

Testes

• Vitest 3.2 - Framework de testes unitários ultrarrápido
• Testing Library - Utilitários para testes de componentes React
• jsdom - Implementação JavaScript do DOM para testes

Build e Deploy

• PostCSS - Processador de CSS
• Autoprefixer - Plugin PostCSS para adicionar vendor prefixes
• Vercel - Plataforma de deploy (configurado via vercel.json)

📦 Instalação

# Clone o repositório
git clone https://github.com/KayohanCosta/g3-gamer-store.git

# Entre na pasta do projeto
cd g3-gamer-store

# Instale as dependências
npm install

🛠️ Scripts Disponíveis

# Inicia o servidor de desenvolvimento
npm run dev

# Cria build de produção
npm run build

# Cria build de desenvolvimento
npm run build:dev

# Preview do build de produção
npm run preview

# Executa os testes
npm run test

# Executa os testes em modo watch
npm run test:watch

# Executa o linter
npm run lint

🌐 Deploy

O projeto está configurado para deploy automático na Vercel. A cada push para a branch main, um novo deploy é automaticamente criado.

📝 Licença

Este projeto está sob a licença MIT.

---

Desenvolvido com 💚 por Kayohan Costa