Merge pull request #38 from mnaimfaizy/feature/database-module

feat(database): Add Database & DBMS interactive learning module

Author: mnaimfaizy

README.md

@@ -395,6 +395,21 @@ Comprehensive backend architecture module with 6+ interactive visualizations cov
 - **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
 
+### 🗄️ **Database & DBMS (Complete)**
+
+Comprehensive database internals module with 7 interactive visualizations covering relational and NoSQL database architecture:
+
+- **Introduction**: Data vs Database vs DBMS, learning journey overview, stats grid, and module navigation
+- **Database Models**: Interactive comparison of 5 paradigms (Relational, Document, Key-Value, Graph, Vector) with Database Taxonomy visualization
+- **DBMS Architecture**: Query Processor + Storage Engine pillars, Oracle vs PostgreSQL background processes comparison
+- **Query Processor**: Parser → Rewriter → Cost-Based Optimizer → Execution Engine pipeline with animated SQL lifecycle visualization
+- **Storage Engine**: Buffer Manager, Access Methods (B-Tree, Hash), Lock Manager, Recovery Manager with interactive buffer cache simulation
+- **SQL Fundamentals**: Interactive CRUD examples with category tabs, Window Functions, SQL vs NoSQL comparison
+- **Indexing & Optimization**: Interactive B-Tree insertion/search visualization, B-Tree vs Hash index comparison, query optimizer GPS analogy
+- **Transactions & ACID**: Atomicity, Consistency, Isolation, Durability with concurrent transaction demo (success & crash scenarios)
+- **Oracle vs PostgreSQL**: SGA vs shared_buffers, process models, MVCC Undo/Redo vs dead tuples, commit flow comparison with interactive MVCC visualization
+- **Visualization Hub**: 7 interactive visualizations — Database Taxonomy, Query Lifecycle, B-Tree Index, Buffer Manager, ACID Transactions, MVCC Comparison, ER Diagram Builder
+
 - **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
@@ -480,7 +495,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**: 15 complete interactive modules with 96+ visualizations
+- 🎓 **Learning Modules**: 16 complete interactive modules with 103+ visualizations
 - 🎯 **Playground**: LeetCode-style coding environment with debugging and gamification
 
 ---

docs/Database and DBMS Explained for All.md

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

src/App.tsx

@@ -19,6 +19,7 @@ import {
   Cloud,
   Shield,
   Rocket,
+  HardDrive,
 } from 'lucide-react';
 import { useUI } from '../shared/contexts';
 
@@ -144,6 +145,12 @@ const Header: React.FC = () => {
           icon: <Server className="w-4 h-4" />,
           description: 'Backend patterns & API design',
         },
+        {
+          label: 'Database & DBMS',
+          path: '/database',
+          icon: <HardDrive className="w-4 h-4" />,
+          description: 'Database internals & optimization',
+        },
       ],
     },
   ];

src/components/Header.tsx

@@ -91,6 +91,13 @@ const getThemeColorClass = (
       buttonHover: 'hover:text-slate-600',
       border: 'border-slate-100',
     },
+    teal: {
+      active: 'bg-teal-100 text-teal-800 border-teal-500',
+      hover: 'hover:bg-teal-50 hover:text-teal-700',
+      buttonActive: 'text-teal-600 hover:text-teal-700',
+      buttonHover: 'hover:text-teal-600',
+      border: 'border-teal-100',
+    },
   };
 
   const colors = colorMap[theme.primary] || colorMap.blue;
@@ -401,6 +408,30 @@ const sidebarSections: Record<string, Array<SidebarItem>> = {
     { label: 'Request Lifecycle', path: '/backend?section=Request%20Lifecycle' },
     { label: 'Visualization', path: '/backend?section=Visualization' },
   ],
+  '/database': [
+    { label: 'Introduction', path: '/database?section=Introduction' },
+    { label: 'Database Models', path: '/database?section=Database%20Models' },
+    {
+      label: 'DBMS Architecture',
+      path: '/database?section=DBMS%20Architecture',
+      subItems: [
+        { label: 'Query Processor', path: '/database?section=Query%20Processor' },
+        { label: 'Storage Engine', path: '/database?section=Storage%20Engine' },
+      ],
+    },
+    { label: 'SQL Fundamentals', path: '/database?section=SQL%20Fundamentals' },
+    {
+      label: 'Indexing & Optimization',
+      path: '/database?section=Indexing%20%26%20Optimization',
+    },
+    { label: 'Transactions & ACID', path: '/database?section=Transactions%20%26%20ACID' },
+    { label: 'Oracle vs PostgreSQL', path: '/database?section=Oracle%20vs%20PostgreSQL' },
+    {
+      label: 'SQL vs NoSQL vs Vector',
+      path: '/database?section=SQL%20vs%20NoSQL%20vs%20Vector',
+    },
+    { label: 'Visualization', path: '/database?section=Visualization' },
+  ],
   '/': [],
   '/about': [],
 };

src/components/Sidebar.tsx

@@ -0,0 +1,78 @@
+import React, { Suspense } from 'react';
+import { useLocation } from 'react-router-dom';
+import { ErrorBoundary } from '../../shared/components/feedback/ErrorBoundary';
+import { LoadingFallback } from '../../shared/components/feedback/LoadingFallback';
+import { SEO } from '../../shared/components/SEO/SEO';
+import ModuleQuizSection from '../../shared/components/quiz/ModuleQuizSection';
+
+// Lazy load section components for better performance
+import Introduction from './components/sections/Introduction';
+const DatabaseModels = React.lazy(() => import('./components/sections/DatabaseModels'));
+const DBMSArchitecture = React.lazy(() => import('./components/sections/DBMSArchitecture'));
+const QueryProcessor = React.lazy(() => import('./components/sections/QueryProcessor'));
+const StorageEngine = React.lazy(() => import('./components/sections/StorageEngine'));
+const SQLFundamentals = React.lazy(() => import('./components/sections/SQLFundamentals'));
+const IndexingOptimization = React.lazy(() => import('./components/sections/IndexingOptimization'));
+const TransactionsACID = React.lazy(() => import('./components/sections/TransactionsACID'));
+const OracleVsPostgreSQL = React.lazy(() => import('./components/sections/OracleVsPostgreSQL'));
+const SQLvsNoSQLvsVector = React.lazy(() => import('./components/sections/SQLvsNoSQLvsVector'));
+const Visualization = React.lazy(() => import('./components/sections/Visualization'));
+const Quiz = () => <ModuleQuizSection moduleId="database" />;
+
+const sectionComponents: Record<string, React.ComponentType> = {
+  Introduction,
+  'Database Models': DatabaseModels,
+  'DBMS Architecture': DBMSArchitecture,
+  'Query Processor': QueryProcessor,
+  'Storage Engine': StorageEngine,
+  'SQL Fundamentals': SQLFundamentals,
+  'Indexing & Optimization': IndexingOptimization,
+  'Transactions & ACID': TransactionsACID,
+  'Oracle vs PostgreSQL': OracleVsPostgreSQL,
+  'SQL vs NoSQL vs Vector': SQLvsNoSQLvsVector,
+  Visualization,
+  Quiz,
+};
+
+function useQuery(): URLSearchParams {
+  return new URLSearchParams(useLocation().search);
+}
+
+const DatabasePage: React.FC = () => {
+  const query = useQuery();
+  const section = query.get('section') || 'Introduction';
+  const Component = sectionComponents[section] || Introduction;
+
+  return (
+    <>
+      <SEO
+        title="Database & DBMS - Code Executives"
+        description="Master database internals, DBMS architecture, SQL optimization, B-Tree indexing, ACID transactions, and the comparative engines of Oracle vs PostgreSQL through interactive visualizations."
+        keywords={[
+          'database',
+          'DBMS',
+          'SQL',
+          'NoSQL',
+          'B-Tree',
+          'indexing',
+          'ACID',
+          'transactions',
+          'MVCC',
+          'PostgreSQL',
+          'Oracle',
+          'query optimization',
+        ]}
+        canonicalUrl="https://code-executives.com/database"
+      />
+      <div className="p-4 sm:p-6">
+        <ErrorBoundary level="feature">
+          <Suspense fallback={<LoadingFallback variant="skeleton-page" />}>
+            <Component />
+          </Suspense>
+        </ErrorBoundary>
+      </div>
+    </>
+  );
+};
+
+export default DatabasePage;