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!
![Sean Rii, Karyon, Sharzkii - Taungule [My Love] (Official Music Video)](http://i.ytimg.com/vi/eJoMuypbSzQ/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.
Surely i seen many video but this UI is increadible you're a good developper Bro
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 .
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.
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.
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
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
Learned something new today, thanks
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
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
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🥺🥺
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!
Woww i really enjoy this man you're soo amazing🥰
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
Thank you bro, I made it , keep going
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
You are amazing, dude
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
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 👍💯
Great videos !!!
Good video and great channel, def subscribe
I love this project brow
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
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 you brother great video
Hey Adam amazing tutorial
merry christmas!!
great job. awesome comment below
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
Awesome buddy
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
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
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
tried it and it worked
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
no bs tutorial. fantastic!
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?
u the best man
Good One Buddy
Video is very great
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
Nice :D
Thanks dude, I was looking for this tutorial a few days ago without a 200 response 😂
Thank you!!!
you're welcome
Cool. But i expected building the chat engine and socket connections from scratch rather than using a framework.
Brother make some more short videos like this in Mern / fullstack. You are the best......
thanks bro
thanks mate
感谢您的教导，这对我非常有用，非常感谢
Спасибо за такой крутой контент!!!
Best ever seen
thank you
This is the world most simplest tutorial i have ever found on RUclips
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
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!
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
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
thx
🤪
What would be awesome is if someone does this then goes through setting it up in AWS etc.
React strict mode is fine with web sockets. Use them all the time.
perfect
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
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!
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.
Awesome video🔥
can you help me with running this code
Hey Adam! It's me, Adam.😂
muy bueb video carnal aprendi mucho, benidiciones a la familia, me saludas a tu mami
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))
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 :)
Thank you, but please a link to the next video you talked about? as i see other chatapps instead
Sir make tutorials on document tracking system web based in MERN Stack with source code
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?
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 ?
Please make a video on how to make websockets too
This would also work in a node js and next js stack if you changed the react pages to next js right?
what about Google Firebase BAAS,, for (Auth + Storeage + DB + Serveless) will that illuminate Node + Mongo and all ???
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!!!
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
Not sure if they changed the docs but now it's 'PRIVATE-KEY' all caps in the headers for authentication
Hi, Adam! How to change the time in the chat? I find the timezone need to be change. Thank you!
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!
Is there a way to customize the styles of the chat window?
I wish we could see how did you build front-end side
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.
❤❤❤
Can you do real-time video calling?
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')".
it worked...
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
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
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!
from where I do copy the localhost link after downloading the rest client extension?
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
Hello, my webpage doesnt load the webpage fully and has a loading symbol over the conversations. Any help?