🚀 DSAverse - Interactive Data Structures & Algorithms Visualizer

DSAverse is an interactive web platform that brings computer science to life through step-by-step visualizations. It started with Data Structures and Algorithms and now also covers the CS core every software engineer needs — operating systems, computer networks and databases — the mathematics underneath it: counting, probability, vectors, linear algebra and calculus, and AI and machine learning, from a fitted line to neural networks and transformers, with real models running in your browser. Whether you're a student learning your first sorting algorithm or a developer preparing for technical interviews, DSAverse makes complex concepts intuitive and engaging.

• 🎨 Beautiful Visualizations - Watch algorithms and systems run step by step with smooth animations
• 🎮 Interactive Learning - Control playback speed, step forwards and backwards, and change the input
• 📚 Comprehensive Coverage - From basic sorting to TCP congestion control and database recovery
• 🧠 Built for Recall - Quizzes, spaced-repetition review and "what happens next?" prompts, not just animations
• 📱 Responsive Design - Learn anywhere, on any device
• 🌍 Open Source - Community-driven development and contributions

242 interactive pages across 29 sections, in four subjects.

Math pages are built to be manipulated, not just watched: drag a vector or slide a parameter and the numbers and formulas update with it, and 3D ideas get an orbitable scene.

Every number on an AI page is computed: networks train live in your browser, and the transformer pages run a small GPT with real trained weights (195,136 parameters, trained for this site) one matrix at a time. Each page has a "break it" control, such as dropping the causal mask or the ÷√d, so you can watch what fails and undo it. Language Models and RAG and Vector Search are coming next.

Plus a searchable complexity cheatsheet covering time and space bounds for every major data structure and algorithm.

Alongside the step-by-step simulations, CS Core includes 26 animated CS-internals explainers — multi-act walkthroughs of what actually happens inside a computer:

• Language runtimes: Python and C++ execution pipelines, JIT compilation, garbage collection, floating point and IEEE 754, Unicode and UTF-8
• Concurrency: processes vs threads, multithreading, async/await and the event loop
• The web: what happens when you search a URL, HTTPS and TLS, packet routing, browser rendering, REST APIs
• Object orientation: classes and memory, inheritance and MRO, virtual dispatch, composition vs inheritance
• Systems: system calls and kernel mode, virtual memory and paging, CPU cache hierarchy, containers, file systems, database query execution, Git internals

The Operating Systems, Computer Networks and Database Systems sections link to these explainers wherever a topic is already covered, so nothing is taught twice.

• ⏯️ Play/Pause/Reset - Full control over animation playback
• ⚡ Speed Control - Adjust animation speed from slow-mo to lightning fast
• 📊 Step-by-Step Mode - Step forwards and backwards through every operation
• 🎯 Custom Input - Randomize, pick a preset, or test algorithms with your own data
• 📱 Touch-Friendly - Optimized for mobile and tablet interactions

• 📝 Step Explanations - A written explanation for every single step, not just the end result
• 🔮 Predict the Next Step - Turn on Predict on 127 pages and the animation pauses at each decision so you can guess what happens before it does
• 🧠 Active Recall Quizzes - A 3-question quiz on every page — 726 questions in all
• 🔁 Review - Spaced-repetition practice over every quiz on the site, by subject or by section. Questions come back just before you would forget them. Progress stays in your browser — no account, nothing sent anywhere
• ⚖️ Compare - Put any two or three pages side by side: complexity, difficulty, pattern and approach
• 🔍 Search - Press ⌘K / Ctrl+K anywhere to jump to any page
• 🧭 See Also - Every page ends with related pages, including links across subjects — Dijkstra and link-state routing point to each other, and serializability points to topological sort
• ⏱️ Complexity Analysis - Time and space complexity on every page and in the cheatsheet
• 💡 Code Examples - Clean, commented implementations: Python on most pages, plus JavaScript and SQL where they fit

Ensure you have the following installed:

• Node.js 18.18 or higher (required by Next.js 15)
• npm
• Git

1. Clone the repository

git clone https://github.com/Archit1706/DSAverse.git
cd DSAverse

2. Install dependencies

npm install

3. Start the development server

npm run dev

4. Open your browser Navigate to http://localhost:3000 to see DSAverse in action!

npm run build
npm start

npm run build first regenerates the learning data in data/ (the quiz bank, page index, related links and page counts) from the pages themselves, so Review, Compare, search and See also always match what is on the site.

npm run lint

DSAverse/
├── app/                           # Next.js App Router
│   ├── page.js                    # Homepage
│   ├── layout.js                  # Root layout, site-wide metadata, JSON-LD
│   ├── globals.css                # Global styles and theme tokens
│   ├── sitemap.js                 # Generates /sitemap.xml for all routes
│   ├── robots.js                  # Generates /robots.txt
│   ├── favicon.ico                # Served at /favicon.ico
│   ├── cheatsheet/                # Searchable Big-O reference table
│   ├── compare/                   # Side-by-side comparison of any two or three pages
│   ├── review/                    # Spaced-repetition practice over every quiz
│   ├── contact/                   # Contact / GitHub page
│   ├── under-the-hood/            # CS-internals explainers
│   └── [section]/                 # One directory per section (sorting, operating-systems, ...)
│       ├── layout.js              # Navbar + Footer + section metadata
│       ├── loading.js             # Section loading animation
│       ├── page.js                # Section index (server component)
│       └── [algorithm]/
│           ├── layout.js          # Per-page metadata, canonical and See also links
│           └── page.js            # The visualizer ("use client")
├── components/                    # Shared React components
│   ├── Navbar.jsx                 # Subject tabs and mega-menu
│   ├── CommandPalette.jsx         # ⌘K / Ctrl+K search
│   ├── RelatedPages.jsx           # "See also" links at the foot of every page
│   ├── PredictStep.jsx            # "What happens next?" prompts
│   ├── CodeBlock.jsx              # Syntax-highlighted code block
│   ├── GraphCustomizer.jsx        # Custom graph input modal
│   ├── BinaryTreeCanvas.jsx       # Shared binary-tree layout
│   ├── BTreeCanvas.jsx            # Shared B-tree / B+ tree layout
│   ├── ml/                        # Heatmaps, token strips and network diagrams for the AI pages
│   └── Hero.jsx, AlgorithmsGrid.jsx, Footer.jsx, ...  # Homepage sections
├── data/
│   ├── subjects.js                # Subjects → sections (DSA, CS Core, Math, AI & ML)
│   ├── algorithmCategories.js     # Nav structure: sections → page names
│   └── quizBank.js, pageIndex.js,
│       related.js, learningStats.js  # Generated on every build — do not edit by hand
├── lib/
│   ├── ml/                        # Plain-JS ML engine: tensors, autograd, MLPs, RNNs, a tiny GPT
│   └── progress.js                # Visited pages and the review schedule (localStorage)
├── scripts/
│   ├── ml/                        # Dev-only: trains the models the AI pages load
│   └── build-learning-data.mjs    # Generates the data files above (runs before every build)
├── public/                        # Static assets, plus trained models and word vectors for the AI pages
├── AGENTS.md / CLAUDE.md          # Architecture guide for coding agents
├── CONTRIBUTING.md                # Contribution guide
├── eslint.config.mjs              # ESLint configuration
├── jsconfig.json                  # Path aliases
├── next.config.mjs                # Next.js configuration
├── postcss.config.mjs             # PostCSS configuration
└── package.json                   # Dependencies and scripts

Technology	Purpose	Version
	React Framework	15.x
	UI Library	19.x
	Styling	4.x
	Icons	0.5x
	Deployment	-

Looking for structured learning and practice problems? Check out DSA-30, my comprehensive 30-day program to master Data Structures and Algorithms!

🔗 Links:

• Website: dsa30.vercel.app
• GitHub: DSA-30 Repository

DSA-30 Features:

• 📅 30-Day Structured Curriculum
• 💪 Hands-on Coding Challenges
• 🎯 Interview Preparation
• 📝 Detailed Solutions & Explanations
• 🏆 Progress Tracking

Perfect Combination: Use DSAverse for visual learning and DSA-30 for structured practice!

We welcome contributions from developers of all skill levels! Whether you want to:

• 🐛 Report bugs or suggest improvements
• ✨ Add new algorithms, data structures or CS topics
• 🎨 Improve visualizations and animations
• 📚 Enhance documentation and tutorials
• 🔧 Optimize performance and code quality

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📖 Read our detailed Contributing Guide for how pages are built, the checklist for adding one, and the coding conventions.

If DSAverse has helped you learn and understand algorithms better, consider:

• ⭐ Starring the repository
• 🍴 Forking and contributing
• 📢 Sharing with friends and colleagues
• 🐛 Reporting bugs and suggesting features

This project is licensed under the Apache 2.0 License - see the LICENSE file for details.

• Thanks to all contributors who help make DSAverse better
• Inspired by the amazing computer science education community
• Built with modern web technologies and best practices
• Special thanks to open source libraries and tools that make this possible