Firebase with React - Mini Project: Build & Apply

Firebase with React

📖 Scenario: You are building a simple React app that connects to Firebase to store and display user messages in real-time.This app will let users add messages, and you will see them appear instantly.

🎯 Goal: Create a React app that connects to Firebase Firestore, adds messages, and displays them live.

📋 What You'll Learn

Initialize Firebase in the React app with given config

Create a Firestore collection called messages

Add a message document to messages collection

Display messages from Firestore in real-time in the React component

💡 Why This Matters

🌍 Real World

Many apps use Firebase with React to build real-time chat, comments, or collaborative features easily without managing backend servers.

💼 Career

Understanding Firebase integration with React is valuable for frontend developers working on modern web apps that require real-time data and cloud backend.

1

Initialize Firebase in React

Create a file called firebaseConfig.js and write the Firebase initialization code. Import initializeApp from firebase/app. Use this exact config object: { apiKey: "AIzaSyA-ExampleKey", authDomain: "your-app.firebaseapp.com", projectId: "your-app", storageBucket: "your-app.appspot.com", messagingSenderId: "1234567890", appId: "1:1234567890:web:abcdef123456" }. Export the initialized app as app.

Firebase

# Your code here to initialize Firebase app with the given config and export it as app

Need a hint?

Use initializeApp from firebase/app with the exact config object and export the app.

2

Setup Firestore and Add Message Function

In a new file called firebaseService.js, import getFirestore and collection, addDoc from firebase/firestore. Import app from ./firebaseConfig. Create a Firestore instance called db using getFirestore(app). Write an async function called addMessage that takes a text parameter and adds a document with field text to the messages collection. Export addMessage.

Firebase

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "AIzaSyA-ExampleKey",
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-app",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef123456"
};

export const app = initializeApp(firebaseConfig);

// Your code here to create Firestore instance and addMessage function

Need a hint?

Use getFirestore(app) to get Firestore instance. Use addDoc with collection(db, "messages") to add a message document.

3

Create React Component to Add Messages

In a React component file called MessageInput.js, import useState from react and addMessage from ./firebaseService. Create a functional component called MessageInput. Inside it, create a state variable input with setter setInput initialized to empty string. Add an input field bound to input and a button labeled "Send". On button click, call addMessage(input) and clear input. Export MessageInput.

Firebase

import { initializeApp } from "firebase/app";
import { getFirestore, collection, addDoc } from "firebase/firestore";
import React, { useState } from "react";
import { addMessage } from "./firebaseService";

// Your code here to create MessageInput component with input state, input field, and send button

Need a hint?

Use useState for input. Bind input field value and onChange. On button click, call addMessage and clear input.

4

Display Messages in Real-Time

Create a React component called MessageList in MessageList.js. Import useEffect, useState from react, and getFirestore, collection, onSnapshot from firebase/firestore. Import app from ./firebaseConfig. Inside MessageList, create a state variable messages initialized to empty array. Use useEffect to subscribe to real-time updates from the messages collection using onSnapshot. Update messages state with an array of message texts. Render a list of messages inside <ul> with each message in a <li>. Export MessageList.

Firebase

import React, { useState, useEffect } from "react";
import { getFirestore, collection, onSnapshot } from "firebase/firestore";
import { app } from "./firebaseConfig";

// Your code here to create MessageList component with real-time subscription to messages collection

Need a hint?

Use onSnapshot inside useEffect to listen to messages collection. Update state with message texts. Render messages in a list.