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?
- 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.
- 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).
- Native Security: Protected routes (like the
/adminCMS) are natively gated at the edge using Next.js Middleware and NextAuth.js.