Building a Real-Time Chat Application with React and Firebase

Creating a real-time chat application is an excellent way to understand the power of React and Firebase. In this guide, we will walk through the process step-by-step to build a functional chat application.

Introduction

Real-time chat applications have become a staple in modern web development, providing instant communication capabilities. In this guide, we'll leverage React for the front-end and Firebase for backend services like authentication, database, and hosting.

1. Setting Up the Environment

Prerequisites:

• Node.js and npm installed
• A Firebase account

Step-by-Step Setup:

Install Node.js and npm:?Download and install the latest version of Node.js from the official Node.js website.

Create a Firebase Project:

• Go to the Firebase Console.
• Click on "Add project" and follow the setup instructions.
• Enable Firestore and Authentication.

2. Initializing Firebase

Install Firebase CLI:

bash

npm install -g firebase-tools        

Initialize Firebase in Your Project:

bash

firebase login
firebase init        

Select Firestore and Hosting during the initialization.

3. Creating the React Application

Create a New React App:

bash

npx create-react-app react-firebase-chat
cd react-firebase-chat        

Install Firebase:

bash

npm install firebase        

4. Setting Up Firebase Authentication

Configure Firebase:

In “src/firebase.js”, initialize Firebase with your project's credentials.

bash

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);

export const auth = firebase.auth();
export const firestore = firebase.firestore();        

Set Up Authentication:

In the Firebase Console, enable Email/Password authentication under the Authentication section.

5. Creating the Chat UI

Create Basic Components:

Create “components” folder and add “ChatRoom.js”, “SignIn.js”, and “SignOut.js”.

SignIn.js:

bash

import React from 'react';
import { auth } from '../firebase';

const SignIn = () => {
  const signInWithGoogle = () => {
    const provider = new firebase.auth.GoogleAuthProvider();
    auth.signInWithPopup(provider);
  };

  return (
    <button onClick={signInWithGoogle}>Sign in with Google</button>
  );
};

export default SignIn;        

SignOut.js:

bash

import React from 'react';
import { auth } from '../firebase';

const SignOut = () => {
  return auth.currentUser && (
    <button onClick={() => auth.signOut()}>Sign Out</button>
  );
};

export default SignOut;        

ChatRoom.js:

bash

import React, { useState, useEffect, useRef } from 'react';
import { firestore, auth } from '../firebase';
import { useCollectionData } from 'react-firebase-hooks/firestore';
import firebase from 'firebase/app';

const ChatRoom = () => {
  const dummy = useRef();
  const messagesRef = firestore.collection('messages');
  const query = messagesRef.orderBy('createdAt').limit(25);

  const [messages] = useCollectionData(query, { idField: 'id' });
  const [formValue, setFormValue] = useState('');

  const sendMessage = async (e) => {
    e.preventDefault();

    const { uid, photoURL } = auth.currentUser;

    await messagesRef.add({
      text: formValue,
      createdAt: firebase.firestore.FieldValue.serverTimestamp(),
      uid,
      photoURL
    });

    setFormValue('');
    dummy.current.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <>
      <main>
        {messages && messages.map(msg => <ChatMessage key={msg.id} message={msg} />)}

        <span ref={dummy}></span>
      </main>

      <form onSubmit={sendMessage}>
        <input value={formValue} onChange={(e) => setFormValue(e.target.value)} />
        <button type="submit">Send</button>
      </form>
    </>
  );
};

const ChatMessage = (props) => {
  const { text, uid, photoURL } = props.message;

  const messageClass = uid === auth.currentUser.uid ? 'sent' : 'received';

  return (
    <div className={`message ${messageClass}`}>
      <img src={photoURL} alt="User Avatar" />
      <p>{text}</p>
    </div>
  );
};

export default ChatRoom;        

Create Main App Component:

Modify “App.js” to include authentication and chat room components.

bash

import React from 'react';
import './App.css';
import { useAuthState } from 'react-firebase-hooks/auth';
import { auth } from './firebase';
import SignIn from './components/SignIn';
import SignOut from './components/SignOut';
import ChatRoom from './components/ChatRoom';

function App() {
  const [user] = useAuthState(auth);

  return (
    <div className="App">
      <header>
        <h1>React Firebase Chat</h1>
        <SignOut />
      </header>

      <section>
        {user ? <ChatRoom /> : <SignIn />}
      </section>
    </div>
  );
}

export default App;        

Add CSS for Styling:

In “App.css”, add some basic styles for the chat application.

bash

.App {
  text-align: center;
}

.message {
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
}

.message.sent {
  background-color: #dcf8c6;
}

.message.received {
  background-color: #f1f0f0;
}

form {
  margin: 20px;
}

input {
  padding: 10px;
  margin-right: 10px;
}

button {
  padding: 10px;
}        

6. Implementing Real-Time Messaging

Firestore Database Configuration:

• Ensure Firestore is enabled in the Firebase console.
• Structure your Firestore to store messages with fields: text, createdAt, uid, and photoURL.

Real-Time Data with Firestore Hooks:

Use “useCollectionData” from “react-firebase-hooks/firestore” to fetch and listen for real-time updates in the chat room.

7. Adding Message Storage

Storing Messages in Firestore:

Messages are stored in the Firestore collection whenever a new message is sent, utilizing the add method on the Firestore collection reference.

8. Deploying the Application

Firebase Hosting:

Deploy the application to Firebase Hosting.

bash

firebase deploy        

Firebase Configuration:

Ensure you have configured your Firebase project correctly, including authentication, Firestore, and hosting settings.

Conclusion

?In this guide, we've covered how to create a real-time chat application using React and Firebase. We've set up Firebase for authentication and real-time database capabilities, created a React application with a basic chat UI, implemented real-time messaging, and deployed the application to Firebase hosting. This project showcases the power of combining React with Firebase to create a dynamic and responsive application. If you're looking to develop advanced chat solutions, consider partnering with a React.js chatbot development company Netherlands. Additionally, if you need expert assistance, you can hire a React.js developer to ensure your project's success.