Skip to content

Commit 620a5bb

Browse files
committed
Update README.md
1 parent 09caa1b commit 620a5bb

File tree

1 file changed

+86
-54
lines changed

1 file changed

+86
-54
lines changed

README.md

Lines changed: 86 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,110 @@
1-
# Algo Viz 🔍📊
1+
# Algo Viz 🌟
22

3-
**Algo Viz** is an interactive Algorithm Visualizer built with **React.js** to help you understand and explore core algorithmic concepts in **pathfinding**, **searching**, and **sorting**. Perfect for students, educators, and curious developers who want to see algorithms in action!
3+
![Algo Viz](https://img.shields.io/badge/Download%20Latest%20Release-blue?style=for-the-badge&logo=github)
44

5-
## 🚀 Live Demo
5+
Algo Viz is a web-based visualizer designed to illustrate pathfinding, searching, and sorting algorithms. Built using React.js, it provides users with an interactive experience to understand how these algorithms work through real-time animations and a clean, intuitive user interface.
66

7-
👉 [Try it here](https://algo-viz-rohit.vercel.app/)
7+
## Table of Contents
88

9-
---
9+
- [Features](#features)
10+
- [Getting Started](#getting-started)
11+
- [Usage](#usage)
12+
- [Supported Algorithms](#supported-algorithms)
13+
- [Technologies Used](#technologies-used)
14+
- [Contributing](#contributing)
15+
- [License](#license)
16+
- [Contact](#contact)
1017

11-
## 🧠 Features
18+
## Features
1219

13-
### 🔷 Pathfinding Visualizer
14-
Visualize classic graph traversal algorithms:
15-
- ✅ Dijkstra's Algorithm
16-
- ✅ Breadth-First Search (BFS)
17-
- ✅ Depth-First Search (DFS)
18-
- ✅ A* Search
20+
- **Interactive UI**: Users can interact with the visualizer to better understand algorithm behavior.
21+
- **Real-time Animations**: Watch algorithms in action as they process data.
22+
- **Multiple Algorithms**: Supports various pathfinding, searching, and sorting algorithms.
23+
- **User-friendly Design**: A clean interface makes navigation easy for everyone.
24+
- **Web-based**: No installation required; run it directly in your browser.
1925

20-
Customize:
21-
- Start and End Nodes
22-
- Drag & Drop Walls (Obstacles)
23-
- Real-time grid updates
26+
## Getting Started
2427

25-
### 🔍 Searching Visualizer
26-
Understand how search works in arrays:
27-
- ✅ Binary Search
28-
- ✅ Linear Search
28+
To get started with Algo Viz, download the latest release from the [Releases section](https://github.com/threngthan/algo-viz/releases). After downloading, extract the files and open the `index.html` file in your web browser.
2929

30-
Interactive:
31-
- Enter a **target value**
32-
- Visual feedback on array traversal
33-
- Generate new random arrays
30+
### Prerequisites
3431

35-
### 🔢 Sorting Visualizer
36-
Sorting algorithms coming soon!
37-
- ✅ UI Ready
38-
- 🚧 Algorithm animations in progress
39-
- Random array generation button included
32+
- A modern web browser (Chrome, Firefox, Safari, etc.)
33+
- Basic understanding of algorithms (optional but helpful)
4034

41-
---
35+
## Usage
4236

43-
## 🖼️ Screenshots
37+
Once you have the application open, you can choose from various algorithms. Each algorithm has a brief description, and you can initiate the visualization by clicking the corresponding button.
4438

45-
### PathFinder
46-
![image](https://github.com/user-attachments/assets/1c79a926-deec-4814-8ea5-261b1177af99)
39+
### Steps to Use
4740

48-
### Searching
49-
![image](https://github.com/user-attachments/assets/7d115390-237e-4e3c-9ed0-4eb44bf360d7)
41+
1. **Select an Algorithm**: Choose from pathfinding, searching, or sorting algorithms.
42+
2. **Input Data**: If required, input your data into the provided fields.
43+
3. **Start Visualization**: Click the "Visualize" button to see the algorithm in action.
44+
4. **Pause/Resume**: You can pause or resume the visualization at any time.
45+
5. **Reset**: Click the reset button to start over.
5046

51-
### Sorting
52-
![image](https://github.com/user-attachments/assets/6aa3ba6f-4ffa-41b2-af9d-169944399eb4)
47+
## Supported Algorithms
5348

54-
---
49+
Algo Viz currently supports the following algorithms:
5550

56-
## 🛠️ Tech Stack
51+
### Pathfinding Algorithms
5752

58-
- ⚛️ React.js
59-
- 💅 Tailwind CSS
60-
- 📦 JavaScript (ES6+)
61-
- 🌐 Hosted on Vercel
53+
- **A* Search**: A popular algorithm for finding the shortest path.
54+
- **Dijkstra's Algorithm**: An efficient method for finding the shortest paths in a graph.
55+
- **Breadth-First Search (BFS)**: Explores all neighbors at the present depth prior to moving on to nodes at the next depth level.
56+
- **Depth-First Search (DFS)**: Explores as far as possible along each branch before backtracking.
6257

63-
---
58+
### Searching Algorithms
6459

65-
## 📁 Getting Started
60+
- **Linear Search**: A simple search algorithm that checks every element.
61+
- **Binary Search**: Efficiently finds an item in a sorted array.
6662

67-
### Prerequisites
63+
### Sorting Algorithms
64+
65+
- **Bubble Sort**: A simple sorting algorithm that repeatedly steps through the list.
66+
- **Quick Sort**: An efficient sorting algorithm that uses divide-and-conquer.
67+
- **Merge Sort**: A stable sorting algorithm that divides the array into halves.
68+
69+
## Technologies Used
70+
71+
- **React.js**: A JavaScript library for building user interfaces.
72+
- **HTML/CSS**: For structuring and styling the application.
73+
- **JavaScript**: For implementing the algorithms and interactivity.
74+
- **D3.js**: For creating dynamic, interactive data visualizations.
75+
76+
## Contributing
77+
78+
We welcome contributions to Algo Viz! If you have suggestions or improvements, please fork the repository and submit a pull request. Here’s how to contribute:
79+
80+
1. **Fork the Repository**: Click on the "Fork" button at the top right corner.
81+
2. **Clone Your Fork**: Use `git clone <your-fork-url>` to clone your fork to your local machine.
82+
3. **Create a New Branch**: Use `git checkout -b feature-branch` to create a new branch for your feature.
83+
4. **Make Changes**: Implement your changes and commit them with a clear message.
84+
5. **Push Changes**: Push your changes to your fork using `git push origin feature-branch`.
85+
6. **Submit a Pull Request**: Go to the original repository and click on "New Pull Request."
86+
87+
## License
88+
89+
This project is licensed under the MIT License. Feel free to use, modify, and distribute it as you see fit.
90+
91+
## Contact
92+
93+
For any inquiries or feedback, please reach out to the maintainer:
94+
95+
- **Name**: Your Name
96+
- **Email**: your.email@example.com
97+
- **GitHub**: [your-github-profile](https://github.com/your-github-profile)
98+
99+
For the latest releases, visit the [Releases section](https://github.com/threngthan/algo-viz/releases) to download the latest version.
100+
101+
## Acknowledgments
102+
103+
- Thanks to the open-source community for their contributions and support.
104+
- Special thanks to the developers of the libraries used in this project.
68105

69-
- Node.js (v14 or higher)
70-
- npm or yarn
106+
## Conclusion
71107

72-
### Installation
108+
Algo Viz aims to make learning algorithms engaging and accessible. By providing a visual representation, users can grasp complex concepts more easily. We hope you enjoy using Algo Viz and find it helpful in your learning journey.
73109

74-
```bash
75-
git clone https://github.com/am-i-groot/algo-viz.git
76-
cd algo-viz
77-
npm install
78-
npm start
110+
For the latest updates and releases, check the [Releases section](https://github.com/threngthan/algo-viz/releases).

0 commit comments

Comments
 (0)