The Architecture of my website: A C4 Model Walkthrough

Here's behind-the-scenes look at how this portfolio / blog system is built. To visualize the architecture, I've used the C4 Model - a fantastic framework for mapping out software architecture at different levels of zoom.

---

1. The Big Picture: System Context

Who uses the system, and what external services does it rely on?

At the highest level, we have visitors reading content and the admin (me) managing it. The system handles everything internally, relying only on Google OAuth for secure admin login.

---

2. The Moving Parts: Container Diagram

What are the major applications and data stores?

Zooming in, the system is fundamentally a modern Next.js full-stack application backed by a serverless PostgreSQL database. It handles rendering, API routes, and file storage all within the same ecosystem.

---

3. Under the Hood: Component Diagram

How is the Next.js application structured internally?

Zooming in one last time into the Next.js app itself, we can see the heavily integrated modern React stack. Server Components fetch data directly, while React Query handles client-side state.

---

Key Architectural Takeaways

Why build it this way?

1. Vertical Integration: By using Next.js Server Components and Server Actions, backend logic is tightly coupled with frontend UI, eliminating the need for a completely separate API server.
2. End-to-End Type Safety: Data flows seamlessly with full TypeScript coverage from the Postgres database (via Drizzle ORM) all the way to the UI (via TanStack React Query mutations).
3. Native Security: Protected routes (like the /admin CMS) are natively gated at the edge using Next.js Middleware and NextAuth.js.