Create a TYPERACER clone using Node.js, Socket.io, Next.js, Shadcn-ui, Turborepo and more!
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 - • Next.js 14 App Router CRASH COURSE - ...
Turborepo tutorial - • Turborepo Tutorial - a monorepo by Ve...
shadcn/ui tutorial - • shadcn/ui really does have stunning R...
Read w/ Atharva ep1 on types of forms - • Correct ways to create forms in React...
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 - / athudeosthale
LinkedIn - / atharvadeosthale
#programming #programmer #javascript #nodejs #npm #nextjs #react #reactjs #shadcn #ui #components #tailwind #styling #typeracer #typing #racing #typingrace #speed #typeracing #turborepo #monorepo