Landing page de e-commerce gamer desenvolvida com React e TypeScript, com foco em apresentação de produtos, navegação responsiva e uma experiência interativa para montagem de PCs.
O G3 Gamer Store foi desenvolvido como uma experiência web para uma loja especializada em produtos e componentes gamer.
O projeto combina uma landing page comercial com seções de produtos, ofertas, categorias, marcas e um fluxo interativo para montagem de computadores.
Uma loja de hardware gamer precisa apresentar diferentes categorias de produtos de forma visual, organizada e fácil de navegar, além de oferecer uma experiência mais interativa para quem deseja montar um PC.
O desafio foi transformar essa apresentação em uma interface moderna, responsiva e orientada à experiência do usuário.
A aplicação organiza a experiência em seções reutilizáveis e componentes independentes, incluindo:
- Hero e apresentação principal
- Destaques e benefícios
- Ofertas
- Categorias de produtos
- Marcas
- Newsletter
- Contato via WhatsApp
- Fluxo interativo de montagem de PC
- Navegação entre páginas
- Componentes de interface reutilizáveis
A página principal é composta por componentes independentes, enquanto a rota /monte-seu-pc concentra a experiência de configuração de hardware.
- React 18 — construção da interface
- TypeScript — tipagem estática e organização do código
- Vite — desenvolvimento e build
- React Router DOM — navegação entre páginas
- Tailwind CSS — estilização utility-first
- shadcn/ui + Radix UI — componentes e primitivas de interface reutilizáveis
- Framer Motion — animações e interações
- Lucide React — ícones
- Embla Carousel — carrosséis
- Sonner — notificações
- React Hook Form — gerenciamento de formulários
- Zod — validação baseada em schemas
- @hookform/resolvers — integração entre formulário e validação
- TanStack Query — gerenciamento de estado assíncrono e cache
- ESLint — análise estática
- Vitest — framework de testes
- Testing Library — utilitários para testes React
- jsdom — ambiente DOM para testes
src/
├── assets/
├── components/
│ ├── ui/
│ ├── BrandsSection.tsx
│ ├── BuildPCWizard.tsx
│ ├── CategoriesSection.tsx
│ ├── FeaturesSection.tsx
│ ├── Header.tsx
│ ├── Hero.tsx
│ ├── OffersSection.tsx
│ ├── ProductCard.tsx
│ └── ...
├── pages/
│ ├── Index.tsx
│ ├── BuildPC.tsx
│ └── NotFound.tsx
├── test/
│ ├── example.test.ts
│ └── setup.ts
├── App.tsx
├── App.css
├── index.css
└── main.tsx
O projeto possui uma base configurada para desenvolvimento em React com TypeScript, ESLint, Vitest, Testing Library e jsdom.
A infraestrutura do Vitest está configurada para arquivos .test.ts, .test.tsx, .spec.ts e .spec.tsx, com ambiente jsdom e setup do Testing Library.
Atualmente existe 1 arquivo de teste:
src/test/example.test.ts
O teste atual é um smoke test que verifica uma asserção básica. Portanto, existe infraestrutura de testes configurada, mas não há cobertura funcional comprovada de componentes, páginas ou regras de negócio.
Não é apresentado percentual de cobertura nem badge de testes passando.
O projeto possui configuração para deploy na Vercel através de vercel.json, utilizando Vite, build para dist e rewrite para index.html.
Deploy configurado/documentado no repositório:
https://g3-gamer-store.vercel.app
A disponibilidade atual dessa URL não foi confirmada de forma independente.
- Node.js
- npm
git clone https://github.com/KayohanCosta/G3-Gamer-Store.git
cd G3-Gamer-Store
npm installnpm run devnpm run buildnpm run previewnpm run testnpm run test:watchnpm run lintO projeto demonstra uma implementação de interface moderna para e-commerce gamer, combinando componentes reutilizáveis, navegação por rotas, animações, UI baseada em Radix/shadcn e uma experiência interativa de montagem de PC.
A arquitetura técnica detalhada, as decisões de implementação e o fluxo das principais funcionalidades estão documentados em docs/ARCHITECTURE.md.
Este projeto está sob a licença MIT. Consulte o arquivo LICENSE para o texto completo da licença.
Desenvolvido por Kayohan Costa