AlgoViz 2025 is a high-fidelity educational platform designed to bridge the gap between abstract computer science theory and spatial intuition. Built for the modern web, it utilizes reactive visualization and advanced AI reasoning to help engineers and students master complex data structures and algorithms.
Interact with 16+ specialized environments, each optimized for specific mental models:
- Trees & Graphs: Binary Search Trees, AVL Trees, Segment Trees, Tries, and Graph Traversal (BFS/DFS/Dijkstra).
- Linear Structures: Linked Lists, Stacks, Queues (Simple, Circular, Priority).
- Advanced Mechanics: Dynamic Programming (LCS, Knapsack), Matrix Operations, and Convex Hull (Graham Scan/Jarvis March).
- Search & Sort: Comparative Sorting Race Mode and Logarithmic Binary Search.
Complete control over the algorithmic timeline:
- Playback Controls: Pause, rewind, or step-frame through execution.
- Variable Speed: Adjust the "Hertz Rate" from 0.5x to 20x speed.
- Visual Diagnostics: Live tracking of space complexity and pointer movement.
A built-in neural index providing implementation syntax in:
- Python, Java, C++, and C.
- Time and Space complexity breakdowns for every operation.
- Framework: React 18 (Concurrent Mode)
- Language: TypeScript (Strict Type Safety)
- Styling: Tailwind CSS (Atomic Utility First)
- Motion Engine: Framer Motion & CSS Paint API
- State Management: React Hooks & Context API
- Audio: Web Audio API (Synthesized feedback)
- Node.js 18+
- npm 9+
-
Clone the repository:
git clone https://github.com/csxark/AlgoViz.git cd AlgoViz -
Install dependencies:
npm install
-
Launch the platform:
npm run dev
The application uses a custom-themed cyberpunk aesthetic:
- Primary Cyan (
#00f5ff): Represents active neural processes and valid nodes. - Deep Black (
#0a0a0a): Minimizes eye strain during long study sessions. - Holographic Glass: Containers utilize heavy backdrop-blur and border-glows for depth.
System protocols are open-source. We welcome pull requests for new data structures or improved heuristics.
- Fork the Project
- Create your Protocol Branch (
git checkout -b feature/NewStructure) - Commit your Changes (
git commit -m 'Add NewStructure Protocol') - Push to the Branch (
git push origin feature/NewStructure) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Built with 💙 for the future of computer science education.