Create a TYPERACER clone using Node.js, Socket.io, Next.js, Shadcn-ui, Turborepo and more!

Video Description

Hello guys! In this video, we will create a TypeRacer clone using Node.js, socket.io, Next.js and shadcn-ui. TypeRacer is a game where you can bring in your friends and battle to see who can type faster. We are going to build something very similar. We will first create a monorepo using Turborepo and create our client and server. In the first part of video, we will create the server and then we will work on the client. DISCLAIMER: This clone is not a UI core or an "all features" clone. We will be cloning only the core functionality. This video intends to show you how to use sockets to make cool stuff. Also, I am not associated with TypeRacer in any way. I'm using the name only for educational purposes. If you liked the content and found it useful, make sure you support me by clicking the subscribe button and sharing this video with friends in need. 🤝 Related video links Next.js app router crash course - https://youtu.be/VL7cCTfFRGs Turborepo tutorial - https://youtu.be/d5De8rvFylQ shadcn/ui tutorial - https://youtu.be/aW3m_buL3iw Read w/ Atharva ep1 on types of forms - https://youtu.be/xCb-cVxj2wE Other links Socket.io documentation - https://socket.io/docs/v4/ Timestamps 0:00 - Introduction 1:06 - Demo of what we are going to build 4:15 - Creating a monorepo using Turborepo 6:58 - Initializing our server project 11:25 - Setting up socket.io on the server 16:00 - Creating the main socket event listeners 25:49 - Working on and setting up the Game class 31:10 - Player game join logic 37:09 - Setting up and working on game listeners 56:26 - Creating a Next.js application for client-side 57:57 - Adding shadcn-ui to the Next.js application 59:51 - Configuring dark mode in shadcn-ui 1:02:05 - Installing components from shadcn-ui 1:04:00 - Working on the landing page 1:13:38 - Working on nickname input 1:18:25 - Working on the game logic 1:41:07 - Trying out and debugging our build 1:46:51 - Conclusion Any suggestions? Leave in the comments below! My links E-mail - [email protected] Blog - https://blog.atharva.codes Latest Links - https://links.atharva.codes Twitter - https://twitter.com/athudeosthale LinkedIn - https://linkedin.com/in/atharvadeosthale #programming #programmer #javascript #nodejs #npm #nextjs #react #reactjs #shadcn #ui #components #tailwind #styling #typeracer #typing #racing #typingrace #speed #typeracing #turborepo #monorepo