Skip to content

Commit b6d7e54

Browse files
committed
udpate readme.md
1 parent 5544459 commit b6d7e54

File tree

1 file changed

+55
-23
lines changed

1 file changed

+55
-23
lines changed

README.md

Lines changed: 55 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
# Sorting Algorithm Visualizer
22

3-
A web application that visualizes various sorting algorithms using Vue.js frontend and Flask backend.
3+
A web application that visualizes various sorting algorithms using Vue.js frontend and Flask backend. Watch and learn how different sorting algorithms work through interactive step-by-step visualization.
44

55
## Features
66

77
- Multiple sorting algorithms supported:
8-
- Bubble Sort
9-
- Selection Sort
10-
- Insertion Sort
11-
- Merge Sort
12-
- Quick Sort
13-
- Shell Sort
14-
- Heap Sort
8+
- Bubble Sort (O(n²))
9+
- Selection Sort (O(n²))
10+
- Insertion Sort (O(n²))
11+
- Merge Sort (O(n log n))
12+
- Quick Sort (O(n log n))
13+
- Shell Sort (O(n log n))
14+
- Heap Sort (O(n log n))
1515
- Step-by-step visualization of sorting process
1616
- Interactive user interface
1717
- Real-time sorting progress display
18+
- Algorithm time complexity information
19+
- Color-coded array elements to track changes
1820

1921
## Project Structure
2022

@@ -24,6 +26,7 @@ sorting-visualizer/
2426
│ ├── src/
2527
│ │ ├── main.js # Vue application entry
2628
│ │ ├── App.vue # Root component
29+
│ │ ├── components/ # Vue components
2730
│ │ └── assets/ # Static assets
2831
│ ├── vite.config.js
2932
│ └── package.json
@@ -37,35 +40,37 @@ sorting-visualizer/
3740
## Technology Stack
3841

3942
- Frontend:
40-
- Vue.js 3
41-
- Vite
42-
- Modern CSS
43+
- Vue.js 3 (Composition API)
44+
- Vite (Build tool)
45+
- Modern CSS with animations
46+
- Axios for API calls
4347
- Backend:
44-
- Python 3
45-
- Flask
46-
- Flask-CORS
48+
- Python 3.8+
49+
- Flask (Web framework)
50+
- Flask-CORS (Cross-origin support)
4751

4852
## Getting Started
4953

5054
### Prerequisites
5155

5256
- Node.js (v14+)
5357
- Python (v3.8+)
54-
- pip
58+
- pip (Python package manager)
59+
- Git
5560

5661
### Installation
5762

5863
1. Clone the repository:
5964
```bash
60-
git clone <repository-url>
65+
git clone https://github.com/yourusername/sorting-visualizer.git
6166
cd sorting-visualizer
6267
```
6368

6469
2. Set up the backend:
6570
```bash
6671
cd backend
6772
python -m venv venv
68-
source venv/bin/activate # On macOS
73+
source venv/bin/activate # On macOS/Linux
6974
pip install -r requirements.txt
7075
```
7176

@@ -80,7 +85,8 @@ npm install
8085
1. Start the Flask backend:
8186
```bash
8287
cd backend
83-
source venv/bin/activate # On macOS
88+
source venv/bin/activate # On macOS/Linux
89+
export FLASK_ENV=development # For development mode
8490
python app.py
8591
```
8692

@@ -98,15 +104,41 @@ http://localhost:5173
98104
## Usage
99105

100106
1. Select a sorting algorithm from the dropdown menu
101-
2. Enter 5 numbers in the input fields
107+
2. Enter numbers (5-15 recommended) in the input fields
102108
3. Click "Sort Numbers" to start the visualization
103-
4. Watch the step-by-step sorting process
104-
5. View the final sorted result
109+
4. Use controls to:
110+
- Play/Pause the visualization
111+
- Step forward/backward
112+
- Reset the array
113+
5. View the current step description and array state
114+
6. See the final sorted result
115+
116+
## Algorithm Details
117+
118+
| Algorithm | Best Case | Average Case | Worst Case | Space Complexity |
119+
|---------------|------------|--------------|------------|------------------|
120+
| Bubble Sort | O(n) | O(n²) | O(n²) | O(1) |
121+
| Selection Sort| O(n²) | O(n²) | O(n²) | O(1) |
122+
| Insertion Sort| O(n) | O(n²) | O(n²) | O(1) |
123+
| Merge Sort | O(n log n) | O(n log n) | O(n log n) | O(n) |
124+
| Quick Sort | O(n log n) | O(n log n) | O(n²) | O(log n) |
125+
| Shell Sort | O(n log n) | O(n log n) | O(n²) | O(1) |
126+
| Heap Sort | O(n log n) | O(n log n) | O(n log n) | O(1) |
105127

106128
## Contributing
107129

108-
Feel free to submit issues and enhancement requests.
130+
1. Fork the repository
131+
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
132+
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
133+
4. Push to the branch (`git push origin feature/AmazingFeature`)
134+
5. Open a Pull Request
109135

110136
## License
111137

112-
This project is licensed under the MIT License - see the LICENSE file for details.
138+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
139+
140+
## Acknowledgments
141+
142+
- Algorithm visualizations inspired by various computer science resources
143+
- Vue.js and Flask communities for excellent documentation
144+
- Contributors and users of this project

0 commit comments

Comments
 (0)