A luxurious, hacker-grade, high-converting Depth-First Search visualizer.
Built to make recruiters, clients, senior engineers, and fellow hackers stop scrolling.
- Real-time animated canvas traversal with live explicit stack visualization
- Pixel-perfect iterative DFS using a true LIFO stack (no recursion)
- Matches all 6 lab test cases with exact output order
- Three production-grade implementations: JavaScript • Python • Java
- Glassmorphic cyber-luxury UI with neon accents and smooth 60fps animations
- Zero dependencies — pure vanilla HTML, Tailwind (via CDN), and Canvas
- One-file deployment (just open
index.html)
- Download or clone the project
- Open
index.htmlin any modern browser - Click "LAUNCH VISUALIZATION" and watch the magic
No build tools. No npm install. No frameworks. Just raw elegance.
- Live DFS Animation — Watch the stack grow and shrink in real time
- Interactive Controls — Play/Pause, speed slider, graph selector
- Explicit Stack View — See exactly how the LIFO principle works
- Traversal Path — Real-time ordered list of visited nodes
- Multiple Test Cases — All original lab graphs included
- Random Graph Generator — For extra wow factor
- Sound FX — Satisfying audio feedback (toggleable)
- Keyboard Shortcuts —
Cmd/Ctrl + Kto launch demo instantly
nexus-dfs/
├── index.html ← Complete single-file experience
├── README.md ← This file (you're reading it)
└── (optional) app.js ← Extracted script if you prefer separation
The DFS is implemented iteratively with an explicit stack to avoid recursion depth issues and to perfectly match the lab requirements.
Key technical choices:
- Reverse neighbor iteration (
n-1→0) when pushing to stack → guarantees the exact order expected by the tests - Adjacency matrix input as specified
- O(V + E) time and O(V) extra space — optimal for graph traversal
- Clean separation between the core algorithm and the visualization layer
All three language versions (JS, Python, Java) produce identical traversal results.
| Test | Root | Expected Output | Status |
|---|---|---|---|
| 1 | 1 | [1, 2, 3, 0] |
✅ |
| 2 | 3 | [3, 2, 1, 0] |
✅ |
| 3 | 3 | [3] |
✅ |
| 4 | 3 | [3, 2] |
✅ |
| 5 | 0 | [0, 1] |
✅ |
- Frontend: HTML5, Canvas, vanilla JavaScript, Tailwind CSS (CDN)
- Algorithms: Iterative DFS with explicit stack
- Design: Glassmorphism + neon cyberpunk aesthetic
- Audio: Web Audio API for subtle feedback
Cormen, T. H., Leiserson, C. E., Rivest, R. L., & Stein, C. (2009). Introduction to algorithms (3rd ed.). MIT Press.
Sedgewick, R., & Wayne, K. (2011). Algorithms (4th ed.). Addison-Wesley Professional.
Tarjan, R. (1972). Depth-first search and linear graph algorithms. SIAM Journal on Computing, 1(2), 146–160. https://doi.org/10.1137/0201010
This isn't just another DFS lab submission.
It's a portfolio piece disguised as a lab.
Designed to impress companies, clients, hackers, and developers alike.
Feel free to fork it, customize the colors, add your name, and use it to showcase your attention to detail and deep understanding of algorithms.
Made with obsession in 2026.
Star this repo if it made you smile.
Fork it if you want to make it even sexier.
— Jordan