architect-frameworks-hub
Fast, bilingual reference for the most important solution architecture frameworks.
git clone https://github.com/fernandofatech/architect-frameworks-hub.gitArchitect 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
How the project is structured
Flow from source code to end user, through the CI/CD pipeline.
- Next.js 16 · TypeScript 5
- Tailwind CSS 4 · styling
- CI workflow · build + lint
- Frontend workflow · test + build
- Security workflow · static analysis
- Vercel · deploy + CDN
- Cloudflare · DNS + proxy
- Browser · frameworks.moretes.com
Installation and local setup
- 1
Clone the repository
Run
git clone https://github.com/fernandofatech/architect-frameworks-hub.gitand change into the created directory. - 2
Navigate to the frontend directory
All application code lives under
frontend/. Runcd frontendbefore 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 athttp://localhost:3000with 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.
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:3000Technical 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
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.