*ATTENTION*: If you are having an error that the messages are not showing up, even after changing the firebase permissions, make sure to add a 'createdAt' field in firebase next to the 'text' field, and set the value of that field to timestamp. This should fix the error, and if you have any questions, feel free to comment down below!
@aniketbhusal34892 жыл бұрын
its still not working
@uneeqdev2 жыл бұрын
If you are using firebase v9 the codes will not work
@tanmaymahato22022 жыл бұрын
@@uneeqdev how to fix it then
@haxandnewswithmax48402 жыл бұрын
Thank you so much, I literally spents days on this and rewrote my entire code from scratch, just because I thought I had made a mistake ;-; I just needed to check the comments.
@haxandnewswithmax48402 жыл бұрын
@@tanmaymahato2202 u still need help? I can make a 30 sec vid on it and send it to you.
@atulpatil22892 жыл бұрын
Thank you so much brother, completed the project today, Keep helping and motivating. Big love from INDIA.
@divanshusharma59422 жыл бұрын
bro can you help me actually my messages are still not showing on screen , even after creating new field , what to do ?
@__status_zone__07636 ай бұрын
Bro why error coming whensetting up npx create-react-app?
@spifet2 жыл бұрын
Very good tutorial! The first thing I want to say is that Nastya Boiko is right, showing the code in full screen or at least in a big font is useful, especially for those of us that copy while watching to learn. Second, regarding the photo URL in the Firebase user field that is missing in the video: messages collection should have each message to contain text, photo URL, uid as strings (you can make the first one empty) and createdAt to be a timestamp (just select the date of today for the first message). Then login into your app and send another message and it will work. You can always delete the first message if created a second one.
@abhishekvayam84492 жыл бұрын
if you are getting any error in import firebase use this import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore';
@minkhantsaw0428 Жыл бұрын
Thanks 🥰
@AshrafulIslam-or1bu2 жыл бұрын
You won not just the subs but heart as well brother
@eliashelfand4933 жыл бұрын
Awesome tutorial, thx for helping me, u deserve more views and subs, keep up the good content!
@jaypatel67702 жыл бұрын
superb tutorial and repo is working properly it helps me soooooo muchhhhh
@NarrowedPath2 жыл бұрын
Literally killed your like button! Thanks man.
@munteanudan58382 жыл бұрын
Awesome content brother. Waiting for continue with delete and edit functionality, it will be great!
@AntOn_BrandOn_RufUs3 жыл бұрын
That's awesome! Thanks a lot)) Waiting for new videos, cheers!)
@Techthology2 жыл бұрын
If you are getting the bug, ‘can’t resolve firebase in ...’, then try looking at the reply on this comment by Jonas Rosengren! If that doesn't work then: Go into your terminal or command prompt and run ‘npm uninstall firebase’, then run ‘npm install firease@8.10.0’, and finally run ‘npm clear cache’. This is because firebase has recently updated to v9, so you have to download an older version.
@nelubelei93302 жыл бұрын
yeah but at this point you need to rewrite some code to make things work
@JoRo-Code2 жыл бұрын
"import firebase from 'firebase/compat'", might solve the issue! adding '/compat' to be backwards compatible :)
@Techthology2 жыл бұрын
@@JoRo-Code Sorry for the late reply, but that answer is way better than mine, thank you!
@tunde6159 Жыл бұрын
Excellent tutorial. Thank you.
@mohammedsahil95962 жыл бұрын
learnt a lot thankyou brother
@rneumediamanila3 жыл бұрын
Can you make this as a series? Next , how to make this as a full featured chat app where users can choose who to chat with (online and offline contacts)
@Techthology3 жыл бұрын
This is definitely a possibility, thanks for the idea!
@shubhamsharma00992 жыл бұрын
i also need to learn this full featured app from you after this great tutorial.....thanks in advanced
@king_haku3 жыл бұрын
sweet video!
@blazi_03 жыл бұрын
11:50 yep , i spent 2 hours to find whats cousing that bug ,omg it took you 20 seconds to write that /auth but for me 2hours !
@Techthology3 жыл бұрын
Haha, i cut the video off. In reality it took me 10 minutes 😅
@dubbacteria80953 жыл бұрын
Sadly i'm getting an error message "Error: Invalid hook call. Hooks can only be called inside of the body of a function component". I have no idea why it's not working since i copied everything in this video. Any idea please ?
@Techthology3 жыл бұрын
@@dubbacteria8095 Make sure you are not declaring the hooks inside a nested function, and that you are declaring all the hooks inside the React function(these are the ‘rules of hooks’ that you can find in the React documentation). Also make sure you don’t have two Reacts inside your application(two ‘node_modules’ folders).
@dubbacteria80953 жыл бұрын
@@Techthology Thank you for the fast answer, i'm gonna look at this ♥
@blazi_03 жыл бұрын
@@dubbacteria8095 hi brother when you use useEffect or useState hook you have to use it inside the function not outside Like Function App(){ Use hooks here return(jsx) { I hope this helps, tell me when u have problem
@georgesword20123 жыл бұрын
This is great tutorial 👍👍👍
@jonaspetty8767 Жыл бұрын
amazing tutorial
@annsusan2771 Жыл бұрын
I have copy pasted everything from the github except the keys, still my react page is blank. Why is it so? What should I do?
@jmoirnz2 жыл бұрын
hey dude, amazing video and great tutorial! I have one question. are two separate accounts able to sign in at the same time? still learning react/webdev so not 100% sure if that was possible!
@Techthology2 жыл бұрын
Sorry for the late reply, I’ve been really busy. Yes you can sign in to two separate accounts at the sane time, however this is only possible because of Firebase.
@gautamkanzariya86512 жыл бұрын
please close the browser window when recording video.We can not read all contents of editor if two windows are opened side by side.only keep one video opened at a time.
@nastyaboiko62922 жыл бұрын
Thank you so much for the video! Could you make the code field bigger next time? The firebase part could be much smaller :)
@johnkucharsky69272 жыл бұрын
You're beautifull
@Techthology2 жыл бұрын
I do see how cramped it is now, thank you for the suggestion!
@yanopsss3882 жыл бұрын
@@Techthology hi sir where can I contact u, I need help
@minhluudinh55222 жыл бұрын
Dude, at 21:30 you clicked outside and then your data in firebase magically has the "createdAt" field. WTF?
@dynast7550 Жыл бұрын
npx : The term 'npx' 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 + npx create-react-app cybertext + ~~~ + CategoryInfo : ObjectNotFound: (npx:String) [], Comma ndNotFoundException + FullyQualifiedErrorId : CommandNotFoundException literally before i even get started idk how fix
@michaelguerrero14072 жыл бұрын
it worked good ,i like this app
@sydneyroseenglish2 жыл бұрын
after 'npm install' and 'npm start,' why isn't it working properly?
@reactteamwdp76482 жыл бұрын
thank you so much sir ❣
@georgenagy523 жыл бұрын
You are the Best Very Very Very Thank you. Thank You
@Techthology3 жыл бұрын
Thanks for watching!
@lamnguyenhuuphuc22033 жыл бұрын
thank you for your content, sorry if my question is stupid but I kinda missed how you connect the two users together :D?
@Techthology3 жыл бұрын
There is multiple users in this app. If you uploaded this to the web, anyone with the link could sign in and message. The messages are viewed by everyone, since they are uploaded to the database when someone sends a message and taken from the database when someone enters the app. And no question is stupid, thanks for watching!
@shubhamsharma00992 жыл бұрын
Great video sir please make a video on making a chat app React and AWS Database... pls i'm waiting for you.
@consectial3 жыл бұрын
Good tutorial! Easy to follow. I like it! sorry if my question is unable to fix.... but why my website says Module not found: Can't resolve '@material-ui/core' ?
@Techthology3 жыл бұрын
Thanks! For your bug, make sure have installed ‘@material-ui’. If you have, look at your imports, and change anything like ‘import Input from ‘@material-ui/core’ to ‘import { Input } from ‘@material-ui/core’
@atulpatil22892 жыл бұрын
@@Techthology I have write import { Button } from '@material-ui/core' still saying Module not found: Can't resolve '@material-ui/core'
@manishswami75122 жыл бұрын
npm install @material-ui/core
@consectial2 жыл бұрын
@@Techthology Thanks! Now I can complete chat app. Thanks for the tutorial!
@ArturCarvalho2 жыл бұрын
Thank you for the video! Quick question, why are you using firestore database instead of realtime database? Thanks!
@Techthology2 жыл бұрын
No problem! Firestore is faster than realtime database, and it’s structure of documents works better when scaling up.
@Gilltrick2 жыл бұрын
Would it be possible to realize the same without database? For example: I dont want my messages stored in theyr Database.
@pepi84332 жыл бұрын
@Vivaan K. and how you add to the site? and make money?
@chrissame3 жыл бұрын
If I don't want Google to sign me in automatically how do I correct that?
@Techthology3 жыл бұрын
You can right click on the page, press inspect, go to storage and press ‘clear site data’
@GameVerse493 жыл бұрын
i have a error Can't resolve 'firebase' in 'D:\Reacr firebase chat app\firechat\src'
@Techthology3 жыл бұрын
Make sure to run ‘npm install firebase’ in your firechat folder. If you already have, you might have two versions of firebase so try creating another app using ‘npx create-react-app app-name’ and replacing the default ‘src’ folder with your old ‘src’ folder.
@sankalpjain29832 жыл бұрын
@@Techthology found a solution. You can uninstall firebase, and install an older version. Doing the following steps worked for me: npm uninstall firebase npm i firebase@^8.10.0 npm clear cache
@Techthology2 жыл бұрын
@@sankalpjain2983 Thank you! I will post this answer and pin it
@reactteamwdp76482 жыл бұрын
@@sankalpjain2983 Thank you so much sir
@nr84212 жыл бұрын
Was looking forward to this but there are wayyyyy too many issues around importing the firebase modules
@timothydoan22 жыл бұрын
so true and its very disappointing
@ozan5462 жыл бұрын
thank you very much
@13Daniel373 жыл бұрын
Hey, please I have been trying to figure out one thing. How can I achieve that, so I can show messages only from the current user that is logged in ? (not for chat app, but for Todo list). Cant seem to figure it out. Amazing tutorial by the way.
Firebase recently updated to v9 so most of what you're doing here will cause errors :( Great video nonetheless!
@Techthology2 жыл бұрын
Well you can download the old versions of firebase for this still to work
@gauravjadhav12862 жыл бұрын
Download old version
@divanshusharma59422 жыл бұрын
@@gauravjadhav1286 which old version to download , COZ am allready started getting error
@user-uz6pu2wv2x2 жыл бұрын
thank you very much)))
@saumyasah98003 жыл бұрын
thank you very much sir
@Techthology3 жыл бұрын
Thanks for watching!
@Lotpite2 жыл бұрын
Hi ) project on git misses the material-ui/core package (required to install it mannualy). If it possible - please, add it to dev dependencies ^_^ because project is so good
@fastfacts47463 жыл бұрын
Bro without react please get a tutorial for us
@Techthology3 жыл бұрын
That’s a good idea, thanks!
@Gilltrick2 жыл бұрын
Build own Database, Encryption, Authentification, Server. Lets say all you need from scratch made by yourself? Check out my content.
@BISWAJITMONDAL-zs3mz3 жыл бұрын
thank you sir but my profile not showing. why??? plz help me
@Techthology3 жыл бұрын
Try comparing your code with the code in the GitHub repository
@niksh2059 Жыл бұрын
Hey Guys, where do we host this ? does it have to be cloud hosting for the messages to be real time ? (without any lag)
@VinayKrishnamurthy-xg3ix9 ай бұрын
Hi nice video. You have displayed the google accounts image how can I get the email id of the account user I want to display that also witht the image tag?
@yamunanaramsetti541810 ай бұрын
No output, what is the reason?
@nilanjanchanda5972 жыл бұрын
why the createdAt is not showing in my case did same
@NewAgeWallStreet Жыл бұрын
Is there a way to make an app like this for a bubble website? Thank you
@luc71062 жыл бұрын
hey, i'm following yt tutorial for chat app and images sometimes show up and sometimes don't thanks.
@Techthology2 жыл бұрын
Hi, are you talking about the profile pictures?
@luc71062 жыл бұрын
@@Techthology yep
@Techthology2 жыл бұрын
@@luc7106 Have you checked the console to see if there is any errors? If not, it could just be a loading issue on your end
@thiluxansubramaniam30512 жыл бұрын
Is there any ways to add a notification system when a chat message is received
@hilarion_aggey3 жыл бұрын
Please tell me, in this application have you used hooks?
@Techthology3 жыл бұрын
Yup!
@tejashwinikhot69176 ай бұрын
My reactjs project not loading it's showing white screen
@tejashwinikhot69176 ай бұрын
Plz reply me
@shouhardik092 жыл бұрын
All your code is older version of firebase ! I am getting errors in many lines...some are resolving and some not while referring to newer docs
@kigakiga6543 Жыл бұрын
@Vivaan K.i'll try this asap
@anonymoussaif73612 жыл бұрын
Why onsnapshot function is not working 😔😔😔😔
@Hayden-Healthy-Lifestyle2 жыл бұрын
how to send messages to another user?
@bluzenkk Жыл бұрын
can you make a drawing react app like Miro Tutorial?
@manishswami75122 жыл бұрын
My Firestore shows thousands of read requests any suggestions.
@user-yh8bk4fj3n2 жыл бұрын
شكرا
@icodegfx4444 Жыл бұрын
Is it dangerous that this exposes our Firbase API key?
@nidhitelisara64642 жыл бұрын
Hey actually my google id is logged in but I want to logout and open a new id.. how do I do that?
@Techthology2 жыл бұрын
So sorry for the late, reply, I've been very busy but if you are still interested in the answer, I believe you can do this by opening the console in google chrome or whatever browser, and then going ot the application page. Once you get there click storage and then clear site data
@yannsqr51962 жыл бұрын
Thank you for this video. It really help me. Do you know if it's possible to get our google's username ?
@Techthology2 жыл бұрын
Thank you for your support, and I believe it is possible under displayName
@lovleshsingh7933 жыл бұрын
Why can't we add new line in chat?
@Techthology3 жыл бұрын
The reason is we enter the information through an ‘input’ tag, which can’t have multiple lines. If you want to have multiple lines, you can enter the information through a ‘textarea’ tag. Thanks for watching!
@lovleshsingh7933 жыл бұрын
@@Techthology I tried with textarea tag but still no luck
@Techthology3 жыл бұрын
@@lovleshsingh793 You would also have to remove the onSubmit from the form and add an onClick to the button tag and run the function there. The reason is the onSubmit runs when you click the enter key. Remove type=‘submit’ from the button.
@lovleshsingh7933 жыл бұрын
@@Techthology I tried that as well, but here is catch, firestore database & realtime database doesn't store strings in two or more lines, even though if we send strings in two lines it will store in one line, so when we fetch the string it retrieves in one.
@Techthology3 жыл бұрын
@@lovleshsingh793 Oh I didn’t know that. Sorry then, I’m out of ideas.
@johnkucharsky69272 жыл бұрын
Hello, why have you stopped doing videos? You would have had 60k subscribers by now. It's a great tutorial
@Techthology2 жыл бұрын
A lot of homework! But thank you for your support, I'll try to get back into it :)
@Arabicstone72 жыл бұрын
Is it group chat?
@__status_zone__07636 ай бұрын
Can anyone tell me is firebase paid or free? For Authentication
@yanopsss3882 жыл бұрын
The authentication isnt working
@valquirsouza13292 жыл бұрын
Same, in fact it works on my machine but when deployed it doesn't, did you manage to fix it ?
@yashpanchal87432 жыл бұрын
Can you tell, What version of node js you used?
@yashpanchal87432 жыл бұрын
Because it show error during installing material-ui
@kigakiga6543 Жыл бұрын
@@yashpanchal8743 same problem as me
@kigakiga6543 Жыл бұрын
@@yashpanchal8743 do you find the way to solve that ?
@NewAgeWallStreet Жыл бұрын
Is there anyone here that is for hire that would like to build this for me pls
@BennyElimelech Жыл бұрын
The code is HERE .. What you need?
@S-Lomar11 ай бұрын
💕💕💕🥰🥰🥰💓💓🥰🥰💕💕💕💕💕💕💕
@synctax10172 жыл бұрын
WHERE IS THE LINK TO FIRBASE
@anonvindeux62402 жыл бұрын
already outdated.
@craigdillon-jones10803 жыл бұрын
This was just what i was looking for, but i keep getting the following error message './src/firebase.js Module not found: Can't resolve 'firebase' in' and then it specifies the location, which is where it is. I have checked and checked and checked, and it all seems as yours is.
@Techthology3 жыл бұрын
Hi, sorry for the late reply. Make sure to run npm install firebase. If you already have, you might have two versions of firebase so try creating another app using ‘npx create-react-app app-name’ and replacing the default ‘src’ folder with your old ‘src’ folder.
@darkcry692 жыл бұрын
did you find the bug as I am facing the same issue.
@enderman82752 жыл бұрын
@@darkcry69 is this the solution ?
@cyberguygame90962 жыл бұрын
@@enderman8275 Nope doesnt work
@cyberguygame90962 жыл бұрын
that is working import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore';
@superyura6457 Жыл бұрын
I was having a lot of trouble installing material UI, seems like it doesnt want to play nice with react v18 These commands helped me fix that npm install @mui/material @mui/styled-engine-sc styled-components npm install @emotion/react npm install @emotion/styled
@vinayakporwal98852 жыл бұрын
./src/App.js Module not found: Can't resolve 'react-firebase-hooks/auth' in .. in am getting these error can you help about these
@vinayakporwal98852 жыл бұрын
fixed 👍
@afolabiopeyemim.5252 жыл бұрын
@@vinayakporwal9885 Hi, I am currently experiencing this. Please how did you fix yours?
@cyberguygame90962 жыл бұрын
@@vinayakporwal9885 boy it hate people just writing "fixed" bro we need the solution
@enderman82752 жыл бұрын
./src/firebase.js Module not found: Can't resolve 'firebase' in '/Users/XXX/Desktop/chat/src' getting this error even after installing firebase and react-firebase-hooks any solution? Thanks
@Techthology2 жыл бұрын
I would say try copying your src folder, deleting the app and then using create-react-app and pasting your new src folder to replace the old one. Then run ‘npm install’ in the new app to install all the dependencies.
@em33b3 жыл бұрын
Thanks so much
@Techthology3 жыл бұрын
No problem!
@mdabdurrahman68992 жыл бұрын
Can you make this as a series? Next , how to make this as a full featured chat app where users can choose who to chat with (online and offline contacts)
@Techthology2 жыл бұрын
Thanks for the idea!
@10thGenPSIS2 жыл бұрын
I keep getting this error. (Uncaught TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.auth is not a function)
@Techthology2 жыл бұрын
Hi, sorry for the late reply. I do not know enough of your error to answer this sadly, but try to compare your code to the code in the GitHub repo and look for any differences