# architect-frameworks-hub Fast, bilingual reference for the most important solution architecture frameworks. - URL: https://fernando.moretes.com/open-source/architect-frameworks-hub - Markdown: https://fernando.moretes.com/open-source/architect-frameworks-hub/guide.md?lang=en - GitHub: https://github.com/fernandofatech/architect-frameworks-hub - Language: TypeScript - Topics: - Stars: 1 - Forks: 0 - Updated: 2026-05-16T01:43:43Z --- Architect Frameworks Hub is a production Next.js application that consolidates AWS Well-Architected, TOGAF ADM, C4, ArchiMate, DDD, 12-Factor, and Cynefin into a single fast-loading reference portal — no 200-page PDFs required. ## Why I built this Day-to-day as a solutions architect, I switch between different frameworks depending on context: Well-Architected for AWS workload reviews, C4 to communicate system structure to development teams, DDD to align domain boundaries with business stakeholders, Cynefin when the problem space is still ambiguous. The issue is that each of these frameworks lives in its own extensive documentation, with its own vocabulary and level of abstraction. This repository exists for a pragmatic reason: I need a reference that loads fast, that I can open mid-meeting, and that surfaces the essential points of each framework without noise. I built it as a real web application — Next.js 16, TypeScript 5, Tailwind CSS 4, continuous deployment to Vercel via GitHub Actions — because that also demonstrates I know how to ship code to production with a CI pipeline, security scanning, and DNS managed through Cloudflare. It is simultaneously a working tool and a portfolio artifact. ## What is included - **AWS Well-Architected Framework** — the six pillars and the key workload review questions. - **TOGAF ADM** — phases A through H with per-phase deliverables, without the weight of the full document. - **C4 Model** — the four levels (Context, Container, Component, Code) with guidance on when to use each. - **DDD** — bounded contexts, ubiquitous language, and the key tactical and strategic patterns. - **12-Factor App** — checklist with pragmatic interpretation for modern cloud applications. - **Cynefin** — the framework's domains and how to use it for decision-making in complex environments. ## How the project is structured Flow from source code to end user, through the CI/CD pipeline. ### 💻 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) ### Flows - dev -> nextapp: npm run dev - nextapp -> tailwind: styling - nextapp -> ci: push / PR - ci -> frontend_wf: parallel - ci -> security_wf: parallel - frontend_wf -> vercel: auto deploy - vercel -> cloudflare: DNS / proxy - cloudflare -> browser: HTTPS ## Installation and local setup 1. **Clone the repository** — Run `git clone https://github.com/fernandofatech/architect-frameworks-hub.git` and change into the created directory. 2. **Navigate to the frontend directory** — All application code lives under `frontend/`. Run `cd frontend` before the next steps. 3. **Install dependencies** — Run `npm install`. The project uses Node.js with Next.js 16 and Tailwind CSS 4; there are no external service dependencies required to run locally. 4. **Start the development server** — Run `npm run dev`. The application will be available at `http://localhost:3000` with hot-reload enabled. 5. **Consult SETUP.md and OPERATIONS.md for additional configuration** — The repository maintains separate operational documentation for deployment, environment variables, and maintenance procedures. _Full sequence to run locally_ ```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 ``` ## Technical decisions and what they communicate The choice of Next.js 16 with React 19 is not accidental. Server Components allow the reference content — which is essentially static — to be rendered on the server and delivered with minimal latency, without unnecessary JavaScript on the client. TypeScript 5 in strict mode ensures that any future contribution maintains the same typing discipline. Tailwind CSS 4 keeps CSS under control without the overhead of a custom design system. The CI pipeline has three separate workflows: one for general build and lint, one specific to the frontend, and one dedicated to security analysis. That separation is not bureaucracy — it is fast, isolated feedback. If the security scan fails, I do not need to sift through logs mixed with build results. Deploying on Vercel with DNS via Cloudflare is a deliberate choice of operational simplicity for a portfolio project. The domain `frameworks.moretes.com` is live in production, which means any visitor can evaluate the real application performance, not just read about it. That is consistent with the portfolio premise: show code that works in production, not just code that compiles. > **Frameworks are tools, not dogmas:** The README states it explicitly: frameworks are tools, not religion. The hub is designed to help choose the right framework for the right context, and to explain trade-offs to stakeholders — not to prescribe a single approach. Cynefin, for example, is useful precisely because it acknowledges that not every problem is complicated in the same way. ## Frequently asked questions ### Can I contribute new frameworks or fix existing content? Yes. The repository has a CONTRIBUTING.md file with guidelines. Pull requests are welcome. ### Does the project have a backend or database? No. The content is static, rendered via Next.js Server Components. There is no separate API or database. ### What Node.js version is required? The project uses Next.js 16 and TypeScript 5. I recommend Node.js 20 LTS or higher, which is the default target for these versions. ### Why are ArchiMate and Cynefin included alongside better-known frameworks like DDD? Because in enterprise architecture practice they appear frequently. ArchiMate is The Open Group's modeling standard and complements TOGAF. Cynefin is useful for structuring decisions before choosing any technical framework. ## References and 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) ## Who this project is for This project is useful for solutions architects and senior engineers who need a quick reference during workshops, design reviews, or stakeholder conversations. It does not replace deep reading of each framework — for that, the books and official documentation exist — but it removes the friction of locating the essential points when time is limited. As a portfolio artifact, it demonstrates the ability to deliver a complete web application with a CI pipeline, security analysis, continuous deployment, and a custom domain — not just theoretical knowledge of the documented frameworks. If you are evaluating my work as an architect or engineer, the hub's own code and infrastructure are as relevant as the content it presents. ## Links - [GitHub repository](https://github.com/fernandofatech/architect-frameworks-hub)