NodeJS Realtime Chat: Build a FULL-STACK app in 27 Minutes! (Best UI 🤩)
HTML-код
- Опубликовано: 16 янв 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!
![Skilla Baby - Misfits (Feat. Polo G) [Official Video]](http://i.ytimg.com/vi/IjsylSnNMyw/mqdefault.jpg)
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 .
Surely i seen many video but this UI is increadible you're a good developper Bro
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
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
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.
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
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
Learned something new today, thanks
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.
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!
Project built after a whole day of crying. Thank you so much looking forward to the next bit putting it live
Did it take u whole day ,can you tell me the mistakes to be avoided so I can do in short time
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🥺🥺
Woww i really enjoy this man you're soo amazing🥰
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
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
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
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🥺🥺
@@mdehsanulhaque4012 did you get bro
for those getting authorization error, you have to use "PRIVATE-KEY" in the header instead of "private-key"
I did that but still the response is 403 (forbidden)
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
Good video and great channel, def subscribe
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?
Cool. But i expected building the chat engine and socket connections from scratch rather than using a framework.
Thank you bro, I made it , keep going
This would also work in a node js and next js stack if you changed the react pages to next js right?
the best project I have done
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?
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?
Hey Adam amazing tutorial
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 ?
Thank you so much Dude 👍💯
merry christmas!!
what about Google Firebase BAAS,, for (Auth + Storeage + DB + Serveless) will that illuminate Node + Mongo and all ???
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
You are amazing, dude
Hi, Adam! How to change the time in the chat? I find the timezone need to be change. Thank you!
Is there a way to customize the styles of the chat window?
thanks you brother great video
I love this project brow
Great videos !!!
tried it and it worked
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
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
Brother make some more short videos like this in Mern / fullstack. You are the best......
no bs tutorial. fantastic!
This is the world most simplest tutorial i have ever found on RUclips
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!!!
Not sure if they changed the docs but now it's 'PRIVATE-KEY' all caps in the headers for authentication
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!
How would you capture the user that logged in and store his / her session in the local storage so if you by mistake refreshed the page it keeps the user logged in?
You would have to use JWT for this purpose
Awesome buddy
Thank you, but please a link to the next video you talked about? as i see other chatapps instead
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.
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
ruclips.net/video/j63iDu9pFdc/видео.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!
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 :)
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
from where I do copy the localhost link after downloading the rest client extension?
how should i use this for one to one
Is that shows unread messages count and state if app is closed and some one opens
Nice :D
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
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.
感谢您的教导，这对我非常有用，非常感谢
Could anyone pls provide the css code(the link is not working).
Thank you
Can you do real-time video calling?
if I want to deploy this in netlify I can with this exact code ?
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!
u the best man
Do I need to install the fonts separately ?
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 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!
Video is very great
Nice work. though am kind of stuck. everything works perfect untill when i try to start a chat, No user can be seen when i search
Bro could you please provide only that main screen code
Thanks dude, I was looking for this tutorial a few days ago without a 200 response 😂
*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 ??
Thank you!!!
you're welcome
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
Good One Buddy
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..."
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')".
I wish we could see how did you build front-end side
Hello, my webpage doesnt load the webpage fully and has a loading symbol over the conversations. Any help?
What would be awesome is if someone does this then goes through setting it up in AWS etc.
It gives me a blank white page, after logging in, what do i do?
Not able to add members and to chat with them
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))
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
how do i connect two users? i am not able to search other users after authentication
Hey will u add end to end encryption on this project?
U learn how websockets work
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
I am having problem sending request on 12.03 minute.
It says "nodemon app crashed"
Whats the prblem??
it means the nodemon is crashing
React strict mode is fine with web sockets. Use them all the time.
Please make a video on how to make websockets too
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.