can you help me bro , when I write that, const [ user, loading ] = useAuthState(auth); this message is shown to me : auth.onAuthStateChanged is not a function i don't why
Amazing energy. I'm an experienced backend developer however relatively new to React - just over halfway and loving this build so far. Keep up the good work Sonny.
thanks for the great content! If someone is getting this error: Module not found: Error: Package path . is not exported from package try this in the firebase.js file import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore'; it worked for me:)
Thanks, and for correct working GoogleAuthProvider i add, import { GoogleAuthProvider } from "firebase/auth"; and replace const provider = firebase.auth.GoogleAuthProvider(); on const provider = new GoogleAuthProvider();
Nice tutorial. Recently in our office we tried to implement a Full Office Messaging Clone with a look of Slack. Though we succeeded in making the frontend with ease (it was done in Electron React) the messaging backend engine which could perform at scale was very difficult and needed quite a lot of research. Still there are cracks! But all in all good experience. So the take away what i got was, frontend could be materialized easily but to make a full product it takes whole lot more than just a simple tutorial.
Hey sunny. Pretty awesome stuff. You are literally helping lot developers to make there careers. I have a small request, if you get some time please make a detailed video on ReactJs testing. I know its very important, and I am having pretty tough time on it, and I believe so does other developers. Thanks man for everything you are giving for free.
Just discovered this channel. I followed a bunch of the clones last year with Clever Programmer and honestly I got extremely annoyed by the constant yelling and interrupting during the whole videos. You were constantly interrupted and it just disrupted the whole flow for me. They were almost impossible to watch and enjoy but I watched it because you and the content itself was soooo worth it. But THIS is ideal. I’m literally so excited to find your channel. This is the best of both worlds!!! Thank you so so so much for this - you were the best part of clever programmer and I wouldn’t watch without you! No hate to the clever programmer team - the content was always pure gold. Especially for free!
Papa FAM is the best community in the world. and we have the best teacher. Sonny you are blessed with coaching talent. Keep up this positive energy guys. I never in a million years figured I would be able to learn this stuff so fast.
sonny you killed it man .You are providing awesome content . Only thing got positive in my life during this corona is YOUR VIDEOS,TUTORIALS,CLONE BUILDS and now you are deleivering the styled components
Man I'm so glad you broke off to do your own thing. I think it's much better quality and more focused when you're solo doing your own thing. Good for you, dude and thanks for all the content.
Amazed by your work but it is just the Slack interface with the chatrooms as the only functionality. I would like to see more than the chat (same as the facebook tutorial), more functionality and responsiveness! Good work on this part though, I've learned a lot, thanks!
It feels good to listen Sonny building the app from the scratch without Qazi irritating. I hate those build where everytime Qazi was disturbing and talking shit. But this build is amazing.
Wow That's Amazing 👏 😍. Expecting MS TEAMS Clone in the future. I am working on it but as a newbie I am not really getting it. I learned a lot from this tutorial. Thanks, Love from Pakistan 🇵🇰
1st of all, thank you so much for this tutorial. 2nd for people watching it now, firebase's sdk has changed a bit so refer to the docs and change accordingly. Update: The react-firebase-hooks is not yet compatible with firebase 9.0. Update 2: react-firebase-hooks now supports Firebase v9.
Honestly man, i learn so much with this project, i going to recreate more things like this, really like. Your a genius, thanks for sharing your knowledge
can someone help . at 1:10:44 , i am importing sidebar icons and using them as components , but it's not showing up on the screen. anyone know what the issue might be?
I could do almost everything apart from the real time update of the UI on sending chat. This is because I had to fall back on the traditional way as orderBy was not available on firestore latest version. I am getting useeffect loop if I try to update data realtme on ui
Hey Sonny. Just started this vid and wanting to follow along. Is there a reason that when I look at my counterSlice.js file the code is completely different from what is in your counterSlice.js file. How do i go about resolving that.
i have a question stucked in my mind for so long . what makes a 3-5 year experienced react developer different from a fresh react developer ....as both have studied and learnt the same concepts of javascript ,react, html, css . I mean ... a fresh react developer can also do the stuff which a 3-5 year experienced developer can do right?
Hey Sonny! How did you end up fixing the overscroll error once the chat fills up? Got everything working, but just wanted to clean that up a bit. I have access to the PAPA repo, but I am not quite seeing how to fix this. Thanks!
There was a problem with the .map-method. I got the following error: Cannot read properties of undefined (reading 'map'). ChatGPT fixed it with: {channels && channels.map((channel) => (
The function const selectChannel = () => { if (id) { dispatch(enterRoom({ roomId: id, })) } doesnt create an entry in the redux dev tools by clicking on a channel. I'm stuck here. does anyone have any ideas or can help?
Hi! Please, if you solved the problem let me know. I have spent already 2 days during my free time trying to solve the same error but I can't figure it out
Most likely you forgot to do an import or something somewhere or you left out a line of code needed for React to recognize the variable. If you get an error like that it is pointing that you missed something with roomId.
can you make a tutorial on how to build a google forms clone using react? as i feel its quiet a challenge for beginner react devs because it had a bit complex forms, data storing, etc
If anyone is having the problem "Module not found: Can't resolve 'firebase' in", use these imports: import firebase from 'firebase/compat/app'; import "firebase/compat/auth"; import "firebase/compat/firestore";
Sir i am getting some firebase error when i try to query db of firebase it says data() is not a function db.docs.data() is not a function i tried a lot but can't solve this😫😫😫
I want to know one thing, how to load messages directly from the bottom and how to add infinte scrolling here? if anyone have any solution or any yt video link please pop it down here in my reply section btw Great Work Sonny, love from INDIA
Did anyone notice that the chat header (left and right) in the Chat.js (room details, star icon and info icon) disappears completely after the auth is added?
📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university
the most loved and most valued react dev on youtube ...tyyy u changed my life , I finally got a job
Imma start calling Sonny 'The Mailman' because he always delivers! Thanks Sonny, I needed to work on styled components more.
Or we could call him PostMan 😉
can you help me bro ,
when I write that, const [ user, loading ] = useAuthState(auth);
this message is shown to me : auth.onAuthStateChanged is not a function
i don't why
Amazing energy. I'm an experienced backend developer however relatively new to React - just over halfway and loving this build so far. Keep up the good work Sonny.
Holy shit.... so much better than the Clever Programmer collabs
Soo true 😂
thanks for the great content! If someone is getting this error: Module not found: Error: Package path . is not exported from package try this in the firebase.js file
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
it worked for me:)
Thanks, and for correct working GoogleAuthProvider i add,
import { GoogleAuthProvider } from "firebase/auth";
and replace
const provider = firebase.auth.GoogleAuthProvider();
on
const provider = new GoogleAuthProvider();
Thanks for doing this for free! I've been working as a full stack engineer for years and still can learn a lot from your video!
It's a Good move to do your own thing, your fire is burning hot enough to last a lifetime, keep on keeping on!
Nice tutorial. Recently in our office we tried to implement a Full Office Messaging Clone with a look of Slack. Though we succeeded in making the frontend with ease (it was done in Electron React) the messaging backend engine which could perform at scale was very difficult and needed quite a lot of research. Still there are cracks! But all in all good experience.
So the take away what i got was, frontend could be materialized easily but to make a full product it takes whole lot more than just a simple tutorial.
good insights! looking back what would you recommend for a dev looking to prevent these issues ?
Hey sunny.
Pretty awesome stuff. You are literally helping lot developers to make there careers.
I have a small request, if you get some time please make a detailed video on ReactJs testing. I know its very important, and I am having pretty tough time on it, and I believe so does other developers.
Thanks man for everything you are giving for free.
Just discovered this channel. I followed a bunch of the clones last year with Clever Programmer and honestly I got extremely annoyed by the constant yelling and interrupting during the whole videos. You were constantly interrupted and it just disrupted the whole flow for me. They were almost impossible to watch and enjoy but I watched it because you and the content itself was soooo worth it. But THIS is ideal. I’m literally so excited to find your channel. This is the best of both worlds!!! Thank you so so so much for this - you were the best part of clever programmer and I wouldn’t watch without you!
No hate to the clever programmer team - the content was always pure gold. Especially for free!
Sonny can you add segments to your videos? It will help us find sections we need when re watching it also helps you show up better in search results.
Done dude!
Thanks
@@SonnySangha thank you so much
Papa FAM is the best community in the world. and we have the best teacher. Sonny you are blessed with coaching talent. Keep up this positive energy guys. I never in a million years figured I would be able to learn this stuff so fast.
sonny you killed it man .You are providing awesome content . Only thing got positive in my life during this corona is YOUR VIDEOS,TUTORIALS,CLONE BUILDS and now you are deleivering the styled components
I have learned so much from Sonny in 2 weeks than from my Uni in 2 years
LMAO
Same tho!
uinversity is a waste of time and money a lot of theory
Man I'm so glad you broke off to do your own thing. I think it's much better quality and more focused when you're solo doing your own thing. Good for you, dude and thanks for all the content.
Thank you! The best React app making tutorials on UA-cam!
I like your no nonsense policy, but you are still chillin' .
now its ON! love the energy.
Not even 10 minutes in and the energy is definitely up. You've got me for the long haul on this one.
And good morning btw. Gotta turn in, but I did crack the 10 minute mark, and will get through it anon!
whenever I get stressed out :( ,
I watch one of ur videos and code.
Stress gone :)
Its great tô see you back on the online mentor track mate.... You are the One and only Mr Sonny! All the best from Brazil Man.... Cheers
1:38:50 anyone else gets error like this one?
Module parse failed: Unexpected token (190:15)
You may need an appropriate loader to handle this file type.
| columnNumber: 7
| }
> }), channels?.docs.map(function (doc) {
| return /*#__PURE__*/React.createElement(SidebarOption, {
| key: doc.id,
i am getting same error how did you resolved it ?
Really really amazing video. I am sure it is so helpful to all developer.
Thanks. Sonny
Helped me alot.. Thank you so much Sonny 🙏
Amazed by your work but it is just the Slack interface with the chatrooms as the only functionality. I would like to see more than the chat (same as the facebook tutorial), more functionality and responsiveness!
Good work on this part though, I've learned a lot, thanks!
Your videos are so cool and very helpful thank you! Let's crush this thing!
We really love PAPA React
It feels good to listen Sonny building the app from the scratch without Qazi irritating. I hate those build where everytime Qazi was disturbing and talking shit. But this build is amazing.
I am the newest papa fam member
This is my first build. Created this whole app, deployed it! It is great!!!
how did you work around with firebase hooks? As the firebase hooks don't support firebase 9.0 yet.
@@krishgarg2806 are you getting errors importing?
@@krishgarg2806 yes I ran into same errors and solved exactly like you did.
@@bandhandey2594 how did you solve all of this?
@@AshishSharma-xc3iq what problems are you getting?
nice video papa fan
at 1:39:03 on line 49 in the map function, how is it returning the SidebarOption element without actually providing the 'return' keyword?
Awesome dude, congrats!
That was one of the best tuts I ever seen. Gj Sonny!
Love this clone man.
You da best bruhh!!!!! Here is your like 👍👍👍👍👍👍👍👍 ... Infinite...
Although the messages are being added in the firebase database, but I'm unable to render and display it using React. Someone please help.
Same. E: Turns out while iterating through each "doc" I used curlies instead of regular parentheses.
I love the energy and the content , very clear explanations :D thank youuuu
So happy you're on your own man! Much more efficient!
Just learning new things for you Sir⭐❤
Interesting and Impressive good job Sonny
But I've been trying to install FIREBASE all along but isn't working
Any help offer is highly welcome and acceptable
This was the first stream that I followed and I'm pretty sure that I will comeback to watch the future streams of you...#papa_fam
Damn dude! This is awesome!
Great effort bro. Keep it up.
Love this clone man.
It taught me a lot
Thanks bro
Dude you are the best
Thanks man
ALV este bato es un crack!!!!!❤❤
Good job. just finished rebuilding. thank you for your sevices
I can 100% tell Sonny you are a fan of Peter Mckinnon haha Thanks for the quality content!
Learn so much. Thnku ReactGod #PAPAfam
Wow That's Amazing 👏 😍. Expecting MS TEAMS Clone in the future. I am working on it but as a newbie I am not really getting it. I learned a lot from this tutorial. Thanks, Love from Pakistan 🇵🇰
Thanks man!! 🙏
I was bit late to the party.....but watching it now....😇
1st of all, thank you so much for this tutorial.
2nd for people watching it now, firebase's sdk has changed a bit so refer to the docs and change accordingly.
Update: The react-firebase-hooks is not yet compatible with firebase 9.0.
Update 2: react-firebase-hooks now supports Firebase v9.
As of November 3rd: React Firebase Hooks v4 has been released which supports v9 and also requires React 16.8.0 or later and Firebase v9.0.0 or later.
@@apollosurfer yup, forgot to update the comment, thanks :)
wow, awesome project
Honestly man, i learn so much with this project, i going to recreate more things like this, really like. Your a genius, thanks for sharing your knowledge
can someone help . at 1:10:44 , i am importing sidebar icons and using them as components , but it's not showing up on the screen. anyone know what the issue might be?
Ensure that your imports are correct. If you remove the inline padding style, it will show
Ultimate content
Amazing !! great content!
Still getting the energy up, even though you had crested 200 likes by the time I clicked.
1:37:17 Keys for the win
Man you are great 👍
Hy Sonny, How to do action on click (Inbox, Draft etc) on the sidebar
Excellent video!!!!
1:31:56
What is the name of the song ?
ur the best tutorials
Sorry about the last message...right after I posted I saw his screen and it had that all the sudden!!!
We can use nextJS with redux unless just react application? Because I'm with in love with nextJS... and love use with redux
I could do almost everything apart from the real time update of the UI on sending chat. This is because I had to fall back on the traditional way as orderBy was not available on firestore latest version. I am getting useeffect loop if I try to update data realtme on ui
WHY IS THIS IN MY HISTORY????
@here I want to ask I am new in React so is the
Guy using Redux in this??? As i knw nothing abt redux
Hey Sonny. Just started this vid and wanting to follow along. Is there a reason that when I look at my counterSlice.js file the code is completely different from what is in your counterSlice.js file. How do i go about resolving that.
I think I see why I have a compiling error but not sure why these extra files are created; counterAPI.js and counterSlice.spec.js
i have a question stucked in my mind for so long .
what makes a 3-5 year experienced react developer different from a fresh react developer ....as both have studied and learnt the same concepts of javascript ,react, html, css . I mean ... a fresh react developer can also do the stuff which a 3-5 year experienced developer can do right?
The experience matters
3-5 years won't be searching everything in stack overflow like the freshers
Hey Sonny! How did you end up fixing the overscroll error once the chat fills up? Got everything working, but just wanted to clean that up a bit. I have access to the PAPA repo, but I am not quite seeing how to fix this. Thanks!
Add overflow:scroll to the div which contains the overflowing content and then add a set height so for example 300px and you’ll see it works!
@@SonnySangha Cool Sonny! Thanks!
lateest react-firebase-hooks :
import {useCollectionData} from "react-firebase-hooks/firestore";
import {collection } from "firebase/firestore";
import { db } from "../firebase";
const [channels, loading, error] = useCollectionData(collection(db, "rooms"));
There was a problem with the .map-method. I got the following error: Cannot read properties of undefined (reading 'map').
ChatGPT fixed it with:
{channels && channels.map((channel) => (
))}
The function const selectChannel = () => {
if (id) {
dispatch(enterRoom({
roomId: id,
}))
}
doesnt create an entry in the redux dev tools by clicking on a channel. I'm stuck here. does anyone have any ideas or can help?
Great content Sonny! You're amazing buddy.
One question, does using the firestore instead of realtime db works for messages and instant updates?
yes, it works very well for any type of chat applications.
@@gmagnenat thanks for the reply mate, appreciated.
So no need for realtime database at all?
Hey! Thanks dude!
Firestore is essentially the successor to real-time DB it has everything + more! (So yes!!!)
😃it's amazing!!!
thank you sony
Thanks a lot
hope you will use serverside rendering in future videos...
Fix for making the Sidebar scrollable:
const SidebarContainer = styled.div`
overflow-y: scroll;
::-webkit-scrollbar {
display: none;
}
`;
Hey i liked it very much but what if i want to upload image along with normal text message
Please guide if possible.
Awesome code bro! You're something special, could you add private chats between users next time? :)
Go for mern stack too..why react only?we need node mongo too
hey Sonny i'm getting error don't know tried everything
TypeError: Cannot read property 'roomId' of undefined
please help me out mate.
Hi! Please, if you solved the problem let me know. I have spent already 2 days during my free time trying to solve the same error but I can't figure it out
Most likely you forgot to do an import or something somewhere or you left out a line of code needed for React to recognize the variable. If you get an error like that it is pointing that you missed something with roomId.
@@mikestagg7764 A little too late 😂. Thanks though. I solved it a while ago
@@inspisiavideos8542 bro pleae tell me how to solve this problem
@@inspisiavideos8542 how to solve this problem
We need your music playlist, dude! :D
Sign up to the newsletter and you’ll get it automatically dude!
how many times are you gonna recreate slack?
can you make a tutorial on how to build a google forms clone using react? as i feel its quiet a challenge for beginner react devs because it had a bit complex forms, data storing, etc
If anyone is having the problem "Module not found: Can't resolve 'firebase' in", use these imports:
import firebase from 'firebase/compat/app';
import "firebase/compat/auth";
import "firebase/compat/firestore";
You're a boss, thanks for this, I was trying to figure it out. You are awesome
Awesome content you made.. it would be great if there would be some contents on socket.io.
As always @Sonny Sangha is React God!
What a fabulous build!
Started my day with this awesome build.
PS: Please share your playlist "Epidemic"
Links.PapaReact.com/newsletter (simply sign up and you’ll get the playlist!)
Sir i am getting some firebase error when i try to query db of firebase it says data() is not a function db.docs.data() is not a function i tried a lot but can't solve this😫😫😫
I want to know one thing, how to load messages directly from the bottom and how to add infinte scrolling here?
if anyone have any solution or any yt video link please pop it down here in my reply section
btw Great Work Sonny, love from INDIA
I have registered the firebase app but there is no firebase config snippet visible in the console. Can anyone please help?
Did anyone notice that the chat header (left and right) in the Chat.js (room details, star icon and info icon) disappears completely after the auth is added?
How much energy do you have to have to do this much consistently
A real clever programmer
Your channel will grow massively
Watch out youtube