About the project.
DSA Studio is an educational web app that visualizes classic sorting and searching algorithms in a clean, responsive interface. Instead of only showing the final result, it breaks each algorithm into snapshots so users can follow how the array changes, which values are being compared, and which line of code is currently active. Built with React 18, Vite, and Tailwind CSS, it features metadata-driven routing, reusable visualization state management, active code-line highlighting, and a production-ready deployment setup with Vercel, Docker, and Nginx.
Features
>Each algorithm is broken into array-state snapshots with highlighted comparison indices, human-readable explanations, and active code-line highlighting — all updating in sync.
All algorithm content (names, slugs, pseudocode, C++ code, complexity data) lives in a single metadata file, making it trivial to add new algorithms without rewriting the page layout.
A custom useVisualizer hook manages step index, play/pause state, adjustable speed, navigation, and auto-stop — completely decoupled from presentation components.
The code panel offers three switchable views: pseudocode, standard C++, and a compact C++ alternative — with active-line highlighting during playback.
Users can enter a custom array with validation or generate a random dataset for quick demos. Binary search auto-detects unsorted input and notifies the user.
Theme preference is stored in localStorage and restored on reload. Navigation adapts to desktop tabs or a mobile selector for a usable experience on any screen size.
Features
>Tech Stack
/>
ReactJavaScript library for building user interfaces with reusable components.
ViteModern build tooling for web development with rapid startup and hot module replacement.
Tailwind CSSA utility-first CSS framework providing pre-designed, atomic-level utility classes for rapid UI development with minimal CSS code.
TypeScriptA superset of JavaScript adding static typing for building large-scale applications with enhanced maintainability and tooling support.
DockerPlatform for developing, shipping, and running applications in containers.
NginxHigh-performance web server, reverse proxy, and load balancer.
VercelPlatform for frontend frameworks and static sites.