Skip to content

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

Merged
mnaimfaizy merged 1 commit intomainfrom
feature/database-module
Apr 10, 2026
Merged

feat(database): Add Database & DBMS interactive learning module#38
mnaimfaizy merged 1 commit intomainfrom
feature/database-module

Conversation

@mnaimfaizy
Copy link
Copy Markdown
Owner

Summary

Adds a complete Database & DBMS interactive learning module to Code Executives — the 12th learning module on the platform. This module covers database fundamentals through advanced DBMS internals with 11 educational sections and 9 interactive 2D visualizations.


New Sections

# Section Description
1 Introduction Module overview, learning roadmap, and database landscape
2 Database Models Relational, hierarchical, network, and object-oriented models
3 DBMS Architecture Layered engine internals — process models, memory architecture
4 Query Processor Parser, optimizer (cost model, join algorithms), cardinality estimation, plan caching
5 Storage Engine Data page format, buffer manager, concurrency control (2PL/MVCC/OCC), ARIES recovery
6 SQL Fundamentals DDL, DML, DQL, joins, subqueries, window functions, CTEs
7 Indexing & Optimization B-Tree, hash, GiST/GIN/BRIN indexes, EXPLAIN plan analysis
8 Transactions & ACID Isolation levels, lock hierarchies, deadlock detection
9 Oracle vs PostgreSQL Deep architecture comparison — memory (SGA vs shared_buffers), processes, optimizer, indexing (12 types), MVCC, security, scalability, 15-row feature matrix
10 SQL vs NoSQL vs Vector Comprehensive paradigm comparison — 4 NoSQL families, CAP theorem, vector DB architecture (HNSW/IVF/PQ/LSH), similarity measures, RAG pipeline, decision framework
11 Visualization Hub All 9 interactive visualizations in a tabbed explorer

New Visualizations

Visualization What It Shows
DatabaseTaxonomy2D Interactive database classification tree
QueryProcessor2D Animated query lifecycle pipeline
BTreeIndex2D Step-by-step B-Tree insert/search operations
BufferManager2D Buffer pool with page eviction simulation
TransactionACID2D Concurrent transaction isolation demo
MVCCComparison2D Oracle UNDO vs PostgreSQL inline MVCC side-by-side
ERDiagramBuilder2D Drag-and-drop entity-relationship diagram designer
SQLvsNoSQL2D 5-category database type explorer with SVG data model diagrams
VectorDatabase2D Vector similarity search with Brute Force / HNSW / IVF algorithm modes

Infrastructure Changes

  • Routing: Added /database route with lazy-loaded section routing (App.tsx)
  • Navigation: Added database entries to Header.tsx, Sidebar.tsx, and moduleNavigation.ts
  • Theme: Added teal/cyan/emerald color scheme to theme.ts
  • Home Page: Added Database & DBMS module card
  • README: Updated module listing

Technical Details

  • All sections are lazy-loaded via React.lazy() for optimal bundle splitting
  • Follows the established feature-based architecture (src/features/database/)
  • Uses existing shared components (SectionLayout, ThemeCard, NavigationCard, CTASection, ErrorBoundary, SEO)
  • 30 files changed, ~8,500 lines added
  • Build passes with zero TypeScript or Vite errors

How to Test

  1. npm install && npm run dev
  2. Navigate to http://localhost:5173/database
  3. Use sidebar or in-page navigation to explore all 11 sections
  4. Interact with visualizations (click nodes, toggle algorithms, step through animations)

Add a complete Database & DBMS interactive learning module with 11 sections
and 9 interactive 2D visualizations.

Sections:
- Introduction — module overview and learning roadmap
- Database Models — relational, hierarchical, network, object models
- DBMS Architecture — layered engine internals with process/memory models
- Query Processor — parser, optimizer, join algorithms, cardinality estimation
- Storage Engine — page format, buffer manager, MVCC, ARIES recovery
- SQL Fundamentals — DDL, DML, DQL, joins, subqueries, window functions
- Indexing & Optimization — B-Tree, hash, GiST/GIN, EXPLAIN plans
- Transactions & ACID — isolation levels, 2PL, deadlock detection
- Oracle vs PostgreSQL — deep architecture comparison (memory, processes,
  optimizer, indexing, security, scalability, 15-row feature matrix)
- SQL vs NoSQL vs Vector — comprehensive paradigm comparison (4 NoSQL
  families, CAP theorem, vector DB architecture with HNSW/IVF/PQ/LSH,
  RAG pipeline, decision framework)
- Visualization hub — 9 interactive explorable visualizations

Visualizations:
- DatabaseTaxonomy2D — interactive database classification tree
- QueryProcessor2D — animated query lifecycle pipeline
- BTreeIndex2D — step-by-step B-Tree insert/search operations
- BufferManager2D — buffer pool with page eviction simulation
- TransactionACID2D — concurrent transaction isolation demo
- MVCCComparison2D — Oracle undo vs PostgreSQL inline MVCC
- ERDiagramBuilder2D — drag-and-drop entity-relationship designer
- SQLvsNoSQL2D — 5-category database type explorer with SVG diagrams
- VectorDatabase2D — vector similarity search with 3 ANN algorithm modes

Infrastructure:
- Add /database route with lazy-loaded section routing (App.tsx)
- Add database navigation to Header, Sidebar, and moduleNavigation
- Add teal/cyan/emerald theme colors to theme.ts
- Add database module card to Home page
- Update README with module listing
@mnaimfaizy mnaimfaizy self-assigned this Apr 10, 2026
@mnaimfaizy mnaimfaizy added documentation Improvements or additions to documentation enhancement New feature or request feature New Feature labels Apr 10, 2026
@mnaimfaizy mnaimfaizy merged commit c5199bf into main Apr 10, 2026
9 checks passed
@mnaimfaizy mnaimfaizy deleted the feature/database-module branch April 10, 2026 01:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation enhancement New feature or request feature New Feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant