Project Overview
This website is an interactive learning tool that visually demonstrates how different sorting algorithms work. Users can select an algorithm and watch as a set of “art pieces” is sorted by number of likes, with each step animated in real time using the JavaScript Canvas API. The goal is to make algorithm education more engaging and intuitive through visual storytelling. The frontend is hosted on GitHub Pages and built with HTML, CSS, and JavaScript, while the backend is powered by a custom SpringBoot API with SQLite for data persistence.
Key Features
🎨 Visual Sorting Animations
Users can watch sorting algorithms come to life through animated visualizations using JavaScript Canvas, making complex concepts easier to understand.
🔍 Algorithm Selection
Visitors can choose from various sorting algorithms (e.g., Bubble Sort, Quick Sort) to see how each method behaves with the same dataset.
💾 Persistent Data and Likes
Each "art piece" is stored in an SQLite database and can be liked by users. Sorting is performed based on the number of likes, offering both interaction and purpose.
Technical Implementation
The backend is built with SpringBoot and supports custom API routes for GET and POST requests, handling likes, sorting data, and syncing with the frontend. SQLite was used for lightweight, efficient local data storage.
The frontend is hosted on GitHub Pages and built with HTML, CSS, and JavaScript. Canvas animations were created manually to visualize each step of the sorting process, synchronizing DOM updates with algorithm behavior.
Development Phases
Phase 1: Backend and Database Setup
Designed the database schema using SQLite to store art pieces and their like counts. Developed a custom RESTful API with SpringBoot to handle data retrieval (GET) and updates (POST). Tested API endpoints for data integrity and performance.
Phase 2: Frontend and Animation Development
Implemented sorting algorithm selection UI that allows users to choose from various algorithms. Created custom sorting animations using the JavaScript Canvas API, visually demonstrating the sorting process.
Phase 3: Integration and Finalization
Connected the frontend to the backend API to fetch and update art piece data dynamically.
Challenges & Solutions
Challenge: Creating smooth and accurate sorting animations that reflect algorithm logic in real time.
Solution: I used the JavaScript Canvas API to manually control rendering frames. This gave me full control over the animation flow and allowed me to visualize each algorithm step-by-step in sync with data updates.
Challenge: Connecting a static frontend hosted on GitHub Pages with a dynamic backend.
Solution: I developed a custom RESTful API using SpringBoot and configured CORS policies to enable communication between the frontend and backend servers, ensuring smooth data exchange without deployment conflicts.
Challenge: Designing a data model to support sorting, liking, and visualization all at once.
Solution: I structured the SQLite database to store each art piece with metadata, including a “likes” field, and updated this data via POST requests whenever users interacted with the visual elements.
Learning Outcomes
This project strengthened my skills in:
- Creating dynamic visualizations using the JavaScript Canvas API
- Developing RESTful APIs with SpringBoot
- Designing and managing relational databases with SQLite
- Integrating frontend and backend components in a full-stack environment
- Communicating complex technical concepts through engaging visual design