Before diving into the capstone walkthrough, it is worth pausing to appreciate what you have built across 49 chapters. The blog application is not a toy — it is a production-grade, full-stack web application with authentication, real-time features, file uploads, comprehensive testing, and automated deployment. This lesson maps every component of the finished system and explains how they fit together, giving you a mental model you can apply to any full-stack project you build next.
Complete System Architecture
┌─────────────────────────────────────────────────────────────────┐
│ BROWSER │
│ │
│ React (Vite) │
│ ├── React Router (client-side routing) │
│ ├── RTK Query (server state: posts, comments, users) │
│ ├── Zustand (auth state: user, accessToken) │
│ ├── Context (toast notifications) │
│ ├── Redux (UI state: optional complex cases) │
│ ├── Custom Hooks (useForm, useWebSocket, usePostFeed, ...) │
│ └── WebSocket client (live comments, notifications) │
└────────────────────────────────┬────────────────────────────────┘
│ HTTPS + WSS
▼
┌─────────────────────────────────────────────────────────────────┐
│ NGINX │
│ ├── Serve React static files (/dist) │
│ ├── Proxy /api/* → FastAPI:8000 │
│ ├── Proxy /ws/* → FastAPI:8000 (WebSocket upgrade) │
│ ├── SSL termination (Let's Encrypt) │
│ ├── Gzip compression │
│ └── Security headers, SPA fallback (try_files → index.html) │
└────────────────────────────────┬────────────────────────────────┘
│ HTTP / WS (internal)
▼
┌─────────────────────────────────────────────────────────────────┐
│ FASTAPI (Uvicorn, 2 workers) │
│ │
│ Middleware stack │
│ ├── RequestIdMiddleware (correlation ID logging) │
│ ├── CORSMiddleware (allowed origins) │
│ ├── RateLimitMiddleware (slowapi + Redis) │
│ └── MetricsMiddleware (Prometheus counters + latency) │
│ │
│ Routers │
│ ├── /api/auth (register, login, refresh, logout) │
│ ├── /api/posts (CRUD, like, upload-image, search) │
│ ├── /api/comments (CRUD per post) │
│ ├── /api/tags (list, posts by tag) │
│ ├── /api/users (me, avatar, profile) │
│ ├── /api/notifications (list, mark-read) │
│ ├── /ws/notifications (per-user WebSocket) │
│ ├── /ws/posts/{id}/live (per-post room WebSocket) │
│ ├── /api/health (DB + Redis connectivity check) │
│ └── /metrics (Prometheus metrics, internal only) │
│ │
│ Services → SQLAlchemy ORM → PostgreSQL │
│ Caching → Redis (post list, tag counts, rate limits) │
│ Logging → structlog (JSON, correlation ID) │
│ Errors → Sentry │
└──────────────────────┬──────────────────────────────────────────┘
│
┌────────────┴─────────────┐
▼ ▼
┌──────────────────┐ ┌──────────────────┐
│ PostgreSQL 16 │ │ Redis 7 │
│ │ │ │
│ Tables: │ │ Keys: │
│ users │ │ posts:* (cache) │
│ posts │ │ ratelimit:* │
│ comments │ │ auth:* (store) │
│ tags │ │ ws:* (pub/sub)│
│ post_tags │ └──────────────────┘
│ notifications │
│ refresh_tokens │
└──────────────────┘Note: Every layer of this architecture has been covered in this series. Python fundamentals (Chapters 1–12) gave you the language. PostgreSQL (Chapters 13–20) and FastAPI (Chapters 21–32) built the backend. React (Chapters 33–41) built the frontend. Full-stack integration (Chapters 42–45) connected the layers. Testing, deployment, and hardening (Chapters 46–48) made it production-ready. The capstone (this chapter) verifies it all works together.
Tip: The architecture diagram above is the kind of document you should maintain for every production system. It should be living documentation — updated whenever a service is added or removed. Keep it in the repository as a text file or an architecture decision record (ADR). New team members can understand the entire system in 10 minutes from a good architecture overview, versus days of code archaeology without one.
Warning: Do not be tempted to adopt every tool shown in this series for every project you build. A personal project or startup MVP does not need Prometheus metrics, structured logging, or Redis caching on day one. Start with the minimum viable stack (FastAPI + PostgreSQL + React, deployed on a single VPS) and add layers when you have a specific problem they solve. Premature infrastructure complexity is as harmful as premature code optimisation.
Stack Summary
| Layer | Technology | Chapter |
|---|---|---|
| Language | Python 3.12, JavaScript (ES2024) | 1–12, 33 |
| Database | PostgreSQL 16 | 13–20 |
| ORM / Migrations | SQLAlchemy 2, Alembic | 24–25 |
| API Framework | FastAPI, Pydantic v2 | 21–32 |
| Frontend Framework | React 18, Vite | 33–41 |
| Client State | RTK Query, Zustand, Context | 39–40, 42 |
| Real-time | WebSockets (browser + FastAPI) | 31, 45 |
| Auth | JWT (access + refresh), bcrypt | 29, 43 |
| Caching | Redis (response + rate limit) | 48 |
| Proxy / TLS | Nginx + Let’s Encrypt | 47 |
| Containers | Docker, Docker Compose | 47 |
| Testing | pytest, Vitest, Playwright, MSW | 32, 46 |
| CI/CD | GitHub Actions | 46, 48 |
| Observability | structlog, Prometheus, Sentry | 48 |