Visualize sorting alogrithms in Increasing order with step by step animations and explore various techniques using Sorta. This Project was made for the Axiom YSWS
Sorta features a clean minimal UI built with TailwindCSS and smooth sorting animations powered by JavaScript It offers the top six sorting algorithms Bubble Sort, Insertion Sort, Merge Sort, Quick Sort, Selection Sort, and Heap Sort with example code in five languages. You can edit the values in the array or list, as well as the length. Sorta is hosted on PythonAnywhere at LINK try it and share your feedback! I made this project for Axiom YSWS a Hack Club YSWS
The Demo video where I show all the sorting visualization
Sorta is hosted on PythonAnywhere and you can visit it at LINK
- Clean minimal UI
- Six sorting algorithms with visuals
- Example code in five languages
- Smooth step by step animations
- Editable array values and length
Sorta/
├── static/
│ ├── assets/ # Logo files and favicon
│ ├── css/ # global style
│ └── js/ # animation and other logic
├── templates/ # HTML templates for all the pages
├── .gitignore # Git ignore file
├── app.py # Main Flask application with all routes
├── LICENSE # MIT License
├── README.md # You are reading this hehe
└── requirements.txt # Python dependencies (only Flask)
- Python 3.13+ (I used 3.13.5 but anything 3.13+ should work)
- pip for installing packages
-
Clone the repository:
git clone https://github.com/Rexaintreal/Sorta.git cd Sorta -
Create a virtual environment (recommended):
This keeps things clean and doesn't mess with your other Python projects (i dont usually do it T_T)
Windows:
python -m venv venv .\venv\Scripts\activate
macOS / Linux:
python3 -m venv venv source venv/bin/activate -
Install dependencies:
pip install -r requirements.txt
-
Run the app:
python app.py
-
Open it up:
Go to
http://127.0.0.1:5000in your browser
Sorta’s sorting visualizations are built with a lightweight stack and run fully on the client side (the browser)
- HTML + TailwindCSS for the layout, UI, and responsive design
- Vanilla JavaScript for generating steps handling animations and controlling play/pause/step logic
- requestAnimationFrame for smooth frame-based animations during swaps comparisons and transitions
- DOM rendering to rebuild and update the array boxes highlights and sorted states
- Flask is used only for routing the pages and there is no heavy backend logic or database
All sorting steps (compare swap no swap sorted complete) are created in JavaScript and saved in a array Then the animator just reads each step one by one and updates the screen in real time Every sorting algorithm follows the same pattern
MIT LICENSE.
- GeeksforGeeks — for multi-language example code used as reference
Some other projects I've built:
- Ziks - A physics simulator with 21 Simulatons made using vanilla JS
- Eureka - A website where you can find local spots near you which don't show up on Google Maps or any other apps
- DawnDuck - USB HID Automation Tool for Morning Routines
- Lynx - OpenCV Image Manipulation WebApp
- Libro Voice - PDF to Audio Converter
- Snippet Vision - YouTube Video Summarizer
- Weather App - Python Weather Forecast App
- Python Screenrecorder - Python Screen Recorder
- Typing Speed Tester - Python Typing Speed Tester
- Movie Recommender - Python Movie Recommender
- Password Generator - Python Password Generator
- Object Tales - Python Image to Story Generator
- Finance Manager - Flask WebApp to Monitor Savings
- Codegram - Social Media for Coders
- Simple Flask Notes - Flask Notes App
- Key5 - Python Keylogger
- Codegram2024 - Modern Codegram Update
- Cupid - Dating Web App for Teenagers
- Gym Vogue - Ecommerce for Gym Freaks
- Confessions - Anonymous Confession Platform
- Syna - Social Music App with Spotify
- Apollo - Minimal Music Player with Dancing Cat
- Eros - Face Symmetry Analyzer
- Notez - Clean Android Notes App
Built by Saurabh Tiwari
- Portfolio: saurabhcodesawfully.pythonanywhere.com
- Email: saurabhtiwari7986@gmail.com
- Twitter: @Saurabhcodes01
- Instagram: @saurabhcodesawfully