An interactive platform for learning algorithms through step-by-step visualizations, real code, and quizzes.
Built with Next.js 16, React 19, and TypeScript. No accounts, no paywalls.
- 70+ algorithms across 9 categories — sorting, searching, trees, graphs, linked lists, dynamic programming, greedy, backtracking, and more
- 6 visualizer types — watch sorting bars swap, search pointers move, trees rebalance, graphs traverse, linked lists mutate, and DP tables fill in real time
- Code in 3 languages — every algorithm ships with C++, JavaScript, and Python implementations, syntax-highlighted with Shiki
- Step-by-step chapters — each algorithm has a structured walkthrough that breaks the concept into digestible sections
- Complexity analysis — best, average, and worst-case time/space complexity for every algorithm, with a comparison table at
/compare - Course roadmap — full syllabus tables at
/course, segregated into algorithm complexity, theory topics, and data-structure operation complexities - Built-in quizzes — test yourself after each algorithm with multiple-choice questions
- Progress tracking — mark algorithms as done and track completion across sessions (stored locally)
- Sound feedback — the sort visualizer generates tones proportional to bar height as operations execute
| Layer | Choice |
|---|---|
| Framework | Next.js 16 (App Router, React Compiler) |
| UI | React 19, Tailwind CSS v4, Lucide icons |
| Code highlighting | Shiki 4 (server-rendered) |
| Fonts | Inter, Source Serif 4, JetBrains Mono |
| Deployment | Vercel |
git clone https://github.com/Aditya060806/DryRun.git
cd DryRun
npm install
npm run devOpen localhost:3000.
src/
app/
page.tsx # Landing page
algorithms/[slug]/page.tsx # Algorithm detail pages (SSG)
course/page.tsx # Syllabus-ordered course complexity tables
compare/page.tsx # Side-by-side complexity table
globals.css # Design tokens, animations, dark mode
components/
home/ # Landing page sections
visualizers/ # Sort, search, tree, graph, linked list, DP
ui/ # CodeTabs, QuizPanel, CodeBlock
layout/ # Navbar, Footer, ThemeProvider
data/
algorithms.ts # Core algorithm definitions
algorithmsExtra.ts # Additional syllabus-aligned algorithms
categories.ts # 9 category configs
courseSyllabus.ts # Ordered syllabus modules and complexity rows
theoryTopics.ts # Theory-only syllabus topics (separate table)
dataStructureComplexities.ts# DS operation complexity reference
quizData.ts # Quiz questions per algorithm
hooks/
useSound.ts # Web Audio API tone generation
useProgress.ts # localStorage progress state
lib/
complexity.ts # Shared complexity ranking/color helpers
sortAlgorithms.ts # Generator functions for 6 sort algorithms
npm run dev # Start dev server
npm run build # Production build (generates static pages)
npm run start # Serve production build
npm run lint # ESLintToggle in the navbar. Theme preference is saved to localStorage. The design system uses CSS custom properties mapped through Tailwind v4's @theme inline — no JavaScript theme classes needed beyond the .dark toggle on <html>.
Each visualizer type uses a generator function pattern. The algorithm yields its state at every meaningful step (comparison, swap, insertion, etc.), and the visualizer consumes those steps at a configurable speed. Users can play, pause, step forward, step backward, and adjust speed.
The sort visualizer also generates audio feedback using the Web Audio API — each bar produces a tone proportional to its height when it's compared or swapped.
Aditya Pandey
MIT