Data Structure & Algorithm Visualizer

Background

I spent nearly my whole career split between building projects at work that solve problems for my stakeholders, and going home to practice my skills with the language/framework/tools I use on the job. Although I've taken a DSA (Data Structures and Algorithms) course in school and really enjoyed it, but I never really focused on the topic outside of college. It just wasn't on my radar most of the time.

Becoming knowledgable and skilled with DSA is a right of passage for software engineers. Nearly all tech-focused companies you apply to will have a technical interview that includes at least some DSA questions, there are massive communities like LeetCode.com, NeetCode.io, and HackerRank.com that provide a platform to practice and test your skills. There are thick books, and hundreds of hours of video content available for it. There's an entire subgenre of coding related to it - Competitive Programming.

However, my career has led me to work for small or medium size companies where I am one of the only developers. In these environments, the focus is on building useful products as quickly as possible to produce the most value and impact possible. I don't think I've ever needed to answer a DSA-related question during an interview, nor have I had to devote much time implementing DSA algorithms in my day-to-day work.

For these reasons, when I began getting serious about practicing coding with side projects outside of work hours, I knew this was an area I needed to start breaking into. I would love to continue into the next steps in my career, eventually joining a technology-focused company with a stacked team of developers and I'm confident that DSA is a key skill that will help me get there.

Algopages.com came from a desire to beef up my awareness and practice with DSA, and to provide a resource for others to learn about DSA in a more interactive way.

Project Status & Features

The project is still in it's early stages. It isn't hosted publicly yet, but I'm working on it actively now.

The app is built with Next.js, TypeScript, TailwindCSS, and D3.js. The D3 library is incredibly powerful and I feel like I'm only scratching the surface of what it can do. I'm really excited to discover new ways to use it and gradually improve the visuals on the project.

Each page contains an animated visualization that allows the user to adjust the parameters, Start/Stop the animation, and in some cases Pause the animation to step forward and backward through the procedures.

Learning Process & Future Plans

I don't normally like to make predictions and wax poetic about all my pie-in-the-sky plans before they take shape. Though for this project, I'll be using it as a tool to augment my learning process as I dive deeper into improving my DSA skills.

As I continue reading through A Common-Sense Guide to Data Structures and Algorithms and Cracking the Coding Interview, utilizing the courses on Neetcode.io, and rolling through LeetCode.com exercises, I'll be bringing what I learn to this 'Algopages' project.

This way I'll always have a practical application of the concepts I'm learning. I expect the project to evolve and diverge from it's initial path slightly as I see new ways to express what I'm learning.

My current concentration is being put toward solidifying all the visualizations and animations I've built so far. Some are still 'buggy' or could use some level of improvement. The goal here is to ensure they are as accurate and interactive as possible.

Beyond that, I'll be improving the explanations of each algorithm as best I can. Focused on clarity and accuracy for a beginner/novice audience.