Code Executives is a comprehensive, interactive web application designed to teach programming concepts through immersive visualizations and hands-on learning experiences. Built with modern web technologies, it transforms complex technical topics into engaging, visual learning journeys.
🌐 Live Website: https://codexecutives.com
✨ Now featuring 15 complete learning modules with 96+ interactive visualizations, root-level scenario quiz banks for every module, shared timed quizzes with local progress tracking, and a Playground where learners run their own code and step through what it did.
📌 Repository Maintainers: See REPOSITORY-ABOUT-QUICK-REFERENCE.md for GitHub repository About section configuration (description, website, and topics).
- Next.js Mastery: Complete App Router tutorial with 24 interactive visualizations
- Git Mastery: Complete Git tutorial with 7 interactive 2D visualizations
- JavaScript Engine: Deep dive into V8 runtime, memory management, and execution flow
- RxJS Reactive Programming: Observable streams and reactive patterns
- Data Structures: Comprehensive guide to fundamental data structures with interactive visualizations
- 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)
- 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
- Auth & Security: Modern authentication and authorization — OAuth 2.0, OIDC, PKCE, WebAuthn/Passkeys, Zero Trust, BFF Pattern, and AI agent authentication
- Backend Architecture: Architecture patterns (Monolithic, Layered, Microservices, Event-Driven, Hexagonal), resilience patterns (Circuit Breaker, Sidecar, Saga), API design (REST, GraphQL, gRPC), CAP theorem, ACID vs BASE, real-time communication, observability, and the complete request lifecycle
- Shared Timed Module Quizzes: Every learning module ends with a 5-question, 10-minute scenario quiz backed by a root-level JSON bank and localStorage result history
- Playground: One standalone page (
/playground) with a code editor, a step-by-step trace of the run, and a console
- 2D SVG Models: Smooth animations explaining complex concepts (30+ components)
- Algorithm Animations: Step-by-step execution of sorting, searching, and traversal algorithms
- Data Structure Demos: Interactive models for arrays, trees, graphs, and hash tables
- Real-time Interactions: Click, drag, and explore concepts dynamically
- Step-by-Step Guidance: Progressive learning with animated tutorials
- Debug Visualizations: Live data structure state during code execution
There is one Playground, at /playground (src/features/playground/). It is where a learner runs their own code and steps through the trace of that run. See Playground (in progress) below for details.
- Editor: Monaco, with JavaScript, TypeScript and Python selectable
- Trace: The run is recorded as steps; step controls show the line, the call stack and the variables at each step
- Console: What the code printed, in order
- Lenses: Event Loop, Heap & Stack, Data Structures and Streams
- Examples: Prebuilt code per language, each with a suggested lens
- Shared Quiz Runtime: One reusable quiz system powers every learning module while preserving module-specific styling and references
- Root-Level Quiz Banks: Each module has a dedicated JSON file in
quiz-banks/{module}.quiz.json - Scenario-Based Questions: Every bank contains 30+ harder prompts with single-choice, multi-select, true/false, ordering, and matching formats
- 10-Minute Timer: Each run samples 5 questions and persists the active attempt across refreshes
- Local Progress History: Scores, tiers, and recent attempts are stored in localStorage on the learner's machine
- Wrong-Answer References: Review mode links learners back to the exact module sections that support the missed concept
- Authoring Workflow: The workspace agent
.github/agents/module-quiz-generator.agent.mdmaintains quiz banks without duplicating questions or answer sets
- Responsive Design: Works seamlessly on desktop, tablet, and mobile
- Dark/Light Themes: Adaptive UI for comfortable learning
- Professional UI: Clean, modern interface built with Tailwind CSS
- Fast Performance: Optimized with Vite for instant feedback
- Framework: React 19 with TypeScript for type safety
- Build Tool: Vite for fast development and optimized builds
- Styling: Tailwind CSS 4.x for utility-first styling
- Routing: React Router for seamless navigation
- Icons: Lucide React for consistent iconography
- Code Editor: Monaco Editor (
@monaco-editor/react) for the Playground - AST Tooling: Acorn + Astring for JS/TS instrumentation
- Python Runtime: Pyodide (WASM) for in-browser Python execution
- Graph Visualization: @xyflow/react (React Flow) for the Playground's lenses
- 2D Graphics: SVG-based interactive diagrams
- Animations: CSS transitions and JavaScript-driven animations
- Interactivity: Mouse/touch events with real-time feedback
quiz-banks/ # Root-level module quiz banks named {module}.quiz.json
src/
├── components/ # Reusable UI components
│ ├── models2d/ # 2D visualization components
│ │ ├── nextjs/ # Next.js tutorial visualizations (24 components)
│ │ ├── git/ # Git tutorial visualizations
│ │ ├── javascript/ # JavaScript engine visualizations
│ │ ├── rxjs/ # RxJS reactive programming visualizations
│ │ ├── datastructures/ # Data structure visualizations
│ │ │ ├── hash/ # HashTable visualization
│ │ ├── bigo/ # Big-O notation visualizations (10+ components)
│ │ └── python/ # Python programming visualizations
│ └── shared/ # Shared UI components
├── features/
│ └── playground/ # The Playground (standalone /playground route)
├── pages/ # Main application pages
│ ├── NextjsPage.tsx # Next.js tutorial page
│ ├── GitPage.tsx # Git tutorial page
│ ├── JavaScriptPage.tsx
│ ├── RxJSPage.tsx
│ ├── DataStructuresPage.tsx # Data structures module
│ ├── BigOPage.tsx # Big-O notation module
│ └── PythonPage.tsx # Python programming module
├── sections/ # Educational content sections
│ ├── nextjs/ # Next.js learning modules (7 sections)
│ ├── git/ # Git learning modules
│ ├── javascript/ # JavaScript concepts
│ ├── rxjs/ # RxJS tutorials
│ ├── datastructures/ # Data structure concepts
│ ├── bigo/ # Big-O notation concepts (8 sections)
│ └── python/ # Python programming concepts (5 sections)
├── hooks/ # Custom React hooks
├── shared/
│ ├── components/
│ │ └── quiz/ # Shared timed quiz UI and answer renderers
│ ├── constants/
│ │ └── moduleNavigation.ts # Shared module navigation and reference metadata
│ └── hooks/
│ └── useQuizSession.ts # Timed quiz session and localStorage persistence
├── types/ # TypeScript type definitions
│ ├── nextjs.ts # Next.js type definitions
│ ├── datastructures.ts # Data structures type definitions
│ ├── bigo.ts # Big-O notation type definitions
│ ├── python.ts # Python programming type definitions
│ └── quiz.ts # Shared quiz schema and result types
├── utils/ # Utility functions
│ ├── instrument.ts # Code instrumentation for debugging
│ ├── memoryMonitor.ts # Performance monitoring
│ ├── quiz.ts # Quiz loading, scoring, and answer utilities
│ └── theme.ts # Theme and styling utilities
quiz-banks/javascript.quiz.jsonquiz-banks/rxjs.quiz.jsonquiz-banks/git.quiz.jsonquiz-banks/datastructures.quiz.jsonquiz-banks/react.quiz.jsonquiz-banks/nextjs.quiz.jsonquiz-banks/bigo.quiz.jsonquiz-banks/python.quiz.jsonquiz-banks/systemdesign.quiz.jsonquiz-banks/typescript.quiz.jsonquiz-banks/ai.quiz.jsonquiz-banks/nodejs.quiz.jsonquiz-banks/devops.quiz.jsonquiz-banks/auth.quiz.json
See docs/Quiz-System-Guide.md for the JSON schema, localStorage behavior, and the quiz-bank authoring workflow.
- Node.js 18+ (LTS recommended)
- npm or yarn package manager
- Modern web browser with ES2020+ support
-
Clone the repository
git clone <repository-url> cd code-executives
-
Install dependencies
npm install # or yarn install -
Start development server
npm run dev # or yarn dev -
Open in browser Navigate to
http://localhost:5173
npm run build
# or
yarn buildThe built application will be in the dist/ directory.
Code Executives is a Single Page Application (SPA) that uses client-side routing via React Router. When deployed on a traditional Apache/cPanel host, you need to tell Apache to serve index.html for every URL so that React Router can handle navigation. Without this step, directly visiting any URL (e.g. https://codexecutives.com/javascript) will return a 404 error because Apache looks for a physical file at that path.
This repository already includes the required .htaccess file (public/.htaccess) which Vite automatically copies to dist/ on every build.
-
Build the application
npm run build
The
dist/folder now contains the complete production bundle, including the.htaccessfile. -
Upload
dist/contents to your public_html directoryUsing cPanel's File Manager or FTP, upload all files and folders inside
dist/(not the folder itself) to your domain'spublic_htmldirectory (or the sub-directory you are deploying to).⚠️ Make sure to upload hidden files as well — the.htaccessfile starts with a dot and can be invisible in some FTP clients. Enable "Show Hidden Files" in cPanel File Manager. -
Verify
mod_rewriteis enabledThe
.htaccessrelies on Apache'smod_rewritemodule. Most cPanel hosts have this enabled by default. If you still see 404 errors after uploading, contact your host to confirmmod_rewriteis active. -
Test direct URL access
Open your browser and navigate directly to a deep URL such as
https://yourdomain.com/javascriptorhttps://yourdomain.com/git. The page should load correctly via React Router.
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]- Requests for real files (JS/CSS chunks, images, fonts) are served directly.
- All other requests are internally rewritten to
index.html, letting React Router decide what to render.
No Node.js server is required. The application is a fully static bundle that works with any web server capable of serving static files.
Master Git version control with interactive visualizations:
- Repository Architecture: Understanding Git's internal structure
- Three-Tree Model: Working directory, staging area, and commit history
- Object Model: Blobs, trees, commits, and references
- Core Workflow: Add, commit, push, pull operations
- Branching & Merging: Feature branches and merge strategies
- Collaboration: Remote repositories and team workflows
- History Management: Rebase, reset, and advanced Git operations
Deep dive into how JavaScript actually works:
- V8 Runtime: Chrome's JavaScript engine internals
- Call Stack: Function execution and stack frames
- Memory Heap: Object allocation and garbage collection
- Event Loop: Asynchronous execution and task queues
- Memory Management: Leak detection and optimization
Master reactive programming patterns:
- Observables: Data streams and subscription patterns
- Operators: Transform, filter, and combine streams
- Error Handling: Robust error management strategies
- Real-world Examples: Practical applications and use cases
Comprehensive guide to fundamental data structures with interactive visualizations:
- Linear Structures: Arrays, linked lists, stacks, and queues
- Hash Tables: Hash functions, collision resolution, and performance analysis
- Tree Structures: Binary trees, BSTs, AVL trees, red-black trees, heaps, and B-trees
- Graph Structures: Graph representations, BFS/DFS traversals, and shortest path algorithms
- Practice Problems: LeetCode-style coding challenges with step-by-step solutions
- Real-world Applications: Industry use cases from social media to database systems
- Performance Analysis: Big O notation, complexity comparisons, and optimization strategies
Complete App Router tutorial with 24 interactive visualizations covering modern Next.js development:
- App Router Fundamentals: File-system routing, nested layouts, and shared UI patterns
- Rendering Strategies: SSR, SSG, CSR, ISR with performance comparisons and Core Web Vitals
- Server & Client Components: Component composition, hydration flow, and code splitting
- Data Fetching & Mutations: Server Actions, caching strategies, and request memoization
- Middleware & Route Handlers: Request processing pipeline, edge runtime, and API routes
- Performance Optimization: Bundle analysis, image optimization, and caching strategies
- Interactive Visualizations: 24+ components including flow diagrams, performance dashboards, and code playgrounds
- Real-world Patterns: Progressive enhancement, error boundaries, and production best practices
Complete algorithmic complexity analysis module with 10+ interactive tools and educational metaphors:
- Core Concepts: Understanding time and space complexity with intuitive visualizations
- Common Complexities: Interactive exploration of O(1), O(log n), O(n), O(n log n), O(n²), O(2^n), O(n!) complexities
- Algorithm Analysis: Step-by-step complexity analysis with code visualization and performance profiling
- Real-World Applications: Complexity landscape showing algorithms in complexity space with industry case studies
- Advanced Topics: Amortized analysis, complexity hierarchies, and optimization techniques
- Practice Challenges: Interactive coding challenges with Big-O analysis and performance comparisons
- Gamification Hub: Achievement system with progress tracking and learning milestones
- Interactive Metaphors: 10+ visual metaphors including teleporter, librarian, conveyor belt, turtle, population explosion, and combinatorial explosion
- Algorithm Comparison: Side-by-side performance analysis with real-time execution simulation
- Performance Profiling: Code analyzer and optimization coach with complexity recommendations
Complete Python tutorial covering the fundamental concepts that make Python unique, from philosophy to practical implementation:
- Python Philosophy: The Zen of Python (PEP 20) with 19 guiding principles, interactive principle exploration, and Pythonic vs non-Pythonic code comparisons
- Execution Model: Interactive 3-phase execution flow (Source → Bytecode → PVM) with step-by-step compilation visualization and bytecode examples
- Memory Management: Interactive reference counting demo and cyclic garbage collection visualization showing object lifecycle and memory allocation strategies
- Global Interpreter Lock: Interactive threading demo showing GIL behavior, thread blocking, and alternatives like multiprocessing and asyncio
- Advanced Concepts: Generators, decorators, metaclasses, and context managers with interactive visualizations
- 2D Visualizations: Execution flow diagrams, memory models, GIL threading demonstrations, and decorator patterns
- 3D Visualizations: Python VM internals, memory profiler, and call graph representations
- Performance Analysis: GIL impact, memory optimization, and concurrency alternatives
- Real-world Applications: Best practices for CPU-bound vs I/O-bound tasks, memory profiling, and optimization techniques
Master machine learning concepts from the ground up with interactive visualizations and beginner-friendly explanations:
- Introduction to AI/ML: Core concepts, history, and the difference between AI, ML, and deep learning — with ELI10 analogies
- ML Lifecycle: End-to-end machine learning pipeline from data collection to model deployment
- Feature Engineering: Transforming raw data into meaningful inputs — normalization, encoding, and selection
- Neural Networks: How neurons, layers, and activation functions work — interactive forward pass visualization
- Loss Functions: Understanding MSE, cross-entropy, and how models measure their own mistakes
- Gradient Descent: Intuitive step-by-step visualization of how models learn by minimizing loss
- Backpropagation: Chain rule demystified — interactive gradient flow through a neural network
- Generalization: Overfitting, underfitting, bias-variance tradeoff, and regularization techniques
- Training vs Inference: The distinction between learning and prediction, with batch/online learning modes
- Word Embeddings: Turning text into vectors — Word2Vec, cosine similarity, and semantic relationships
- RAG Pipeline: Retrieval-Augmented Generation — grounding LLMs with external knowledge stores
- 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
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
Comprehensive backend architecture module with 6+ interactive visualizations covering the full backend stack:
- Backend Evolution: Interactive timeline from 1950s hardware intimacy to modern containers and microservices
- Architecture Patterns: Interactive comparison of Monolithic, Layered, Microservices, Event-Driven, and Hexagonal architectures with animated diagrams
- Resilience Patterns: Circuit Breaker state machine simulation, Sidecar pattern visualization, and Saga pattern with compensating actions
- Database Theory: Interactive CAP Theorem triangle with CP/AP toggle, ACID vs BASE tabbed comparison, and property deep-dives
- API Design: REST vs GraphQL vs gRPC comparison with real-world analogies, code examples, and API evolution timeline
- Real-Time Communication: Webhooks, WebSockets, and Server-Sent Events with data flow visualizations and comparison matrix
- 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
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
The Playground is the one place where a learner runs their own code and watches what it does. It is a standalone page at /playground, with its own layout (no Header/Footer/Sidebar), and lives in src/features/playground/. No module has a playground of its own.
Its visualizations are being rebuilt on the same 2D/3D views the stories use, as decided in ADR 0004; until then the lenses show only part of what a run does.
- Editor: Monaco, with JavaScript, TypeScript and Python selectable
- Running code: Everything runs in the browser. JavaScript and TypeScript go to a sandboxed iframe (
sandbox="allow-scripts", a CSP withdefault-src 'none', network APIs blocked); Python goes to Pyodide (WASM). A run times out after 10 seconds - Trace: The code is instrumented before it runs (Acorn/Astring for JavaScript,
sys.settracefor Python) so that the run is recorded as a trace: one step per statement, with the line, the call stack and the variables - Step controls: Move forward and backward through the steps or play them; Left/Right arrows step, Space plays or pauses, Home/End jump to the first or last step
- Console: What the code printed, capped at 500 entries of at most 10 KB each, HTML-escaped before rendering
- Lenses: Event Loop, Heap & Stack, Data Structures and Streams, drawn with React Flow today
- Examples: Prebuilt code per language, each with a suggested lens
- Dark theme: The Playground is the site's only dark page; its styles are scoped under
data-theme="playground" - Developer Guide: See
docs/Playground-Developer-Guide.mdfor the current structure, lenses, languages and examples
npm run dev- Start development server with hot reloadnpm run build- Build production-ready bundlenpm run preview- Preview production build locallynpm run lint- Run ESLint code quality checksnpm run type-check- Run TypeScript type checking
The project maintains high code quality through:
- TypeScript: Static type checking for safer development
- ESLint: Code linting with React and TypeScript rules
- Prettier: Consistent code formatting (recommended)
- Modular Architecture: Clean separation of concerns
To add a new learning module (following the Next.js, Data Structures, and Big-O Notation module patterns):
- Create implementation plan in
docs/[Module-Name]-Implementation-Plan.md - Define TypeScript interfaces in
src/types/[module-name].ts - Create section components in
src/sections/[module-name]/ - Add 2D visualizations in
src/components/models2d/[module-name]/ - Create page component in
src/pages/[ModuleName]Page.tsx - Create custom hooks in
src/hooks/use[ModuleName].ts - Update theme colors in
src/utils/theme.ts - Update navigation in
src/components/Header.tsxandsrc/components/Sidebar.tsx - Add routing in
src/App.tsx - Update README.md with module information
We welcome contributions! This project is designed to be educational and community-driven.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes following the existing patterns
- Test your changes thoroughly
- Commit with descriptive messages
- Push to your branch and create a Pull Request
- Follow the existing code style and architecture
- Add TypeScript types for all new code
- Include interactive visualizations where applicable
- Write descriptive commit messages
- Update documentation for new features
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js Team for the incredible App Router and modern React framework
- React team for the amazing framework ecosystem
- Vite for lightning-fast development experience
- Tailwind CSS for utility-first styling approach
- Monaco Editor for the code editor in the Playground
- Vercel for hosting and deployment platform
- Open Source Community for the tools and libraries that make this possible
- 📧 Issues: Report bugs or request features via GitHub Issues
- 💬 Discussions: Join community discussions for questions and ideas
- 📖 Documentation: Comprehensive docs available in the
/docsdirectory - 🎓 Learning Modules: 16 complete interactive modules with 103+ visualizations
- 🎯 Playground: Run your own JavaScript, TypeScript or Python and step through the trace at
/playground
Built with ❤️ for developers, by developers
Transform your understanding of programming concepts through interactive visualization and hands-on learning. Master modern web development with our comprehensive Next.js, Git, JavaScript, RxJS, Data Structures, Big-O Notation, Python Programming, and AI Fundamentals modules. Run your own code in the Playground and step through what it did.
All visualizations use SVG-based 2D components organized under each feature module:
- Each feature's visualizations live in
src/features/[module]/components/visualizations/2d/ - 2D components use React with SVG animations and CSS transitions
- Interactive controls (play/pause/step/reset) are built into each visualization component