I didn’t have time to add a magic trick at the beginning of this video, but don’t worry-my charming personality and Pathfinding skills will make up for it. Here are timestamps and useful links for the tutorial: 0:00 - Introduction 1:02 - How this tutorial is done (i.e., what tools we're using) 2:18 - The scope of this tutorial (i.e., what we're building exactly) 4:27 - The challenge of this tutorial 5:21 - *Very* important information 6:08 - *Tutorial* 47:08 - Summary of tutorial 54:04 - Conclusion This tutorial's GitHub repo: github.com/clementmihailescu/Pathfinding-Visualizer-Tutorial Original Pathfinding Visualizer's GitHub repo: github.com/clementmihailescu/Pathfinding-Visualizer Video where I talk about my software engineering projects, including the original Pathfinding Visualizer: kzread.info/dash/bejne/oGiowY-HmrzFg8o.html

@luiscardenas206

4 жыл бұрын

Ever since I saw your first video, I haven't missed one video since that day.

@masternobody1896

4 жыл бұрын

Can you teach us machine learning so we can make ai learn to play minecraft

@bootlesscoder5755

4 жыл бұрын

Hi Clement..do you have any idea how we can do this for office floor map (.pdf)? i was thinking we have to recreate the entire floor map in html and do the path pathfinding. what do you think?

@YeslynCasasola

4 жыл бұрын

Hello, Clement, thank you for taking the time to make this video! I was wondering if you could share the name of the IDE you're using. Pretty pretty please!

@UnwrapTheExperience

4 жыл бұрын

@@YeslynCasasola Its visual studio. :)

I've never seen a developer do a video like this where the focus is on thought process and refinement rather than step-by-step implementation on a granular level. Feels like I learned more from this. I love this approach, thank you so much for the time and effort you put into this channel!

@xenoaurora

4 жыл бұрын

Yeah i was going to say it wasnt what i expected when i saw tutorial in the title. But seeing an actual devs mindset to overcoming portions of the project ended up being extremely insightful.

I think the biggest lesson from this tutorial, one that should be especially important for junior devs with impostor syndrom is: look, even experienced, world-class developer needed 6 hours to develop merely a prototype of a small project and that's when copy-pasting half of stuff from ready product! It would easily take 100 hours to implement the remaining features from scratch (other algorithms, top menu, block the UI when animating, optimize a bit, add weights, make everything pretty, etc.). There's no escape from hard work and most of jaw-dropping projects you see on the Internet come just from that. Also: appearance matters A LOT. Do not skip UI/UX for any projects if you intend to use them in your resume/portfolio. I.e. in this one 10 hours spent on nice UI paid off way more than implementing 3 extra algorithms could ever do.

“I’m so bad at CSS. I can never remember how to put shit next to each other.” Me every other day. ✌️

@clem

4 жыл бұрын

😂

@dev__adi

4 жыл бұрын

@@clem this was me before CSS flexbox got to the scene

@dharmang

4 жыл бұрын

@@dev__adi and i learned css grids which are even better than flexbox

@zephenex4203

4 жыл бұрын

@@dharmang neither one is better, it depends purily on the situation

@TheTariqibnziyad

4 жыл бұрын

@@dev__adi Grid Layout be like : hold my beer.

I think this project is the only demo project I remember clearly and have come back to for fun multiple times. Makes me jealous as a backend engineer as not quite as many options to make a terminal maze solver that looks so slick. Best maze page UI I've come across. Well done.

@dumbdavinchi3638

4 ай бұрын

You can always start small, the most annoying part of frontend is probably css but there are plenty of Ui libraries to simplify that, If you have decent understanding of http and fetch requests than learning frontend shouldn't take more then a few months

The fact that you built this with only 3 months of experience is absurd

@bakrianoo

4 жыл бұрын

Actually I do not know what do you mean by saying "absurd"? Does it good or bad?. But it seems that you got a big love reaction. So it's so good 😁

@ajricherson1099

4 жыл бұрын

@@bakrianoo obviously it's good man

@BUZZYBG

4 жыл бұрын

Impossible in 3 months with 0 programming knowledge, let's just face it

@winnerwinnerporkbellydinner

4 жыл бұрын

To be fair, he does have a maths background. But still, it is incredible

@yaumingchang5360

4 жыл бұрын

Wait what do you mean by only 3 months of experience. Surely he has been programming for more than 3 months lol

I thought the video was pretty good. It is good to show that even an ex-Google engineer struggles with CSS and stuff. Good shit, mate.

@greenie62

4 жыл бұрын

Saw a cheeky quote the other day "HTML, where you can do it wrong but get it right, CSS, where you do it right but it comes out wrong" It does kinda seem, and is nice to know, unless you're specifically a CSS specialist, you tend to grumble at the procedure. lol

@clem

4 жыл бұрын

Ethan Davidson All non-wizard engineers do!

@davidn7026

4 жыл бұрын

@@greenie62 JS, where you can do it right and wrong at the same time. #JSchrodingersCode

I love the transparency of this video. Clément banging his head against a wall trying to figure out his old code and fix bugs was hilarious.

This was great! I really admire how Clement doesn't edit / hide his mistakes. That's why he's more relatable. Also, it gives you an idea how to tackle problems while coding. Like when he reads the Dijkstras algorithm on Wikipedia and codes it himself rather than figuring it out from existing code because that's a pain! Ps: Always keep your code well documented

As someone that's just now starting out in the field, this is mind boggling. I literally can not comprehend how he managed to do all of this from scratch the first time. Seriously. What the hell.

@harshsheth768

3 жыл бұрын

Rome wasn't built in a day. You tackle problem by problem, suddenly you have a whole app.

Everyone applying to a CS job is gonna have pathfinding visualizer on their resume because of this video

Nice project. The extension of it is to make it with multiple agents trying to find the shortest path. You can increase the grid size, multithread the agents, time slice them, etc. You definitely gonna need that MinHeap optimization you mentioned.

I don't usually comment on yt, but man u deserved this comment, like, and a sub for posting this!!! Much appreciation from Serbia/ Novi Sad !!

@Clèment Mihailescu, you are the reason I went to coding bootcamp and now I can't wait to try and build my own pathfinding application with your help. You are the man!

This was really interesting to watch! Personally I like this style. It's brave of you to acknowledge you don't know something. It's an important path to success.

Good to see the project built from scratch. You are so real !! You make me feel it is common even for a google engineer to forget things ...Great stuff !! Thank you

I just started to learn Javascript and start to learn algorithms in Python. And I want to study vanilla JavaScript first, and you have the original repo.. My man you are awesome !!!

As a Junior Software Developer this video helped me with my IMPOSTOR SYNDROME! Thanks Clement!

This is an incredible tutorial! Definitely will use this with my students to help them visualise better Dijkstra's Algorithm.

Thank you so much, Clement!!! Exactly what I needed to learn to start visualizing things like algos/sorts :)).

I actually really liked this project and wanted to start doing more visuals on my own projects. It's really cool that you did this because I was picking apart your deployment build and it was hell.

Impressed by your pathfinding visualizer on my first glance (after seeing Google Resume Video). So I too made up my mind to create such a one, but instead in web I started developing as a Java application. UI done right, but I didn't started coding the algorithm part, don't know how to start implementing the algorithm, you again helped me with this video. Thanks a lot man.💪 You keep inspiring me🎉

@anonofDeath

3 жыл бұрын

Can I ask how you did the UI on Java? Did you implement libraries for the visuals? Sorry I'm somewhat new to this so I don't know.

@sathvikrijo

3 жыл бұрын

@@anonofDeath I created using Java swing and Jframe. You can google it by searching Java swing, it is used to create window based applications.

@anonofDeath

3 жыл бұрын

@@sathvikrijo ok thank you!

Clem, you are an amazing person. giving all this knowledge to random people is a wonderful act of humility. I really hope you find a way to keep accomplishing all your dreams. shoutout from Porto Alegre, south of Brazil (hoping to be accepted on AppAcademy soon!)

@clem

4 жыл бұрын

Rodrigo Mallmann Thank you for the kind words, Rodrigo, and best of luck with App Academy!

Hi, clement! Vishnu from India. I've started filling up my head with react for 20 days from now, to make myself land in a good company as a react js developer. All through these days I realized that react is freaking amazing to work with, and I finally found something awesome that I can pursue my career in. Just downloaded the GitHub repo code that you have attached to your description. Will look into it and learn the syntax and all the methods that you've used for that App of yours. Thank you very much !!!!! for providing the code. I watch all of your videos and will be like DAMN!!! SOOO INFORMATIVE AND INTERESTINGGG. Thank you once again for guiding all of us absolutely for free. Love from INDIA. peace!. We always pray for your constant SUCESS.

My mans is a hard worker, keeps me motivated to do this last push senior year in computer engineering. Studying for the interview the last month and looking to add unique things to my resume so I'm not unemployed come graduating at the end of Spring. Thanks!

Dude ,can't thank you enough for these videos and also please make another video on APIs, server architecture of your Algoexpert. Yeah you will be remembered for what you are doing. Take a bow.

Wouldn't call this a tutorial, but it's cool seeing the process nonetheless.

@clem

4 жыл бұрын

Yeah, I realize this ended up being a little bit more of a rebuilding-the-pathfinding-visualizer kind of thing, but I think that it turned out being more entertaining than a pure tutorial, all the while still giving you what you need to build it yourself, especially with the link to the tutorial's GitHub repo.

@YoloMonstaaa

4 жыл бұрын

He just copy pasted his old code and made it worse, this ain't a tutorial at all 🤦

@BigKing17

4 жыл бұрын

@@YoloMonstaaa You make it seem like 99.9% of programmers don't recycle bits of code for some point or the other.

@thecodeimplementation3417

4 жыл бұрын

+r viens - It's great just hearing the thought process sometimes. I have a pathfinding visualizer tutorial series which is more detailed though.

@JosephMFaulkner

4 жыл бұрын

I'd say that this video is even better than a tutorial. It shows what software development is really like.

this was actually a really good video. seeing you go through this process and even look back on ur own code on how u would improve it was super personable

Good idea to speed up through the coding and explain a few things as you go along. For instance, when you try to implement the algorithm (sped up). Then, after you figure it out, explain what you tried and what you ended up doing. Very well done!

Eventhough JS is not my favorite programming language, I think this video is one of the best videos this guy has ever posted to this channel. It is really amazing

i learn so much everytime i watch any of your videos man. god bless, hope you do well!

Sir I made this using the Unfolding Maps library for Java and it was really fun, and I recently got hired as a Software Engineer at UnitedHealth Group, and they asked about this project in detail, I always knew the algorithms from Cormen but visualization was a new challenge. Thanks

Tryna land the internship and I wanted to give this project a try, thank you for this video

@frontire_ace

3 жыл бұрын

Did it work? How long did you take to make it and master the syntax? I have an interview too, I am so tensed!

I didn't start the video already, but im commenting because Im sure that will be amazing, keep the good work!

I love all the effort you put on your videos. Thank you very much Clément

For fresher's / new graduates it's quite insightful and resourceful.

17:40 yepp that's me in this entire project

This is a super great project. After this i will try to build it again on my own, Great work sir.

@dsnk3777

4 жыл бұрын

same

Probably the most real tutorial I've seen in KZread

Hi Clement was very funny when you realize that you code works ([29:09])! Thank you for all your content, is really amazing to have people like you to learn more

Thank you for the time you spent in making this video, your projects inspired me to keep up with my selfstudy in software engineer.

Hey thank you for the video great help! For those who are on Mac and trying to figure out how to open the terminal. I used 'command + space bar' to open terminal. I copied and pasted the 'npx create-react-app my-app' first then hit 'enter' (or return). I let it wait to load. They ask if you want to proceed with yes as in '(y)'. After that, hit 'enter' again and wait a little. So now, after it loads you then copy + paste 'cd my-app' into terminal then after repeat step using 'npm start'. When you finish they will tell you that it is complete but you need to have a development space. I use 'Brackets' which is for HTML and CSS, then after that proceed to the IDE to start editing. Goodluck guys just thought I could help with anyone struggling because I was confused from the jump lol

@MentalMarathon_

Жыл бұрын

* you can use visual studio code if this works better for you than Brackets

This video makes it clear that even ex-googlers write really bad code at first. And that is FINE! That feeling is so empowering.

You are very much appreciated sir! Your Information is helping tons of people. I’m in the process of landing a SWE internship next summer and your vids are awesome!

*Clément Mihailescu deserves millions of subscribers*

Thanks for the content Clément, your videos are absolutely amazing!

This is exactly the kind of tutorial I was looking for tonight! Thank you :)

Fantastic video , looking forward for more exciting and informative videos in coming times। Thank you ।

I liked the way the grid was getting morphed! lol

Just one word *AMAZING!* I watched the entire video you are a real genius!

0:45 Just few seconds in the very first video I'm watching of yours and you are undoubtedly the cooooooooooooooooooooooolest youtuber ! My word for it

Excellent vid! I think I'm going to pull the trigger on the algo expert course. :D

I love this kind of tutorials... about engineering projects... like button smashed!

Great tuto on a great subject, thumbs up mate that's heavily motivating!!

To avoid ads go to last of the video play for a sec come-back to start enjoy the video ad-free

This is... a super video, im not sure about other people, but for me... That video motivates me a lot! Thank You !

Thanks for making so much efforts, really wanted this video to come up. This video gives us the structure and procedure about how to approach the project BUT this is not a tutorial. At the beginning I thought I would finally have a impressive project but I couldn't get much of the code maybe because I'm new to React. I've a long way to go. Thanks anyways.

@clem

4 жыл бұрын

Thanks for the feedback; I understand what you mean. I’d encourage you to fork the GitHub repo for this project (the one I did in this video) and to start playing around with the code little by little. Try changing the animations. Try adding functionality for weights (with similar code as the one for adding walls-if you encounter a weight when updating neighbors in Dijkstra’s algorithm, give it a distance of x + 10). Try looking up the A* Search algorithm and adding it to the project. You’d be surprised how much you’ll learn and how much you’ll be able to do by just copy-pasting code around and testing things. And you might just be able to add the project to your resume!

@mernik5599

4 жыл бұрын

@@clem I've been doing exactly as you said, I downloaded the repo and trying to replicate the bare minimum. It's been kinda challenging but that's where the growth is. Your work has really inspired me a lot. Thank you for the reply and sorry I'm seeing this so late.

Hello How do i start the programm If i do cd My-App and then npm start in cmd the port on chrome starts but the tool does not open

thanks for this it was an awesome vid I think it would also be cool to see you go line by line through a project that you have already built rebuilding it in a more full tutorial format so it is easy for everyone to follow every line

so nice of u to put an hour of your day to us plebs :3

i don't think i really understood, but the video is good source to reference from, great work dude

@40:57 clement:"when the people demand ,I provide" Everyboody liked the video.

I know python only is it possible to do this with Django

Underrated , should be highly appreciated

you truly are a genius, great job man, i will definitely check out more of your content

This is the bread and butter of KZread

Thank You So much! Clement Mihailescu , I was waiting for this from a long time!.... Keep the good work on! I will promote AlgoExpert in Nepal😃😃😜😜

@clem

4 жыл бұрын

Suraj Gahatraj Awesome!

@shockminerx1518

4 жыл бұрын

wassup! im a fellow nepali in America haha

@surajgahatraj4140

4 жыл бұрын

@@shockminerx1518 I am Nepali in Nepal!

Great vid! Currently trying to replicate. I think one way (still unconfirmed) to fix the re-rendering issue with setState is by separating the nodes ui state into a hashmap instead of keeping it all in a 2d array. You would have a 2d array of all the ids (generated from col / row indexs) in order to build the grid, and then derive the state of each node by doing a lookup in the "nodeState" hashmap. This way when you update state, you're not resetting the entire grid on each setState call, you would just update the entry in the hashmap. React *should* then be able to efficiently update only the necessary dom nodes when you update the state. Simple untested example: ``` const grid = [ [ "0:0" , "0:1], [ "1: 0", "1:1"] ] const nodeState = { "0:0": { isAnimating: false, ... }, "0:1": { isAnimating: false, ... }, "1:0": { isAnimating: false, ... }, "1:1": { isAnimating: false, ... }, } const [nodes, setNodes] = useState(nodeState); const updateNode = (id) => { setNodes((nodes) => ({ ...nodes, [id]: { ...nodes[id], isAnimating: true, } })) } ```

YESSS! I've been waiting for this! Thanks man.

Great video man! I'm a visual learner, so this helps me a lot.

You could use react memoization or you can check if the state has changed for a cell. If it doesn’t change you can prevent the render.

Thankyou so much for your efforts. You are helping people in a great way!

Thank you so much!! Your truly a public servent. I aspire to be like you.

Mate, honestly you are a legend

You're a wizard harry.

You are a genius. Keep up the good work. Thanks for posting this.

Thanks dude...I just wanna give you a hug.

@clem

4 жыл бұрын

🤗 (I think that's the hug emoji)

Awesome! One caveat: I won't watch it because I want to try this before seeing your solution... Will try to use Python + a visualization tool... Thanks for the great ideas and the inspiration!

@Mohib3

4 жыл бұрын

what visualization tool can I use to try it with Python?

@avinashmishra7735

4 жыл бұрын

How can it be done in Python? Can you please elaborate brother?

@Mohib3

4 жыл бұрын

@@avinashmishra7735 i'm learning django right now, maybe you can do it using django? But I mean I literally just started django.

@ProgramadorSagaz

4 жыл бұрын

I'm pretty sure that this is doable with Pygame (and it will probably be my pick)...

@avinashmishra7735

4 жыл бұрын

@@ProgramadorSagaz Can you help me building it in Pygame? I'm excited to build it in Pygame

I wonder if the performance issue can be fixed by doing the grid visualization with the canvas API. It would be harder though cause you would lose the perks that react gives to every component for idetification purposes. Anyways, this was an awesome video, i hope you can find more time to do videos like these. Keep it up!

This is so hard to follow along. Why is so much stuff done in a timelapse or off camera? I know the files are on github, but those are the finished products, which don't do much for people trying to follow along and learn.

It is a very good video. It's motivating to see Google employee doing live project

You are a legend❤️💯💯 I just love your tutorials and these tutorials help me allot

Finally, thanks @Clément Mihailescu.

When I try to run the react app the browser shows blank page...I've followed step by step but the output is not visible. Can someone help me ?

30:11 LOL, that was so funny! I've never seen anyone eating a pizza like this 😄 BTW, that sounded so crunchy 😋

@yaumingchang5360

4 жыл бұрын

that just came out of nowhere lol

glad I'm not the only one struggling with CSS

Awesome dude, do more of this real coding

Hey so at this minute mark: 7:46 I'm having trouble knowing how to create that component you were talking about? Any thoughts on how to create the component that I am missing?

Thank you so much for such tutorial, you have done Great work Sir

Can anyone please tell me what font was he using in this video?

I was wondering if there was a way to do this without creating an entirely new grid every time a node is visited/wall is placed. That feels excessively resource intensive to me.

Love this tutorial. It just feels so real!

Clem man, you're making me up my game? This app, 3 months into writing code. Good god!

you are our modern-day MESSIAH !!! Thanks a ton for your videos

Your videos are extremely, extremely, extremely, extremely....cool.

You remind me of Zap Branagan when you groan lol.....thanks for showing us you having trouble, it makes me feel good someone so high up is having trouble too

Make more videos like this(using code to build up something). It`s helpful i think, for most of us :))

Thank you so much for posting this! ✨

Great video. I love this kind of content!! :)

Hey Clément! I noticed that your A* algorithm is not implemented correctly, it does not return the shortest path in all scenarios. The minimal failing scenario is as follow: ........... ...#...... S #....E .........# a 4 by 4 region with start on (0,2), end on (3,2) and walls on (1,1), (1,2), (3,3). The path A* chooses is: up, up, right, right, right, down down (7 steps), optimal path is: down, right, right, up right (5 steps).