Pathfinding Visualizer Tutorial (software engineering project)
HTML-код
- Опубликовано: 12 авг 2024
- This video is a tutorial of my Pathfinding Visualizer project, which visualizes Dijkstra's algorithm. This is a great software engineering project to add to your resume.
This tutorial's GitHub repo: github.com/clementmihailescu/...
Original Pathfinding Visualizer's GitHub repo: github.com/clementmihailescu/...
Video where I talk about my software engineering projects, including the original Pathfinding Visualizer: • The Projects That Got ...
Timestamps for this video:
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
Prepping for coding interviews? Practice with 77 video explanations of popular interview questions and a full-fledged coding workspace on AlgoExpert: www.algoexpert.io (use "clem" promo code for a discount!) 
Наука
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: ruclips.net/video/n4t_-NjY_Sg/видео.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.
Thank you so much, Clement!!! Exactly what I needed to learn to start visualizing things like algos/sorts :)).
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
@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 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.
This is an incredible tutorial! Definitely will use this with my students to help them visualise better Dijkstra's Algorithm.
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
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
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
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!
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 love all the effort you put on your videos. Thank you very much Clément
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
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 !!
Thanks for the content Clément, your videos are absolutely amazing!
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!
This is exactly the kind of tutorial I was looking for tonight! Thank you :)
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.
YESSS! I've been waiting for this! Thanks man.
Thank you for the time you spent in making this video, your projects inspired me to keep up with my selfstudy in software engineer.
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 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 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.
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!
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 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!
Great tuto on a great subject, thumbs up mate that's heavily motivating!!
For fresher's / new graduates it's quite insightful and resourceful.
I love this kind of tutorials... about engineering projects... like button smashed!
Just one word
*AMAZING!*
I watched the entire video you are a real genius!
Fantastic video , looking forward for more exciting and informative videos in coming times। Thank you ।
You are a legend❤️💯💯
I just love your tutorials and these tutorials help me allot
This is a super great project. After this i will try to build it again on my own, Great work sir.
same
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!
I didn't start the video already, but im commenting because Im sure that will be amazing, keep the good work!
you truly are a genius, great job man, i will definitely check out more of your content
Excellent vid! I think I'm going to pull the trigger on the algo expert course. :D
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
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 video man! I'm a visual learner, so this helps me a lot.
Underrated , should be highly appreciated
You are a genius. Keep up the good work. Thanks for posting this.
Love this tutorial. It just feels so real!
Thankyou so much for your efforts. You are helping people in a great way!
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!
Thank you so much for such tutorial, you have done Great work Sir
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.
Everyone applying to a CS job is gonna have pathfinding visualizer on their resume because of this video
Thank you so much for posting this! ✨
Finally, thanks @Clément Mihailescu.
Thank Clement! Great video.
Enjoyed watching this.
so nice of u to put an hour of your day to us plebs :3
This is amazing! Thank you so much!
you're a good teacher, thank you
Thanks for the video, great project !!
love it! so informative &helpful!
This is... a super video, im not sure about other people, but for me... That video motivates me a lot! Thank You !
Clem man, you're making me up my game? This app, 3 months into writing code. Good god!
Great video. I love this kind of content!! :)
Can't wait to try it!
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 video makes it clear that even ex-googlers write really bad code at first. And that is FINE! That feeling is so empowering.
Thank you very much! That's very helpful for my project!
17:40 yepp that's me in this entire project
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 so much for this!!
As a Junior Software Developer this video helped me with my IMPOSTOR SYNDROME! Thanks Clement!
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.
Thank you so much!! Your truly a public servent. I aspire to be like you.
*Clément Mihailescu deserves millions of subscribers*
Love it thanks Clem!
Thank you so much Clement!
Awesome dude, do more of this real coding
omg yes finally thank you oh great one!
Great content! Thanks for sharing :)
Awesome video, need more such videos😀
Thank you very much man. Love it
Wow looks amazing
thank u so much for uplaoding this tutorial
This is super cool man!
This is the bread and butter of RUclips
you are smart and kind. thank you.
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're a wizard harry.
i don't think i really understood, but the video is good source to reference from, great work dude
You are a gem brother!
Hey Clement, I just started watching your channel and it's fantastic, thank you so much for sharing your knowledge. Just one thing on this video, the music playing at around the 12-minute mark is so psychedelic, do you mind providing a link?
Probably the most real tutorial I've seen in RUclips
Finally,thanks clement
Epic video, Good job!!
This is a really good project to make as a beginner im 15 and made an a* visualizer with about 2months of knowledge
Thanks dude...I just wanna give you a hug.
🤗 (I think that's the hug emoji)
Your videos are extremely, extremely, extremely, extremely....cool.
Make more videos like this(using code to build up something). It`s helpful i think, for most of us :))