🚀 Algorithm Visualizer

A modern, interactive web application that brings data structures and algorithms to life through stunning visualizations.

Perfect for students, educators, and developers who want to understand how algorithms work under the hood.

🌐 Visit Live Site • 📖 Documentation • 🤝 Contribute • 🐛 Report Bug

---

✨ Features

🔄 Sorting Algorithms

• Bubble Sort - Watch bubbles rise to find their place
• Selection Sort - See the selection process in action
• Insertion Sort - Observe elements finding their sorted position
• Merge Sort - Visualize the divide and conquer approach
• Quick Sort - Experience the power of partitioning
• Heap Sort - Understand heap-based sorting
• Count Sort - See counting sort's linear time magic
• Bucket Sort - Watch elements distributed into buckets
• Radix Sort - Observe digit by digit sorting

🔍 Search Algorithms

• Binary Search - See the power of divide and conquer
• Linear Search - Watch sequential searching in action

🌳 Data Structures

• Binary Search Tree - Interactive BST operations
• Linked Lists - Single and double linked list operations
• Hash Tables - Understand hashing and collision resolution
• Heaps - Visualize heap structure and operations

🎮 Interactive Features

• Real-time Animation - Smooth, customizable animation speeds
• Step-by-step Visualization - Control the pace of learning
• Custom Input - Test with your own data sets
• Random Data Generation - Quick testing with random arrays
• Responsive Design - Works on desktop and mobile devices

🛠️ Tech Stack

• Framework: Next.js 14 (React)
• Styling: Tailwind CSS
• Animations: Custom animation engine with p5.js
• UI Components: Shadcn/ui
• Deployment: Vercel
• Website: visuallearner.org

Project Structure

.
├── LICENSE
├── README.md
├── app
│   ├── algorithms
│   │   ├── bst
│   │   ├── hash-table
│   │   ├── heap
│   │   ├── linked-list
│   │   ├── search
│   │   └── sorting
│   ├── globals.css
│   ├── layout.js
│   └── page.js
├── components
│   ├── Animator.js
│   ├── Animator2.js
│   ├── CodeBlock.js
│   ├── Footer/
│   ├── Header/
│   ├── NumberInput.js
│   ├── Tideon.js
│   ├── phoneScreenBlocker.js
│   └── ui/
├── components.json
├── eslint.config.mjs
├── jsconfig.json
├── lib/
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
└── public/

🚀 Getting Started

Prerequisites

• Node.js 18+ installed
• npm, yarn, pnpm, or bun package manager

Installation

1. Clone the repository

   git clone https://github.com/simonMat21/algorithm-visualizer.git
   cd algorithm-visualizer

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

4. Open your browser Navigate to http://localhost:3000 to see the application.

🎯 How to Use

1. Visit the Website - Go to visuallearner.org
2. Select an Algorithm - Choose from sorting, searching, or data structure categories
3. Input Your Data - Enter custom numbers or generate random data
4. Customize Settings - Adjust animation speed and visualization preferences
5. Watch & Learn - Observe the algorithm in action with real-time animations
6. Experiment - Try different inputs to see how algorithms behave

🤝 Contributing

We love contributions! Whether you're fixing bugs, adding new algorithms, improving documentation, or enhancing the UI, your help is greatly appreciated.

Ways to Contribute

• 🐛 Bug Reports - Found a bug? Let us know!
• 💡 Feature Requests - Have an idea? We'd love to hear it!
• 🔧 Code Contributions - Submit pull requests for new features or fixes
• 📚 Documentation - Help improve our docs and examples
• 🎨 Design - Enhance the user interface and experience

Getting Started with Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Test thoroughly
5. Commit your changes (git commit -m 'Add some amazing feature')
6. Push to the branch (git push origin feature/amazing-feature)
7. Open a Pull Request

Development Guidelines

• Follow the existing code style and conventions
• Add comments for complex algorithms
• Test your changes across different browsers
• Update documentation when needed
• Keep animations smooth and educational

📖 Educational Value

This project is designed to help:

• Computer Science Students understand algorithm complexity and behavior
• Educators teach algorithms in an engaging, visual way
• Developers refresh their knowledge of fundamental algorithms
• Interview Candidates practice and visualize common algorithm questions

🎨 Customization

The visualization engine is highly customizable:

• Adjust colors and themes
• Modify animation speeds
• Add new visualization styles
• Extend with new algorithms

📱 Browser Support

• Chrome (recommended)
• Firefox
• Safari
• Edge

🙏 Acknowledgments

• Built with ❤️ using Next.js and React
• Animations powered by p5.js
• UI components from Shadcn/ui
• Hosted at visuallearner.org
• Special thanks to all contributors who help make this project better

🌐 Links

• Live Website: visuallearner.org
• GitHub Repository: github.com/yourusername/algorithm-visualizer
• Issues: Report bugs or request features

📞 Support

If you encounter any issues or have questions:

• Visit visuallearner.org to use the live version
• Open an issue on GitHub
• Check existing documentation
• Join our community discussions

---

Made with ❤️ for the developer community. Happy learning! 🎓

Experience live at visuallearner.org