Projeto · 2026
CEJUC — Academia de Artes Marciais
Site institucional da academia CEJUC (Canoas/RS) — modalidades, horários, mapa de unidades e SEO, publicado na Azure.
Um site institucional tratado como peça editorial — e mantido como software de verdade: arquitetura limpa, design system próprio e zero backend.
Site institucional completo para a academia de artes marciais CEJUC (Boxe, Judô, Jiu-Jitsu, Muay Thai, Treinamento Físico e TP180), com identidade editorial e páginas de modalidades, professores, história, horários e contato.
SPA em React (React Router) com arquitetura MVC (models/views/controllers), mapas em Leaflet para unidades e escolinhas parceiras, e SEO estruturado (schema.org, Open Graph, Google Analytics).
Publicado no Azure Static Web Apps com deploy contínuo via GitHub Actions; backend em Azure Functions + Cosmos DB (MongoDB) planejado para horários e conteúdo dinâmico.
Em números
- 2003
- Fundação
- 5
- Modalidades
- 10
- Páginas
- 320px
- Base mobile
- 0
- Backend
Decisões de engenharia
- 01
Arquitetura MVC por hooks
Cada tela é um trio Página → Controller → View, com os dados isolados em Models. As Views são puramente apresentacionais e os Controllers concentram estado e efeitos — separação que sites institucionais raramente buscam e que aqui deixa o código legível, previsível e testável.
- 02
Models como banco de dados versionável
Horários, catálogo da loja, SEO e navegação vivem como dados em memória com getters puros. Migrar para uma API significa trocar a origem em um único ponto — e o caminho (Azure Functions + Cosmos DB) já está documentado no repositório.
- 03
Design system tokenizado
Uma única fonte de verdade em tokens: cor, tipografia, espaço, sombra, motion e acessibilidade. Sem “números mágicos”. Mobile-first a partir de 320px, alvos de toque de 44px, foco visível e ARIA em toda a navegação.
- 04
Reuso sem repetição
As cinco modalidades compartilham um mesmo controller-base (carrossel + link de WhatsApp); cada página é um wrapper de três linhas. Menos superfície para manter e comportamento idêntico garantido entre elas.
- 05
Performance e SEO de produto
Rotas em lazy-load, build sem source maps, imagens com loading/decoding/fetchpriority, meta tags por rota e dados estruturados JSON-LD (SportsActivityLocation). Um site que o Google entende de verdade.
- 06
Conversão sem servidor
Toda a jornada — matrícula, dúvida, pedido da loja — termina em uma mensagem de WhatsApp montada pelo próprio site. Valor de negócio entregue sem custo de infraestrutura, com deploy contínuo na Azure a cada push.
Arquitetura
Page
Casca de rota
Faz lazy-load, chama o controller e passa as props.
Controller · hook
Estado & efeitos
Lógica de apresentação. Nunca renderiza.
Model
Dados puros
Constantes + getters. O “banco” de hoje.
View
Apresentação
JSX puro, recebe tudo por props.
Responsivo
Stack