NodeJS Realtime Chat: Build a FULL-STACK app in 27 Minutes! (Best UI 🤩)
Vložit
- čas přidán 16. 01. 2023
- Here you will build a scalable, realtime chat app with Node JS, React JS, and ChatEngine.io.
Your app will support group chats, 1-on-1 chats, realtime messaging, image and file support, read receipts and more!
Blog post to follow: blog.chatengine.io/fullstack-...
Sign up at Chat Engine: chatengine.io/
Code to clone: github.com/alamorre/fullstack...
Like and leave a comment for any questions and/or requests!
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.
You actually just saved my life i spent so much time on that problem
@900winne4 wanted to help people from getting stuck for an hour and a half like I did 😅
it did not work for me
i spent almost 1 hr thank you so much! it worked finally
Thank you so much dear, your comment helped me❤
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.
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 .
You have a great way of explaining mate, looking forward to more videos :)
Surely i seen many video but this UI is increadible you're a good developper Bro
this is honestly great. keep up the good work
please share the App.css file in src folder i am unable to get it cuz web not loading
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
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.
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!
Have you made it if yes please share the App.css code with me website is unable to load
😂😂😂😂😂
I aint readin allat
for those getting authorization error, you have to use "PRIVATE-KEY" in the header instead of "private-key"
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.
bro please please share the App.css file in src folder i am unable to get cuz web not loading
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
Great video!!! Just what I needed… Thank you very much! Keep up the good work
please share the App.css file in src folder i am unable to get it cuz web not loading
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.
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.
i know right, he basically didn't use any single lib. what a chad.
sarcasm ;-;
Awesome as usual. thanks a lot. waiting for more such incredible videos
please share the App.css file in src folder i am unable to get it cuz web not loading
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!
Learned something new today, thanks
Thanks dude, I was looking for this tutorial a few days ago without a 200 response 😂
Not really from scratch then lol
That's exactly what I was about to say lol
He didn't mention he is doing it from scratch
@@jamaal000131:44
@@jamaal000131:44
@@jamaal00013he did
Woww i really enjoy this man you're soo amazing🥰
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.
you're 100% correct bro
Thanks to this video I could finish my proyect! Thanks, thanks, thanks!!!
please share the App.css file in src folder i am unable to get it cuz web not loading !! Please broooo🥺🥺
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
You gained a sub this tutorial is just a wow!
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
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
bro can you tell me how to run this ? code
@@mrwalterwhite1620 yeah its not running kindly someone help
please share the App.css file in src folder i am unable to get it cuz web not loading !! Please broooo🥺🥺
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!
thank you ,i faced the same issue then i started the server and it worked ( npm run start) at the backend
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.
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
Thank you bro, I made it , keep going
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.
as a software engineer you find it hard to use react?
Hey Adam amazing tutorial
Thank you so much Dude 👍💯
Good video and great channel, def subscribe
merry christmas!!
thanks you brother great video
I love this project brow
You are amazing, dude
Beautiful UI 🤩
please share the App.css file in src folder i am unable to get it cuz web not loading !! Please broooo🥺🥺
share the App.css file
Great videos !!!
Cool. But i expected building the chat engine and socket connections from scratch rather than using a framework.
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
tried it and it worked
Awesome buddy
no bs tutorial. fantastic!
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
Thanks. You just saved me some time.
did you find any video or resource for this? if (true) then can you share ? i need it urgent
please share the App.css file in src folder i am unable to get cuz web not loading
@@saadshafiq8338 did you find anything?
i also need it
@@mdehsanulhaque4012 my request.rest is not connecting what should i do
great job. awesome comment below
Video is very great
I am having problem sending request on 12.03 minute.
It says "nodemon app crashed"
Whats the prblem??
Thank you!!!
you're welcome
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')".
thank you so much was stuck on it for so long
Aaaaa you saved me!!
you saved me bro .Thank you
No problem guys 😅. Once I got stuck in a tutorial for 1 week as I was unable to link my mongodb database🥲
fixed it! thanks!!!
Brother make some more short videos like this in Mern / fullstack. You are the best......
Good One Buddy
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.
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?
@@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!
This would also work in a node js and next js stack if you changed the react pages to next js right?
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?
This is the world most simplest tutorial i have ever found on CZcams
u the best man
thanks mate
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.
Same here
@@BuffaloBlack same here
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
Hi, Adam! How to change the time in the chat? I find the timezone need to be change. Thank you!
Thank you, but please a link to the next video you talked about? as i see other chatapps instead
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
React strict mode is fine with web sockets. Use them all the time.
Awesome!! Thanks for sharing. Would this chat engine work as well for react native ? If so what library am I going to use for that? Also I noticed with the PrettyChatWindow the blue button on the bottom right next to the input does not do anything. For what is it for? Anyone facing the same issue?
感谢您的教导，这对我非常有用，非常感谢
thanks for video, it's very instructif
is it possible to insert this chat in an existing webpage and make it's icon at the bottom write like a live chat app icon ?
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?
For anyone else, this is probably Tokyo Night Storm
@@summerbreeze7550 thanks for sharing :)
thanks bro
what about Google Firebase BAAS,, for (Auth + Storeage + DB + Serveless) will that illuminate Node + Mongo and all ???
thank you
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))
Is there a way to customize the styles of the chat window?
Not sure if they changed the docs but now it's 'PRIVATE-KEY' all caps in the headers for authentication
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!
please share the App.css file in src folder i am unable to get it cuz web not loading
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.
i have done everything as stated in the video, but after logging in, its showing no users available, even though there are 3 users, and i also can add new users by just giving new username in the first page, still no users are been shown in the search box!!!
Hey Adam am yet a beginner in node js. Whenever I try to run my first hello world project in thermal.am always given message module is not found. How can I fix this issue
I completed the full tutorial but at the end i cannot see any chat , there is only basic UI of the website visible. plsss helppppppp
Do I need to install the fonts separately ?
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!
if i wanted to deploy this how do you recommend I go about doing that.. like I would to separate the frontend and and backend right?
Yup! Exactly
czcams.com/video/j63iDu9pFdc/video.html
You can depoly in single domain too.
Or host backend in subdomain & frontend in main domain
Hey broh, did you deploy it, if so pls help me!
Nice :D
Hello, my webpage doesnt load the webpage fully and has a loading symbol over the conversations. Any help?
from where I do copy the localhost link after downloading the rest client extension?
Спасибо за такой крутой контент!!!
Please make a video on how to make websockets too
I can't resolve the part of
const {username} = req.body
It's says Cannot destructure property 'username' of 'req.body' as it is undefined.
Any help please!
if I want to deploy this in netlify I can with this exact code ?
Is that shows unread messages count and state if app is closed and some one opens
Can anyone please help me out? I followed the video along and the auth page where a new user is created or an existing user can access chats works but after auth is done, all I see is a blank page instead of the chat UI. I don't think there is anything wrong with my code but what happens at 23:57 doesn't work for me.
Insert props in 3 line in ChatsPage
const ChatsPage = (props) => {
my chat ui keep loading :/,how did u resolve this ?
I got the same thing. did you solve it
*PINNED*
19:35 not able to get the new user in the user list what to do now??
yes me to.. chatss.. not displaying
@@sudalaimuthusundaram did you find the way ??
So basicly this FULL-STACK app is just frontend for some third-party api with extra steps...
It gives me a blank white page, after logging in, what do i do?
I wish we could see how did you build front-end side
What would be awesome is if someone does this then goes through setting it up in AWS etc.
i am facing an issue bro saying in this file main.jsx import React from 'react';
import ReactDOM from 'react-dom/client';
import App from "./App";
ReactDOM.createRoot(document.getElementById('root')).
render();
Error is:Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'.
Type 'null' is not assignable to type 'Element | DocumentFragment
please help me i have followed your video as u have done same thing i have done in my code then too i am getting this erorr
put it in chatgpt
@@quintin1561 Thankyou So much man I was stuck on this part for so long.
Sir make tutorials on document tracking system web based in MERN Stack with source code
how do i connect two users? i am not able to search other users after authentication
Bro could you please provide only that main screen code
muy bueb video carnal aprendi mucho, benidiciones a la familia, me saludas a tu mami