Algorithm Visualizer is a web-based interactive tool that helps users visualize and better understand the inner workings of various algorithms. Built with React.js for the frontend, it provides an engaging experience with smooth animations powered by GSAP. The application is designed to be simple, intuitive, and responsive, allowing users to experiment with algorithms in real time.
- 🔄 Interactive Visualization: See algorithm processes unfold in real-time with visual representations of data structures.
- 💫 Smooth Animations: Animations are implemented using GSAP to create smooth transitions and visual feedback.
- ⚙️ Customizable Inputs: Users can input their own data sets, change algorithm parameters, and see the effect on the results.
- 📊 Multiple Algorithm Visualizations: The tool provides visualizations for a range of algorithms, helping users understand how different algorithms work step by step.
- 📱 Responsive Design: The app is designed to be fully responsive and accessible on all screen sizes.
🔢 Data Structures
- Linked List
- Stack
- Queue
- Binary Search Tree
⚡ Sorting Algorithms
- Bubble Sort
- Insertion Sort
- Selection Sort
- Quick Sort
🔍 Search Algorithms
- Binary Search
🔄 Recursive Sorts
- Merge Sort
- Heap Sort
- Quick Sort
🛤️ Pathfinding Algorithms
- Dijkstra’s Algorithm
- A Algorithm*
- Breadth-First Search
- Depth-First Search
🌳 Minimum Spanning Trees
- Prim’s Algorithm
- Kruskal’s Algorithm
🔀 Other Algorithms
- N-Queens Problem
- Convex Hull (Graham Scan)
- Linear Regression
Technology | Description |
---|---|
React.js | JavaScript library for building user interfaces. |
Material-UI | Component library for creating beautiful UIs. |
GSAP | Powerful animation library for smooth effects. |
To run the project locally, you need to have the following installed:
- Node.js (with npm) for managing dependencies and running the frontend.
Start by cloning the repository to your local machine:
git clone https://github.com/Pooja1030/AlgorithmVisualizers.git
cd AlgorithmVisualizers
- Navigate to the frontend directory:
cd frontend
- Install the required dependencies::
npm install
- Start the React development server::
npm start
The application should now be running locally at http://localhost:3000.
For an online experience, you can also visit the live demo here: 👉 Algorithm Visualizer Demo
- 📈 Sorting Algorithms: Visualize different sorting techniques like Quick Sort and Bubble Sort.
- 🌐 Pathfinding Algorithms: Learn how algorithms like Dijkstra’s and A* work to find optimal paths.
- 🔄 Data Structures: Explore essential structures like Stacks, Queues, and Trees.
- 🎮 Interactive Control: Modify visualization speed, input size, and view real-time algorithm execution.
We welcome contributions! You can help improve the project by:
- Adding new algorithms: Extend the visualizer to include more algorithms or data structures.
- UI/UX Improvements: Help enhance the user experience with design or usability improvements.
- Bug fixes and enhancements: Report any bugs you find or suggest new features.
- 1️⃣ Fork the repository to your GitHub account.
- 2️⃣ Create a new branch for the feature or bug fix you are working on.
- 3️⃣ Make the necessary changes and commit them.
- 4️⃣ Push your changes to your forked repository.
- 5️⃣ Open a pull request with a description of the changes you've made.
🙌 Acknowledgments
- React.js: A JavaScript library for building user interfaces.
- Material-UI: A popular library that provides a set of pre-styled React components.
- GSAP: A robust animation library used to create performant and visually appealing animations.