GordaoMod | ExpoStacker

PRODUTO EM PRODUÇÃO

gordaomod.expostacker.com.br

live preview

Loja oficial de recursos premium para FiveM com 216 recursos, 10 categorias, design cyber e deploy automatico

Usar agora Arquitetura

Stack tecnológica: HTML5 CSS3 Vanilla JS Cloudflare Pages FiveM Acessibilidade

216
Produtos: 10
Categorias: <1s
Deploy

Cliente

GordaoMod

Setor

Gaming Tech

Linha do tempo

4 semanas (estimado) · 2026-06-13

Produto ao vivo

Usar agora

Resultados

Resultados reportados pelo cliente durante o rollout

216 Produtos publicados

Baseline: Catalogo completo exposto

10 Categorias organizadas

Baseline: Navegacao por tabs

5 Paginas publicadas

Baseline: Home, checkout, ficha, download, recursos

<1 min Deploy

Baseline: GitHub Actions + Cloudflare Pages

Dados reportados pelo cliente

O desafio

Um dono de servidor FiveM acessa a GordaoMod e encontra 216 recursos premium organizados em 10 categorias. Ele navega pelas tabs, busca por nome, abre a ficha tecnica de um produto e le todas as especificacoes em um modal detalhado. O design cyber/tech com acentos roxos, fontes Orbitron e Rajdhani, e grid de cards responsivo transmite profissionalismo. O deploy e automatico a cada push na main via GitHub Actions e Cloudflare Pages.

A GordaoMod precisava de uma loja online profissional para comercializar scripts, mods, spoofer e recursos premium para servidores GTA V Roleplay FiveM. O desafio era apresentar 216 recursos em 10 categorias com navegacao fluida, ficha tecnica detalhada, busca rapida e design cyber/tech sem depender de frameworks pesados. A solucao deveria ser leve, acessivel, otimizada para SEO e com deploy automatico no ecossistema ExpoStacker.

A abordagem

Optamos por uma solucao puramente estatica: HTML5 para estrutura semantica, CSS3 com variaveis e media queries para o design cyber/tech responsivo, e Vanilla JS para as interacoes (tabs, busca, modal). Todos os produtos sao renderizados no HTML estatico com descricoes completas em atributos data, garantindo que o site funcione sem backend. Deploy no Cloudflare Pages com build que copia os assets para dist/, cache otimizado via _headers e SEO com meta tags, OG, canonical e robots.txt.

A solução

A GordaoMod e uma loja estatica completa para recursos FiveM, com 216 recursos, 10 categorias, ficha tecnica modal, busca, design cyber e deploy automatico no Cloudflare Pages.

216 recursos em 10 categorias: Mais Vendidos, Protecao e Spoofer, Faccoes e Crime, Empregos e Economia, Entretenimento, Veiculos, Imoveis e Lojas, UI e Aparencia, Comunicacao, Admin e Utilitarios
5 paginas HTML: home com catalogo, checkout, ficha tecnica, download e recursos
Navegacao por tabs dinamicas com busca em tempo real por titulo
Modal de ficha tecnica com descricao completa, preco e video (quando disponivel)
Design cyber/tech com acentos roxos (#c026d3), fontes Orbitron e Rajdhani, fundo escuro e efeitos de glow
Otimizacoes de acessibilidade: skip link, ARIA labels, headings semanticos, focus visible, reduced motion
SEO: meta description, canonical, Open Graph, Twitter Cards, robots.txt, sitemap e favicon
Responsividade para desktop, tablet e mobile com breakpoints 480px e 768px
Deploy automatico: git push main -> GitHub Actions -> build -> Cloudflare Pages
Cache otimizado via _headers para CSS, JS e imagens

Linha do tempo

Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.

Semana 1

Descoberta

Mapeamento dos 216 recursos no backup
Escolha da versao publica da loja
Auditoria de responsividade, SEO e acessibilidade

Semana 2

Correcoes

Correcao de encoding e caracteres especiais
Revisao de SEO (meta, OG, canonical)
Melhorias de acessibilidade (ARIA, skip link, focus)

Semana 3

Deploy

Criacao do build e workflow
Configuracao do Cloudflare Pages e CNAME
Deploy automatico do gordaomod.expostacker.com.br

Semana 4

Portfolio

Criacao do case e hero SVG
Integracao com o site principal ExpoStacker
Build e validacao PT/EN

Metodologia

Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.

Revisao de padroes ExpoStacker antes do deploy

Correcoes defensivas sem quebrar o visual

Deploy incremental e validacao de rotas

Criacao de case documentando tecnicas e decisoes

Arquitetura

GitHub

push main

GitHub Actions

build -> dist/

Cloudflare Pages

gordaomod.expostacker.com.br

HTML5

CSS3

Vanilla JS

_headers

robots.txt

→ Cliente: navegador com HTML5/CSS3/JS
→ Host: Cloudflare Pages (CDN global)
→ Build: node build.js copia arquivos para dist/
→ CI/CD: GitHub Actions roda npm ci, npm run build e deploy no Pages
→ Dominio: gordaomod.expostacker.com.br via CNAME proxied na Cloudflare

Diagrama conceitual — não reflete implementação real

Stack tecnológica

Escolhas técnicas e o que ficou para fora.

ecommerce

HTML5

Por quê: Estrutura semantica acessivel e indexavel por motores de busca

Alternativa rejeitada: JSX/Templates renderizados no servidor

CSS3

Por quê: Design cyber com variaveis, grid, flexbox e media queries sem bibliotecas externas

Alternativa rejeitada: Tailwind ou Bootstrap adicionariam dependencias e classes nao usadas

Vanilla JS

Por quê: Interacoes leves para tabs, busca e modal sem bundle

Alternativa rejeitada: React/Vue aumentariam hidratacao e tempo de build

ecommerce

Cloudflare Pages

Por quê: CDN global, dominio customizado e deploy automatico sem custo

Alternativa rejeitada: Netlify/Vercel com limites de banda e build time

GitHub Actions

Por quê: CI/CD nativo ao repo sem ferramentas adicionais

Alternativa rejeitada: CircleCI/Travis exigiriam mais configuracao e custo

Decision log

O que escolhi, o que rejeitei e por quê.

HTML5 + CSS3 + Vanilla JS em vez de framework

Por que: Uma loja de recursos digitais com paginas estaticas nao precisa de reatividade complexa. HTML, CSS e JS puro resulta em carregamento instantaneo, bundle zero e manutencao simples sem build pesado.

Alternativas rejeitadas: Avaliamos Astro e Next.js, mas o site e uma pagina unica com conteudo estatico. Adicionar um framework aumentaria o build, hidratacao e tempo de deploy sem ganho real.

Produtos inline no HTML em vez de JSON separado

Por que: Manter os 216 recursos no HTML estatico garante que o site funcione em qualquer CDN sem depender de requisicoes adicionais. O build copia tudo para dist/ e o deploy e unico.

Alternativas rejeitadas: Consideramos extrair os produtos para um JSON e carregar via JS, mas isso adicionaria uma requisicao extra e complexidade. Para a primeira versao, inline e mais simples.

Segurança e acesso

Seguranca e privacidade

Credenciais de Cloudflare mantidas em .deploy.env e nunca commitadas
Secrets do GitHub injetados pelo workflow, sem hardcoded
robots.txt orienta crawlers e expoe sitemap
Cache e headers configurados via _headers para nao expor arquivos sensiveis

Lições aprendidas

Nem tudo saiu como planejado.

— Sites estaticos com muito conteudo inline exigem atencao com tamanho de HTML e performance. Para proximas versoes, extrair produtos para JSON e carregar sob demanda pode reduzir significativamente o tempo de carga inicial.