Merge pull request #37 from mnaimfaizy/feature/backend-architecture-module

feat: Add Backend Architecture learning module

Author: mnaimfaizy

README.md

@@ -4,7 +4,7 @@
 
 **🌐 Live Website**: [https://codexecutives.com](https://codexecutives.com)
 
-**✨ Now featuring 14 complete learning modules with 90+ interactive visualizations, root-level scenario quiz banks for every module, shared timed quizzes with local progress tracking, and a LeetCode-style playground with advanced debugging and gamification.**
+**✨ Now featuring 15 complete learning modules with 96+ interactive visualizations, root-level scenario quiz banks for every module, shared timed quizzes with local progress tracking, and a LeetCode-style playground with advanced debugging and gamification.**
 
 > **📌 Repository Maintainers**: See [REPOSITORY-ABOUT-QUICK-REFERENCE.md](./docs/REPOSITORY-ABOUT-QUICK-REFERENCE.md) for GitHub repository About section configuration (description, website, and topics).
 
@@ -23,6 +23,7 @@
 - **Node.js Ecosystem**: Deep dive into Event Loop, V8 memory, Streams, Clustering, module systems, package managers, frameworks, and runtime wars (Node vs Deno vs Bun)
 - **DevOps & Cloud Computing**: CI/CD pipelines, cloud service models (IaaS/PaaS/SaaS/FaaS), container orchestration with Kubernetes, Infrastructure as Code, observability, and modern DevOps roles
 - **Auth & Security**: Modern authentication and authorization — OAuth 2.0, OIDC, PKCE, WebAuthn/Passkeys, Zero Trust, BFF Pattern, and AI agent authentication
+- **Backend Architecture**: Architecture patterns (Monolithic, Layered, Microservices, Event-Driven, Hexagonal), resilience patterns (Circuit Breaker, Sidecar, Saga), API design (REST, GraphQL, gRPC), CAP theorem, ACID vs BASE, real-time communication, observability, and the complete request lifecycle
 - **Shared Timed Module Quizzes**: Every learning module ends with a 5-question, 10-minute scenario quiz backed by a root-level JSON bank and localStorage result history
 - **LeetCode-Style Playground**: Interactive coding environment with debugging, visualizations, and gamification
 
@@ -381,6 +382,19 @@ Comprehensive DevOps and cloud computing module with 6 interactive visualization
 
 Multi-language coding environment with AST-based instrumentation and live data-structure visualizations:
 
+### 🏛️ **Backend Architecture (Complete)**
+
+Comprehensive backend architecture module with 6+ interactive visualizations covering the full backend stack:
+
+- **Backend Evolution**: Interactive timeline from 1950s hardware intimacy to modern containers and microservices
+- **Architecture Patterns**: Interactive comparison of Monolithic, Layered, Microservices, Event-Driven, and Hexagonal architectures with animated diagrams
+- **Resilience Patterns**: Circuit Breaker state machine simulation, Sidecar pattern visualization, and Saga pattern with compensating actions
+- **Database Theory**: Interactive CAP Theorem triangle with CP/AP toggle, ACID vs BASE tabbed comparison, and property deep-dives
+- **API Design**: REST vs GraphQL vs gRPC comparison with real-world analogies, code examples, and API evolution timeline
+- **Real-Time Communication**: Webhooks, WebSockets, and Server-Sent Events with data flow visualizations and comparison matrix
+- **Observability**: Three pillars (Logs, Metrics, Traces) with interactive triangle diagram, tool recommendations, and incident response workflow
+- **Request Lifecycle**: Animated "Buy Now" journey through DNS → TCP/TLS → Load Balancer → API Gateway → Cache → Database → Message Queue → Response with latency budgets
+
 - **Multi-Language Execution**: JavaScript, TypeScript (transpiled), and Python (Pyodide WASM) — all in-browser, no server
 - **AST Instrumentation**: Acorn/Astring pipeline injects `__snapshot()` calls around every statement; Python uses `sys.settrace` wrapper with base64-encoded source
 - **Timeline Player**: Step forward/backward through execution snapshots, inspect variables and call stack at each point
@@ -466,7 +480,7 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 - 📧 **Issues**: Report bugs or request features via GitHub Issues
 - 💬 **Discussions**: Join community discussions for questions and ideas
 - 📖 **Documentation**: Comprehensive docs available in the `/docs` directory
-- 🎓 **Learning Modules**: 13 complete interactive modules with 84+ visualizations
+- 🎓 **Learning Modules**: 15 complete interactive modules with 96+ visualizations
 - 🎯 **Playground**: LeetCode-style coding environment with debugging and gamification
 
 ---

docs/Backend Concepts Explained for Visualization.md

@@ -31,6 +31,7 @@ const AIFundamentalsPage = lazy(() => import('./features/ai'));
 const NodeJSPage = lazy(() => import('./features/nodejs'));
 const AuthPage = lazy(() => import('./features/auth'));
 const DevOpsPage = lazy(() => import('./features/devops'));
+const BackendPage = lazy(() => import('./features/backend'));
 
 // Standalone pages (rendered without main app layout)
 const PlaygroundEntry = lazy(() => import('./features/playground/PlaygroundEntry'));
@@ -211,6 +212,14 @@ const App: React.FC = () => {
                                 </SuspenseRoute>
                               }
                             />
+                            <Route
+                              path="/backend"
+                              element={
+                                <SuspenseRoute>
+                                  <BackendPage />
+                                </SuspenseRoute>
+                              }
+                            />
                           </Routes>
                         </main>
                       </div>

src/App.tsx

@@ -138,6 +138,12 @@ const Header: React.FC = () => {
           icon: <Shield className="w-4 h-4" />,
           description: 'Authentication & Authorization',
         },
+        {
+          label: 'Backend Architecture',
+          path: '/backend',
+          icon: <Server className="w-4 h-4" />,
+          description: 'Backend patterns & API design',
+        },
       ],
     },
   ];
@@ -205,6 +211,7 @@ const Header: React.FC = () => {
     if (path === '/auth') return 'text-amber-600 bg-amber-50';
     if (path === '/nodejs') return 'text-green-600 bg-green-50';
     if (path === '/devops') return 'text-sky-600 bg-sky-50';
+    if (path === '/backend') return 'text-slate-600 bg-slate-50';
     return 'text-gray-700 hover:bg-gray-50';
   };
 

src/components/Header.tsx

@@ -84,6 +84,13 @@ const getThemeColorClass = (
       buttonHover: 'hover:text-amber-600',
       border: 'border-amber-100',
     },
+    slate: {
+      active: 'bg-slate-100 text-slate-800 border-slate-500',
+      hover: 'hover:bg-slate-50 hover:text-slate-700',
+      buttonActive: 'text-slate-600 hover:text-slate-700',
+      buttonHover: 'hover:text-slate-600',
+      border: 'border-slate-100',
+    },
   };
 
   const colors = colorMap[theme.primary] || colorMap.blue;
@@ -382,6 +389,18 @@ const sidebarSections: Record<string, Array<SidebarItem>> = {
     { label: 'AI Agent Authentication', path: '/auth?section=AI%20Agent%20Authentication' },
     { label: 'Visualization', path: '/auth?section=Visualization' },
   ],
+  '/backend': [
+    { label: 'Introduction', path: '/backend?section=Introduction' },
+    { label: 'Backend Evolution', path: '/backend?section=Backend%20Evolution' },
+    { label: 'Architecture Patterns', path: '/backend?section=Architecture%20Patterns' },
+    { label: 'Resilience Patterns', path: '/backend?section=Resilience%20Patterns' },
+    { label: 'Database Theory', path: '/backend?section=Database%20Theory' },
+    { label: 'API Design', path: '/backend?section=API%20Design' },
+    { label: 'Real-Time Communication', path: '/backend?section=Real-Time%20Communication' },
+    { label: 'Observability', path: '/backend?section=Observability' },
+    { label: 'Request Lifecycle', path: '/backend?section=Request%20Lifecycle' },
+    { label: 'Visualization', path: '/backend?section=Visualization' },
+  ],
   '/': [],
   '/about': [],
 };

src/components/Sidebar.tsx

@@ -0,0 +1,58 @@
+import React, { Suspense } from 'react';
+import { useLocation } from 'react-router-dom';
+import ModuleQuizSection from '../../shared/components/quiz/ModuleQuizSection';
+
+// Lazy load section components for better performance
+import Introduction from './components/sections/Introduction';
+const BackendEvolution = React.lazy(() => import('./components/sections/BackendEvolution'));
+const ArchitecturePatterns = React.lazy(() => import('./components/sections/ArchitecturePatterns'));
+const ResiliencePatterns = React.lazy(() => import('./components/sections/ResiliencePatterns'));
+const DatabaseTheory = React.lazy(() => import('./components/sections/DatabaseTheory'));
+const APIDesign = React.lazy(() => import('./components/sections/APIDesign'));
+const RealTimeCommunication = React.lazy(
+  () => import('./components/sections/RealTimeCommunication')
+);
+const Observability = React.lazy(() => import('./components/sections/Observability'));
+const RequestLifecycle = React.lazy(() => import('./components/sections/RequestLifecycle'));
+const Visualization = React.lazy(() => import('./components/sections/Visualization'));
+const Quiz = () => <ModuleQuizSection moduleId="backend" />;
+
+const sectionComponents: Record<string, React.ComponentType> = {
+  Introduction,
+  'Backend Evolution': BackendEvolution,
+  'Architecture Patterns': ArchitecturePatterns,
+  'Resilience Patterns': ResiliencePatterns,
+  'Database Theory': DatabaseTheory,
+  'API Design': APIDesign,
+  'Real-Time Communication': RealTimeCommunication,
+  Observability,
+  'Request Lifecycle': RequestLifecycle,
+  Visualization,
+  Quiz,
+};
+
+function useQuery(): URLSearchParams {
+  return new URLSearchParams(useLocation().search);
+}
+
+const BackendPage: React.FC = () => {
+  const query = useQuery();
+  const section = query.get('section') || 'Introduction';
+  const Component = sectionComponents[section] || Introduction;
+
+  return (
+    <div className="p-4 sm:p-6">
+      <Suspense
+        fallback={
+          <div className="flex items-center justify-center h-64">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-600"></div>
+          </div>
+        }
+      >
+        <Component />
+      </Suspense>
+    </div>
+  );
+};
+
+export default BackendPage;