Chat App using React and Firebase | Realtime Private Chat Application
Why Stack Overflow recommends it
Stack Overflow users link it as the source tutorial when asking for help debugging or understanding specific code from the React and Firebase chat app it walks through.
Recommended by 0 people across 0 different months, 2022 to 2023.
What it is
A roughly two-hour build-along tutorial by Lama Dev that creates a real-time private chat app with React and Firebase v9. It covers UI design with Sass, email/password authentication, protected routes, user search, Firestore data structure, sending and fetching messages live, and deployment.
What people said
Cites Ian Black · 2022-11 · Stack Overflow · on “export 'db' (imported as 'db') was not found in '../firebase' (module has no exports)”
I've been trying to run this React Chat [LINK] but I'm getting the following error: "export 'db' (imported as 'db') was not found in '../firebase' (module has no exports)". I already setup Firebase and followed the Tutorial of the video [this video] please let me know how can I fix this, thank you! Everything I tried is in This code [LINK] that you can check out and also try to run it on your local computer if you are interested.
Cites Sumrender Singh · 2023-02 · Stack Overflow · on “Why storing form data in useState() hook in React?”
Thank you for the nice answer. Though, I would like know more about what you mean by this " You would need to store the user's input in state in order to properly deal with it in a useEffect". Any use case with useEffect will do, not too take much of your time. Also, here's the link to the video: link [this video] chat_app. At 53:27, you can see the handleSubmit function.
Cites Sheep831 · 2023-09 · Stack Overflow · on “How does this useEffect firebase clean-up function works?”
I watched a tutorial about realtime chatroom of using react and firebase. The below code is the AuthContext file and can someone explain the part of useEffect, why the clean-up function is simply unsub()? The tutorial link [this video] import { createContext, useEffect, useState } from "react"; import { auth } from "../firebase"; import { onAuthStateChanged } from "firebase/auth"; export const AuthContext = createContext(); export const AuthContextProvider = ({ children }) => { const [currentUser, setCurrentUser] = useState({}); useEffect(() => { const unsub = onAuthStateChanged(auth, (user) => { setCurrentUser(user); console.log(user); }); return () => { unsub(); }; }, []); return ( <AuthContext