React Chat App Full Tutorial 2024 | Realtime Chat Application Project with Firebase

anyone can help me to get the full code !!

tht scroll feaure mine is visible that thick ? why is it something related with the os

Thanks a ton for this tutorial! Just finished coding, everything works perfectly. Have just one question - when you choose image file, looks like this only sends picture to chat locally in browser. Upload logic is implemented in "handleSend" which will be be returned immediately in case we don't have text non-empty. Is this kind of a bug you think?

Yo! Finally finished this project!

is it responsive?

Thanks for the comprehensive tutorial

OMG I never completed this level of project till now but in 3 days I completed a large scalable application all credit goes to you 🙏🙏

He didn't added the Calling functionality??

I want to deploy this on GitHub pages, how can I do that, please tell me how to do that....?

Lots of info, but mediocre presentation: you rush through the concepts without explaining how stuff works, especially when it comes to the Firebase stuff.

Firebase storage is not free

does this use react 17 or 18?

is it possible to create this app using Next.js?

When I downloaded the source code it doesn't work and doesn't show anything in the website.

after i click on add user , the added user list does not appear on the left hand side of the chat app

here is the code, i need help please
import React, { useState } from "react";
import "./AddUser.css";
import { collection, getDocs, query, where } from "firebase/firestore";
import { db } from "../../../../lib/firebase";

const AddUser = () => {
const [user, setUser] = useState(null);

const handleSearch = async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const username = formData.get("username");

try {
const userRef = collection(db, "users");

const q = query(userRef, where("username", "==", username));
const querySnapShot = await getDocs(q);

if (!querySnapShot.empty) {
setUser(querySnapShot.docs[0].data());
}
} catch (error) {
console.log(error);
}
};
return (
<div className="adduser">
<form onSubmit={handleSearch}>
<input type="text" name="username" placeholder="username" />
<button>Search</button>
</form>
{user && (
<div className="user">
<div className="detail">
<img src={user.avatar || "./avatar.png"} alt="" />
<span>{user.username}</span>
</div>
<button>Add User</button>
</div>
)}
</div>
);
};

export default AddUser;

sorry i may be dumb but these are real people right

Kindly provide the whole source code in the GitHub.

cannot use firebasestorage now its need payment any otherway?

when i go to setup firebase storage, get started option was there upgrade will be shown.

all the snippets work except for compt and comp. Am i missing an extension in vs code?

Could someone tell me what to do with that firebase storage since its requiring upgrade to use is there any alternative

at run npm dev what should i write at dev

Do you have chat app in react using mysql without firebase bcz its paid

Powerful, well explained. You're a great teacher sir.

i accidentally deleted mu users collection is ther any way to make database function as before and can i progress in project with this problem

the best layout i have seen sofar !!!

does this app have a server or not?

did that camera video call and voice call works?

timeago.js file are not present in github
please update the github

Hi, when i perform add user action, it shows me this error "TypeError: n.indexOf is not a function" and chats does not update. please help me out. i am hustling with this one for past couple of days @LamaDev

39.09

is anyone else having probems adding credit card for GCP? The Firebase storage is only available on the blaze plan and trying to upgrade but i keep getting an error " This action couldn’t be completed. [OR_BACR2_44]" . Even with using multiple cards. This seems to be an ongoing issue for everyone. Let me know if anyone has solved this issue

when your to do list project is actually useful when doing some project like social media, e commerce, wow thank you

i need some help in firebase storage part
anyonee????????

Awesome project!
But there is one problem, we can add the same user multiple times!

Do some validation
const userchatref1 = doc(db, "userchats", user.id)

const docSnap = await getDoc(userchatref1)

const chats = docSnap.data().chats.filter((item) => item.receiverId === currentUserId)

If(chats.length >=1) return toast.error("User is already added")

And
Firebase storage is not free. So you can convert the image into base64 and save it in the database.

When i am trying to connect my Firebase Storage , it shows me to upgrade my account what should i do ?

can you add group chat as well

what the hell with source code ? No code found lol

Please where is the full source code

guys, is it me or did firebase free storage get cancelled? it always tells me to upgrade plan

Firebase storage is not more free ? What to do?😢

In this time I use firebase it will ask upgrade a project plan what can I do .. and How to get the storage for free

you are so cute when you say "just like that", anyways, this was very helpful! thanks!

cause I have an error I disliked it. the error is in firebase. If you write more react and when you finish it then write firebase it might be better, I stuck in the middle so dislike

you did not upload your backend

Can we chat with others from other devices in real time ?