Create a TYPERACER clone using Node.js, Socket.io, Next.js, Shadcn-ui, Turborepo and more!
About
No channel description available.
Latest Posts
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
Essential Dev Tools
AI-recommended products based on this video

Magnetic Nasal Strips Starter Kit: Comfortable Nasal Breathing Support for Sleep, Helps Reduce Snoring Noise, Includes 60 Tabs (30 Uses) with 4 Sizes

Environet Hydroponic Growing Kit, Self-Watering Mason Jar Herb Garden Starter Kit Indoor, Windowsill Herb Garden, Grow Your Own Herbs from Organic Seeds (Basil)

Herb Garden Planter Indoor Kit 21Pcs Kitchen Herb Garden Starter Kit Growing Kit Including Wooden Box Burlap Pots Soil Discs Gardening Tools Unique Easter Birthday Christmas Gift Ideas for Women Mom

Bonsai Starter Kit – 1x Bonsai Tree | Complete Indoor Starter Kit for Growing Plants with Bonsai Seeds, Tools & Planters – Gardening Gifts for Women & Men

KINGRACK 4 Step Ladder, Sturdy Steel Step Stool with Tool Platform, Safe-Lock, Handrail, Anti-Slip Wide Pedals, Pass 800lbs Load Testing, Folding Portable Ladder for Multi-Purpose, Home Kitchen, Black Global Recycled Standard

Dell Performance Dock - WD19DCS Docking Station with 240W Power Adapter for Monitors (Provides 210W Power Delivery; 90W to Non-Dell Systems)




















