Algorithm Visualizer

The Algorithm Visualizer is an interactive web application that allows users to visualize various algorithms including sorting and graph traversal techniques. This tool is designed for students studying algorithms or developers curious about these computational methods, providing an intuitive platform to explore and understand different algorithmic behaviors.

Getting Started

To get the visualizer up and running on your local machine, follow these steps:

1. Clone the repository to your local machine.
2. Navigate to the frontend directory: cd frontend
3. Install the necessary dependencies: npm install
4. Navigate to the root directory.
5. Start the development server: npm run client
6. Access the application in your browser at: http://localhost:5173

Usage

• Select an algorithm category from the tabs (Sorting or Graphs).
• For sorting algorithms:
• Chlick on a sorting algorithm from the available sorting buttons.
• Click the Reset button to generate new values randomly and test another algorithm.
• For graph algorithms:
• Customize the graph by adding nodes and edges.
• Click on a graph algorithm button from the available serach buttons.
• Click on Reset button to reset the maze.

Features

• Sorting Visualization: Visualize different sorting algorithms like Bubble Sort, Merge Sort, and Quick Sort.
• Graph Visualization: Render graphs dynamically and display various graph traversal techniques.
• Algorithm Selection: Users can choose from a variety of algorithms within the sorting and graph categories.
• Custom Graph and Array Creation: Users can create custom graphs and arrays for sorting, adding nodes, edges, and array elements.
• Step-by-Step Execution: Both sorting and graph tools guide users through the algorithms step by step, highlighting the operations.

Tools Used

• React: A JavaScript library for building user interfaces.
• Vite: Frontend tooling for faster development and building.
• JavaScript: Programming language for logic implementation.
• HTML/CSS: The core technologies for building the web application.
• Sass: For advanced design and styling.
• Git/GitHub: Version control and collaboration.

Contributors

1. Arshita Sharma (@asharm42)
2. Richa Patel (@richricha93)
3. Venkat Harish Reddy Gopu (@harish04010)