Home
Visualize coding interview algorithms, step by step.
Algomations is an interactive algorithm learning platform that animates the execution of classic coding interview problems line by line. Watch variables change in real time, supply your own inputs, get instant AI explanations, and build genuine intuition — all without leaving your browser.
Live at algomations.vercel.app
- 101 problems across 19 pattern categories — Two Pointers, Dynamic Programming, Graphs, Backtracking, and more
- Step-through animations — watch highlighted code execute with array bars, tree nodes, stack frames, and DP tables
- Multi-language code — Python, JavaScript, Java, and Pseudocode for every visualization
- Playback controls — play, pause, step forward/backward, adjustable speed (0.5x-2x), seekable progress bar
- Custom inputs — modify algorithm inputs and observe behavior changes in real time
- Variable watch panel — track every variable's value at each execution step
- AI Tutor — context-aware Llama 3.1 8B model runs entirely in your browser via WebGPU (zero data sent to servers)
- Light and dark themes — glassmorphism panels, gradient accents, smooth Framer Motion transitions
- Keyboard shortcuts — Space (play/pause), Arrow keys (step), R (reset)
| Page | Description |
|---|---|
| Getting Started | Prerequisites, installation, and running locally |
| Architecture | Tech stack, folder structure, type system, and how things work |
| Adding Visualizations | Step-by-step guide for contributors |
| Visualization Catalog | All interactive visualizations with LeetCode links |
| AI Tutor | How the in-browser AI tutor works |
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 16 (App Router) | Framework and routing |
| React | 19 | UI rendering |
| TypeScript | 5 (strict) | Type safety |
| Tailwind CSS | 4 | Utility-first styling |
| Framer Motion | 12 | Animations and transitions |
| WebLLM | latest | In-browser LLM inference |
Contributions are welcome. See Adding Visualizations for the contributor guide, or jump straight into the Getting Started page to set up the project locally.
Good first contributions:
- Add a new algorithm visualization following the existing pattern
- Improve accessibility (ARIA labels, keyboard navigation)
- Fix typos or improve documentation
MIT — free to use, modify, and distribute.