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

[mnaimfaizy]

🚀 DevOps & Cloud Computing Module

A comprehensive new learning module that covers the entire DevOps lifecycle, cloud computing architectures, CI/CD pipelines, container orchestration, and modern infrastructure — all through 6 interactive visualizations and 8 educational sections with ELI10 explanations.

---

📋 Summary of Changes

Category	Details
New Files	16 components + 1 entry point + 1 documentation file
Modified Files	6 (App.tsx, Header, Sidebar, Home, theme, README)
Total Lines Added	~4,987
Sections	8 interactive educational sections
Visualizations	6 rich SVG/interactive visualizations
Module Number	13th learning module

---

🎨 6 Interactive Visualizations

Visualization	Description
DevOps Infinite Loop	Animated SVG figure-8 showing 8 DevOps lifecycle stages (Plan → Code → Build → Test → Release → Deploy → Operate → Monitor) with clickable nodes, animated dots along the path, and auto-play
CI/CD Pipeline	7-stage pipeline visualization (Source → Build → Test → Security Scan → Deploy Staging → Approval Gate → Deploy Prod) with terminal-style log output and "Run Pipeline" button
Cloud Service Models	Interactive comparison of On-Prem, IaaS, PaaS, SaaS, and FaaS with responsibility layers, management burden bar, and toggleable pizza analogy
Cloud Architecture	SVG architecture diagrams for 4 patterns (Monolith, Microservices, Serverless, Load Balanced) with pros/cons cards
Container Orchestration	Kubernetes-style pod simulator with Scale Up/Down buttons, auto-scaling demo, CPU/memory bars, event log, and cluster stats
Infrastructure as Code	IaC workflow diagram with Terraform/Ansible/Dockerfile code examples, drift detection simulator, and 5-step workflow

---

📚 8 Educational Sections

1. Introduction

• DevOps history and genesis timeline (2007–2011)
• "Wall of Confusion" problem and cultural movement
• Netflix case study (245 daily deployments, 99.5% success rate)
• ELI10: Sandcastle metaphor for DevOps, magical toy box for Cloud

2. CI/CD Pipeline

• Continuous Integration vs Continuous Delivery comparison
• CI best practices and deployment strategies (Blue-Green, Canary, Rolling, Feature Flags)
• Popular tools grid (GitHub Actions, Jenkins, GitLab CI, CircleCI, ArgoCD, Spinnaker, Travis CI, AWS CodePipeline)
• Common anti-patterns with fixes
• ELI10: Factory assembly line metaphor

3. Cloud Service Models

• Detailed IaaS, PaaS, SaaS, FaaS cards with real-world examples
• NIST's 5 Essential Characteristics of cloud computing
• Shared responsibility model with interactive layers
• ELI10: Pizza analogy (making at home → delivery → by the slice)

4. Cloud Architecture Patterns

• Architecture evolution timeline (2000s → 2020s)
• 6 cloud design patterns (Cache-Aside, Circuit Breaker, Sidecar, Strangler Fig, CQRS, Valet Key)
• Architecture decision guide comparison table
• ELI10: LEGO building metaphor

5. Container Orchestration

• Docker fundamentals with Dockerfile example
• Container vs VM comparison (startup, size, isolation, density)
• 6 Kubernetes core concepts (Pod, Deployment, Service, Ingress, ConfigMap/Secret, Namespace)
• Container ecosystem grid (Docker, Kubernetes, Helm, Istio, Podman, containerd, Docker Compose, Rancher)
• 6 best practices (multi-stage builds, one process per container, never run as root, health checks, pin versions, scan for vulnerabilities)
• ELI10: Shipping port metaphor

6. Infrastructure as Code

• Declarative (WHAT) vs Imperative (HOW) with code examples
• IaC tool comparison table (Terraform, Pulumi, CloudFormation, Ansible, CDK, Crossplane)
• GitOps 4-step workflow (Declare → Review → Merge → Reconcile)
• Configuration drift detection and remediation
• ELI10: Recipe book metaphor

7. Modern DevOps Roles

• 4 role cards: Frontend Cloud Developer, Backend Serverless Developer, DevOps/Platform Engineer, Site Reliability Engineer (SRE)
• DevSecOps pipeline (Code → Build → Test → Deploy security at every stage)
• Career path progression (Junior → Mid → Senior → Staff → Principal)
• Certifications guide (AWS Solutions Architect, CKA, HashiCorp Terraform, Azure DevOps, GCP Professional)
• ELI10: School play metaphor

8. Observability & Monitoring

• Three Pillars interactive tabs (Metrics, Logs, Traces) with tool recommendations
• Alerting best practices (Do's and Don'ts)
• Incident management lifecycle (Detect → Triage → Mitigate → Resolve → Learn)
• Future trends (Platform Engineering, AIOps, FinOps, GitOps, Edge Computing, Green Computing)
• DORA metrics for measuring DevOps success
• ELI10: Doctor's checkup metaphor

---

🔧 Integration Changes

• src/App.tsx — Added lazy-loaded /devops route with SuspenseRoute
• src/components/Header.tsx — Added DevOps item to Fundamentals navigation dropdown with Cloud icon and sky-600 active color
• src/components/Sidebar.tsx — Added sky color scheme to colorMap, 8-section sidebar navigation for /devops, and path detection in getSectionFromPath
• src/pages/Home.tsx — Added DevOps module card (Cloud icon, sky gradient, 4 topics), updated stats from 12→13+ modules and 78→84+ visualizations, added to Phase 4 learning path
• src/utils/theme.ts — Added devops color scheme (primary: sky, secondary: cyan, accent: teal)
• README.md — Updated module count to 13, added DevOps & Cloud Computing feature description and Learning Modules entry

---

📁 New File Structure

src/features/devops/
├── index.ts                                    # Module entry point
├── DevOpsPage.tsx                              # Main page with section routing
├── components/
│   ├── sections/
│   │   ├── Introduction.tsx                    # History, genesis, Netflix case study
│   │   ├── CICDPipeline.tsx                    # CI/CD concepts, tools, anti-patterns
│   │   ├── CloudServiceModels.tsx              # IaaS/PaaS/SaaS/FaaS, NIST
│   │   ├── CloudArchitecture.tsx               # Architecture patterns & evolution
│   │   ├── ContainerOrchestration.tsx          # Docker, K8s, ecosystem
│   │   ├── InfrastructureAsCode.tsx            # Terraform, GitOps, drift
│   │   ├── ModernDevRoles.tsx                  # Roles, careers, certifications
│   │   └── Observability.tsx                   # Metrics/logs/traces, DORA
│   └── visualizations/
│       └── 2d/
│           ├── DevOpsInfiniteLoop.tsx           # Animated infinity loop SVG
│           ├── CICDPipelineViz.tsx              # Pipeline stage visualization
│           ├── CloudServiceModelsViz.tsx        # Service model comparison
│           ├── CloudArchitectureViz.tsx         # Architecture diagram builder
│           ├── ContainerOrchestrationViz.tsx    # K8s pod simulator
│           └── InfrastructureAsCodeViz.tsx      # IaC workflow & drift demo
docs/
└── DevOps and Cloud Computing Explained.md     # Source research report

---

✅ Testing & Verification

• npm run build passes (2083 modules, 0 errors)
• All 8 sections render correctly in browser
• All 6 visualizations are interactive and functional
• Kubernetes auto-scaling demo completes and returns to original state
• Home page shows updated stats (13+ modules, 84+ visualizations)
• Header Fundamentals dropdown includes DevOps link
• Sidebar navigation works for all 8 sections
• Lazy loading and code splitting works correctly

---

📸 Screenshots

Tested all sections via Playwright:

• Introduction with DevOps Infinite Loop visualization
• CI/CD Pipeline with interactive pipeline and terminal log
• Cloud Service Models with responsibility layers and pizza analogy toggle
• Cloud Architecture with interactive pattern diagrams
• Container Orchestration with Kubernetes Pod Simulator
• Infrastructure as Code with IaC workflow and drift detection
• Modern DevOps Roles with career path progression
• Observability with Three Pillars interactive tabs