feat: Add Backend Architecture learning module

[mnaimfaizy]

🏗️ Backend Architecture Learning Module

A complete new learning module covering backend architecture concepts — from the 1950s mainframe era to modern container orchestration — with interactive 2D visualizations, rich analogies, and real-world examples.

---

📋 Summary

This PR adds the 11th learning module to Code Executives: Backend Architecture — The Invisible Industrial Complex. The module transforms the dense topic of backend systems into an engaging, visual learning experience across 10 deep-dive sections and 4 interactive SVG-based 2D visualizations.

24 files changed · 5,632 lines added · 16 new files · 7 modified files

---

🗂️ Module Structure

src/features/backend/
├── index.ts                          # Module entry point (lazy export)
├── BackendPage.tsx                   # Section router (query-param based)
├── components/
│   ├── sections/
│   │   ├── Introduction.tsx          # Module overview + section navigation
│   │   ├── BackendEvolution.tsx      # 5-era interactive timeline
│   │   ├── ArchitecturePatterns.tsx   # 5 architecture patterns deep-dive
│   │   ├── ResiliencePatterns.tsx     # Circuit Breaker, Sidecar, Saga
│   │   ├── DatabaseTheory.tsx        # CAP Theorem + ACID vs BASE
│   │   ├── APIDesign.tsx             # 5 API generations (RPC → gRPC)
│   │   ├── RealTimeCommunication.tsx # Webhooks, WebSockets, SSE
│   │   ├── Observability.tsx         # Logs, Metrics, Traces pillars
│   │   ├── RequestLifecycle.tsx      # 6-step animated request journey
│   │   └── Visualization.tsx         # Tab gallery of 4 interactive 2D models
│   └── visualizations/2d/
│       ├── RequestJourney2D.tsx       # Animated SVG request pipeline
│       ├── CircuitBreaker2D.tsx       # Live circuit breaker simulation
│       ├── ArchitecturePatterns2D.tsx  # 5-pattern SVG comparison tool
│       └── APIEvolution2D.tsx         # RPC→gRPC timeline with examples

---

📚 10 Educational Sections

#	Section	Key Content
1	Introduction	Module overview, learning path navigation, stats grid
2	Backend Evolution	Interactive 5-era timeline: Hardware Intimacy (1950s) → Relational Revolution (Codd 1970, Unix 1971) → Client-Server & Web (1990, JS 1995) → Cloud & SaaS (SOA, AWS 2006) → Containers & Microservices (Docker 2013, K8s 2014, Lambda)
3	Architecture Patterns	5 patterns with selector UI: Monolithic, Layered (N-Tier), Microservices, Event-Driven, Hexagonal/Onion — each with mechanism, analogy, pros/cons, real-world examples (Netflix, Amazon, Uber, Spotify)
4	Resilience Patterns	Circuit Breaker (interactive state machine with simulation), Sidecar (Envoy/Istio/K8s context), Saga (Choreography vs Orchestration coordination) — with comparison table
5	Database Theory	Interactive CAP Theorem SVG triangle (click to choose CP/AP with specific DB examples), ACID vs BASE tab switcher with analogies (bank vault vs party rumor), comparison table with specific databases
6	API Design	5 API generations as full entries: RPC (1970s), SOAP (1998), REST (2000), GraphQL (2015), gRPC (2015) — code examples, analogies, format/speed/flexibility metrics, evolution timeline
7	Real-Time Communication	Webhooks (mail delivery), WebSockets (phone line), SSE (radio station) — data flow visualizations, code examples, pros/cons, comparison matrix
8	Observability	Three pillars with interactive SVG triangle: Logs (diary/black box), Metrics (car dashboard, RED/USE methods), Traces (GPS tracker, OpenTelemetry) — tool recommendations, incident investigation flow
9	Request Lifecycle	Animated 6-step "Buy Now" journey: DNS → TLS → LB/Gateway → App+Cache → Message Queue → Response — with play/pause, step navigation, latency budget bars, key takeaways
10	Visualization Hub	Tab-based gallery embedding all 4 interactive 2D visualizations with lazy loading

---

🎮 4 Interactive 2D Visualizations

1. Request Journey (RequestJourney2D.tsx)

• Animated SVG pipeline showing 7 infrastructure nodes
• Clickable nodes reveal per-step details and latency ranges
• Play/Pause/Reset controls with animated packet traversal
• Cumulative latency counter and 200ms budget bar

2. Circuit Breaker (CircuitBreaker2D.tsx)

• Live state machine diagram (Closed → Open → Half-Open) with animated rings
• Adjustable failure rate slider (0–100%)
• Real-time request stream showing 200 OK / 503 Rejected events
• Cooldown timer, failure/success/total counters

3. Architecture Patterns (ArchitecturePatterns2D.tsx)

• 5-pattern tab selector with unique SVG diagrams per pattern
• Castle (monolith), layers (N-tier), city blocks (microservices), newsroom (event-driven), hexagon with ports (hexagonal)
• Pros/cons panels and quick comparison bar chart (Simplicity/Scalability/Flexibility/Testability)

4. API Evolution (APIEvolution2D.tsx)

• Interactive timeline with 5 nodes (RPC 1970s → SOAP 1998 → REST 2000 → GraphQL 2015 → gRPC 2015)
• Play timeline animation with auto-advance
• Per-API detail card with icon, analogy, mechanism description
• Request/response code examples in dark-themed blocks
• Format/speed/flexibility stat badges

---

🔧 Infrastructure Changes

File	Change
src/App.tsx	Added lazy route /backend with SuspenseRoute
src/components/Header.tsx	Added "Backend" nav link
src/components/Sidebar.tsx	Added backend sections with slate theme
src/shared/constants/moduleNavigation.ts	Added backend module navigation config
src/utils/theme.ts	Added backend: { primary: 'slate', secondary: 'zinc', accent: 'stone' } color scheme
src/pages/Home.tsx	Added Backend Architecture card to homepage grid
README.md	Updated module count and feature list
docs/Backend Concepts Explained for Visualization.md	Source reference document

---

✅ Verification

• npm run build passes with zero errors
• All 10 sections render correctly
• All 4 interactive visualizations functional (play/pause/reset, state management)
• Sidebar navigation works for all sections (query-param routing)
• Lazy loading and code splitting working
• Light-mode only (no dark: classes)
• Responsive layout on all breakpoints
• TypeScript strict mode — no any types

---

📖 Content Sources

Content enriched from the source document (docs/Backend Concepts Explained for Visualization.md) and supplemented with real-world examples, specific dates/technologies, and deeper technical mechanisms including:

• Specific historical dates (FORTRAN 1957, Codd 1970, Unix 1971, Docker 2013, K8s 2014)
• Real-world company examples (Netflix, Amazon, Uber, Spotify, Facebook, Google)
• Industry tools and frameworks (Envoy, Istio, Resilience4j, OpenTelemetry, Prometheus, Kafka)
• Comparative analysis tables for every major concept