@Techthology 3 жыл бұрын
*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!
@aniketbhusal3489 2 жыл бұрын
its still not working
@uneeqdev 2 жыл бұрын
If you are using firebase v9 the codes will not work
@tanmaymahato2202 2 жыл бұрын
@@uneeqdev how to fix it then
@haxandnewswithmax4840 2 жыл бұрын
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.
@haxandnewswithmax4840 2 жыл бұрын
@@tanmaymahato2202 u still need help? I can make a 30 sec vid on it and send it to you.
@atulpatil2289 2 жыл бұрын
Thank you so much brother, completed the project today, Keep helping and motivating. Big love from INDIA.
@divanshusharma5942 2 жыл бұрын
bro can you help me actually my messages are still not showing on screen , even after creating new field , what to do ?
@__status_zone__0763 6 ай бұрын
Bro why error coming whensetting up npx create-react-app?
@spifet 2 жыл бұрын
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.
@abhishekvayam8449 2 жыл бұрын
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-or1bu 2 жыл бұрын
You won not just the subs but heart as well brother
@eliashelfand493 3 жыл бұрын
Awesome tutorial, thx for helping me, u deserve more views and subs, keep up the good content!
@jaypatel6770 2 жыл бұрын
superb tutorial and repo is working properly it helps me soooooo muchhhhh
@NarrowedPath 2 жыл бұрын
Literally killed your like button! Thanks man.
@munteanudan5838 2 жыл бұрын
Awesome content brother. Waiting for continue with delete and edit functionality, it will be great!
@AntOn_BrandOn_RufUs 3 жыл бұрын
That's awesome! Thanks a lot)) Waiting for new videos, cheers!)
@Techthology 2 жыл бұрын
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.
@nelubelei9330 2 жыл бұрын
yeah but at this point you need to rewrite some code to make things work
@JoRo-Code 2 жыл бұрын
"import firebase from 'firebase/compat'", might solve the issue! adding '/compat' to be backwards compatible :)
@Techthology 2 жыл бұрын
@@JoRo-Code Sorry for the late reply, but that answer is way better than mine, thank you!
@tunde6159 Жыл бұрын
Excellent tutorial. Thank you.
@mohammedsahil9596 2 жыл бұрын
learnt a lot thankyou brother
@rneumediamanila 3 жыл бұрын
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)
@Techthology 3 жыл бұрын
This is definitely a possibility, thanks for the idea!
@shubhamsharma0099 2 жыл бұрын
i also need to learn this full featured app from you after this great tutorial.....thanks in advanced
@king_haku 3 жыл бұрын
sweet video!
@blazi_0 3 жыл бұрын
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 !
@Techthology 3 жыл бұрын
Haha, i cut the video off. In reality it took me 10 minutes 😅
@dubbacteria8095 3 жыл бұрын
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 ?
@Techthology 3 жыл бұрын
@@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).
@dubbacteria8095 3 жыл бұрын
@@Techthology Thank you for the fast answer, i'm gonna look at this ♥
@blazi_0 3 жыл бұрын
@@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
@georgesword2012 3 жыл бұрын
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?
@jmoirnz 2 жыл бұрын
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!
@Techthology 2 жыл бұрын
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.
@gautamkanzariya8651 2 жыл бұрын
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.
@nastyaboiko6292 2 жыл бұрын
Thank you so much for the video! Could you make the code field bigger next time? The firebase part could be much smaller :)
@johnkucharsky6927 2 жыл бұрын
You're beautifull
@Techthology 2 жыл бұрын
I do see how cramped it is now, thank you for the suggestion!
@yanopsss388 2 жыл бұрын
@@Techthology hi sir where can I contact u, I need help
@minhluudinh5522 2 жыл бұрын
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
@michaelguerrero1407 2 жыл бұрын
it worked good ,i like this app
@sydneyroseenglish 2 жыл бұрын
after 'npm install' and 'npm start,' why isn't it working properly?
@reactteamwdp7648 2 жыл бұрын
thank you so much sir ❣
@georgenagy52 3 жыл бұрын
You are the Best Very Very Very Thank you. Thank You
@Techthology 3 жыл бұрын
Thanks for watching!
@lamnguyenhuuphuc2203 3 жыл бұрын
thank you for your content, sorry if my question is stupid but I kinda missed how you connect the two users together :D?
@Techthology 3 жыл бұрын
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!
@shubhamsharma0099 2 жыл бұрын
Great video sir please make a video on making a chat app React and AWS Database... pls i'm waiting for you.
@consectial 3 жыл бұрын
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' ?
@Techthology 3 жыл бұрын
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’
@atulpatil2289 2 жыл бұрын
@@Techthology I have write import { Button } from '@material-ui/core' still saying Module not found: Can't resolve '@material-ui/core'
@manishswami7512 2 жыл бұрын
npm install @material-ui/core
@consectial 2 жыл бұрын
@@Techthology Thanks! Now I can complete chat app. Thanks for the tutorial!
@ArturCarvalho 2 жыл бұрын
Thank you for the video! Quick question, why are you using firestore database instead of realtime database? Thanks!
@Techthology 2 жыл бұрын
No problem! Firestore is faster than realtime database, and it’s structure of documents works better when scaling up.
@Gilltrick 2 жыл бұрын
Would it be possible to realize the same without database? For example: I dont want my messages stored in theyr Database.
@pepi8433 2 жыл бұрын
@Vivaan K. and how you add to the site? and make money?
@chrissame 3 жыл бұрын
If I don't want Google to sign me in automatically how do I correct that?
@Techthology 3 жыл бұрын
You can right click on the page, press inspect, go to storage and press ‘clear site data’
@GameVerse49 3 жыл бұрын
i have a error Can't resolve 'firebase' in 'D:\Reacr firebase chat app\firechat\src'
@Techthology 3 жыл бұрын
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.
@sankalpjain2983 2 жыл бұрын
@@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
@Techthology 2 жыл бұрын
@@sankalpjain2983 Thank you! I will post this answer and pin it
@reactteamwdp7648 2 жыл бұрын
@@sankalpjain2983 Thank you so much sir
@nr8421 2 жыл бұрын
Was looking forward to this but there are wayyyyy too many issues around importing the firebase modules
@timothydoan2 2 жыл бұрын
so true and its very disappointing
@ozan546 2 жыл бұрын
thank you very much
@13Daniel37 3 жыл бұрын
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.
@13Daniel37 3 жыл бұрын
Just figured it out. Thanks for the video bud
@Techthology 3 жыл бұрын
No problem!
@GameVerse49 3 жыл бұрын
× TypeError: Cannot read property 'collection' of undefined error please solve
@warmogs3955 2 жыл бұрын
Firebase recently updated to v9 so most of what you're doing here will cause errors :( Great video nonetheless!
@Techthology 2 жыл бұрын
Well you can download the old versions of firebase for this still to work
@gauravjadhav1286 2 жыл бұрын
Download old version
@divanshusharma5942 2 жыл бұрын
@@gauravjadhav1286 which old version to download , COZ am allready started getting error
@user-uz6pu2wv2x 2 жыл бұрын
thank you very much)))
@saumyasah9800 3 жыл бұрын
thank you very much sir
@Techthology 3 жыл бұрын
Thanks for watching!
@Lotpite 2 жыл бұрын
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
@fastfacts4746 3 жыл бұрын
Bro without react please get a tutorial for us
@Techthology 3 жыл бұрын
That’s a good idea, thanks!
@Gilltrick 2 жыл бұрын
Build own Database, Encryption, Authentification, Server. Lets say all you need from scratch made by yourself? Check out my content.
@BISWAJITMONDAL-zs3mz 3 жыл бұрын
thank you sir but my profile not showing. why??? plz help me
@Techthology 3 жыл бұрын
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-xg3ix 9 ай бұрын
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?
@yamunanaramsetti5418 10 ай бұрын
No output, what is the reason?
@nilanjanchanda597 2 жыл бұрын
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
@luc7106 2 жыл бұрын
hey, i'm following yt tutorial for chat app and images sometimes show up and sometimes don't thanks.
@Techthology 2 жыл бұрын
Hi, are you talking about the profile pictures?
@luc7106 2 жыл бұрын
@@Techthology yep
@Techthology 2 жыл бұрын
@@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
@thiluxansubramaniam3051 2 жыл бұрын
Is there any ways to add a notification system when a chat message is received
@hilarion_aggey 3 жыл бұрын
Please tell me, in this application have you used hooks?
@Techthology 3 жыл бұрын
Yup!
@tejashwinikhot6917 6 ай бұрын
My reactjs project not loading it's showing white screen
@tejashwinikhot6917 6 ай бұрын
Plz reply me
@shouhardik09 2 жыл бұрын
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
@anonymoussaif7361 2 жыл бұрын
Why onsnapshot function is not working 😔😔😔😔
@Hayden-Healthy-Lifestyle 2 жыл бұрын
how to send messages to another user?
@bluzenkk Жыл бұрын
can you make a drawing react app like Miro Tutorial?
@manishswami7512 2 жыл бұрын
My Firestore shows thousands of read requests any suggestions.
@user-yh8bk4fj3n 2 жыл бұрын
شكرا
@icodegfx4444 Жыл бұрын
Is it dangerous that this exposes our Firbase API key?
@nidhitelisara6464 2 жыл бұрын
Hey actually my google id is logged in but I want to logout and open a new id.. how do I do that?
@Techthology 2 жыл бұрын
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
@yannsqr5196 2 жыл бұрын
Thank you for this video. It really help me. Do you know if it's possible to get our google's username ?
@Techthology 2 жыл бұрын
Thank you for your support, and I believe it is possible under displayName
@lovleshsingh793 3 жыл бұрын
Why can't we add new line in chat?
@Techthology 3 жыл бұрын
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!
@lovleshsingh793 3 жыл бұрын
@@Techthology I tried with textarea tag but still no luck
@Techthology 3 жыл бұрын
@@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.
@lovleshsingh793 3 жыл бұрын
@@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.
@Techthology 3 жыл бұрын
@@lovleshsingh793 Oh I didn’t know that. Sorry then, I’m out of ideas.
@johnkucharsky6927 2 жыл бұрын
Hello, why have you stopped doing videos? You would have had 60k subscribers by now. It's a great tutorial
@Techthology 2 жыл бұрын
A lot of homework! But thank you for your support, I'll try to get back into it :)
@Arabicstone7 2 жыл бұрын
Is it group chat?
@__status_zone__0763 6 ай бұрын
Can anyone tell me is firebase paid or free? For Authentication
@yanopsss388 2 жыл бұрын
The authentication isnt working
@valquirsouza1329 2 жыл бұрын
Same, in fact it works on my machine but when deployed it doesn't, did you manage to fix it ?
@yashpanchal8743 2 жыл бұрын
Can you tell, What version of node js you used?
@yashpanchal8743 2 жыл бұрын
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-Lomar 11 ай бұрын
💕💕💕🥰🥰🥰💓💓🥰🥰💕💕💕💕💕💕💕
@synctax1017 2 жыл бұрын
WHERE IS THE LINK TO FIRBASE
@anonvindeux6240 2 жыл бұрын
already outdated.
@craigdillon-jones1080 3 жыл бұрын
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.
@Techthology 3 жыл бұрын
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.
@darkcry69 2 жыл бұрын
did you find the bug as I am facing the same issue.
@enderman8275 2 жыл бұрын
@@darkcry69 is this the solution ?
@cyberguygame9096 2 жыл бұрын
@@enderman8275 Nope doesnt work
@cyberguygame9096 2 жыл бұрын
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
@vinayakporwal9885 2 жыл бұрын
./src/App.js Module not found: Can't resolve 'react-firebase-hooks/auth' in .. in am getting these error can you help about these
@vinayakporwal9885 2 жыл бұрын
fixed 👍
@afolabiopeyemim.525 2 жыл бұрын
@@vinayakporwal9885 Hi, I am currently experiencing this. Please how did you fix yours?
@cyberguygame9096 2 жыл бұрын
@@vinayakporwal9885 boy it hate people just writing "fixed" bro we need the solution
@enderman8275 2 жыл бұрын
./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
@Techthology 2 жыл бұрын
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.
@em33b 3 жыл бұрын
Thanks so much
@Techthology 3 жыл бұрын
No problem!
@mdabdurrahman6899 2 жыл бұрын
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)
@Techthology 2 жыл бұрын
Thanks for the idea!
@10thGenPSIS 2 жыл бұрын
I keep getting this error. (Uncaught TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.auth is not a function)
@Techthology 2 жыл бұрын
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
Jason Derulo
Рет қаралды 36 МЛН
Adam La Morre
Рет қаралды 750 М.
Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More
JavaScript Mastery
Рет қаралды 1,9 МЛН
EdRoh
Рет қаралды 1,5 МЛН
Sonny Sangha
Рет қаралды 417 М.
JavaScript Mastery
Рет қаралды 945 М.