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: ua-cam.com/video/n4t_-NjY_Sg/v-deo.html
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?
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!
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!
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.
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.
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
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.
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
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.
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
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 !!!
@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!
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
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
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.
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.
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🎉
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!)
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!
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
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!
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
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.
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.
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
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
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.
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!
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.
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!
@@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.
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
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, } })) } ```
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!
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!
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).
I created this project, barebones by watching your video and taking the data structures course in linkedin learning. Honestly the algorithm is easy once you understand it, it's the implementation of the visualizer that annoyed me. React has its own way of doing things, the tutorial I followed used the turtle library in Python. Thanks for the videos Clement. After I'm done with this I'll follow your sorting visualizer video. Need to land that first job asap. lol
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?
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.
Could you make a video on "Roadmap to become a software Engineer?" what to learn for making projects? what to learn while learning data structure and Algo?
One thing I found that this would end up becoming pretty buggy is in the PathfindingVisualer component, where the component is setting state within componentDidMount(). Although you might not experience this bug because of the small grid size. If you crank up the grid size to fill a larger screen with smaller nodes (many more nodes) the state won't set before you try mapping it causing a headache of a bug ( glorious undefined.. found due to experience of remaking this into a more complex example). Regardless, LOVE your stuff! Even considering getting algoexpert (this guy wants to get into bigtech after school).
Hey Clément, I have a question... Could this project be done in Python ? Since I know very little about javascript and it would take me some time to learn abou it, since I'm confortable with python I would like to this idea and do it in python by myself, but is it really possible ? Thank you ;)
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: ua-cam.com/video/n4t_-NjY_Sg/v-deo.html
Ever since I saw your first video, I haven't missed one video since that day.
Can you teach us machine learning so we can make ai learn to play minecraft
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?
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!
@@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!
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 this was me before CSS flexbox got to the scene
@@dev__adi and i learned css grids which are even better than flexbox
@@dharmang neither one is better, it depends purily on the situation
@@dev__adi Grid Layout be like : hold my beer.
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.
Rome wasn't built in a day. You tackle problem by problem, suddenly you have a whole app.
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.
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
Ethan Davidson All non-wizard engineers do!
@@greenie62 JS, where you can do it right and wrong at the same time. #JSchrodingersCode
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.
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
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 😁
@@bakrianoo obviously it's good man
Impossible in 3 months with 0 programming knowledge, let's just face it
To be fair, he does have a maths background. But still, it is incredible
Wait what do you mean by only 3 months of experience. Surely he has been programming for more than 3 months lol
Thank you so much, Clement!!! Exactly what I needed to learn to start visualizing things like algos/sorts :)).
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.
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
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 !!!
@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!
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.
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 !!
Everyone applying to a CS job is gonna have pathfinding visualizer on their resume because of this video
As a Junior Software Developer this video helped me with my IMPOSTOR SYNDROME! Thanks Clement!
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
This is an incredible tutorial! Definitely will use this with my students to help them visualise better Dijkstra's Algorithm.
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
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.
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.
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🎉
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.
@@anonofDeath I created using Java swing and Jframe. You can google it by searching Java swing, it is used to create window based applications.
@@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!)
Rodrigo Mallmann Thank you for the kind words, Rodrigo, and best of luck with App Academy!
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!
Tryna land the internship and I wanted to give this project a try, thank you for this video
Did it work? How long did you take to make it and master the syntax? I have an interview too, I am so tensed!
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
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!
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
* you can use visual studio code if this works better for you than Brackets
Wouldn't call this a tutorial, but it's cool seeing the process nonetheless.
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.
He just copy pasted his old code and made it worse, this ain't a tutorial at all 🤦
@@YoloMonstaaa You make it seem like 99.9% of programmers don't recycle bits of code for some point or the other.
+r viens - It's great just hearing the thought process sometimes. I have a pathfinding visualizer tutorial series which is more detailed though.
I'd say that this video is even better than a tutorial. It shows what software development is really like.
17:40 yepp that's me in this entire project
This video makes it clear that even ex-googlers write really bad code at first. And that is FINE! That feeling is so empowering.
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.
i learn so much everytime i watch any of your videos man. god bless, hope you do well!
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
Will certainly save this for follow along later, really love that you show your thought process!
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
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.
I didn't start the video already, but im commenting because Im sure that will be amazing, keep the good work!
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
*Clément Mihailescu deserves millions of subscribers*
Probably the most real tutorial I've seen in UA-cam
Thank you for the time you spent in making this video, your projects inspired me to keep up with my selfstudy in software engineer.
This is a super great project. After this i will try to build it again on my own, Great work sir.
same
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
This is exactly the kind of tutorial I was looking for tonight! Thank you :)
Thanks for the content Clément, your videos are absolutely amazing!
so nice of u to put an hour of your day to us plebs :3
Just one word
*AMAZING!*
I watched the entire video you are a real genius!
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.
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!
what visualization tool can I use to try it with Python?
How can it be done in Python? Can you please elaborate brother?
@@avinashmishra7735 i'm learning django right now, maybe you can do it using django? But I mean I literally just started django.
I'm pretty sure that this is doable with Pygame (and it will probably be my pick)...
@@ProgramadorSagaz Can you help me building it in Pygame? I'm excited to build it in Pygame
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.
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!
@@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.
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
Excellent vid! I think I'm going to pull the trigger on the algo expert course. :D
I know python only is it possible to do this with Django
Great tuto on a great subject, thumbs up mate that's heavily motivating!!
@40:57
clement:"when the people demand ,I provide"
Everyboody liked the video.
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,
}
}))
}
```
Fantastic video , looking forward for more exciting and informative videos in coming times। Thank you ।
Underrated , should be highly appreciated
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!
Mate, honestly you are a legend
I love this kind of tutorials... about engineering projects... like button smashed!
This is... a super video, im not sure about other people, but for me... That video motivates me a lot! Thank You !
you can't call this a tutorial, this is just a process overview, maybe
YESSS! I've been waiting for this! Thanks man.
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!
i don't think i really understood, but the video is good source to reference from, great work dude
This is the bread and butter of UA-cam
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.
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😃😃😜😜
Suraj Gahatraj Awesome!
wassup! im a fellow nepali in America haha
@@shockminerx1518 I am Nepali in Nepal!
Thanks dude...I just wanna give you a hug.
🤗 (I think that's the hug emoji)
I liked the way the grid was getting morphed! lol
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).
To avoid ads go to last of the video play for a sec come-back to start enjoy the video ad-free
you truly are a genius, great job man, i will definitely check out more of your content
Finally, thanks @Clément Mihailescu.
You're a wizard harry.
I created this project, barebones by watching your video and taking the data structures course in linkedin learning. Honestly the algorithm is easy once you understand it, it's the implementation of the visualizer that annoyed me. React has its own way of doing things, the tutorial I followed used the turtle library in Python. Thanks for the videos Clement. After I'm done with this I'll follow your sorting visualizer video. Need to land that first job asap. lol
30:11 LOL, that was so funny! I've never seen anyone eating a pizza like this 😄
BTW, that sounded so crunchy 😋
that just came out of nowhere lol
Thankyou so much for your efforts. You are helping people in a great way!
you are our modern-day MESSIAH !!! Thanks a ton for your videos
Great video man! I'm a visual learner, so this helps me a lot.
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?
You are a genius. Keep up the good work. Thanks for posting this.
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.
Not a tutorial, you should change the title. Nonetheless good video
Could you make a video on "Roadmap to become a software Engineer?" what to learn for making projects? what to learn while learning data structure and Algo?
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 ?
Love this tutorial. It just feels so real!
Thank you so much!! Your truly a public servent. I aspire to be like you.
Thank you so much for such tutorial, you have done Great work Sir
You are a legend❤️💯💯
I just love your tutorials and these tutorials help me allot
Can't wait to try it!
Awesome dude, do more of this real coding
One thing I found that this would end up becoming pretty buggy is in the PathfindingVisualer component, where the component is setting state within componentDidMount(). Although you might not experience this bug because of the small grid size. If you crank up the grid size to fill a larger screen with smaller nodes (many more nodes) the state won't set before you try mapping it causing a headache of a bug ( glorious undefined.. found due to experience of remaking this into a more complex example). Regardless, LOVE your stuff! Even considering getting algoexpert (this guy wants to get into bigtech after school).
glad I'm not the only one struggling with CSS
Hey Clément, I have a question... Could this project be done in Python ? Since I know very little about javascript and it would take me some time to learn abou it, since I'm confortable with python I would like to this idea and do it in python by myself, but is it really possible ? Thank you ;)