In this video I will be going over how to build a Full Stack React Application using the Stream API. For the backend we will be using NodeJS and Express. This project will build a multiplayer tic tac toe game where players can chat between each other.
Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account from Stream:
– Stream API:
Code:
Topics You Will Learn:
– Advanced React, React Hooks: UseState, UseEffect, State Management
– React/Javascript Logic, Tic Tac Toe, Map
– Creating an authentication system in React using NodeJS + ExpressJS
– Working with the GetStream API
Join our Discord:
🚀 Learn ReactJS By Building 6 Projects:
🐙 GraphQL Course:
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Linkedin:
Instagram:
Github:
Business Email: [email protected]
Tags:
– ReactJS Tutorial
– ReactJS and MySQL
– NodeJS Tutorial
– Tic Tac Toe
Timestamps
00:00 | Demo
05:45 | Authentication
01:04:38 | Creating Channels
01:26:57 | Tic Tac Toe
02:06:04 | Chat
02:24:53 | Outro
#reactjs #tictactoe
Manoj Kumar
01.04.2023🔥🔥🔥wow this is huge
javier Ruiz
30.03.2023Thanks for this video Pedro
Rohan
30.03.2023Thanks for quality tuts Pedro 🤘
Levy Roth
30.03.2023Insanely cool project and tutorial 🖖
Varun
30.03.2023Thanks for this tutorial ! I sent you a mail regarding a mega project collab. Can't wait to hear from you. [SUB: Request for project Collaboration]
Abdur Rakib Rony
30.03.2023Great thinking great tutorial🥰🥰🥰
Adi Mishra
30.03.2023Awesome content brother🔥🔥!!!! can u pls make a video on dedicated backend of MERN stack ❤️🙂
Immense Dreamer
30.03.2023Nice I will try this with a friend.
Aditya Hermawan
30.03.2023thanks for tutorial , this awesome
Varun
30.03.2023A WORDLE WITH REACT !! It'll be fun
Aleksandr Matyka
30.03.2023Where project link
SLR
29.03.2023There is a button to delete everything in localStorage in one go. Not sure if you didn't know are just making what you were doing more obvious for those watching by deleting them one by one.
Colin Pereira
29.03.2023OMG THIS IS THE BEST TUTORIAL I HAVE WATCHED IN A WHILE
Leonardo Dayrell
29.03.2023Amazing as always! Good stuff
Sthefano Carvalho
29.03.2023That was awesome!
Thank you so much for sharing 🙂
Your videos are incredible
Daniel Malanchino
29.03.2023dahora Pedro! valeu mesmo! continue assim!!
Abhay Tiwari
29.03.2023Awesome Bro
蹦太君
29.03.2023Tomo
29.03.2023Awesome
Against The Grain
29.03.2023Woohoo!! Hes back! Cant wait to view your new video!!
Mokhtar Al-Shubei
29.03.2023(!?) https://youtu.be/Iw1YmBoOYb4?list=TLPQMTAwMzIwMjLTTEZfpMUdLw&t=6479 (!?)
Zee Shan
28.03.2023excellent stuff man ! many things to learn in 1 project. thanks 😊 keep it up 👍
U A
28.03.2023thanks Pedro! going to try making a clone of this using django+drf for the backend.
Discover The Code
28.03.2023Nice bro you are a legend i learn lot from your chaneel thanks bro thanks a lot
arsnakeheart
28.03.2023That burp moment just to check if we’re paying attention
prateek tiwari
28.03.2023You are an GOAT 🙏🏻
Heitor M Bonfim
28.03.2023You're awesome, Pedro. Dude, could you make a video on programming a Telegram bot? A simple one that autoforward messages automatically with nodejs? or even a more complex one. There are many people making money with telegram bot currently, that can even be very useful for you.
Cristián De Gracia Nuero
28.03.2023Are you spanish?
Sam Ugwu
28.03.2023nice one pls do you have react-native videos
Satyam Chaudhary
28.03.2023Pedro can u make video on react query?
S Kumar Dhananjaya
28.03.2023Hey man, your doing great work and I've been following you from few months and learned a lot abt this tech stack and I've been doing my academic project using MySQL,React and node js but I can't figure out how to store and retrieve pdf files in the web app please help me out with this !!!
vioeke
27.03.2023Hello, when I try to connect to the second user, I get a message that the user is not found.
The data entered is correct, I do not know what it could be connected with
halloraus
27.03.2023I have to yarn add stream-chat on front and backend, otherwise it wont work for me, why is it working on your project without adding it?
Gerar Suaverdez
27.03.2023How do you proxy the axios post url in SignUp and Login so that it doesn't use localhost when deployed?
Justin Smith
27.03.2023Just wondering why in the JoinGame Component when creating members, why the client.userID has the d capitalized?
Ding Han Lim
27.03.2023Hi Pedro, really love this tutorial, but I was (and still am) having trouble with the authentication – when i try to log in with usernames and passwords that have not been signed up before, the setAuth still becomes true and i still get brought in to the "logged in" page, instead of returning an error and thus bypassing the authentication step. Have cross-referred to your code on github but still could not find out what was wrong…
more specifically, this line doesnt seem to run:
if (users.length === 0) return res.json({ message: "User not found" });
Mike Alejandro
27.03.2023Love your contento brother !!
Drew Morrison
27.03.2023Getting this error when trying to log my user in the console. Any ideas?
Uncaught (in promise) Error: userToken does not have a user_id or is not matching with user.id
Ikram Ul Haq
27.03.2023Hi! I have a question. You installed stream-chat module in client folder but also using in server. How is that possible? Mine is not working in server
KyleKatarn145
27.03.2023These tuts are great mate, once question with connecting the user with a token as soon as they've signed up, would it be considered a better practice to put all of that logic in a useEffect hook with an empty dependency array?
Sorry if it gets covered later but it's a long video and I'm watching this on a lunch break so I know I'll probably forget the question later haha
SonaLaPorte
27.03.2023Hi ! First, thx for your tutorial, it's really explicit and useful to learn and practice fullstack with ReactJS ! But i've got a problem when we finished to code the auth at 50 min, When I try to register my very first user, and click on the signup button, i get this error "Uncaught (in promise) TypeError: Converting circular structure to JSON"
Shashank Deep
26.03.2023I this project we have used socket Or not
Shashank Deep
26.03.2023What is the objective of this project
vanshika jha
26.03.2023can a beginner build this project? I just know HTML,CSS and Javascript
Damagee
26.03.2023If you run into problems regarding the first sign up, you have to go to the stream dashboard then click on "Chat Messaging" which is part of the menu on the left and activate your free trial.
RUMARO
26.03.2023how you auto completing
tyra
26.03.202347:20 – it just repeats "src/index.js" overand over again until it crashes. any ideas?
like literally
n] starting `nodemon src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js`[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): .
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `nodemon src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js
src/index.js`
[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): .
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `nodemon src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js src/index.js
src/index.js src/index.js`
Prem Jha
26.03.20231:31:00
Ivan Robles
26.03.2023Hey! This taught me so much, thank you. I did have a question though, I used your code from github and I see that the number of times the "channel.on" listener runs more and more times. Is this normal? It is my understanding that it should only trigger once every time you send event
Manda Akash
26.03.2023The authentication is not good without details also if i signup it is asking for username with whom I want to play