Full Socket.io and React.js Online Multiplayer Tic-Tac-Toe Game | Socket.io From Zero To Hero

⭐ Timestamps ⭐
00:00:00 Getting started and what we'll build
00:09:40 Setting up Express Server Project and Installing dependencies
00:26:57 Setting up React client application with typescript
00:49:09 Allowing the user to type and join a custom game room
01:21:24 Creating our Tic Tac Toe game board
01:33:56 Update game board through sockets between multiplayers
01:53:08 Handling players turns when playing a game
01:57:37 Sending start game event when players are ready
02:08:32 Checking if one player has won the game
02:14:34 Sending Win status to other player

💻 Grab full Client/Server Source Code on Github:


🧭 Full MERN Website React Nodejs w/ GraphQL Tailwind and Docker From Zero To Deployment

🧭 Watch Tutorial on Designing the website on Figma

🧭 Watch Create a Modern React Login/Register Form with smooth Animations

🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

🧭 Learn Redux For Beginners | React Redux from Zero To Hero build a real-world app

🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize

🧭 Introduction to GraphQL with Apollo and React

Made with 💗 by Coderone

[randielzoquier]

Hey, interesting tutorial, but I feel you skipped out a lot on the file configuration, especially since what you have is really different from the default node.js stuff. I got really confused really early on, but I'll watch through to get as much info as possible

[kian]

Thank you very much for this video. I am in the process of creating a multiplayer card game called switch. The way you have your system layout with class base decorators is brilliant. I got a lot of help from this video. Well done for the amazing content

[deanolium]

Nice video though I would recommend anyone doing this to put the game win check on the server rather than on the client. As otherwise any crafty client could just send the game_win message to the server and force a win at any point. Basically, you should always assume the clients are going to try and cheat the system at any opportunity!

Of course, going further, the server could implement a state machine to ensure things happen in the order you expect (for instance, only active players can send moves). Some fun things for people to try and implement.

[Dsaraki]

When we use the express-generator the outcome is WAY different from the video...

[DanielTruongDev]

Hi, can you please tell me how you set up your ts express file at first? I tried express generator then install typescript like you did but I don’t have the tsconfig file, and lots of file to start, thanks

[mickaelrichard]

Can someone help to get the same file configuration that he has? because this part is skipped so a lot of people are not able to follow the tuto :/

[jonathanharris]

Clearly he's ignoring all the comments about how the project folder setup was breezed by.

[motivationalwithpictures]

You are the best man because you know I’m this modern world have less mount of time with us or busy person in the world you have made the view all I want to suggest to you try to make a video like short or like playlists

[abhijitez]

Nestjs v8 provide inbuilt support for the class based sockets.

[DylanWeicker]

I'm getting lost in the beginning because npx express-generator does not give me a server file. Everything is .js instead of .ts, I wasn't certain that I changed to to .ts correctly. I didn't get a src, so I made one manually and moved everything but the node modules and .json files into it. But I couldn't get it to run without a server file!

[yasminamran]

Thats great, would you do a memory multiplayer game vedio, or relse how can I reach you to teach me how to do it ?

[T-wreckz]

you skipped the most important part! The configuration. Check your comments yo

[sriharikatare]

Hey can I do this without using TS . As I am using a netlify site for hosting my site.

[ebeland]

I didn't even start this, the video suggests he will tell how to setup the project then completely blows off any attempt at explaining the setup.

[sarahilluminorus]

Hey, I executed "npx express-generator my-app" with bash and I have different folders compared to yours, help please?

[yasminamran]

why do you use class band nit functions ?

[vishalgarg]

can you make this project in node js instead of typescript? It will be very useful

[jeminaldennis]

I only wish i could press the like buttons 100 times. thank you so much

[yasminamran]

Line 195:6: React Hook useEffect has missing dependencies: 'handleGameStart', 'handleGameUpdate', and 'handleGameWin'. Either include them or remove the dependency array react-hooks/exhaustive-e-deps How do i fix it. Any help would be aprissiated

[mattunlu]

Would be better if you show what you have implemented in every major components you added…