feat: Add DevOps & Cloud Computing Learning Module (#13)

README.md

@@ -4,7 +4,7 @@
 
 **🌐 Live Website**: [https://codexecutives.com](https://codexecutives.com)
 
-**✨ Now featuring 12 complete learning modules with 78+ interactive visualizations covering Git, JavaScript Engine, RxJS, Data Structures, Next.js, Big-O Notation, Python Programming, AI Fundamentals, Node.js Ecosystem, and a LeetCode-style playground with advanced debugging and gamification.**
+**✨ Now featuring 13 complete learning modules with 84+ interactive visualizations covering Git, JavaScript Engine, RxJS, Data Structures, Next.js, Big-O Notation, Python Programming, AI Fundamentals, Node.js Ecosystem, DevOps & Cloud Computing, 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).
 
@@ -21,6 +21,7 @@
 - **Python Programming**: Complete Python tutorial covering philosophy, execution model, memory management, and concurrency
 - **AI Fundamentals**: Machine learning concepts from scratch — neural networks, gradient descent, embeddings, and RAG pipelines
 - **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
 - **LeetCode-Style Playground**: Interactive coding environment with debugging, visualizations, and gamification
 
 ### 🎮 **Interactive Visualizations**
@@ -324,6 +325,19 @@ Master machine learning concepts from the ground up with interactive visualizati
 - **Beginner Friendly**: Every section includes ELI10 boxes, real-world analogies, and key takeaways
 - **11 Interactive Sections**: Progressive visualizations guiding learners from zero ML knowledge to RAG pipelines
 
+### ☁️ **DevOps & Cloud Computing (Complete)**
+
+Comprehensive DevOps and cloud computing module with 6 interactive visualizations covering the entire DevOps lifecycle:
+
+- **Introduction**: DevOps history, genesis timeline (2007-2011), the infinite DevOps loop, and Netflix case study
+- **CI/CD Pipeline**: Interactive pipeline simulation with 7 stages, terminal logs, deployment strategies (blue-green, canary, rolling)
+- **Cloud Service Models**: Interactive IaaS/PaaS/SaaS/FaaS comparison with pizza analogy, NIST characteristics, and management burden visualization
+- **Cloud Architecture**: SVG diagrams for monolith, microservices, serverless, and load-balanced patterns with trade-off analysis
+- **Container Orchestration**: Kubernetes pod simulator with auto-scaling, Docker fundamentals, container vs VM comparison
+- **Infrastructure as Code**: Terraform/Ansible/Docker code examples, declarative vs imperative approaches, GitOps workflow, and drift detection
+- **Modern Dev Roles**: Frontend cloud developer, backend serverless developer, DevOps/platform engineer, SRE roles, DevSecOps practices, and career paths
+- **Observability**: Three pillars (metrics, logs, traces) with interactive exploration, alerting best practices, incident management, DORA metrics, and future trends
+
 ### 🎯 **LeetCode-Style Playground (Complete)**
 
 Interactive coding environment that transforms algorithm learning through visual debugging and gamification:
@@ -415,7 +429,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**: 8 complete interactive modules with 80+ visualizations
+- 🎓 **Learning Modules**: 13 complete interactive modules with 84+ visualizations
 - 🎯 **Playground**: LeetCode-style coding environment with debugging and gamification
 
 ---

src/App.tsx

@@ -29,6 +29,7 @@ const SystemDesignPage = lazy(() => import('./features/systemdesign'));
 const TypeScriptPage = lazy(() => import('./features/typescript'));
 const AIFundamentalsPage = lazy(() => import('./features/ai'));
 const NodeJSPage = lazy(() => import('./features/nodejs'));
+const DevOpsPage = lazy(() => import('./features/devops'));
 
 const App: React.FC = () => {
   // Initialize analytics on app mount
@@ -172,6 +173,14 @@ const App: React.FC = () => {
                             </SuspenseRoute>
                           }
                         />
+                        <Route
+                          path="/devops"
+                          element={
+                            <SuspenseRoute>
+                              <DevOpsPage />
+                            </SuspenseRoute>
+                          }
+                        />
                       </Routes>
                     </main>
                   </div>

src/components/Header.tsx

@@ -16,6 +16,7 @@ import {
   Boxes,
   Brain,
   Server,
+  Cloud,
 } from 'lucide-react';
 import { useUI } from '../shared/contexts';
 
@@ -123,6 +124,12 @@ const Header: React.FC = () => {
           icon: <Brain className="w-4 h-4" />,
           description: 'AI & Machine Learning fundamentals',
         },
+        {
+          label: 'DevOps',
+          path: '/devops',
+          icon: <Cloud className="w-4 h-4" />,
+          description: 'DevOps & Cloud Computing',
+        },
       ],
     },
   ];
@@ -188,6 +195,7 @@ const Header: React.FC = () => {
     if (path === '/bigo') return 'text-purple-600 bg-purple-50';
     if (path === '/ai') return 'text-rose-600 bg-rose-50';
     if (path === '/nodejs') return 'text-green-600 bg-green-50';
+    if (path === '/devops') return 'text-sky-600 bg-sky-50';
     return 'text-gray-700 hover:bg-gray-50';
   };
 

src/components/Sidebar.tsx

@@ -66,6 +66,13 @@ const getThemeColorClass = (
       buttonHover: 'hover:text-green-600',
       border: 'border-green-100',
     },
+    sky: {
+      active: 'bg-sky-100 text-sky-800 border-sky-500',
+      hover: 'hover:bg-sky-50 hover:text-sky-700',
+      buttonActive: 'text-sky-600 hover:text-sky-700',
+      buttonHover: 'hover:text-sky-600',
+      border: 'border-sky-100',
+    },
   };
 
   const colors = colorMap[theme.primary] || colorMap.blue;
@@ -338,6 +345,16 @@ const sidebarSections: Record<string, Array<SidebarItem>> = {
     { label: 'Frameworks', path: '/nodejs?section=Frameworks' },
     { label: 'Runtime Wars', path: '/nodejs?section=Runtime%20Wars' },
   ],
+  '/devops': [
+    { label: 'Introduction', path: '/devops?section=Introduction' },
+    { label: 'CI/CD Pipeline', path: '/devops?section=CI%2FCD%20Pipeline' },
+    { label: 'Cloud Service Models', path: '/devops?section=Cloud%20Service%20Models' },
+    { label: 'Cloud Architecture', path: '/devops?section=Cloud%20Architecture' },
+    { label: 'Container Orchestration', path: '/devops?section=Container%20Orchestration' },
+    { label: 'Infrastructure as Code', path: '/devops?section=Infrastructure%20as%20Code' },
+    { label: 'Modern Dev Roles', path: '/devops?section=Modern%20Dev%20Roles' },
+    { label: 'Observability', path: '/devops?section=Observability' },
+  ],
   '/': [],
   '/about': [],
 };
@@ -364,7 +381,9 @@ const Sidebar: React.FC = () => {
     | 'systemdesign'
     | 'typescript'
     | 'ai'
-    | 'nodejs' => {
+    | 'nodejs'
+    | 'devops' => {
+    if (path.includes('/devops')) return 'devops';
     if (path.includes('/nodejs')) return 'nodejs';
     if (path.includes('/ai')) return 'ai';
     if (path.includes('javascript')) return 'javascript';

src/features/devops/DevOpsPage.tsx

@@ -0,0 +1,51 @@
+import React, { Suspense } from 'react';
+import { useLocation } from 'react-router-dom';
+
+// Lazy load section components for better performance
+import Introduction from './components/sections/Introduction';
+const CICDPipeline = React.lazy(() => import('./components/sections/CICDPipeline'));
+const CloudServiceModels = React.lazy(() => import('./components/sections/CloudServiceModels'));
+const CloudArchitecture = React.lazy(() => import('./components/sections/CloudArchitecture'));
+const ContainerOrchestration = React.lazy(
+  () => import('./components/sections/ContainerOrchestration')
+);
+const InfrastructureAsCode = React.lazy(() => import('./components/sections/InfrastructureAsCode'));
+const ModernDevRoles = React.lazy(() => import('./components/sections/ModernDevRoles'));
+const Observability = React.lazy(() => import('./components/sections/Observability'));
+
+const sectionComponents: Record<string, React.ComponentType> = {
+  Introduction,
+  'CI/CD Pipeline': CICDPipeline,
+  'Cloud Service Models': CloudServiceModels,
+  'Cloud Architecture': CloudArchitecture,
+  'Container Orchestration': ContainerOrchestration,
+  'Infrastructure as Code': InfrastructureAsCode,
+  'Modern Dev Roles': ModernDevRoles,
+  Observability,
+};
+
+function useQuery(): URLSearchParams {
+  return new URLSearchParams(useLocation().search);
+}
+
+const DevOpsPage: 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-sky-600"></div>
+          </div>
+        }
+      >
+        <Component />
+      </Suspense>
+    </div>
+  );
+};
+
+export default DevOpsPage;

src/features/devops/components/sections/CICDPipeline.tsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import ThemeCard from '../../../../components/shared/ThemeCard';
+import CICDPipelineViz from '../visualizations/2d/CICDPipelineViz';
+import { GitBranch, CheckCircle, AlertTriangle, Lightbulb } from 'lucide-react';
+
+const CICDPipeline: React.FC = () => {
+  return (
+    <div className="max-w-5xl mx-auto space-y-8">
+      {/* Header */}
+      <div className="bg-gradient-to-br from-sky-50 via-white to-cyan-50 rounded-2xl p-8 border border-sky-100 shadow-lg">
+        <div className="flex items-center gap-4 mb-4">
+          <div className="bg-sky-100 p-3 rounded-full">
+            <GitBranch className="w-8 h-8 text-sky-600" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">CI/CD Pipeline</h1>
+            <p className="text-gray-600">Continuous Integration &amp; Continuous Delivery</p>
+          </div>
+        </div>
+        <p className="text-lg text-gray-700 leading-relaxed">
+          A CI/CD pipeline automates the journey from code commit to production deployment. Every
+          code change is automatically built, tested, scanned for security vulnerabilities, and
+          deployed — reducing human error and enabling teams to deploy hundreds of times per day.
+        </p>
+      </div>
+
+      {/* Interactive Pipeline Visualization */}
+      <ThemeCard>
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">Interactive Pipeline</h2>
+        <p className="text-gray-700 mb-6 leading-relaxed">
+          Watch a complete CI/CD pipeline execute. Each stage runs automatically, and the pipeline
+          halts if any stage fails — this is the &quot;fail fast&quot; principle.
+        </p>
+        <CICDPipelineViz />
+      </ThemeCard>
+
+      {/* CI vs CD explanation */}
+      <div className="grid md:grid-cols-2 gap-6">
+        <ThemeCard>
+          <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
+            <CheckCircle className="w-5 h-5 text-sky-600" /> Continuous Integration (CI)
+          </h3>
+          <p className="text-gray-700 mb-4 leading-relaxed">
+            Developers merge their code changes into a shared repository multiple times a day. Each
+            merge triggers an automated build and test suite.
+          </p>
+          <div className="bg-sky-50 rounded-lg p-4 border border-sky-200">
+            <h4 className="font-semibold text-sky-800 mb-2">CI Best Practices:</h4>
+            <ul className="space-y-1.5 text-sm text-gray-700">
+              <li>• Commit to mainline at least once a day</li>
+              <li>• Every commit triggers automated tests</li>
+              <li>• Fix broken builds immediately (priority #1)</li>
+              <li>• Keep the build fast (&lt; 10 minutes)</li>
+            </ul>
+          </div>
+        </ThemeCard>
+
+        <ThemeCard>
+          <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
+            <CheckCircle className="w-5 h-5 text-emerald-600" /> Continuous Delivery (CD)
+          </h3>
+          <p className="text-gray-700 mb-4 leading-relaxed">
+            Every change that passes the automated pipeline is <strong>ready to deploy</strong> to
+            production. Continuous Deployment goes further — deploying automatically without human
+            approval.
+          </p>
+          <div className="bg-emerald-50 rounded-lg p-4 border border-emerald-200">
+            <h4 className="font-semibold text-emerald-800 mb-2">Deployment Strategies:</h4>
+            <ul className="space-y-1.5 text-sm text-gray-700">
+              <li>
+                • <strong>Blue-Green:</strong> Two identical environments, swap traffic
+              </li>
+              <li>
+                • <strong>Canary:</strong> Roll out to 5% of users first
+              </li>
+              <li>
+                • <strong>Rolling:</strong> Gradually replace old instances
+              </li>
+              <li>
+                • <strong>Feature Flags:</strong> Toggle features without deploy
+              </li>
+            </ul>
+          </div>
+        </ThemeCard>
+      </div>
+
+      {/* Popular CI/CD Tools */}
+      <ThemeCard>
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">Popular CI/CD Tools</h2>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {[
+            { name: 'GitHub Actions', icon: '🐙', desc: 'Native GitHub CI/CD' },
+            { name: 'Jenkins', icon: '🔧', desc: 'Open-source automation' },
+            { name: 'GitLab CI', icon: '🦊', desc: 'All-in-one DevOps' },
+            { name: 'CircleCI', icon: '⭕', desc: 'Cloud-native CI/CD' },
+            { name: 'ArgoCD', icon: '🚢', desc: 'GitOps for Kubernetes' },
+            { name: 'Spinnaker', icon: '🎡', desc: 'Multi-cloud deploy' },
+            { name: 'Travis CI', icon: '🏠', desc: 'Open-source CI' },
+            { name: 'AWS CodePipeline', icon: '☁️', desc: 'AWS native pipeline' },
+          ].map((tool, i) => (
+            <div
+              key={i}
+              className="bg-gray-50 rounded-xl p-4 text-center border border-gray-200 hover:shadow-md transition-shadow"
+            >
+              <span className="text-2xl">{tool.icon}</span>
+              <h4 className="font-semibold text-gray-900 mt-2 text-sm">{tool.name}</h4>
+              <p className="text-xs text-gray-600 mt-1">{tool.desc}</p>
+            </div>
+          ))}
+        </div>
+      </ThemeCard>
+
+      {/* Anti-patterns */}
+      <ThemeCard>
+        <h2 className="text-2xl font-bold text-gray-900 mb-4 flex items-center gap-2">
+          <AlertTriangle className="w-6 h-6 text-amber-500" /> Common CI/CD Anti-Patterns
+        </h2>
+        <div className="grid md:grid-cols-2 gap-4">
+          {[
+            {
+              bad: 'Long-lived feature branches (weeks/months)',
+              fix: 'Merge to main daily, use feature flags',
+            },
+            {
+              bad: 'Skipping tests to "ship faster"',
+              fix: 'Tests ARE the safety net — never skip',
+            },
+            { bad: 'Manual deployment steps', fix: 'Automate everything, including rollbacks' },
+            { bad: 'No security scanning', fix: 'Add SAST/DAST/dependency scanning to pipeline' },
+          ].map((item, i) => (
+            <div key={i} className="bg-amber-50 rounded-lg p-4 border border-amber-200">
+              <div className="flex items-start gap-2 mb-2">
+                <span className="text-red-500 font-bold">✗</span>
+                <span className="text-sm text-gray-700">{item.bad}</span>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className="text-emerald-500 font-bold">✓</span>
+                <span className="text-sm text-gray-700 font-medium">{item.fix}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </ThemeCard>
+
+      {/* ELI10 */}
+      <div className="bg-gradient-to-r from-amber-50 to-yellow-50 rounded-2xl p-6 border border-amber-200">
+        <div className="flex items-start gap-4">
+          <div className="bg-amber-100 p-2 rounded-full flex-shrink-0">
+            <Lightbulb className="w-6 h-6 text-amber-600" />
+          </div>
+          <div>
+            <h3 className="text-lg font-bold text-amber-900 mb-2">
+              Think of it like a factory assembly line 🏭
+            </h3>
+            <p className="text-gray-700 leading-relaxed">
+              Imagine a toy factory. When you design a new toy, it goes through stations — each
+              station checks something: &quot;Is the paint right? Are the wheels on? Is it
+              safe?&quot; Only if the toy passes ALL stations does it go into a box and ship to
+              stores. That&apos;s exactly what a CI/CD pipeline does for code — each stage verifies
+              quality automatically!
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CICDPipeline;