What I made 💁‍♂️

Quest is the first web app I made when I started learning React. It's an interactive app that allows you to run multiple pathfinding and perfect maze generation algorithms in a 2D grid. This application visualizes all the various algorithms and more !

What I used 🔷

• 1. React/Create React App

  I used Create React App to build user interfaces in this web application.

• 2. SCSS

  I used SCSS for the styling with Block Element Modifier (BEM) notation.

• 3. Redux

  I used redux for state management,

• 4. Netlify

  I deployed the react app on Netlify.

About this production 🥳

I took a JavaScript course in college which I enjoyed a lot, solving problems using algorithms was my favorite part. One day, I stumbled into Jamis Buck blog about maze generation algorithms which I found fascinating. I decided to test my newly acquired React skills and make a project out of it.

It was an enormous challenge, it turned out to be way more difficult than I thought. I learned that without practice all the skills I thought I learned through the internet were useless. I went to the basics, and went through JS functional programming and understood react lifecycle.

Throughout the project I switched from react class component to functional component using hooks which speeded up my code.

I took a Sass & SCSS course in Udemy, I redesigned the whole app to make it more appealing, I learned how to use good typography, colors and svgs/images. I learned how to use flexbox and grid as well as organize my SCSS code using the BEM notation.

I also learned how to use react router dom, I created a lore route where I post in details about the algorithms and data structures I used and how they work (still on progress). It was at that time I started learning Git/Github and getting comfortable using it for this project and the future ones.

Those are the pathfinding algorithms I implemented in the app :

• Depth-First Search Algorithm
• Dijkstra Algorithm
• A* Algorithm
• Bellman–Ford Algorithm
• IDDFS
• IDA*
• GreadyBFS
• Weighted Greedy BFS

Here is the list of the perfect maze generation algorithms that were implemented :

• Recursive Backtracking Maze
• Kruskal's Algorithm Maze
• Prim's Algorithm Maze
• Aldous Broder Algorithm Maze
• Growing Tree Algorithm Maze
• Hunt And Kill Algorithm Maze
• Wilson Algorithm Maze
• Eller Algorithm Maze
• Recursive Division Maze
• Sidewinder Algorithm Maze
• Binary Tree Maze

What I learned ✅

I learned a lot of things about front-end development with React and SCSS. Also, I improved my design skills and got comfortable implementing multiple algorithms with different data structures. It also boosted my problem solving skills.

Finally 😎

Building this project was challenging for me since this is my first large scale project in the development world.

I faced many problems like: animating algorithms, interacting/moving multiple components in the grid, adding walls/weights/rewards, rendering maze algorithms with a block-wise structure(most the algorithms were documented/rendered in a line-wise structure), resolving performance issues and more.

Solving those problems was the most rewarding thing while building this app. I'm glad that I've completed my first web app! It motivated me to do other projects.