Visualizo

TypescriptNext.jsTailwind CSSShadCn/UIPythonPydanticSwagger UIPytestCypressFastAPICI/CD

Path Finding Visualier

What is this application?

Within this visualizer, users can seamlessly navigate the grid, restricted to movements in the cardinal directions of up, down, left, and right. It empowers individuals to engage with diverse pathfinding challenges, ranging from intricate maze-solving to route optimization, all while deepening their comprehension of fundamental graph traversal and search principles. The visualizer offers versatile options, allowing you to customize the grid size, introduce obstacles, modify start and end nodes, and select different algorithms.

Algorithms Used:

Features:

Takeaways:

From this project, I was able to learn how to use FastAPI, which is a backend technology to write server code in Python. I was comfortable with using Python from using it to practice for interviews, and I believed that this project would be a good way for me to showcase my versatility in other languages. It was suprisingly easy to use FastAPI; although I ran into a few hiccups mananging two package managers(pnpm and python virtual env) as well as making sure the FastAPI would be able to connect to the NextJs project. This project helped me become more comfortable using python tools and libraries. I was also able to add basic unit testing for the frontend and backend code to ensure that my code was working as intended everytime someone pulls or pushes from the repository. I was also able to learn how to use Github Actions to automate the testing and deployment process. I was able to set up a CI/CD pipeline that would run the unit tests everytime someone pushes to the repository.

I tested the backend algorithms using PyTest and tested that the frontend pages would load in correctly using end to end testing with Cypress. The frontend test will run on node 16.x and 18.x to ensure that it works on both versions. After the tests, I setup another workflow to format the code using prettier. This was not necessary but could be for larger teams where there are constant pushes and pull requests. To create these workflows, I had to work with Yaml files and creating a pipeline using bash scripting. This project was a great way for me to learn how to use CI/CD with Github Actions for my specifc use cases!

workflow image Check out the website Visualizo and the github