How to build a notifications feature with React

Hello everyone 👋🏼

In today's tutorial, we'll guide you through building a real-time notifications feature using SuperViz, a powerful platform for real-time communication and data synchronization. Real-time notifications are a critical feature for many applications, enabling instant communication and engagement with users as events unfold.

We'll use SuperViz's Real-Time Data Engine to send and receive notifications, demonstrating how to integrate this functionality into a React application. Although we’ll use a simple example for illustrative purposes, the techniques you’ll learn can be applied to various scenarios such as messaging apps, live updates for e-commerce sites, or alert systems in business applications. Let's dive in!

Prerequisite

You will need a SuperViz account and a developer token to follow this tutorial. If you already have an account and a developer token, you can move on to the next step.

Create an account

To create an account, go to https://dashboard.superviz.com/register and create an account using either Google or an email/password. It's important to note that when using an email/password, you will receive a confirmation link that you'll need to click to verify your account.

Retrieving a Developer Token

You’ll need to provide a developer token to use the platform, as this token is essential for associating platform requests with your account. You can retrieve development and production SuperViz tokens from the dashboard..

Copy and save the developer token, as you will need it in the next steps of this tutorial.

Step 1: Setting Up the Server with Express.js

In this tutorial, we'll guide you through building a real-time notification system using SuperViz, a powerful platform for real-time communication and data synchronization. Real-time notifications are a critical feature for many applications, enabling instant communication and engagement with users as events unfold.

We'll use SuperViz's Real-Time Data Engine to send and receive notifications, demonstrating how to integrate this functionality into a React application. Although we’ll use a simple example for illustrative purposes, the techniques you’ll learn can be applied to various scenarios such as messaging apps, live updates for e-commerce sites, or alert systems in business applications. Let's dive in!

The server will handle incoming notification requests and use SuperViz to send real-time updates to clients.

1. Create a New Project and Install Dependencies

First, set up a new Node.js project and install the necessary packages for the server.

mkdir realtime-notifications-server
cd realtime-notifications-server
npm init -y
npm install express body-parser dotenv cors

• express: A web application framework for setting up the server.
• body-parser: Middleware to parse incoming JSON request bodies.
• dotenv: Loads environment variables from a .env file.
• cors: Middleware to enable Cross-Origin Resource Sharing.

2. Set Up the Express Server

Create a file named server.js and configure the server.

// server.js
import  process  from  "node:process";
import  express  from  "express";
import  bodyParser  from  "body-parser";
import  dotenv  from  "dotenv";
import  cors  from  "cors";

dotenv.config();  // Load environment variables

const app =  express();  // Initialize Express application


app.use(bodyParser.json());  // Use body-parser to parse JSON

app.use(cors());  // Enable CORS


// Basic route to check server uptime
app.get("/",  (req, res)  =>  {
    res.send(
        JSON.stringify({
            uptime: process.uptime(),
          })
    );

});

• Express App: An Express application is created to handle requests.
• Middlewares: bodyParser is used for JSON parsing, and cors is enabled for cross-origin requests.

3. Implement the Notification Endpoint

Define an endpoint to schedule and send notifications using SuperViz.

app.post("/notify", (req, res) => {
  if (!req.body) {
    return res.status(400).send({
      status: "error",
      message: "Missing body",
    });
  }

  const { channel, message, msToWait } = req.body;

  if (!channel || !message || !msToWait) {
    return res.status(400).send({
      status: "error",
      message: "Missing required fields: channel, message, msToWait",
    });
  }

  setTimeout(async () => {
    const response = await fetch(
      `https://api.superviz.com/realtime/${channel}/publish`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          client_id: process.env.VITE_SUPERVIZ_CLIENT_ID,
          secret: process.env.VITE_SUPERVIZ_SECRET_KEY,
        },
        body: JSON.stringify({
          name: "new-notification",
          data: message,
        }),
      }
    );

    console.log(
      `Sending data to ${channel}, message: ${message}`,
      response.status
    );
  }, msToWait);

  res.send({
    status: "success",
    message: "Notification scheduled",
  });
});

• Notify Endpoint: The /notify endpoint accepts POST requests to schedule notifications.
• Request Validation: Validates the presence of channel, message, msToWait, and roomId.
• Delayed Execution: Uses setTimeout to wait msToWait milliseconds before sending the notification using the SuperViz API.

4. Start the Server

Launch the server to listen for requests.

app.listen(3000,  ()  =>  {
    console.log("Server is running on <http://localhost:3000>");
});

• Server Listening: The server listens on port 3000 and logs a confirmation message when it's running.

Step 2: Setting Up the Frontend with React

The frontend will display notifications in real time using React and SuperViz.

1. Create a New React Project

Initialize a new React application using Create React App with TypeScript.

npx create-react-app realtime-notifications-frontend --template typescript
cd realtime-notifications-frontend

2. Install SuperViz SDK and React Toastify

Add the necessary packages to the project.

npm install @superviz/sdk react-toastify uuid

• @superviz/sdk: SDK for real-time collaboration features.
• react-toastify: Library for showing notifications as toast messages.
• uuid: Library for generating unique identifiers.

3. Configure tailwind

In this tutorial, we'll use the Tailwind css framework. First, install the tailwind package.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

We then need to configure the template path. Open tailwind.config.js in the root of the project and insert the following code.

/** @type  {import('tailwindcss').Config} */
sexport  default  {
content:  [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme:  {
extend:  {},
},
plugins:  [],

}

Then we need to add the tailwind directives to the global CSS file. (src/index.css)

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Set Up Environment Variables

Create a .env file in the frontend directory and add your SuperViz API key.

VITE_SUPERVIZ_API_KEY=YOUR_SUPERVIZ_API_KEY

• Environment Variables: Store the API key securely using .env and access it through import.meta.env.

5. Implement the Main App Component

Open src/App.tsx and set up the main component to handle notifications.

import { v4 as generateId } from "uuid";
import { useCallback, useEffect, useState } from "react";
import SuperVizRoom, {
  Realtime,
  RealtimeComponentEvent,
} from "@superviz/sdk";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

const apiKey = import.meta.env.VITE_SUPERVIZ_API_KEY as string;
const PARTICIPANT_ID = generateId();

export default function App() {
  const initialized = useRef(false);
  const [message, setMessage] = useState("");
  const [msToWait, setMsToWait] = useState(1000);

  const initialize = useCallback(async () => {
    if (initialized.current) return;

    const realtime = new Realtime(apiKey, {
      participant: {
        id: PARTICIPANT_ID,
        name: "participant-name",
      },
      debug: true,
    });

    initialized.current = true;

    const channel = await realtime.connect("notification-topic");

    channel.subscribe("new-notification", (data) => {
      if (typeof data === "string") return;

      toast.info(data.data as string, {
        position: "top-right",
        autoClose: 3000,
      });
    });
  }, [initialized]);

• State Management: The component uses useState to manage the state for initialization, message, and delay time.
• SuperViz Initialization: Connects to the SuperViz room using the API key, room ID, and participant details.
• Realtime Subscription: Subscribes to new-notification events and displays the notification using react-toastify.

6. Implement the Notification Function

Add the logic for sending notifications.

const notify = useCallback(async () => { 
    try { 
        fetch("http://localhost:3000/notify", { 
            method: "POST", 
            headers: { 
                "Content-Type": "application/json", 
            }, 
            body: JSON.stringify({ 
                roomId: ROOM_ID, 
                channel: "notification-topic", 
                message: message, 
                msToWait: msToWait || 1000, 
            }), 
        }); 

        toast.success("Notification sent!", { 
            position: "top-right", 
            autoClose: 1000, 
        }); 

        setMessage(""); 
        setMsToWait(1000); 
        } catch (error) { 
        toast.error("Failed to send notification!", { 
            position: "top-right", 
            autoClose: 1000, 
        }); 
    } 
}, [message, msToWait]);

• Notify Function: Sends a POST request to the server to schedule the notification.
• Success/Failure Toasts: Displays a toast message indicating whether the notification was sent successfully or failed.

7. Render the UI Components

Complete the App component by rendering the user interface.

useEffect(() => {
  initialize();
}, [initialize]);

return (
  <>
    <ToastContainer />
    <div className="w-full h-full bg-gray-200 flex items-center justify-center flex-col">
      <header className="w-full p-5 bg-purple-400 flex items-center justify-between">
        <h1 className="text-white text-2xl font-bold">Realtime Notifications</h1>
      </header>
      <main className="flex-1 p-20 flex w-full gap-2 items-center justify-center">
        <form>
          <h2 className="text-xl font-bold">Send Notification</h2>
          <p className="text-gray-500">
            Schedule a notification to be sent to all participants in the room.
          </p>
          <hr className="my-5" />

          <label htmlFor="message" className="text-lg font-bold">
            Message
          </label>
          <input
            type="text"
            id="message"
            name="message"
            placeholder="Hello, World!"
            className="w-full p-3 border border-gray-300 rounded-md"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
          />
          <hr className="my-5" />
          <label htmlFor="msToWait" className="text-lg font-bold">
            Time to wait (ms)
          </label>
          <input
            type="number"
            id="msToWait"
            name="msToWait"
            placeholder="1000"
            className="w-full p-3 border border-gray-300 rounded-md"
            min={1000}
            value={msToWait}
            onChange={(e) => setMsToWait(Number(e.target.value))}
          />
          <hr className="my-5" />
          <button
            type="button"
            onClick={notify}
            className="bg-purple-400 text-white p-3 rounded-md disabled:bg-gray-300"
            disabled={!message || !initialized || msToWait < 1000}
          >
            Send Notification
          </button>
        </form>
      </main>
    </div>
  </>
);

• UI Structure: The UI contains an input for the message and delay time, and a button to send notifications.
• Form Validation: The button is disabled if the message is empty, the system is not initialized, or the delay time is less than 1000ms.

Step 3: Running the Application

To start the application, run this command in the terminal:

npm run dev

This command will start both the server and the frontend application.

You can access the frontend application at http://localhost:5173 and the server at http://localhost:3000.

Summary

In this tutorial, we've built a real-time notification system using SuperViz, Express.js, and React. The server schedules and sends notifications to clients using SuperViz's real-time API. The frontend subscribes to notification events, displaying them as toast messages. By following these steps, you can customize the notification system to handle different types of messages, add more features, and deploy it to a production environment.

Feel free to refer to the full code in the GitHub repository for more details.

Join us: SuperViz Hackathon 2.0: AI meets RealTime

Get ready to participate in our Super Hackathon 2.0 this October to showcase your innovative real-time AI communication solutions! Hosted by SuperViz and with $5,000 in prizes up for grabs, we challenge you to integrate AI with SuperViz's real-time platform, pushing the boundaries of interactive communication.

Ready to join? Visit the Super Hackathon 2.0 website to register and stay updated.