NodeJS Realtime Chat: Build a FULL-STACK app in 27 Minutes! (Best UI 🤩)
Вставка
- Опубліковано 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!
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
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 ;-;
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
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
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.
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
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
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
Learned something new today, thanks
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!
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.
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
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
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🥺🥺
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
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
@@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
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
Thank you bro, I made it , keep going
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
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?
Good video and great channel, def subscribe
merry christmas!!
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
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)
Thank you so much Dude 👍💯
Hey Adam amazing tutorial
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
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
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.
the best project I have done
thanks you brother great video
I love this project brow
Great videos !!!
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?
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?
Cool. But i expected building the chat engine and socket connections from scratch rather than using a framework.
what about Google Firebase BAAS,, for (Auth + Storeage + DB + Serveless) will that illuminate Node + Mongo and all ???
This would also work in a node js and next js stack if you changed the react pages to next js right?
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 ?
Hi, Adam! How to change the time in the chat? I find the timezone need to be change. Thank you!
tried it and it worked
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 :)
Is there a way to customize the styles of the chat window?
Brother make some more short videos like this in Mern / fullstack. You are the best......
Awesome buddy
no bs tutorial. fantastic!
Not sure if they changed the docs but now it's 'PRIVATE-KEY' all caps in the headers for authentication
Could you do a video building an online tutoring or appointment booking platform like preply or classgap? Thanks!!
great job. awesome comment below
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.
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
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
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
This is the world most simplest tutorial i have ever found on UA-cam
Hey Adam! It's me, Adam.😂
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!!!
Thank you, but please a link to the next video you talked about? as i see other chatapps instead
Is that shows unread messages count and state if app is closed and some one opens
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!
from where I do copy the localhost link after downloading the rest client extension?
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!
u the best man
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
how should i use this for one to one
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')".
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
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
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.
Could anyone pls provide the css code(the link is not working).
Thank you
Hello, my webpage doesnt load the webpage fully and has a loading symbol over the conversations. Any help?
Good One Buddy
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))
Video is very great
I get the error: "Uncaught SyntaxError: The requested module '/src/AuthPage.jsx' does not provide an export named 'default'" at 17:01. I've tried digging around for answers, but none have worked yet. Is anyone else having a similar issue?
This response is probably a million years late, BUT maybe it might help someone. In ChatsPage.jsx after const ChatsPage = () => { returnchats... } export default ChatsPage; The export default ChatsPage; was missing
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
ua-cam.com/video/j63iDu9pFdc/v-deo.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!
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
so how do i really learn, what projects should i be doing
which the service is not working at all , and the response is 403 to trheir own api
It gives me a blank white page, after logging in, what do i do?
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
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
how do i connect two users? i am not able to search other users after authentication
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!
Nice :D
I'm getting internal server error everytime i try to make a put request to get/create user
I followed all the steps at the end I couldn't find any users to start a chat even though they exist in My chatengine database, could anyone show me how to fix it?
Hi, I am having some problems, with the last part, I am not able to show the chats or the members, it keeps loading without any advance.
what did you do to fix this
Thanks dude, I was looking for this tutorial a few days ago without a 200 response 😂
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
I wish we could see how did you build front-end side
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
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
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
Try “npm run dev” instead of “yarn dev”
Not able to add members and to chat with them
if I want to deploy this in netlify I can with this exact code ?
having this error TypeError: Cannot read properties of undefined (reading 'status')
anyone please share the css code in app.css file web is unable to load