An interactive single-page web application built with React that allows users to visualize, compare, and analyze the performance of popular algorithms. Whether you are exploring sorting/ searching or graph algorithms, this application offers an intuitive and engaging experience.
- Compare popular sorting algorithms side by side.
- Analyze execution times across varying input sizes.
- Visualize the sorting process with detailed animations.
- Select specific algorithms to visualize (e.g., Bubble Sort, Quick Sort, etc.).
- Customize array size and animation speed for a tailored experience.
- Automatically generates random input arrays for sorting.
- Select algorithms like Linear Search or Binary Search for visualization.
- Customize array size, target value, and animation speed.
- Observe how algorithms perform step-by-step to locate target values.
- Visualize graph algorithms, including:
- Breadth-First Search (BFS)
- Depth-First Search (DFS)
- Dijkstra's Algorithm
- Use predefined graph structures for simplified exploration.
- Real-time highlighting of visited nodes and edges during traversal.
Expand the application by adding new algorithms with the following steps:
- Add the algorithm file to the appropriate folder under
algorithm/. - Import the algorithm in
algorithms/index.js. - Integrate the new algorithm into one of the selectors:
SortingAlgorithmsSelector.jsSearchingAlgorithmsSelector.jsGraphAlgorithmsSelector.js
Ensure input parameters and return structures align with the existing algorithms for seamless integration.
Customize graphs for visualization using utils/graphGenerator.js:
- Define node levels using the
levelconstant to specify positions (top to bottom). - Use the
connectionsconstant to establish edges. Format:source: [connectedNode1, connectedNode2, ...]
Follow the existing structure for consistent graph generation and visualization.
- React: A robust JavaScript library for building dynamic and responsive SPAs.
- MUI (Material-UI): Provides modern, accessible, and customizable UI components. Learn more
- React Flow: A powerful library for creating interactive graph visualizations. Learn more
Ensure the following are installed on your system:
- Node.js (v16 or later)
- Yarn (preferred package manager)
- Clone the repository:
git clone https://github.com/Moustafaa91/algorithm-comparator.git
- Navigate to the project directory:
cd algorithm-comparator - Install dependencies:
yarn install
- Start the development server:
yarn start
- Open your browser and navigate to
http://localhost:3000.
- Explore sorting, searching, and graph algorithms with intuitive visualizations.
- Use the controls to customize input size, animation speed, and algorithm selection.
- Compare execution performance or step through algorithm processes interactively.
We welcome contributions! To contribute:
- Fork the repository.
- Create a new branch with your feature or fix.
- Submit a pull request for review.
A heartfelt thanks to:
- Material-UI (MUI) for their elegant UI components.
- React Flow for simplifying graph visualization.
Enjoy exploring algorithms, and happy coding! 🚀