Github Repo – ChattyBox

Demo – ChatyBox

Introduction

ChattyBox is a chat application built using Vite, React JS, Google Firebase, Universal Cookies, and Material UI. It incorporates features like Google and GitHub authentication for login, password-protected rooms, and the ability to send messages with various media types.

This blog post provides an overview of the application’s purpose, the technologies used, and the steps involved in building it , You will get of what’s built and how it’s built.

Main Purpose

The primary goal of building ChattyBox was to learn and implement Firebase’s CRUD (Create, Read, Update, Delete) features in a project. This expanded to include utilizing Firebase Authentication, Firestore for data storage, and Firebase Storage for storing media files.

ChattyBox is a chat application that includes the following features:

• Login with Google and GitHub authentication.
• Password-protected rooms to ensure secure messaging.
• Creation of unique rooms and joining of existing ones.
• Sending and receiving messages, both text and media types, such as images, documents, music, and videos.
• Storing of messages, user details, and media files in Firestore and Firebase Storage.
• Use of Material UI for pre-built, customizable UI elements.
• Use of Universal Cookies to store refresh tokens for authentication.
• Sign-out button to log out authenticated users.

Technologies Used

• React JS: Used for building the frontend of the application.
• Firebase: Serves as the backend for ChattyBox, providing authentication, data storage, and file storage functionalities.
• Material UI: Utilized for designing website components with a pre-built, customizable set of UI elements.
• Universal Cookies: Employed to store the refresh token for user identification. Cookies are preferred over local storage for authentication purposes due to their expiration date and better synchronization with databases.

Project Setup

Step 1: Creating a React App with Vite and Installing Dependencies

To start the project, create a React app using Vite and install the necessary dependencies: Material UI, Universal Cookie, and Firebase.

npm install @material-ui/core universal-cookie firebase

npm create vite@latest

Step 2: Setting up Firebase

Create a Firebase account and project. Copy the configuration code provided by Firebase and place it in the “firebase-config.js” file. For added security, store the Firebase API key in a “.env.local” file.

Github Repo – firebase-config.js

Step 3: Enabling Authentication Providers

Enable authentication providers in the Firebase project. In the case of ChattyBox, Google and GitHub authentication providers were utilized. Ensure you have the required keys for enabling additional providers.

Step 4: Initializing Firebase Authentication

Import the necessary authentication components from “firebase/auth” and initialize them in the “firebase-config.js” file. Refer to the Firebase documentation for details on these functions.

Step 5: Implementing Sign-In Functionality

Create a “SignIn.jsx” page where users can sign in using Google or GitHub providers. Use the “signInWithPopup” function to enable login via a new window, and store the refresh token in a cookie. If the sign-in is successful, set the “isAuth” state to true.

Github Repo – SignIn.jsx

Step 6: Managing Routes

In the “App.jsx” file, manage the routes using React Router DOM. If the user is authenticated (“isAuth” is true), redirect them to the “EnterRoom” page; otherwise, direct them to the login page.

Github Repo – App.jsx

Step 7: Enter Room Functionality

On the “EnterRoom” page, allow users to enter or create rooms by providing a room name and password. Display existing rooms by querying the Firestore collection dedicated to storing room details.

Step 8: Fetching Room Details

Utilize the “getDocs,” “query,” and “collection” functions provided by Firebase to fetch room details from Firestore. Display the retrieved information on the “EnterRoom” page.

Github Repo – EnterRoom.jsx

Step 9: Joining or Creating Rooms

Implement functionality on the “EnterRoom” page to check if the entered room name matches an existing room. If a match is found, prompt the user to enter the password for that room. For creating a new room, generate a unique name and set a password.

Step 10: Building the Chat Component

Create a “Chat.jsx” file to house the chat component. This component includes a message box for displaying messages, user names, and images fetched from the authenticated account. The send box allows users to send text, files (e.g., music, videos, documents), and images. Use the “useEffect” hook to query and display messages, and the “addDoc” function to create new message documents in Firebase. For media files, upload them to Firebase Storage and store their download URLs.

Github Repo – Chat.jsx

Step 11: Implementing Sign-Out Functionality

Add a sign-out button that clears the cookie and sets the “isAuth” state to false, effectively logging out the user.

Github Repo – SignOut.jsx

Conclusion

ChattyBox is a feature-rich chat application built using React JS and Google Firebase. It demonstrates the utilization of Firebase’s CRUD operations, authentication, Firestore, and Storage functionalities. By following the outlined steps and leveraging the provided technologies, you can create your own chat app with similar features.