Back to courses

Master the Pathfinding Algorithms with JavaScript and React

Enhance your JavaScript and React skills, build a portfolio project, and understand the pathfinding algorithms on a deeper level in this project-based course!

4 Days

Average time students take to complete this course.

Taught by: Tuomas Kivioja
Last updated: May 2024


Build an Algorithms Visualizer that shows how the Breadth-First Search and Depth-First Search algorithms work and helps you understand them on a deeper level. Plus it'll serve as a standout project in your portfolio that will be a conversation starter in interviews!

What you'll learn

  • Create a project that is fun and highly valuable for tech interviews
  • How to develop a dynamic web application using JavaScript and React
  • The fundamentals of React, focusing on its application in creating interactive web elements
  • A deep dive into two critical computer science algorithms: depth-first search (DFS) and breadth-first search (BFS), and their applications in solving complex problems
  • Practical experience in implementing data structures and algorithms within a web development context, enhancing both coding and problem-solving skills
  • Build a JavaScript project that will be a conversation piece during your interviews

Why Is This JavaScript Project Awesome?

Because it's the perfect opportunity to kill two birds with one stone: you'll get to build a fun and interesting portfolio project that will help you practice your JavaScript and React skills, while at the same time gaining a deeper understanding of the data structures and algorithms needed for tech interviews.

(Note: no birds were harmed in the making of this course!)

This is your playground to explore, learn, and create something truly impressive.

If you're ready to take this awesome (and rewarding) JavaScript project idea and make it real, then let's get started!

Wait... What's a Project?

One of the most common things we hear from students is: "I want to build more projects!"

We love hearing that, because building projects is really the best way to learn. And unique, challenging projects can really make your portfolio stand out for potential employers.

But just feel so good when you actually build something real!

That's why we've created ZTM Projects. A collection of comprehensive portfolio and practice projects that you can use to advance your knowledge, learn new skills, build your portfolio, and sometimes even just have fun!

What Else Should I Know?

By becoming a ZTM member you'll not only get access to all our courses, bytes, and projects.

But you’ll also get to join our exclusive live online community classroom to learn alongside thousands of students, alumni, mentors, TAs and Instructors.

Most importantly, you'll be learning from an industry professional (Tuomas) that has actual real-world experience using JavaScript and React to build projects. He teaches you the exact strategies and techniques he uses in his role.

Finally, as with all ZTM courses, this course is a living thing. It will be constantly updated as the landscape changes so you can use it as your go-to resource for building JavaScript project ideas now and throughout your career.

Join 1,000s of Zero To Mastery graduates that have gotten hired and are now working at companies like Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, Shopify + other top tech companies.

They come from all different backgrounds, ages, and experiences. Many even started as complete beginners.

So there's no reason it can't be you too.

And you have nothing to lose. Because you can start learning right now and if this course isn't everything you expected, we'll refund you 100% within 30 days. No hassles and no questions asked.

When's the best time to get started? Today!

There's never a bad time to learn in-demand skills. But the sooner, the better. So start building this JavaScript project today by joining the ZTM Academy. You'll have a clear roadmap to developing the skills to build your own projects, get hired, and advance your career.

Join Zero To Mastery Now

Course curriculum

Here's an overview of what you'll learn in this JavaScript project.


5 lectures



Project Demo3:27


Exercise: Meet Your Classmates and Instructor


Course Resources


Set Your Learning Streak Goal


Understanding the Pathfinding Algorithms

4 lectures

What Are Pathfinding Algorithms?5:27


Breadth-First Search (BFS)6:40


Depth-First Search (DFS)5:32


BFS vs. DFS2:48


Building the React Frontend

8 lectures

Setting Up Our REPL6:07


Creating a Maze Using React10:35


Creating Maze Rows3:41


Making It Dynamic9:06


Adding a Maze Refresh Button8:34


Generating a Maze Matrix using Javascript5:02


Combining Maze Generation into Our Button5:08


Finalizing Our Maze Generation12:33


Applying Pathfinding Algorithms

5 lectures

Applying BFS and DFS to Our Maze5:09


Breadth-First Search Implementation - Part 112:26


Breadth-First Search Implementation - Part 23:35


Depth-First Search Implementation5:35


Adding Buttons and Bug Fixing our Algorithms10:40


Combining the Algorithms with the Maze

4 lectures

Combining the Algorithms to the Maze9:03


Delaying the Steps of Our Algorithms3:51


Fixing Refresh Maze6:29


The Final Touches5:45


Where To Go From Here?

1 lectures

Review This Project!


Meet your instructor

Your instructor (Tuomas) isn't just an expert with years of real-world professional experience. He has been in your shoes. He makes learning fun. He makes complex topics feel simple. He will motivate you. He will push you. And he will go above and beyond to help you succeed.

Tuomas Kivioja

Hi, I'm Tuomas Kivioja!

Tuomas uses his years of experience and experience as a self-taught engineer to help students learn new skills, grow their career, and land their dream job!


Tuomas Kivioja

Fullstack Software Engineer

Frequently asked questions

Are there any prerequisites for this course?

  • Basic knowledge of Javascript is required. Don't have that? Take the Complete Web Developer course now!
  • Basic knowledge of React is recommended, but not required as this project will get you up to speed!

Do you provide a certificate of completion?

We definitely do and they are quite nice. You will also be able to add Zero To Mastery Academy to the education section of your LinkedIn profile as well.

Are there subtitles?

Yes! We have high quality subtitles in 11 different languages: English, Spanish, French, German, Dutch, Romanian, Arabic, Hindi, Portuguese, Indonesian, and Japanese.

You can even adjust the text size, color, background and more so that the subtitles are perfect just for you!

Still have more questions about the Academy?

Still have more questions specific to the Academy membership? No problem, we answer some more here.

Invest in a better you. For less than a coffee a day.

Choose your currency:
$ USD US Dollar
100% OFF$999
Only pay once, ever
You're serious about advancing your career and never getting left behind
Start Learning Now


Save 40% vs. monthly (that's $189 a year)
100% OFF$279 / year
$23 / month
$279 / year
You're committed to getting hired and starting a career in tech
Start Learning Now
100% OFF$39 / month
$39 / month
You're ready to upskill and advance your career
Start Learning Now

Every ZTM membership includes:

Unlimited access to all courses, projects + workshops, and career paths
Access to our private Discord with 400,000+ members
Access to our private LinkedIn networking group
Custom ZTM course completion certificates
Live career advice sessions with mentors, every month
Full access to all future courses, content, and features

We know you'll love ZTM. That's why we provide a no hassle, 30-day money back guarantee.