OpenverseAlgorithima – DSA Website
Interactive visualizer for core data structures and algorithms built by Openverse.
Algorithima: DSA Visualizer
Algorithima is a real‑time DSA visualizer that syncs code execution with animations for clear learning.
Built and maintained by the Openverse club at IIIT Kottayam.
Features 📊
Linked Lists
Singly & doubly linked lists with memory animation
Stacks & Queues
Execute push/pop with visual memory pointers
Sorting
See merge, quick, bubble step-by-step
Pathfinding
Visualize A* and Dijkstra over a grid
User Experience
1
Play, pause, step through each operation
2
Adjust speed and input values
3
View real‑time code and memory pointer sync
- Fully responsive for all devices
- Dark theme and accessibility support
- Intuitive controls and real-time feedback
Technical Stack
| Tech | Purpose/Usage |
|---|---|
| React 19 | UI framework |
| Vite 6 | Build tool |
| Framer Motion | Animations |
| Monaco Editor | Code editor integration |
| GitHub Actions | CI/CD |
| Firebase Hosting | Deployment |
Folder structure highlights:
src/features/linkedList/src/features/sorting/- ...etc.
Project Structure
📁 src
📁 features
📄linkedList
📄sorting
📄tree
📄pathfinding
📄main.jsx
📄App.jsx
📄README.md
📄.github/workflows/build.yml
Installation & Setup
# Clone the repository
git clone https://github.com/your-username/DSA-Website.git
cd DSA-Website
# Install dependencies
npm install
# Start development server
npm run dev
# Open the application
# Visit http://localhost:5173 in your browser
# Build for production
npm run build
# Preview production build
npm run previewYou can also build a docker image and run the build isolately, without any setup overhead.
# After cloning and changing directory
docker build -t algorithima:latest .
# To run the image
docker run -d --name dsa_website \
-p 1234:80 \
algorithima:latest
# Build will be running on port localhost:1234, if the port is busy, put another port in dockerGetting Started (Contributors)
1
Fork and clone the repo
2
Run
npm install3
Use
npm run dev and visit http://localhost:51734
Run
npm run build and npm run previewYou can contribute code, documentation, or UI/UX improvements.
How To Contribute
- Use PR templates and follow issue labels
- Ensure tests and code quality before submitting
- See CONTRIBUTING.md for full guidelines
Showcase & Demo
TL;DR Summary
TL;DR: This is Algorithima — a rich DSA visualizer built by Openverse with React & Vite, designed for learning, contribution, and technical credibility.