feat: Add Node.js Ecosystem learning module

README.md

@@ -4,7 +4,7 @@
 
 **🌐 Live Website**: [https://codexecutives.com](https://codexecutives.com)
 
-**✨ Now featuring 8 complete learning modules with 80+ interactive visualizations covering Git, JavaScript Engine, RxJS, Data Structures, Next.js, Big-O Notation, Python Programming, AI Fundamentals, and a LeetCode-style playground with advanced debugging and gamification.**
+**✨ 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.**
 
 > **📌 Repository Maintainers**: See [REPOSITORY-ABOUT-QUICK-REFERENCE.md](./docs/REPOSITORY-ABOUT-QUICK-REFERENCE.md) for GitHub repository About section configuration (description, website, and topics).
 
@@ -20,6 +20,7 @@
 - **Big-O Notation**: Complete algorithmic complexity analysis with 10+ interactive tools and metaphors
 - **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)
 - **LeetCode-Style Playground**: Interactive coding environment with debugging, visualizations, and gamification
 
 ### 🎮 **Interactive Visualizations**

src/App.tsx

@@ -28,6 +28,7 @@ const PythonPage = lazy(() => import('./features/python'));
 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 App: React.FC = () => {
   // Initialize analytics on app mount
@@ -163,6 +164,14 @@ const App: React.FC = () => {
                             </SuspenseRoute>
                           }
                         />
+                        <Route
+                          path="/nodejs"
+                          element={
+                            <SuspenseRoute>
+                              <NodeJSPage />
+                            </SuspenseRoute>
+                          }
+                        />
                       </Routes>
                     </main>
                   </div>

src/components/Header.tsx

@@ -15,6 +15,7 @@ import {
   BookOpen,
   Boxes,
   Brain,
+  Server,
 } from 'lucide-react';
 import { useUI } from '../shared/contexts';
 
@@ -80,6 +81,12 @@ const Header: React.FC = () => {
           icon: <Globe className="w-4 h-4" />,
           description: 'Next.js full-stack framework',
         },
+        {
+          label: 'Node.js',
+          path: '/nodejs',
+          icon: <Server className="w-4 h-4" />,
+          description: 'Node.js ecosystem & runtime',
+        },
       ],
     },
     {
@@ -180,6 +187,7 @@ const Header: React.FC = () => {
     if (path === '/datastructures' || path === '/systemdesign') return 'text-blue-600 bg-blue-50';
     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';
     return 'text-gray-700 hover:bg-gray-50';
   };
 

src/components/Sidebar.tsx

@@ -59,6 +59,13 @@ const getThemeColorClass = (
       buttonHover: 'hover:text-rose-600',
       border: 'border-rose-100',
     },
+    green: {
+      active: 'bg-green-100 text-green-800 border-green-500',
+      hover: 'hover:bg-green-50 hover:text-green-700',
+      buttonActive: 'text-green-600 hover:text-green-700',
+      buttonHover: 'hover:text-green-600',
+      border: 'border-green-100',
+    },
   };
 
   const colors = colorMap[theme.primary] || colorMap.blue;
@@ -319,6 +326,18 @@ const sidebarSections: Record<string, Array<SidebarItem>> = {
     { label: 'Word Embeddings', path: '/ai?section=Word%20Embeddings' },
     { label: 'RAG Pipeline', path: '/ai?section=RAG%20Pipeline' },
   ],
+  '/nodejs': [
+    { label: 'Introduction', path: '/nodejs?section=Introduction' },
+    { label: 'Event Loop', path: '/nodejs?section=Event%20Loop' },
+    { label: 'Async Programming', path: '/nodejs?section=Async%20Programming' },
+    { label: 'Buffers & Streams', path: '/nodejs?section=Buffers%20%26%20Streams' },
+    { label: 'Scaling', path: '/nodejs?section=Scaling' },
+    { label: 'Memory Management', path: '/nodejs?section=Memory%20Management' },
+    { label: 'Module System', path: '/nodejs?section=Module%20System' },
+    { label: 'Package Managers', path: '/nodejs?section=Package%20Managers' },
+    { label: 'Frameworks', path: '/nodejs?section=Frameworks' },
+    { label: 'Runtime Wars', path: '/nodejs?section=Runtime%20Wars' },
+  ],
   '/': [],
   '/about': [],
 };
@@ -344,7 +363,9 @@ const Sidebar: React.FC = () => {
     | 'python'
     | 'systemdesign'
     | 'typescript'
-    | 'ai' => {
+    | 'ai'
+    | 'nodejs' => {
+    if (path.includes('/nodejs')) return 'nodejs';
     if (path.includes('/ai')) return 'ai';
     if (path.includes('javascript')) return 'javascript';
     if (path.includes('python')) return 'python';

src/features/nodejs/NodeJSPage.tsx

@@ -0,0 +1,53 @@
+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 EventLoop = React.lazy(() => import('./components/sections/EventLoop'));
+const AsyncProgramming = React.lazy(() => import('./components/sections/AsyncProgramming'));
+const BuffersStreams = React.lazy(() => import('./components/sections/BuffersStreams'));
+const Scaling = React.lazy(() => import('./components/sections/Scaling'));
+const MemoryManagement = React.lazy(() => import('./components/sections/MemoryManagement'));
+const ModuleSystem = React.lazy(() => import('./components/sections/ModuleSystem'));
+const PackageManagers = React.lazy(() => import('./components/sections/PackageManagers'));
+const Frameworks = React.lazy(() => import('./components/sections/Frameworks'));
+const RuntimeWars = React.lazy(() => import('./components/sections/RuntimeWars'));
+
+const sectionComponents: Record<string, React.ComponentType> = {
+  Introduction,
+  'Event Loop': EventLoop,
+  'Async Programming': AsyncProgramming,
+  'Buffers & Streams': BuffersStreams,
+  Scaling,
+  'Memory Management': MemoryManagement,
+  'Module System': ModuleSystem,
+  'Package Managers': PackageManagers,
+  Frameworks,
+  'Runtime Wars': RuntimeWars,
+};
+
+function useQuery(): URLSearchParams {
+  return new URLSearchParams(useLocation().search);
+}
+
+const NodeJSPage: 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-green-600"></div>
+          </div>
+        }
+      >
+        <Component />
+      </Suspense>
+    </div>
+  );
+};
+
+export default NodeJSPage;