🎯 AlgoVisualizer

Explore the Live Demo »

Report Bug • Request Feature

📖 Table of Contents

• Overview
• Vision
• Mission
• Features
• Why AlgoVisualizer
• Supported Algorithms
• Code Implementations
• Technologies Used
• Prerequisites
• Quick Start
• Usage Guide
• Project Structure
• Learning Journey
• Troubleshooting
• Getting Started
• Sync Your Fork with Upstream
• Analytics & Performance
• Educational Impact

🔍 Overview

Welcome to AlgoVisualizer, a cutting-edge interactive web application designed to transform the way you learn and understand algorithms. Experience real-time visualizations of sorting, searching, and data structure algorithms with a beautiful, modern interface.

Live Link: https://algo-visualizer-amber.vercel.app

✨ Vision

Transform algorithmic learning through interactive visualizations—empowering students and developers to master data structures and algorithms with hands-on exploration and real-time feedback.

🎯 Mission

Build the most comprehensive interactive algorithm visualization platform Provide step-by-step visual learning with multi-language code implementations Support educators with exportable content for classrooms and presentations Foster algorithmic thinking through interactive learning and community contributions

✨ Features

🎨 Modern Interface

• Dark Theme: Sleek GitHub-inspired dark theme for comfortable learning
• Interactive Learning Platform: Intuitive badge-based navigation system
• Responsive Design: Seamless experience across desktop, tablet, and mobile devices
• Smooth Animations: Powered by Framer Motion for engaging user experience

📝 User Input System

• 📊 Custom Data Visualization: Upload your own arrays, graphs, and data structures
• 🎯 Multiple Input Methods: Text input, file upload (JSON/CSV/TXT), and sample data
• ✅ Smart Validation: Real-time data validation with helpful error messages
• 📋 Format Support: JSON, CSV, comma-separated values, and structured data
• 🔧 Auto-Processing: Automatic sorting for search algorithms, ID generation for graphs
• 📚 Sample Library: Built-in examples for all algorithm types (arrays, graphs, trees)
• 📄 File Export: Download sample data or save your custom datasets

🧠 Algorithm Visualizations

• Step-by-Step Visualization: Watch algorithms execute in real-time with clear visual feedback
• Interactive Controls: Play, pause, reset, and adjust speed of algorithm execution
• Performance Metrics: Track comparisons, swaps, iterations, and execution time
• Code Explanation: Detailed code walkthrough with syntax highlighting

📊 Export & Recording

• 📸 High-Quality Snapshots: Capture visualization states as PNG/JPEG images
• 🎬 Video Recording: Export complete algorithm runs as GIFs or MP4 videos
• ⚙️ Customizable Settings: Adjust frame rates, quality, and export formats
• 📚 Educational Ready: Perfect for presentations, tutorials, and documentation

🎓 Learning Tools

• Interactive Quiz System: Test your algorithm knowledge with built-in quizzes
• Algorithm Documentation: Comprehensive guides and explanations
• Contributors Section: Meet the amazing people behind the project
• About & Contact Pages: Learn more about the project and get in touch

💡 Why AlgoVisualizer

• Learn by seeing: Watch algorithms execute step-by-step with clear visual feedback
• Multi-language support: Production-ready code in Java, Python, and C++
• Educational-first: Export recordings and screenshots for presentations
• Interview prep: Perfect for coding interviews with complexity analysis
• Modern stack: React 18, Vite, and Framer Motion for smooth experiences
• Open-source: Community-driven with contributions from developers worldwide

🌟 Exciting News...

🚀 This project is now an official part of GirlScript Summer of Code – GSSoC'25! 💃🎉💻 We're thrilled to welcome contributors from all over India and beyond to collaborate, build, and grow AlgoVisualizer! Let’s make learning and career development smarter – together! 🌟👨‍💻👩‍💻

👩‍💻 GSSoC is one of India’s largest 3-month-long open-source programs that encourages developers of all levels to contribute to real-world projects 🌍 while learning, collaborating, and growing together. 🌱

🌈 With mentorship, community support, and collaborative coding, it's the perfect platform for developers to:

• ✨ Improve their skills
• 🤝 Contribute to impactful projects
• 🏆 Get recognized for their work
• 📜 Receive certificates and swag!

🎉 I can’t wait to welcome new contributors from GSSoC 2025 to this AlgoVisualizer project family! Let's build, learn, and grow together — one commit at a time. 🔥👨‍💻👩‍💻

🔍 Supported Algorithms

Sorting Algorithms (7 Total)

• Bubble Sort - Simple comparison-based sorting
• Insertion Sort - Efficient for small datasets
• Selection Sort - In-place comparison sorting
• Merge Sort - Divide and conquer approach
• Quick Sort - Efficient average-case performance
• Bucket Sort - Distribution-based sorting
• Radix Sort - Non-comparison integer sorting

Searching Algorithms (4 Total)

• Linear Search - Sequential search through elements
• Binary Search - Efficient search on sorted arrays
• Jump Search - Block-based search optimization
• Exponential Search - Combination of binary and unbounded search

Data Structures (6 Total)

• Stack - LIFO (Last In, First Out) operations
• Queue - FIFO (First In, First Out) operations
• Linked List - Dynamic linear data structure
• Binary Tree - Hierarchical tree structure
• Binary Search Tree - Ordered binary tree with search properties
• Graph Algorithms - Network and connectivity visualizations

💻 Code Implementations

AlgoVisualizer provides ready-to-use code implementations for all visualized algorithms in multiple programming languages. This feature makes it perfect for learning, reference, and direct use in your projects.

🌟 Code Section Features

• 📚 Multiple Languages: View implementations in Java, Python, and C++
• 🔄 Language Switching: Easy toggle between programming languages with a single click
• 📋 Copy-Ready Code: All code is production-ready and can be directly copied
• 📖 Educational Focus: Clean, well-commented code perfect for learning
• 🎯 Algorithm Coverage: Comprehensive coverage of all visualized algorithms

🎨 Available Code Categories

Sorting Algorithms

Complete implementations for all sorting algorithms including:

• Bubble Sort, Selection Sort, Insertion Sort
• Merge Sort, Quick Sort, Shell Sort
• Radix Sort, Bucket Sort, Heap Sort
• Tim Sort, Intro Sort, Counting Sort

Searching Algorithms

Efficient search implementations:

• Linear Search - Sequential element scanning
• Binary Search - Logarithmic search on sorted arrays
• Ternary Search - Three-way division search
• Jump Search - Block-based optimization
• Exponential Search - Range finding + binary search

Graph Algorithms

Network and connectivity algorithms:

• BFS (Breadth-First Search) - Level-order traversal
• DFS (Depth-First Search) - Deep exploration traversal
• Dijkstra's Algorithm - Shortest path finding
• Bellman-Ford Algorithm - Negative edge handling
• Floyd-Warshall Algorithm - All-pairs shortest paths

Linked List Operations

Complete linked list functionality:

• Insert Operations: Beginning, End, At Position
• Delete Operations: By Value, By Position
• Utility Operations: Search, Traverse, Reverse
• List Management: Size calculation, Clear operations

Other Algorithms

Additional algorithmic implementations:

• Morris Traversal, Dutch National Flag
• Kahn's Algorithm, Tarjan's Algorithm
• Tower of Hanoi, Kadane's Algorithm

🚀 How to Use the Code Section

1. Navigate to any algorithm page (Sorting, Searching, Graph, etc.)
2. Scroll to the "Code Implementation" section at the bottom
3. Select your preferred language using the language tabs (Java/Python/C++)
4. Copy the code directly from the syntax-highlighted code block
5. Use in your projects - all code is production-ready!

📝 Code Quality & Standards

• ✅ Production Ready: All implementations are tested and optimized
• 📚 Educational: Clear variable names and logical structure
• 🔧 Modular: Easy to integrate into existing projects
• 📖 Well Documented: Inline comments explain key concepts
• 🎯 Efficient: Implementations follow best practices for each language

🛠️ Language-Specific Features

Java Implementations

• Object-oriented design patterns
• Generic programming with Collections
• Exception handling where appropriate
• Standard Java conventions and style

Python Implementations

• Pythonic code style and idioms
• List comprehensions and built-in functions
• Type hints for better code clarity
• PEP 8 compliant formatting

C++ Implementations

• Modern C++ features (C++11 and later)
• STL containers and algorithms
• Memory management best practices
• Template programming where beneficial

📊 Code Complexity Information

Each code section includes detailed complexity analysis:

• ⏱️ Time Complexity: Best, average, and worst-case scenarios
• 💾 Space Complexity: Memory usage analysis
• 📋 Algorithm Description: Clear explanation of how it works
• 🎯 Use Cases: Real-world applications and when to use each algorithm

🎓 Perfect for Learning

The code implementations are ideal for:

• 👨‍🎓 Students learning data structures and algorithms
• 👩‍💻 Developers preparing for coding interviews
• 🏫 Educators creating teaching materials
• 📚 Self-learners exploring algorithmic concepts
• 🚀 Project Developers needing quick algorithm implementations

💡 Pro Tips

• Compare Languages: Switch between languages to see different implementation approaches
• Study Patterns: Notice how similar algorithms are structured across languages
• Experiment: Modify the code to understand how changes affect performance
• Practice: Use the visualizations alongside code to understand execution flow

🛠️ Technologies Used

Frontend

• React 18.3.1 - Modern component-based UI framework
• Framer Motion 12.23 - Smooth animations and transitions
• React Router Dom 6.30 - Client-side routing
• Lucide React - Beautiful icon library
• CSS3 - Modern styling with custom properties and grid layouts

Development Tools

• Vite 5.0 - Fast build tool and development server
• ESLint - Code quality and consistency
• HTML2Canvas - Screenshot and image capture
• GIF.js - GIF creation and export
• RecordRTC - Video recording capabilities

Deployment & Analytics

• Vercel - Serverless deployment platform
• Vercel Analytics - User behavior and performance tracking

🧩 Prerequisites

Required:

• Node.js 20.11.1 or higher (LTS recommended)
• npm or yarn package manager
• Git (for cloning and contributing)
• Modern web browser

Optional:

• VS Code or preferred code editor
• React Developer Tools browser extension
• GitHub account (for contributions)

Windows users:

• Use Windows Terminal or PowerShell
• Ensure Node.js is in PATH

Visualization Logic Explained

The heart of this project is AlgorithmVisualizer.jsx. Here’s how it works:

• State Management: Handles the array of numbers to be sorted and updates the UI as the algorithm progresses.
• Dynamic Bar Width: Bar size is now calculated dynamically based on screen size and the number of elements — so the visualizer is fully responsive.
• Sorting Algorithms: The algorithms (Bubble Sort, Merge Sort, Quick Sort, etc.) are imported from the src/algorithms/ folder. Each runs step-by-step with animated transitions.
• Styling: The visualization container and bars are styled in UnifiedVisualizer.css for a clean, responsive layout.

🛠️ Troubleshooting

Installation Issues:

# Clear cache and reinstall
npm cache clean --force
Remove-Item -Recurse -Force node_modules
npm install --legacy-peer-deps

Development Server Issues:

# Check port conflicts
netstat -ano | findstr :5173
# Start with different port
npm run dev -- --port 3000

Performance Issues:

• Reduce array size for testing
• Close other browser tabs
• Use Chrome/Firefox for better performance
• Clear browser cache if visualizations aren't displaying

Quick Start

Prerequisites

• Node.js 20.11.1 or higher
• npm or yarn package manager

Installation

1. Clone the repository:

   git clone https://github.com/RhythmPahwa14/AlgoVisualizer.git
   cd AlgoVisualizer

2. Install dependencies:

   npm install --legacy-peer-deps

3. Start the development server:

   npm run dev

4. Open your browser:

   Navigate to http://localhost:5173/ to view the application.

Build for Production

npm run build
npm run preview

🎮 Usage Guide

🏠 Home Page

• Interactive learning platform badge at the top
• Algorithm showcase with rotating examples
• Direct navigation to different algorithm categories

📊 Sorting Algorithms

1. Load Your Data: Use the enhanced input panel to:
   • Enter numbers directly: 64, 34, 25, 12, 22, 11, 90
   • Upload a JSON file: [64, 34, 25, 12, 22, 11, 90]
   • Try sample data with different characteristics
2. Select your preferred sorting algorithm
3. Adjust visualization speed
4. Click "Start Sorting" to begin
5. Use export controls to capture or record the process

🔍 Searching Algorithms

1. Input Your Array: Load custom data (auto-sorted for searching):
   • Direct input: 5, 12, 19, 23, 45, 67, 89
   • File upload: CSV or JSON format
   • Sample sorted arrays available
2. Choose a searching algorithm
3. Specify the target value to search
4. Watch the step-by-step search process
5. Export visualizations for educational use

🕸️ Graph Algorithms

1. Create Your Graph: Use the input panel to define:

   {
     "nodes": [{"id": 0, "label": "A"}, {"id": 1, "label": "B"}],
     "edges": [{"id": "0-1", "from": 0, "to": 1, "weight": 5}]
   }

2. Load sample graphs (simple, complex, weighted, cycle detection)
3. Select algorithm (BFS, DFS, Dijkstra)
4. Watch the traversal or pathfinding in action

🌳 Data Structures

• Explore interactive data structure operations
• Load custom tree/linked list data
• Visualize insertions, deletions, and traversals
• Understand structural relationships and properties

📝 Custom Data Input Features

• Multiple Formats: JSON, CSV, TXT file support
• Real-time Validation: Instant feedback on data format
• Sample Data Library: Examples for every algorithm type
• Auto-correction: Missing IDs and labels auto-generated
• Error Guidance: Clear instructions for fixing data issues

🎓 Quiz Section

• Test your algorithm knowledge
• Multiple choice questions with immediate feedback
• Track your learning progress

📁 Project Structure — AlgoVisualizer

Below is the complete folder structure of the AlgoVisualizer project:

AlgoVisualizer/
├── .github/                            # GitHub-related configurations
│   ├── ISSUE_TEMPLATE/                 # Templates for creating new issues
│   ├── workflows/                      # GitHub Actions CI/CD workflows
│   └── pull_request_template.md        # Template for pull requests
│
├── .idea/                              # JetBrains IDE (WebStorm/IntelliJ) project settings
│   ├── inspectionProfiles/             # Code inspection rules
│   ├── misc.xml
│   ├── modules.xml
│   └── vcs.xml
│
├── Backend/                            # Backend code (Node.js + Express)
│   └── src/
│       └── routes/
│           ├── auth.js                 # Authentication routes
│           ├── authController.js       # Handles authentication logic
│           └── emailService.js         # Email sending service
│
├── docs/                               # Documentation files
│   └── AUTO_UNASSIGN_GUIDE.md          # Guide for auto-unassignment workflow
│
├── public/                             # Static assets served directly
│   ├── sample-data/                    # Example/sample dataset
│   ├── Favicon.png
│   ├── _redirects                      # Netlify redirects configuration
│   ├── favicon.ico
│   ├── logo.jpg
│   ├── manifest.json                   # Web app manifest
│   └── robots.txt                      # SEO and crawling rules
│
├── src/                                # Main frontend (React + Vite) source folder
│   ├── algorithms/                     # All algorithm visualizations (sorting, searching, etc.)
│   ├── assets/                         # Static assets like images and GIFs
│   │   ├── blog/                       # Blog-related assets
│   │   ├── gssoc logo.png
│   │   └── statistics.gif
│   ├── components/                     # Reusable React UI components
│   ├── contexts/                       # React Context (Theme, Auth, etc.)
│   ├── data/                           # Static/dynamic JSON or mock data
│   ├── docs/                           # Frontend documentation files
│   ├── hooks/                          # Custom React hooks
│   ├── pages/                          # Page-level components (Home, About, etc.)
│   ├── routes/                         # Route definitions for navigation
│   ├── searching/                      # Searching algorithms visualization
│   ├── services/                       # API and helper service files
│   ├── styles/                         # CSS/Tailwind styling files
│   ├── utils/                          # Utility/helper functions
│   ├── App.jsx                         # Root React component
│   ├── IntroSection.jsx                # Homepage intro component
│   ├── ScrollToTop.jsx                 # Scroll to top behavior
│   ├── TAILWIND_DOCS.md                # Documentation for Tailwind usage
│   ├── ThemeContext.jsx                # Context for light/dark mode
│   ├── main.css                        # Global stylesheet
│   ├── main.jsx                        # Application entry file
│   ├── navigatetotop.js                # Script for navigation top behavior
│   ├── reportWebVitals.js              # Performance metrics
│   └── setupTests.js                   # Test setup configuration
│
├── .env.example                        # Example environment configuration
├── .env.production                     # Production environment configuration
├── .gitignore                          # Files/folders ignored by Git
├── .prettierrc                         # Prettier code formatting configuration
├── .vercelignore                       # Ignore files for Vercel deployment
│
├── BACK_TO_TOP_DOCUMENTATION.md        # Documentation for back-to-top feature
├── CODE_OF_CONDUCT.md                  # Contributor code of conduct
├── CONTRIBUTING.md                     # Guidelines for contributing
├── EXPORT_FEATURES.md                  # Documentation of export features
├── LICENSE                             # Project license
├── README.md                           # Main project documentation
├── SECURITY.md                         # Security guidelines
├── USER_INPUT_DOCUMENTATION.md         # Documentation on user inputs
│
├── desktop.ini                         # System file (can be ignored)
├── index.html                          # Main HTML file for React app
├── package-lock.json                   # Auto-generated dependency lock file
├── package.json                        # Project dependencies and scripts
├── sorting-refactor-issue.md           # Issue template for sorting refactor
├── sorting-refactor-pr.md              # PR template for sorting refactor
├── ter                                 # (Possibly temp/test folder)
├── vercel.json                         # Vercel deployment configuration
└── vite.config.js                      # Vite configuration file for React build

🗺️ Project Flowchart

Getting Started With Contributions

1. Fork the repository

# Fork the repository on GitHub, then clone your fork:
git clone https://github.com/rhythmpahwa14/AlgoVisualizer.git
cd AlgoVisualizer

2. Set Up Upstream

# Add the original repository as upstream:
git remote add upstream https://github.com/RhythmPahwa14/AlgoVisualizer.git
git fetch upstream

3. Create your feature branch

# Create a new branch for your feature or bug fix:
git checkout -b feature/your-feature-name
# or
git checkout -b fix/your-bug-fix

4. Commit your changes

# Stage and commit your changes:
git add .
git commit -m "feature: add awesome feature"

5. Push to the branch & Create PR

# Push your branch to your fork and open a Pull Request:
git push origin feature/your-feature-name

Then go to AlgoVisualizer Pull Requests and create a PR with a clear description of your changes. For further information to contribute, visit our contributing guidelines

🔄 Sync Your Fork with Upstream

To keep your fork up-to-date with the latest changes from the original repository, follow these steps:

Initial Setup (One-time only)

# Add the original repository as upstream (if not already done)
git remote add upstream https://github.com/RhythmPahwa14/AlgoVisualizer.git

# Verify your remotes
git remote -v

Regular Sync Process

# Fetch the latest changes from upstream
git fetch upstream

# Switch to your main branch
git checkout main

# Merge upstream changes into your local main branch
git merge upstream/main

# Push the updated main branch to your fork
git push origin main

Before Creating a New Feature Branch

# Always sync first, then create your feature branch
git fetch upstream
git checkout main
git merge upstream/main
git checkout -b feature/your-new-feature

Handling Conflicts

If you encounter merge conflicts:

# Resolve conflicts in your editor
# After resolving, stage the changes
git add .
git commit -m "resolve merge conflicts"
git push origin main

💡 Pro Tip: Always sync your fork before starting work on a new feature to avoid conflicts and ensure you're working with the latest codebase.

Code Style

• Follow existing code conventions
• Add comments for complex algorithms
• Ensure responsive design for all new features
• Test your changes across different devices

ScreenShots

📈 Analytics & Performance

This application uses Vercel Analytics to track:

• Page views and user engagement
• Performance metrics and load times
• Feature usage patterns
• Geographic user distribution

All data is collected anonymously and helps us improve the user experience.

🎯 Educational Impact

Perfect for:

• Students learning data structures and algorithms
• Teachers creating interactive classroom materials
• Developers preparing for technical interviews
• Content Creators making educational videos and tutorials
• Bootcamps and coding schools

Want to see your name here? Contribute to the project! credits: Rythem and Sandeep

📄 Documentation

• Export Features Guide - Detailed guide on recording and exporting visualizations
• Contributing Guidelines - How to contribute to the project
• Algorithm Documentation - In-app algorithm explanations

📊 Project Stats

• 15+ Algorithms implemented with visualizations
• 6 Data Structures with interactive operations
• Mobile Responsive design for all devices
• Modern Tech Stack with React 18 and Vite
• Export Capabilities for educational content creation