AlgoVis
AlgoVis is an interactive web application built using React.js that visually demonstrates how various computer science algorithms work in real time. Designed to aid learning and understanding, this tool provides animated, step-by-step visualisations of popular algorithms in sorting, searching, graph traversal, and pathfinding. AlgoVis emphasises clean UI/UX, modular React components, and real-time DOM manipulation to deliver intuitive and informative algorithm animations.
Followers
No followers yet
Ship Your Project
Get ready!
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
Timeline
Decided to ship what I have so far before working on extra sorts. Got my site running on GitHub pages.
Started working on merge sort but it's really confusing. Will probably restart next time.
Built insertion sort, moved Step type into its own file. Made bars take full height. Made selection sort and implemented it!
Added start, stop, and pause buttons. Added a pause state so the correct buttons show up when paused. Fixed slider logic because there was a bug where they would show disabled even when not supposed to be.
The main thing I did was create the bubble sort function, but also made a few minor tweaks here and there.
Added slider, finished buttons, and cleaned up code.
(Accidentally used an older screenshot for the previous devlog so this was split across both)
After lots of deliberation, trying to figure out framer motion and tailwind, and getting confused in design and state management, I got my first button! yay. should be easy from here.
Worked on the layout a bit. Motion is rlly hard to get right. Also started using Tailwind v4 as a plugin which is new to me so trying to figure that out.
