A high-performance, interactive educational platform that demystifies complex algorithms through real-time visualization.
Note
Personal Project 🎯 I built this to deeply understand sorting and pathfinding algorithms by implementing them from scratch with real-time visual feedback. Feel free to explore and learn from it!
➡️ tremors-algoviz.netlify.app
Live Demo Limitations: The backend may take a few seconds to wake up on first visit (cold start).
Warning
Desktop Optimized: This application features complex grid layouts and interactive controls that require a mouse and larger screen. Mobile support is limited.
| Feature | Description |
|---|---|
| ⚡ Real-Time Execution | Algorithms run live on the backend, streaming steps via WebSocket |
| 🎮 VCR-Style Controls | Play, Pause, Step Forward/Back, Reset, and variable speed (10ms-500ms) |
| 📊 Sorting Algorithms | Bubble Sort, Selection Sort, Insertion Sort with color-coded comparisons |
| 🕸️ Pathfinding Algorithms | Dijkstra, BFS, DFS on both 2D Grids and Network Graphs |
| 💻 Pseudocode Tracking | Live highlighting of the current execution line |
| 📝 Execution Log | Scrollable history of every operation |
| 🎓 Educational Modals | Time/Space complexity, pros, cons for each algorithm |
# Clone and navigate
git clone https://github.com/qtremors/algorithm-visualizer.git
cd algorithm-visualizer
# Start Backend (Terminal 1)
cd backend
uv sync
uv run uvicorn app.main:api --reload
# Start Frontend (Terminal 2)
cd frontend
npm install
npm run devVisit http://localhost:5173 🎉
| Layer | Technology |
|---|---|
| Frontend | React 19, TypeScript, Vite, TailwindCSS |
| Backend | Python 3.11+, FastAPI, WebSockets |
| Protocol | Real-time WebSocket streaming |
| Package Managers | npm (frontend), uv (backend) |
algorithm-visualizer/
├── backend/ # FastAPI Python backend
│ ├── app/
│ │ ├── main.py # Entry point, WebSocket handler
│ │ ├── base_algorithm.py
│ │ └── algorithms/ # Sorting & Pathfinding implementations
│ └── pyproject.toml
├── frontend/ # React TypeScript frontend
│ ├── src/
│ │ ├── components/ # UI components
│ │ ├── hooks/ # Custom React hooks
│ │ ├── pages/ # HomePage, AlgorithmWorkspace
│ │ └── types/ # TypeScript definitions
│ └── package.json
├── assets/ # Screenshot images
├── DEVELOPMENT.md # Developer documentation
├── CHANGELOG.md # Version history
├── LICENSE.md # License terms
└── README.md
| Document | Description |
|---|---|
| DEVELOPMENT.md | Architecture, API, Troubleshooting |
| CHANGELOG.md | Version history and release notes |
| LICENSE.md | License terms and attribution |
| TASKS.md | Project tasks and roadmap |
Tremors Source License (TSL) - Source-available license allowing viewing, forking, and derivative works with mandatory attribution. Commercial use requires written permission.
See LICENSE.md for full terms.
Made with ❤️ by Tremors