# architect-frameworks-hub Referência rápida e bilíngue para os principais frameworks de arquitetura de soluções. - URL: https://fernando.moretes.com/open-source/architect-frameworks-hub - Markdown: https://fernando.moretes.com/open-source/architect-frameworks-hub/guide.md?lang=pt - GitHub: https://github.com/fernandofatech/architect-frameworks-hub - Language: TypeScript - Topics: - Stars: 1 - Forks: 0 - Updated: 2026-05-16T01:43:43Z --- Architect Frameworks Hub é uma aplicação Next.js em produção que consolida AWS Well-Architected, TOGAF ADM, C4, ArchiMate, DDD, 12-Factor e Cynefin em um único portal de referência rápida — sem PDFs de 200 páginas. ## Por que construí isso No dia a dia como arquiteto de soluções, alterno constantemente entre frameworks distintos dependendo do contexto: Well-Architected para revisões de workload na AWS, C4 para comunicar estrutura de sistemas a times de desenvolvimento, DDD para alinhar limites de domínio com stakeholders de negócio, Cynefin quando o problema ainda não está bem definido. O problema é que cada um desses frameworks vive em sua própria documentação extensa, com vocabulário próprio e nível de abstração diferente. Este repositório existe por uma razão pragmática: preciso de uma referência que carregue rápido, que eu possa abrir durante uma reunião, e que apresente os pontos essenciais de cada framework sem ruído. Construí como uma aplicação web real — Next.js 16, TypeScript 5, Tailwind CSS 4, deploy contínuo no Vercel via GitHub Actions — porque isso também demonstra que sei colocar código em produção com pipeline de CI, análise de segurança e DNS gerenciado via Cloudflare. É simultaneamente uma ferramenta de trabalho e um item de portfólio. ## O que está incluído - **AWS Well-Architected Framework** — os seis pilares e as principais perguntas de revisão de workload. - **TOGAF ADM** — fases A a H com entregáveis por fase, sem o peso do documento completo. - **C4 Model** — os quatro níveis (Context, Container, Component, Code) com orientação sobre quando usar cada um. - **DDD** — bounded contexts, linguagem ubíqua e os principais padrões táticos e estratégicos. - **12-Factor App** — checklist com interpretação pragmática para aplicações modernas em cloud. - **Cynefin** — os domínios do framework e como usá-lo para tomar decisões em ambientes complexos. ## Como o projeto está estruturado Fluxo do código-fonte até o usuário final, passando pelo pipeline de CI/CD. ### 💻 Local - Next.js 16 TypeScript 5 (frontend) - Tailwind CSS 4 styling (frontend) ### 🔁 CI/CD — GitHub Actions - CI workflow build + lint (ci) - Frontend workflow test + build (ci) - Security workflow static analysis (security) ### ☁️ Production - Vercel deploy + CDN (edge) - Cloudflare DNS + proxy (network) ### 👤 End User - Browser frameworks.moretes.com (user) ### Fluxos - dev -> nextapp: npm run dev - nextapp -> tailwind: estilização - nextapp -> ci: push / PR - ci -> frontend_wf: paralelo - ci -> security_wf: paralelo - frontend_wf -> vercel: deploy automático - vercel -> cloudflare: DNS / proxy - cloudflare -> browser: HTTPS ## Instalação e execução local 1. **Clone o repositório** — Use `git clone https://github.com/fernandofatech/architect-frameworks-hub.git` e entre no diretório criado. 2. **Entre na pasta do frontend** — Todo o código da aplicação está sob `frontend/`. Execute `cd frontend` antes dos próximos passos. 3. **Instale as dependências** — Execute `npm install`. O projeto usa Node.js com Next.js 16 e Tailwind CSS 4; não há dependências externas de serviço para rodar localmente. 4. **Inicie o servidor de desenvolvimento** — Execute `npm run dev`. A aplicação ficará disponível em `http://localhost:3000` com hot-reload habilitado. 5. **Consulte SETUP.md e OPERATIONS.md para configuração adicional** — O repositório mantém documentação operacional separada para deploy, variáveis de ambiente e procedimentos de manutenção. _Sequência completa para rodar localmente_ ```bash git clone https://github.com/fernandofatech/architect-frameworks-hub.git cd architect-frameworks-hub/frontend npm install npm run dev # Application available at http://localhost:3000 ``` ## Decisões técnicas e o que elas comunicam A escolha do Next.js 16 com React 19 não é acidental. Server Components permitem que o conteúdo de referência — que é essencialmente estático — seja renderizado no servidor e entregue com latência mínima, sem JavaScript desnecessário no cliente. TypeScript 5 em modo estrito garante que qualquer contribuição futura mantenha a mesma disciplina de tipagem. Tailwind CSS 4 mantém o CSS sob controle sem a sobrecarga de um sistema de design customizado. O pipeline de CI tem três workflows separados: um para build e lint geral, um específico para o frontend, e um dedicado à análise de segurança. Essa separação não é burocracia — é feedback rápido e isolado. Se a análise de segurança falha, não preciso vasculhar logs misturados com resultados de build. O deploy no Vercel com DNS via Cloudflare é uma escolha deliberada de simplicidade operacional para um projeto de portfólio. O domínio `frameworks.moretes.com` está em produção, o que significa que qualquer visitante pode avaliar a performance real da aplicação, não apenas ler sobre ela. Isso é coerente com a premissa do portfólio: mostrar código que funciona em produção, não apenas código que compila. > **Frameworks são ferramentas, não dogmas:** O README deixa explícito: frameworks são ferramentas, não religião. O hub foi desenhado para ajudar a escolher o framework certo para o contexto certo, e para explicar trade-offs a stakeholders — não para prescrever uma abordagem única. Cynefin, por exemplo, é útil precisamente porque reconhece que nem todo problema é complicado da mesma forma. ## Perguntas frequentes ### Posso contribuir com novos frameworks ou corrigir conteúdo existente? Sim. O repositório tem um arquivo CONTRIBUTING.md com as diretrizes. Pull requests são bem-vindos. ### O projeto tem backend ou banco de dados? Não. O conteúdo é estático, renderizado via Next.js Server Components. Não há API separada nem banco de dados. ### Qual versão do Node.js é necessária? O projeto usa Next.js 16 e TypeScript 5. Recomendo Node.js 20 LTS ou superior, que é o target padrão para essas versões. ### Por que o ArchiMate e o Cynefin estão incluídos junto com frameworks mais conhecidos como DDD? Porque na prática de arquitetura empresarial eles aparecem com frequência. ArchiMate é o padrão de modelagem do The Open Group e complementa o TOGAF. Cynefin é útil para estruturar decisões antes de escolher qualquer framework técnico. ## Referências e links - [fernandofatech/architect-frameworks-hub — GitHub](https://github.com/fernandofatech/architect-frameworks-hub) - [Architect Frameworks Hub — Production (frameworks.moretes.com)](https://frameworks.moretes.com) - [Project Architecture Documentation (docs/architecture.md)](https://github.com/fernandofatech/architect-frameworks-hub/blob/main/docs/architecture.md) - [AWS Well-Architected Framework](https://aws.amazon.com/architecture/well-architected/) - [The C4 Model for Software Architecture](https://c4model.com) - [12-Factor App](https://12factor.net) - [Next.js Documentation](https://nextjs.org/docs) ## Para quem é este projeto Este projeto é útil para arquitetos de soluções e engenheiros sênior que precisam de uma referência rápida durante workshops, revisões de design ou conversas com stakeholders. Não substitui a leitura aprofundada de cada framework — para isso existem os livros e documentações oficiais — mas elimina a fricção de localizar os pontos essenciais quando o tempo é limitado. Como item de portfólio, demonstra capacidade de entregar uma aplicação web completa com pipeline de CI, análise de segurança, deploy contínuo e domínio customizado — não apenas conhecimento teórico dos frameworks documentados. Se você está avaliando meu trabalho como arquiteto ou engenheiro, o código e a infraestrutura do próprio hub são tão relevantes quanto o conteúdo que ele apresenta. ## Links - [GitHub repository](https://github.com/fernandofatech/architect-frameworks-hub)