I Built A Snake Game By Reversing A Linked List (JavaScript & React project tutorial)
HTML-код
- Опубликовано: 24 июл 2024
- I combined algorithms and web development for the best software engineering project: a Snake game built in JavaScript and React that reverses a linked list. This video serves as a tutorial for the project, which happens to be a great beginner JavaScript project. The project's source code can be found here: github.com/clementmihailescu/...
Create React App Instructions: reactjs.org/docs/create-a-new...
0:00 | Preview
0:19 | Introduction
1:58 | Project Overview
3:08 | Project Setup
5:18 | Project TODOs
6:58 | Tutorial
39:53 | Reversing A Linked List!
46:33 | Final Product
47:53 | Conclusion
AlgoExpert: www.algoexpert.io/clem
SystemsExpert: www.systemsexpert.io/clem
My LinkedIn: / clementmihailescu
My Instagram: / clement_mihailescu
My Twitter: / clemmihai
Prepping for coding interviews or systems design interviews? Practice with hundreds of video explanations of popular interview questions and a full-fledged coding workspace on AlgoExpert - www.algoexpert.io - and use the promo code "clem" for a discount on the platform! 
Наука
"You'll never have to reverse a linked list on the job."
*Clement has entered the chat.*
that's why I don't like coding interview 😭
I actually had to reverse a linked list on a couple of interviews. Tbh, not sure I could do it now out of the blue.
Huge fan of you man! You are an inspiration to newcomers in tech. Keep up the work
If only we could make snake on the job 😂
Did you use a js framework for parts of the alogoexpert site or is it all plain js?
Hahaha wow, never thought the day would come where reversing a linked list would actually be used. Impressive stuff!
Woah! I love your channel haha. Didn’t expect to see you here!
But the day when it’s actually needed has not come yet
love this format of building stuff every once and a while clem!
2:58 hearing it with eyes closed made chuckle
😂
@@clem Is there a “No Context Clément” Twitter account? Because this might need to happen.
Woh! You have really made some serious use of reverse linked list.
Good stuff.
Really nice and refreshing video, awesome Clem !
Pretty refreshing to see that an experienced programmer/entrepreneur like you can get stuck/frustrated on a "simple" bug... happens to me all the time at work!
~ "If you're really stuck on something, move onto something else and come back to it with a pair of fresh eyes"
Yesssss tutorial from Clément😃
That was worth the wait
"I don't THINK I'll need stack overflow." When imposter syndrome hits you right before coding a snake game.
that's what I was waiting for 💥😘
Finally something practice. Well thanks for the video,
Someone needs to make a compilation of all the ways Clement has transitioned plugging algo expert. SOMEONE GET ON IT.
This is great ! Pls do more "tutorial" series
Wow!! I never knew someone had the same idea, I thought about it too when I started learning DSA but I couldn't implement it
Thank you very very for showing that struggeling and getting annoying Bugs can even happen to such advanced people. Watching people get through their Code without any problems can give the feeling of being really far away from what a programmer should be able to handle
The ad that I got on this video: "So you know how to reverse a linked list, but do you know how to design a large scale distributed system?"
Wow, perfect timing.
Next project: *I Built A Large-Scale Distributed Multiplayer Version Of The Snake Game*
@@clem Looking forward to it.
@@clem plzz do. It'll be awesome to see
Wow, what a coincidence. I just finished coding my snake with js, but I am a simple guy so no linked lists shenanigans haha
Could you add this concept to AlgoExpert? Actual small projects based on the Algorithm problems in AlgoExpert?
I like this type of video . Please keep it up
More videos of this type plz :) 💙
Hi Clément,
Please try to do a git commit on each baby steps. It will be really helpful.
Thanks Clément Mihailescu
Wow, you actually found a use case for reversing a linked list
Thanks for this 🙂
can you please suggest how to create multi dimensional array at run time with python.. i need dynamic array not static array
Hi clement great video
I'm waiting till this is asked on AlgoExpert. What do you guys think, easy, medium, or hard?
The innuendo is astonishing 😂
Clement the great
Love from goa
setInterval was never cleared, so there were multiple intervals running each with different closures
Has a big af monitor. Yet still codes on his 13 inch MacBook. BRUH!
Simplicity level: Clement
coding videos on clement's channel ? this is beyond science
Keep doing coding videos for us clement
I like that
I like that you showed the bug when occurred, and how you dealt with it.
Feels relatable.
I had an idea of creating small projects as i go thru leetcode challenges, but that proved to be very challenging to me. would be nice if you could create a visualizer for leetcode challenegs - that would help me ( and probably other devs) tremendously
Yes, please more coding videos!
Nice Clement
Somebody please explain what case he was talkin about on 30:20 "When you have only one node..."
Why am I getting an algoexpert ad right before watching algoexpert 😂😂😂
38:23 Woah, I referenced to the same, Nice!!
Game is still kinda broken. When you hit the wall, the snake stops alright, but when u press a direction key it starts moving again despite gameover. Please solve this. Thanks.
I think we can use then finding loop Algorithm in Linkedlist to check if 🐍 tried to ate himself 😉
First time I've heard "leave it as an exercise to the v i e w e r", haha. And now I know the main motivation for 'leaving it as an exercise': textbook authors just get tired and have other shit to do.
move the end node to what the direction is relative to the start node
So I guess we can expect a video on large scale distributed system.
Clement i have a question is it possible for you to work from home as a software engineer?
Clement please make more such videos. We really like to learn from you
beo PLEASE do more videos like this
HAHAHA ! You insane! Thanks for content!
Nice monitor u got there
Two 13" screens didn't make the cut
Is that your WoW setup in the background? Are you gonna stream on twitch any time soon?
No WoW these days, but other games 😉 -- and I'm not sure for Twitch. I'll definitely announce it if I do!
didn't know you can use color palette on vs code.
any Promo Code for algoexpert
woww!
24:20 "if you touch yourself you die !" where have i heard that before xD xD xD
Impressive, but can you build a project that involves reversing a binary tree?
Clement I'm currently learning JavaScript from udemy and have plans to become a front end engineer, but I'm concerned from articles and posts I've read that javascript will die in the near future, do you think that's the case?
I don't think you should worry about that cuz even if it dies learning a language is easy as long as you know the concepts
Hey unknown player. Just pick a language and learn it well. Once you learn a language, it will be easy to learn other languages. Concepts are pretty much the same; just a different syntax
can you please make a video on "are web developers software engineers? How are UI or front end of desktop softwares made, if HTML and CSS are only used in web development?" and end the confusion.
Love those typical surprise moments: 'Wait why is this working now' or 'This was working a moment ago'
Also spending 20 minutes to find a broken conditional statement, I feel the pain. I once searched an hour for a '!' that was missing....
Still surprising how good React works for making small games, would have chosen PixiJS or just a plain canvas probably.
It will be cool ... if u make more videos ... of making .... coding videos .... plsssssssss ....
31:22 "Oh... Wait! Why is this working...?!" 😄
Sir just tell me what i should choose to make my final year project
React
Flutter
I need help
react is cool.
if it's an app go for flutter; if it's a website go for react
@@migueldomingos4570 Thats what im struggling with
Web Development or App Development
@@kimayapanash8998 I personally find app development more enjoyable and if you want to show something impressive for the final project app dev more easily impresses than web development.
@@migueldomingos4570 i thought app development was easier to learn than web development
Real talk: ultrawide monitor worth it?
Now port it on nokia 3310 and bring early 2000s back :'-)))
Aaaa so nostalgic ❤
Wow! It's working, how did I do that. it's magical working.
20:21 why is this not a switch statement or a class :O
24:38 Lmao, how big your snake is 🤣 🤣 🤣 🤣
I remember playing this game on the Nokia 3310 back in the day! Looking forward to building this!
Entertaining stuff! Now code an AI to play the game :)
TechLead taught you well!
Techlead is a Noob, he is a failure, what he ll teach?
😂😂
Please take Google interview of @CodeWithHarry
Great AlgoExpert from India
Really curious about how long it really took - (imposter syndrome)
Is that jiren on your desktop? Please tell me it's Jiren
Why my code works magically, but it's awesome. lol😀
Clement, It'd be really cool if you could make a video about how you got into an ivy league college with some tips because you went to upenn.
24:21 lol :D 24:37 LOL :D
why not use canvas?
and also why not use requestAnimationFrame instead of setInterval
clem how much do you spend on advertising because almost on every video I will see algo girl
ah I learn something new everyday. When I did a snakegame, I used an array for the snake, [{x:1,y:1},{x:1,y:2}] etc.. and then I just shifted the array 1 object, and inserted the new position for the head. and if the snake eat something, I did not shift the array, and made it one object longer.
16:10 haha, setIntervals are weird in React as it goes for its declarative programming approach
Faced this too when I was creating a timer app
Check out this post by Dan: overreacted.io/making-setinterval-declarative-with-react-hooks/
It helped me
MORE TUTORIALS PLEASE< PLEASE!!! please = [true, false] => please[0]
Frustration with coding what makes a programmer good, How many hours you built it?
funny but I have some comments :
first, I think it is not good to use for keyword when we are front end dev, we only use map(), filter(), (..) only lambda function,
second, I think to write the entire code on only one component is not a best practise, split more the code, because it is hard to see a typescript file with so many line of codes
after say that is was a very advertising video
Can RTX 3090 run this game?
You took Ben Awad too seriously😂
24:44 thats what she said
hey clement you have to sleep, I am just worried because I know you haven't slept that night . )))
Okay, You'll never invert a binary tree in a job. Clement says challenge accepted!
Reversing a linked list in JS and Python is too easy. Real men do it in C++. Just kidding. Love your vids❤
Get ready for 200 pull requests lol
i created chess game just by using if and else LOL
Looks like a 13inch screen wasn't big enough for you after all lol
"do you write code, tabnine will speed up your coding process"
ex-google engineer creating a snake game!
How many hours did it take you in real to build the complete game? :D
Nice project! I've been playing with snake recently too. I created a solver using hamiltonian cycles (see it in action here - ruclips.net/video/9AtxLypiqjA/видео.html)
It would be nice to create a solver for this kind of reversable snake.
Likewise being a successful software engineer at Google and Facebook and being good at making games are two different skills.
I like your accent
22:30 This is what happens if you don't test your code