Building a Virtual Classroom Platform with React and Firebase

Getting Started

To begin, you’ll need a few essential tools:

• A code editor (such as Visual Studio Code)
• NodeJS installed
• A Google account to use Firebase
• Basic knowledge of React (this tutorial assumes you have prior experience with React)

Creating a React App

Let’s start by creating a new React app. Open a terminal in a safe folder and run the following command:

npx create-react-app app-name

Replace app-name with your desired app name. Once the app is installed, open Visual Studio Code in that directory and delete unnecessary files.

Setting up Firebase

Next, we’ll set up Firebase as our backend. Create a new Firebase project and enable authentication with Google. We’ll also enable Cloud Firestore, a non-relational database.

Linking React with Firebase

Now, let’s connect our React app with Firebase. Create a new file called firebase.js and import the Firebase package:

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

Initialize the app using the initializeApp() function and extract the auth and firestore modules:

const app = firebase.initializeApp({
  apiKey: '',
  authDomain: '',
  projectId: '',
});

const auth = app.auth();
const firestore = app.firestore();

Configuring React Router

To handle multiple routes and screens, we’ll use React Router. Install react-router-dom and configure the router in App.js:

import { BrowserRouter, Route, Switch } from 'eact-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/dashboard" component={Dashboard} />
       ...
      </Switch>
    </BrowserRouter>
  );
}

Creating Components

Let’s create a new component called Home.js and add a basic layout:

import React from 'eact';

function Home() {
  return (
    <div>
      <h1>Welcome to our Virtual Classroom!</h1>
     ...
    </div>
  );
}

We’ll also create a Navbar component and add it to our /dashboard route:

import React from 'eact';

function Navbar() {
  return (
    <nav>
      <ul>
        <li><a href="/dashboard">Dashboard</a></li>
       ...
      </ul>
    </nav>
  );
}

Implementing Google Login Functionality

We’ll implement Google login functionality using Firebase hooks. Add the signInWithGoogle function to the “Log in with Google” button’s onClick method:

import { useSignInWithGoogle } from 'eact-firebase-hooks/auth';

function LoginButton() {
  const [signInWithGoogle] = useSignInWithGoogle(auth);

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

Creating a Dashboard

Create a new component called Dashboard.js and fetch all the user’s classes from Firestore:

import React, { useState, useEffect } from 'eact';
import { firestore } from '../firebase';

function Dashboard() {
  const [classes, setClasses] = useState([]);

  useEffect(() => {
    firestore.collection('classes').where('userId', '==', auth.currentUser.uid).get().then((snapshot) => {
      setClasses(snapshot.docs.map((doc) => doc.data()));
    });
  }, [auth.currentUser]);

  return (
    <div>
      {classes.map((cls) => (
        <ClassCard key={cls.id} class={cls} />
      ))}
    </div>
  );
}

Creating a Class Screen

Create a new component called Class.js and display announcements from each class:

import React from 'eact';

function Class({ classId }) {
  const [announcements, setAnnouncements] = useState([]);

  useEffect(() => {
    firestore.collection('classes').doc(classId).collection('announcements').get().then((snapshot) => {
      setAnnouncements(snapshot.docs.map((doc) => doc.data()));
    });
  }, [classId]);

  return (
    <div>
      {announcements.map((announcement) => (
        <Announcement key={announcement.id} announcement={announcement} />
      ))}
    </div>
  );
}

That’s it! You’ve successfully built a virtual classroom platform using React and Firebase. You can now experiment with the code, add new features, and explore different clones.

Check out the GitHub repository for the complete code and feel free to make pull requests to add more features.