panhongsheng-eng / DSAV

Starting with Sorting Algorithms, this aims to be an interative, visualization tool for Data Structures and Algorithms: sorting algorithms, and data structures — arrays, linkedlists, stacks, queues, trees, BST, AVL trees, graphs....

DSA Visualizer:

Hey there! 🧋

This project will create a visualization tool for Data Structures and Algorithms. Through this, I hope to create visualizations starting with sorting algorithms, then move my way to data structures — arrays, linkedlists, stacks, queues, trees, BST, AVL trees, graphs.... 🌲

I hope to not only have a visualizer in which we can tell the platform what we wish to see, for example, button to create an empty linked list, then another button to add, remove, search elements...etc

But, also to have a code visualizer! I hope this is able to help students and teachers when it is done. 😄

I built this using Vite and React, virtually learning both from scratch — seems quite interesting though, components and all that 👀

If you have any suggestions on improving or collaborating, feel free to contact me! 👍

Check out the page so far at:

https://nguyenv119.github.io/DSAV/

Setup

1. Open your terminal and ensure that npm is installed globally on your device. Do this by checking the npm version:

node -v

If you haven't installed it yet, you download it here: https://nodejs.org/en.

2. Check if git is installed by running the following command. It will display the Git version if it is already installed.

git --version

Otherwise, go to https://git-scm.com/downloads to install git for your device. When you succesfully download it, git --version should give you the version you've installed.

3. Create a new folder on your device and name it "DSAV" or any name that suits your preference. This folder will be the location for your work.
4. Open your IDE (Integrated Development Environment) and navigate to the "DSAV" folder you created. Usually it will be File —> Open —> Choose your File.
5. In your IDE, open an integrated terminal within the "DSAV" folder. Right Click within the folder and select "Open in Integrated Terminal."
6. Within the integrated terminal, clone the repository using the following command:

git clone https://github.com/nguyenv119/DSAV/

7. Change your current directory to the "DSAV" folder by running the following command:

cd DSAV/

8. Install the necesarry modules: npm i or npm install
9. Finally, run the program with npm run dev