Skip to content

README.md

Latest commit

 

History

History
238 lines (176 loc) · 7.27 KB

README.md

File metadata and controls

238 lines (176 loc) · 7.27 KB
Screenshot

🚀 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.

Live Demo License Next.js React

🌐 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

📞 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! 🎓

Deploy with Vercel

Experience live at visuallearner.org