NodeJS Realtime Chat: Build a FULL-STACK app in 27 Minutes! (Best UI 🤩)

[@ruben2bdrummer]

Working on this video currently. for anyone that gets stuck around 12:20, make sure to import axios on terminal : npm install axios. afterwards, at the top of the index.js file, it should be : const express = require("express"); const cors = require("cors"); const axios = require('axios'); worked for me, hopefully it works for you.

[@900winne4]

You actually just saved my life i spent so much time on that problem

[@ruben2bdrummer]

@900winne4 wanted to help people from getting stuck for an hour and a half like I did 😅

[@waynechirwa2124]

it did not work for me

[@cassiekim4321]

i spent almost 1 hr thank you so much! it worked finally

[@priyanshi.sin01]

Thank you so much dear, your comment helped me❤

[@abhijeetsinghchauhan34]

for those getting authorization error, you have to use "PRIVATE-KEY" in the header instead of "private-key"

[@xzex2609]

I did that but still the response is 403 (forbidden)

[@MuthuRaj-su7fk]

thank you so much bro

[@JustinManadero]

Thank you

[@OnFight1997]

I needed exactly this for my Computer Engineering Full Web Development Class, the final project was to build a simpler version of a Social Media website, with Login/Profiles/Chats/Groups, me and the group went through hell to get it working this was roughly 1.5 years ago, we eventually did it, but it was so rough I barely had any learning time, we were just hammering left and right going through 8hour walkthroughs, doing stuff by trial and error and backtracking when it didn't work to meet deadlines. I will definitely have to go through this and hopefully learn something this time around without any School pressure.

[@mdehsanulhaque4012]

bro please please share the App.css file in src folder i am unable to get cuz web not loading

[@jannickpedersen4620]

You guys could have done a FERN or MERN project with that approach :D in my computer science 4th sem i made a SPA where u could regi as a teacher or student. If u r a teacher, u can add classes with price, hours, titles and text in CRUD. If u r a student u can send inviation to the class and the teacher will get a noti. If the student is enrolled with accept then they they can each send request for live chat to each other xD

[@manavdixit3355]

Thanks for such a nice tutorial in which you created this from scratch without using any lib like chat engine, you're the best dev i have ever known, i really appreciate how u used web sockets to set up real time communication from scratch instead of using any lib.

[@azeddinehamdaoui8631]

i know right, he basically didn't use any single lib. what a chad.

[@krish4659]

sarcasm ;-;

[@pet.me102]

I think it's his.

[@jkthmp4334]

Absolutely superb , I just left a noob trying to paywall everything. I learned a lot from your teaching style , PURE content , no BS , such a time saver , thank you so much ! Such a time saver , and such professional delivery thank you , learned a lot from you today .

[@mubasshirrahaman8053]

Bro really really like your style of videos. It's short, straight, to the point. You are the best. But please Upload regularly and do some full-stack killer projects.

[@HossanMonjorul]

Surely i seen many video but this UI is increadible you're a good developper Bro

[@marinicamashinica]

Thank you for this very detailed, step-by-step tutorial, with great explanations following every single action. For me, what makes this video great is your style of teaching/explaining. Apart from amazing structuring of this very complexed lesson, I really appreciate calming, easy-going and slower-paced narrating with lots of short pauses in between sentences; it makes this tutorial easier to follow and to (for anyone who does that) take notes while watching. Also, I really admire the way you manage to explain every single step in very concise, clear, straight-forward manner (which leaves no room for vagueness, confusion, unclear definitions, over-explaining and other problems that usually result in loss of interest or frustration on the learner's side), what is a huge accomplishment, given the complexity and immensity of the task! Anyways, as an educator myself, I wanted to share how delighted I am with your tutorial, it is exactly the project I'm trying to make and you've helped me a great deal, thank you so much for your effort and willingness to share this very specific and valuable knowledge! (Apologies if something I said doesn't make sense, english is not my first language, but still I understood all concepts you explained here!) If you don't mind me asking, I would like to know how long have you been programming and where did you get your education? And what is your area of expertise, if you want to share that information, do you prefer getting to know "all of it", going full-stack, or specialising in one particular direction? Thank you again for your time and effort, have a great day and wish you much luck and success in the future!

[@mdehsanulhaque4012]

Have you made it if yes please share the App.css code with me website is unable to load

[@ME4ABHI]

😂😂😂😂😂

[@imo7y441]

I aint readin allat

[@allsparky]

Thank you for the amazing guide! I'm going to comment this to help anybody in the future who runs into my issue: I got to 12:00 and kept experiencing an issue, one where I was not able to add my second user. as it turns out, I closed my laptop and the live server turned off which is required! Y'all take care!

[@zameerkhan4780]

thank you ,i faced the same issue then i started the server and it worked ( npm run start) at the backend

[@NITHINPB]

Cool. But i expected building the chat engine and socket connections from scratch rather than using a framework.

[@odessasingh4771]

Project built after a whole day of crying. Thank you so much looking forward to the next bit putting it live

[@monikathapa1092]

Did it take u whole day ,can you tell me the mistakes to be avoided so I can do in short time

[@JackSon-qo1nb]

@@monikathapa1092 short cuts never work , if you wanna save time you can just copy the code , but if you wanna learn and understand you gotta go through the same process as the rest of us . Hope it makes sense , the more you make mistakes the more you learn

[@ArunPravin-os7kp]

Same bro​@@monikathapa1092

[@paschalasobirionwu1183]

this is honestly great. keep up the good work

[@mdehsanulhaque4012]

please share the App.css file in src folder i am unable to get it cuz web not loading

[@manavdixit3355]

Tbh it's not really a full stack application, he just used some service and integrated it in frontend , it's more like a frontend app using another service as back-end

[@gabrielchima6916]

I am short of words, I am just learnt some basis of Node js and used your video to know Node js😃😃, You are indeed a magic Dev

[@mrwalterwhite1620]

bro can you tell me how to run this ? code

[@heisenberg73215]

@@mrwalterwhite1620 yeah its not running kindly someone help

[@mdehsanulhaque4012]

please share the App.css file in src folder i am unable to get it cuz web not loading !! Please broooo🥺🥺

[@pratikkaranjit1462]

@@mdehsanulhaque4012 did you get bro

[@DatabaseAdministration]

It's good, how you already have css code and some boilerplate code somewhere. This is one of the neat videos i'v seen. Subscribed.

[@patrickvuscan2701]

The video's title is misleading. You're "creating" a node server and react app, but outside of the one auth endpoint, everything is handled by the 3rd party service. The "Best UI" is also entirely provided by the chat service. At what point is this really just an #ad for this chat service.

[@Eswar.]

you're 100% correct bro

[@playingwithflyguy2655]

so how do i really learn, what projects should i be doing

[@xzex2609]

which the service is not working at all , and the response is 403 to trheir own api

[@sinalisuvinya4330]

Great video!!! Just what I needed… Thank you very much! Keep up the good work

[@mdehsanulhaque4012]

please share the App.css file in src folder i am unable to get it cuz web not loading

[@BradleyRushforth]

Excellent content. As a fellow software engineer, I've found it hard to embed the concept of React into my current development style. I appreciate you explaining everything step by step, and you have done a remarkable job with this video. Looking forward to watching the follow ups.

[@liftingisfun2350]

as a software engineer you find it hard to use react?

[@Blazing_Hotmagma]

Not really from scratch then lol

[@WelshGuitarDude]

That's exactly what I was about to say lol

[@jamaal00013]

He didn't mention he is doing it from scratch

[@faiezyacob8235]

@@jamaal000131:44

[@EVA-tb5dq]

@@jamaal000131:44

[@nethegoattt24]

@@jamaal00013he did

[@syedzulkharnain6877]

That's Great there is Step by Step Tutorial too. videos take too much time but step by step tutorial it easy and not take too much time we can understand easily with the help step by step tutorials. Thank You For the this option.

[@coinhunter6772]

It would be neat if there was also an explanation on how to use this chat within another app - having authenticated users from a mongodb database for example instead of creating them only for the chat app

[@zonefortyeight349]

Thanks. You just saved me some time.

[@saadshafiq8338]

did you find any video or resource for this? if (true) then can you share ? i need it urgent

[@mdehsanulhaque4012]

please share the App.css file in src folder i am unable to get cuz web not loading

[@ziyaanjumshaikh1414]

@@saadshafiq8338 did you find anything? i also need it

[@AS-xz2ni]

@@mdehsanulhaque4012 my request.rest is not connecting what should i do

[@brianpan3761]

Superb video! This is by far the most user-friendly tutorial for custom chat apps on the internet. However, there seems to be an issue when I try to access the app (running on a localhost port) with a localhost tunnel. Please refer to the issue in the provided Github repository. Appreciate it!

[@pet.me102]

Fun, small, simple for non coders or beginners.

[@borisadepauldayo948]

This is the world most simplest tutorial i have ever found on KZbin

[@buggycodder]

this is still relevant in Sep 2024. BTW great tutorial broo.

[@aquila1762]

Did it work bro??

[@pet.me102]

@@aquila1762 Yes.

[@realtristan288]

For anyone who's looking for a full-stack project to put on their portfolio, I would make your own caching and websocket implementation and use an SQL or NoSQL database.

[@jasonduboff8432]

recommend any resources on this? i'm def trying to implement my own basic chat app without using their SDK if possible. Would a postgresQL db like with Supabase work just as well?

[@realtristan288]

@@jasonduboff8432 just search up how to use web sockets and you can easily come up with an implementation. It doesn’t even have to be amazing, you just need to show that you can build another solution when for example a service isn’t provided to you. I haven’t personally used Supabase but if you determine that it’s good for websocket interactions, go for it!

[@Proshanti1]

Awesome as usual. thanks a lot. waiting for more such incredible videos

[@mdehsanulhaque4012]

please share the App.css file in src folder i am unable to get it cuz web not loading

[@algorif4715]

amazing video and clear instructions, only thing bumming me out is the lack of options to customize the chat ui such as changing background colors

[@Ivansillo15]

Thanks to this video I could finish my proyect! Thanks, thanks, thanks!!!

[@mdehsanulhaque4012]

please share the App.css file in src folder i am unable to get it cuz web not loading !! Please broooo🥺🥺

[@irlWIKKO]

That was very quick and straight forward. Thank you for that. The only complaint I have is the way the CSS is applied. Overwriting every element I want to change with an !important statement is bad practice imo. Also using a none-standard font as your standard shouldn't be the case. I would do it the other way around for compatibility's sake: define an Arial, Helvetica, sans-serif for every element (aka *) then overwrite it with your own choice of font.

[@uthmancoder]

Woww i really enjoy this man you're soo amazing🥰

[@summerbreeze7550]

Interesting stuff, but I didn't think it would rely so much on another service. The title seems to be kind of misleading. P.S. I like the colors in your vscode theme. Would you mind sharing its name?

[@summerbreeze7550]

For anyone else, this is probably Tokyo Night Storm

[@ozan546]

@@summerbreeze7550 thanks for sharing :)

[@xzex2609]

the best project I have done

[@phil5053]

Learned something new today, thanks

[@meetverma4812]

You gained a sub this tutorial is just a wow!

[@manavdixit3355]

It's an video with misleading title, instead of create a messaging system from scratch he just used another service, what he created is nothing more then a frontend app using another service for backend

[@JenitJosephJose]

Thank you bro, I made it , keep going

[@rishikeshsharma9084]

const axios = require("axios"); isn't included in the tutorial 😅as I am a beginner & following along the tutorial, I was constantly getting an error of : "cannot read properties of undefined (reading 'status')".

[@kellyzhou27]

thank you so much was stuck on it for so long

[@netrox25]

Aaaaa you saved me!!

[@kavishshah6126]

you saved me bro .Thank you

[@rishikeshsharma9084]

No problem guys 😅. Once I got stuck in a tutorial for 1 week as I was unable to link my mongodb database🥲

[@hija97]

fixed it! thanks!!!

[@karthik-vq2rj]

even though i don't know react and node js i complete this project thanks bro . i didn't understand completely but i gain some knowledge from your video. thanks mate

[@Sunil-Patra]

dude, your chat engine is not allowing signup

[@ivanminchev888]

fr

[@Juan_Camilo]

Beautiful UI 🤩

[@mdehsanulhaque4012]

please share the App.css file in src folder i am unable to get it cuz web not loading !! Please broooo🥺🥺

[@Harshpanchal-v2r]

share the App.css file

[@tommyshaw2420]

Please change video name from "NodeJS Realtime Chat: Build a FULL-STACK app in 27 Minutes" - To "Learn how to use an prebuilt chat API so I can get a commission"

[@no1science]

😂

[@karansxa]

Fr😂

[@absalomrobinson8155]

Hey Adam amazing tutorial

[@amanrubey]

merry christmas!!

[@lamatech670]

tried it and it worked

[@beyond-the-veil-24]

I love this project brow

[@UmairQamer]

You are amazing, dude

[@EikichiOnizuka-sp8on]

Thank you so much Dude 👍💯

[@deepanshukant392]

Good video and great channel, def subscribe

[@hossamelatmani5940]

thanks you brother great video

[@amanrubey]

no bs tutorial. fantastic!

[@hannyvyas3465]

Awesome buddy

[@arnolddogelis3298]

Would be nice to have an option for multi tenancy, essentially only being able to interact with users belonging to a tenant. Unless I am missing something

[@ericngatia3656]

Great videos !!!

[@mubasshirrahaman8053]

Brother make some more short videos like this in Mern / fullstack. You are the best......

[@natab282]

Could you do a video building an online tutoring or appointment booking platform like preply or classgap? Thanks!!

[@Adam2fg]

Hey Adam! It's me, Adam.😂

[@Pixel-gy7qv]

So basicly this FULL-STACK app is just frontend for some third-party api with extra steps...

[@AScholarsVlog]

Chat engine won't let me sign up.

[@AScholarsVlog]

There is no sign up button.

[@kumar3108]

Good One Buddy

[@Lrenteria]

I knew this sounded too good to be true, got stuck at the “scripts” 4:46 - npm run start - it just does find the start script. Moving on!!! It definitely user error but on to the next.

[@tycoon-6616]

u the best man

[@lifefact290]

Video is very great

[@priyamrm]

lol I wanted to do a end to end encrypted one , using a library for this job Won’t cut it 😂 But Nyc video , this can work

[@Cassp0nk]

React strict mode is fine with web sockets. Use them all the time.

[@julianpedrozagarcia8006]

Thanks dude, I was looking for this tutorial a few days ago without a 200 response 😂

[@ElmoPlayss]

12:03 mine doesn't do that. I just get an unclear error which doesn't explain what to do at all.. "app crashed - waiting for file changes before starting..."

[@nyakumawl]

const axios = require("axios"); isn't included in the tutorial as I am a beginner & following along the tutorial, I was constantly getting an error of : "cannot read properties of undefined (reading 'status')".

[@oluwatoyosiolaniyan2599]

Thank you, but please a link to the next video you talked about? as i see other chatapps instead

[@Menße-r2u]

Hey, nice! thank you! is it possible to deploy it on vercel?

[@avisalon4730]

Of course all you shown is pretty cool but as i see all chats data stored in another company DB which is not good idea for commercial usage. You always depends on another company))

[@zorankolac9830]

I'm stuck on 12:20 where you add a new user. When I send Request the terminal hit me with error "TypeError: Cannot read properties of undefined (reading 'status')" What is wrong? In ChatEngine is no users to see.

[@BuffaloBlack]

Same here

[@ONEHLOFIOCHIOCHEME]

@@BuffaloBlack same here

[@ashwinits-s9u]

Same here have you resolve

[@qianning6746]

same.. anyone can help?

[@ysd3055]

great job. awesome comment below

[@SuperYoda7]

Not sure if they changed the docs but now it's 'PRIVATE-KEY' all caps in the headers for authentication

[@Dahlah.FightMe]

Nice :D

[@SylvesterJosueRojas]

Excellent video dude! I recommend you to add some free copyright music for the background meanwhile you're teaching about, divide by sections the video's content. Thanks!

[@mdehsanulhaque4012]

please share the App.css file in src folder i am unable to get it cuz web not loading

[@benayedahmed4869]

Hey there! Great tutorial 👍 I followed along, but I encountered an issue where after submitting the username, the chat page doesn't pop out. Has anyone else experienced this problem, and if so, do you have any suggestions on how to fix it? Thanks in advance for your help!

[@mr.factytech5438]

Best ever seen

[@bangtama9692]

Can you make part 2 about this video , about user can log in or sign up with their password , so excited about your video hope you reply thankss

[@appalaramudusadu6081]

Bro could you please provide only that main screen code

[@hazalasmadev]

I wish we could see how did you build front-end side

[@ramsayveitch1437]

This would also work in a node js and next js stack if you changed the react pages to next js right?

[@RDFContent]

What would be awesome is if someone does this then goes through setting it up in AWS etc.

[@KanishkSingh-in8rw]

Please make a video on how to make websockets too

[@khushiaggarwal9284]

Awesome video🔥

[@heisenberg73215]

can you help me with running this code

[@makarimi2012]

Is it possible to save chat history of website user on a DB not unencrypted so that admin can use it for documentation and analysis?

[@S_U_M_E_R]

For anyone whos copying this, heres an advice: dont. lots of problems and headaches

[@oriowoatinuke5652]

GREAT!

[@oriowoatinuke5652]

please can you recomeded a resource on this? cos i have a project am trying to implement like this so as to submit the soft copy please

[@محمدعبداللهالمؤيدزياد]

Greetings . I am one of the big fans for your videos but I still in the basics level. Anyways please May I ask you some questions first of all the cloning files can we run it directly or it needs editing .secondly if it needs editing can you tell me please the places and the possible code that need to be edit it and if we can run it as it is how we do run it .I mean how we can show that the programme works .please respond as soon as possible

[@pet.me102]

No one is gonna answer this lol. What a dumb question.

[@محمدعبداللهالمؤيدزياد]

@@pet.me102 Oopsie .is my question dumb ? or you can't just answer it ? lamo are you just a idiot ? or rude ? Whatever the question wasn't anyway to ya .SO you're answer is just irrelevent .this questions are only for the video maker .NOT YOUR LIKES CREATURE

[@NazmulHossain_002]

I am having problem sending request on 12.03 minute. It says "nodemon app crashed" Whats the prblem??

[@pratikkaranjit1462]

it means the nodemon is crashing

[@harrishpanneerselvam7989]

@@pratikkaranjit1462 do u know how to fix it

[@icreate6487]

THIS IS NOT WORKING ANYMORE... Payment goes through but keeps saying restore.... email Adam and he is not responding. keeps charging but not working no support at all...

[@AbhishekKumar-ky3uc]

This is not scratch you copy pasted every working module. Like that i can build a project in 2 mins from git repos

[@illyabilan6124]

LoL. Copy-Paste tutorial :)

[@sahilsrivastava8561]

Not able to add members and to chat with them

[@raphauy]

Thank you!!!

[@Blazing_Hotmagma]

you're welcome

[@Mohammadassubaiyal]

stuck at 16:52 and i am unable to run "npm run dev"..help me out

[@Richard-mh4pr]

感谢您的教导，这对我非常有用，非常感谢

[@callmejames1010]

first of all this is a localhost which means it only runs on one computer or multiple computers over the same network? if yes, why would it be useful? unless i could use it on phone all over various network to chat with friends who connect to different wi-fi or other network. is this what developers are making? if i got it wrong please correct me.

[@Karaxhi90]

*PINNED* 19:35 not able to get the new user in the user list what to do now??

[@sudalaimuthusundaram]

yes me to.. chatss.. not displaying

[@prashantkatheriya257]

@@sudalaimuthusundaram did you find the way ??

[@V01D-999]

The term 'yarn' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + yarn dev + ~~~~ + CategoryInfo : ObjectNotFound: (yarn:String) [], CommandNotFoundExcepti on + FullyQualifiedErrorId : CommandNotFoundException

[@hulahup]

Try “npm run dev” instead of “yarn dev”

[@deserteaglegaming9856]

The css file doesn't work

[@atamyrat11]

very good video thanks how to make it online like others can access from their phones, i mean like they are not in a same local network but in one server

[@faisalabdo4600]

when i run it works fine , but the browser gives me a loop of "WebSocket connection to '' failed: WebSocket is closed before the connection is established." errors , any idea why ?