Conheça a estrutura de pastas, os padrões adotados e as decisões técnicas que guiam o desenvolvimento do Dev Showcase.
Cada pasta tem uma responsabilidade clara, facilitando navegação e manutenção.
Rotas do App Router — cada pasta é uma rota, com page.tsx, loading.tsx e metadata.
Componentes de domínio agrupados por funcionalidade — cada feature é isolada e auto-contida.
Componentes compartilhados e reutilizáveis — UI primitivos, layout, navegação.
Utilitários, configurações, helpers — i18n, SEO, rate limiting, animações.
Arquivos JSON de tradução por idioma — pt-BR, en, es, de.
Custom hooks reutilizáveis — scroll lock, media queries, etc.
Padrões consistentes que todo contribuidor deve seguir.
Cada funcionalidade tem sua pasta em features/ com componentes, hooks e dados isolados. O index.tsx exporta o componente principal.
Cada feature exporta via index.tsx. Importações externas usam @/features/nome, nunca acessam arquivos internos diretamente.
Componentes são Server por padrão. Apenas os que usam hooks, estado ou eventos recebem 'use client' no topo.
Cada página tem seu namespace JSON. Novas páginas devem criar o JSON, registrar em load-messages.ts e types.d.ts.
HeroSection, SectionWrapper, SectionNav, AnimatedSection — reutilizados em todas as páginas para consistência.
Do servidor ao cliente, cada camada tem uma responsabilidade clara.
Cada decisão arquitetural foi tomada com base em trade-offs reais.
Server Components por padrão, layouts aninhados, streaming, generateMetadata nativo.
Suporte nativo a App Router, tipagem forte, sem rewrites de rota, namespaces simples.
Utility-first acelera o desenvolvimento, consistência visual, dark mode nativo, tree-shaking automático.
Animações declarativas, variants reutilizáveis, controle de viewport, exit animations.
Projeto de escopo único. Um repositório mantém o workflow simples para contribuidores.