Interactive Data Structures & Algorithms Learning Platform - Making computer science concepts accessible through beautiful, step-by-step visualizations.
๐ Live Demo: https://algorithima.web.app/
DSA Visualizer is an interactive educational platform designed to help students and developers understand data structures and algorithms through visual learning. Each visualizer provides step-by-step animations synchronized with actual code execution, making complex concepts easy to grasp. It is brought to you by Openverse, the open source club of IIIT Kottayam, if you wish to contribute, check out contributing.md We use C for code since, the visualizer is specifically tailored for the Datastructure 121 Course at IIIT Kottayam
- ๐ Linked Lists - Doubly linked lists with memory address visualization and dynamic code generation
- ๐ Stack & Queue - LIFO/FIFO operations with real-time step tracking and C implementation
- ๐ณ Binary Search Trees - Interactive tree operations with traversal algorithms and balancing
- ๐บ๏ธ Pathfinding - Grid-based pathfinding with Dijkstra's and A* algorithms
- ๐ Sorting Algorithms - Multiple sorting algorithms with complexity analysis and performance comparison
- ๐ฎ Interactive Controls - Play, pause, step-through, and speed control for all animations
- ๐ป Code Visualization - Real-time syntax highlighting showing exact execution steps
- ๐ง Memory Management - Visual representation of memory allocation and pointer manipulation
- ๐ฑ Responsive Design - Seamless experience across desktop, tablet, and mobile devices
- ๐ Educational Content - Comprehensive explanations, complexity analysis, and best practices
- ๐จ Modern UI - Dark theme with consistent design system and accessibility features
- ๐งช Educational Focus - Code examples in C with detailed comments and explanations
- ๐ Real-time Updates - Dynamic visualization updates based on user interactions
Quick Start
- Node.js 18+
- npm or yarn
# 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 docker run command.| Category | Technology | Purpose |
|---|---|---|
| Frontend | React 19 | Modern UI with hooks and functional components |
| Build Tool | Vite 6 | Fast development and optimized builds |
| Animations | Framer Motion | Smooth, performant animations |
| Code Display | React Syntax Highlighter | Syntax highlighting with line tracking |
| Code Editor | Monaco Editor | Interactive code editing experience |
| Styling | CSS3 + Custom Design System | Consistent dark theme across all components |
| Icons | React Icons | Comprehensive icon library |
| Routing | React Router v7 | Client-side navigation |
| Deployment | Firebase Hosting | Fast, reliable hosting |
DSA-Website/
โโโ ๐ src/
โ โโโ ๐ฏ features/ # Feature-based organization
โ โ โโโ ๐ linkedList/ # Doubly linked list with memory visualization
โ โ โโโ ๐ sorting/ # Multiple sorting algorithms
โ โ โโโ ๐ณ tree/ # Binary search tree operations
โ โ โโโ ๐บ๏ธ pathfinding/ # Grid-based pathfinding algorithms
โ โ โโโ ๐ stackQueue/ # Stack and queue data structures
โ โ โโโ ๐ home/ # Landing page with feature showcase
โ โ โโโ โน๏ธ about/ # Team and project information
โ โ โโโ ๐ง common/ # Shared components and utilities
โ โ โโโ components/ # Reusable React components
โ โ โโโ styles/ # Global CSS and design system
โ โโโ ๐จ constants/ # Theme, colors, animation speeds
โ โโโ ๐ ๏ธ utils/ # Helper functions and utilities
โ โโโ ๐ผ๏ธ assets/ # Images, icons, static files
โ โโโ ๐ App.jsx # Main router and application shell
โ โโโ ๐ main.jsx # Application entry point
โโโ ๐ public/ # Static assets and legacy files
โโโ ๐ CONTRIBUTING.md # Comprehensive contribution guide
โโโ ๐ฆ package.json # Dependencies and build scripts
Our consistent dark theme provides an optimal learning environment:
/* Primary Colors */
--primary: #58a6ff; /* Blue - actions, highlights */
--secondary: #238636; /* Green - success states */
--danger: #f85149; /* Red - errors, warnings */
--warning: #d29922; /* Yellow - cautions */
/* Interface Colors */
--background: #0d1117; /* Main dark background */
--surface: #161b22; /* Panels, cards */
--border: #30363d; /* Borders, dividers */
--text-primary: #c9d1d9; /* Main text */
--text-secondary: #8b949e; /* Secondary text */
/* Node Visualization */
--node-active: #5bc9b1; /* Active/highlighted nodes */
--node-inactive: #30363d; /* Default/inactive nodes */
--node-visiting: #f39c12; /* Nodes being processed */- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
# Development
npm run dev # Start development server with hot reload
npm run build # Create production build
npm run preview # Preview production build locally
npm run lint # Run ESLint for code quality
# Dependencies
npm install # Install all dependencies
npm update # Update dependencies to latest versions
npm audit # Check for security vulnerabilities- โก Hot Module Replacement - Instant updates during development
- ๐ ESLint Integration - Code quality and consistency checking
- ๐ฆ Optimized Builds - Tree-shaking and code splitting for performance
- ๐งช Modern JavaScript - ES6+ features with Vite compilation
- ๐ Security Focused - Regular dependency audits and updates
We actively welcome contributions! Whether you're a student, educator, or developer, there are many ways to help:
- ๐ Bug Reports - Help us identify and fix issues
- โจ Feature Requests - Suggest new visualizers or improvements
- ๏ฟฝ Documentation - Improve guides and code comments
- ๐จ Design - Enhance UI/UX and accessibility
- ๏ฟฝ Testing - Help ensure quality across browsers and devices
- ๐ง Code - Add new features or optimize existing ones
- ๐ Read the Guide - Check CONTRIBUTING.md for detailed guidelines
- ๐ด Fork & Clone - Get your own copy of the repository
- ๐ฟ Create Branch - Work on a dedicated feature branch
- ๐งช Test Changes - Ensure all visualizers work correctly
- ๐ Submit PR - Describe your changes and improvements
- ๐จ Follow Design System - Use established colors and patterns
- ๐ Add Documentation - Comment complex algorithms and functions
- ๐งช Test Thoroughly - Verify animations and edge cases
- โฟ Consider Accessibility - Ensure inclusive design practices
- ๐ฑ Mobile-First - Design for all screen sizes
- Real-time Animations - Watch algorithms execute step-by-step
- Code Synchronization - See exactly which code is running
- Memory Visualization - Understand pointer operations and memory allocation
- Performance Analysis - Compare time and space complexity
โญ Star this repository if it helps you learn! Your support motivates continued development and improvement.
- Modern Web Technologies: Leveraging the latest in React and web development
Made with ๐ by the Openverse Team