1
1
# Sorting Algorithm Visualizer
2
2
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.
4
4
5
5
## Features
6
6
7
7
- 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))
15
15
- Step-by-step visualization of sorting process
16
16
- Interactive user interface
17
17
- Real-time sorting progress display
18
+ - Algorithm time complexity information
19
+ - Color-coded array elements to track changes
18
20
19
21
## Project Structure
20
22
@@ -24,6 +26,7 @@ sorting-visualizer/
24
26
│ ├── src/
25
27
│ │ ├── main.js # Vue application entry
26
28
│ │ ├── App.vue # Root component
29
+ │ │ ├── components/ # Vue components
27
30
│ │ └── assets/ # Static assets
28
31
│ ├── vite.config.js
29
32
│ └── package.json
@@ -37,35 +40,37 @@ sorting-visualizer/
37
40
## Technology Stack
38
41
39
42
- 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
43
47
- Backend:
44
- - Python 3
45
- - Flask
46
- - Flask-CORS
48
+ - Python 3.8+
49
+ - Flask (Web framework)
50
+ - Flask-CORS (Cross-origin support)
47
51
48
52
## Getting Started
49
53
50
54
### Prerequisites
51
55
52
56
- Node.js (v14+)
53
57
- Python (v3.8+)
54
- - pip
58
+ - pip (Python package manager)
59
+ - Git
55
60
56
61
### Installation
57
62
58
63
1 . Clone the repository:
59
64
``` bash
60
- git clone < repository-url >
65
+ git clone https://github.com/yourusername/sorting-visualizer.git
61
66
cd sorting-visualizer
62
67
```
63
68
64
69
2 . Set up the backend:
65
70
``` bash
66
71
cd backend
67
72
python -m venv venv
68
- source venv/bin/activate # On macOS
73
+ source venv/bin/activate # On macOS/Linux
69
74
pip install -r requirements.txt
70
75
```
71
76
@@ -80,7 +85,8 @@ npm install
80
85
1 . Start the Flask backend:
81
86
``` bash
82
87
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
84
90
python app.py
85
91
```
86
92
@@ -98,15 +104,41 @@ http://localhost:5173
98
104
## Usage
99
105
100
106
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
102
108
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) |
105
127
106
128
## Contributing
107
129
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
109
135
110
136
## License
111
137
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