DEV Community: Sujit M

FCM Integration with NodeJs using firebase-admin

Sujit M — Mon, 17 Mar 2025 11:43:05 +0000

In this part we will understand how to send notification from NodeJs server.

If you want to integrate with react then, check out here

Lets create a node server first.

I am guessing npm and node is already installed if not then Install using nvm

Initialize a NPM Project

npm init -y

Install dependencies

npm i express firebase-admin

Now lets generate a firebase private key for admin

Firebase Admin SDK private key

Open firebase console
Select the project (Use same if you are following from previous chapter, FCM with React)
Open a project settings
Go to service accounts
Generate a new Key pair

This action will download a JSON file.

Rename the file google-cloud-service-account.json for simplicity

Create a file app.js (Make sure you update entry point in package.json)

touch app.js

const http = require("http");
const express = require("express");
const queue = require("./services/queue");
const app = express();

const admin = require("firebase-admin");
const serviceAccount = require("./config/google-cloud-service-account.json"); // Make sure to provide a correct path

admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
});

const router = express.Router();

router.get("/", (req, res) => {
    res.send("Hello World");
});

app.use(router);

const server = http.createServer(app);

server.on("request", (req, res) => {
    console.log("Request received");
});

// We are not mentioning the host name here, so it will listen on all the available network interfaces
server.listen(3000, () => {
    console.log("Server is running on " + JSON.stringify(server.address().port));
});

This creates a server using express and http

Note - We have not used app.listen to create server instead http.createServer() to achieve more flexibility

Create a route to send notification

create user.routes.js

touch user.routes.js

Add this code

const express = require("express");
const messaging = require("../services/firebase");
const router = express.Router();

router.get("/user-action", (req, res) => {
    // User request comes for specific action

    //Once the action is performed, we can send the notification to the user

    // Here we are sending a notification to the specif this user with mentioned token
    const registrationToken = "REGISTRATION_TOKEN";

    const data = {
        title: "Hello from the server",
        body: "This is a test notification",
    };

    const message = {
        notification: {
            title: data.title,
            body: data.body,
        },
        token: registrationToken,
    };
    messaging
        .send(message)
        .then((response) => {
            console.log("Successfully sent message:", response);
            res.send("Notification sent");
        })
        .catch((error) => {
            console.log("Error sending message:", error);
            res.send("Error sending notification");
        });
    // res.send("Send notifications");
});

module.exports = router;

Update your app.js

const http = require("http");
const express = require("express");
const app = express();
const userRoutes = require("./user.routes");

const router = express.Router();

router.get("/", (req, res) => {
    res.send("Hello World");
});

app.use(router);
app.use("/users", userRoutes);

const server = http.createServer(app);

server.on("request", (req, res) => {
    console.log("Request received");
});

// We are not mentioning the host name here, so it will listen on all the available network interfaces
server.listen(3000, () => {
    console.log("Server is running on " + JSON.stringify(server.address().port));
});

Now lets add Registration Token of the client device

Create a device token

Follow these instruction to create a device token.

Replace the token with REGISTRATION_TOKEN in user.routes.js

Restart your server

Visit the url
http://localhost:3000/users/user-action and you will receive a notification at the client device.

You can find the entire working code here

Happy Coding

With the deprecation of create-react-app, this guide now uses Vite for React projects. Additionally, testing push notifications requires deploying the app, as Firebase needs HTTPS for message delivery. Follow the revised steps for seamless FCM integration.

Sujit M — Sun, 16 Mar 2025 15:47:16 +0000

Using Firebase Cloud Messaging (FCM) with React for Real-Time Notifications

Sujit M ・ Jun 10 '22

#firebase #pubsub #node #react

Lets understand HTTP

Sujit M — Sat, 15 Mar 2025 08:35:12 +0000

What is HTTP ?

HTTP (Hypertext Transfer Protocol) is a protocol designed to transfer file (hypermedia) or information (hypertext) over a network.

But, do you really know how does it work? How does it sends information?

Lets address some of the key concepts of http and then we can dive deep into more details.

What is hypertext?

Hypertext is a system of linking text to other text, enabling users to navigate between different parts of a document or different documents altogether—just like clicking on a hyperlink on a webpage.

What is hypermedia?

Hypermedia extends this concept beyond text to include images, videos, and other multimedia elements.

What is protocol?

Protocol is a set of predefined instructions or set of rules.

Why we need a protocol here?

To standardize the internet. Protocol is must which governs how the data or information will be transferred over a network.

and hope you know about the transfer ;)

Okay, we just understood the meaning of HTTP but what are the rules?

HTTP is stateless, meaning that each request from a client to a server is treated as independent. The server does not retain any information from previous requests. This means that even if you log in once, the server does not inherently "remember" you. To maintain user sessions, the web uses mechanisms like cookies, session storage, and authentication tokens.

Lets simplify

What is a state?

In this context state is nothing but a remembered information over time. We call it stateful (Maintains a state over time) in computer terminology.

Why do we need HTTP?

The internet is a massive network where computers communicate with each other. Without a standardized set of rules (protocol), devices wouldn’t be able to understand each other. HTTP provides a structured way to transfer data, ensuring compatibility between different systems.

Okay, Lets understand how HTTP works now

HTTP uses TCP (Transfer layer protocol) under the hood, What is TCP now? another protocol?

Yes, HTTP is relied on TCP although now with HTTP/3 you can use UDP as well, but that discussion is for another day.

Do i need to understand TCP?

Yes, Its better that you know TCP to understand HTTP.

Go read about it if you are not familiar with TCP

But in simpler terms
Before any HTTP request a TCP connection is created using TCP 3 way handshake

TCP sends SYN (seq=x) then server responds back with SYN_ACK (seq=y, ack=x+1) means i acknowledge for your SYN (Sync) then client responds back with ACK (seq=x+1, ack=y+1) saying i received your response (Acknowledge).

3 Way handshake is a very interesting part. For now remember the these sequence numbers are important and each request has its own sequence and acknowledgment to maintain the order of the data.

Client → Server: SYN, seq=x (Client sends a sync request with an initial sequence number)
Server → Client: SYN, seq=y, ACK, ack=x+1 (Server responds with its own sync request and acknowledges the client's sequence)
Client → Server: ACK, seq=x+1, ack=y+1 (Client acknowledges the server's sequence, completing the handshake)

TCP Connection is a duplex stream so its not optimal or efficient to open TCP connection for each request. So http's default behavior to use same TCP connection for multiple requests by informing to server that keep connection alive, You will see in our example how to keep it alive.

What is Stream now?
To move something in continuous flow
Its beautiful way to flow the information, And we will learn this in next chapter.

There are ways you can inform server that you want to keep connection alive for 8 seconds or 4 seconds, so the TCP connection will wait for provided number of seconds and if no new requests then it will terminate.

Now, lets understand HTTP

How Does an HTTP Request Work?

Once a TCP connection is established, the client sends an HTTP request to the server.

Here’s an example of how a Node.js client can send an HTTP request:

const http = require('http');

const agent = new http.Agent({
  keepAlive: true,  // Keep the connection alive
});

const options = {
  hostname: 'example.com', // Server address
  port: 80, // HTTP default port
  path: '/', // The specific endpoint to access
  method: 'GET', // The type of request (GET, POST, etc.)
  headers: {
    'User-Agent': 'Node.js Client',
    'Accept': 'text/html',  
  },
  agent: agent,  // Attach the agent to the request options
};

const req = http.request(options, (res) => {
  let data = '';

  // Collect response data
  res.on('data', (chunk) => {
    data += chunk;
  });

  // Response received completely
  res.on('end', () => {
    console.log('Response:', data);
  });
});

req.on('error', (err) => {
  console.error('Request Error:', err);
});

req.end();

Breaking Down the Request

Each HTTP request consists of several key components:

Request Line
Method (e.g., GET, POST, PUT, DELETE): Specifies the type of request.
Path: The resource being requested (e.g., '/' for the homepage).
HTTP Version: Specifies the HTTP version (e.g., HTTP/1.1 or HTTP/2).

Headers (Metadata)
Host: The target server address (e.g., example.com).
User-Agent: Identifies the client (e.g., browser or program).
Accept: Specifies the content type the client can handle.
Content-Type: Specifies the format of the request body (e.g., application/json, text/html).
Other headers may include Authorization, Cache-Control, and more.

After sending the request, the server processes it and responds with an HTTP response, which includes:

Status Code (e.g., 200 OK, 404 Not Found, 500 Internal Server Error)
Response Headers (like Content-Type, Content-Length, etc.)
Response Body (e.g., HTML page, JSON data, or other content)

Take a look at the server

const http = require('http');

// Create the HTTP server
const server = http.createServer();

server.on('request', (req, res) => {
  // Handle incoming request
  console.log(`Received ${req.method} request for ${req.url}`);

  // We can use the 'data' event to listen to data in a stream (from the client request)
  req.on('data', (chunk) => {
    console.log(`Received data chunk: ${chunk}`);
  });

  // We can also listen to the 'end' event, which signifies the end of the request stream
  req.on('end', () => {
    console.log('Request stream ended');

    // Send a response to the client
    res.statusCode = 200; // Set response status to 200 OK
    res.setHeader('Content-Type', 'text/plain'); // Set the content type of the response
    res.write('Hello, this is a response from the server!'); // Write part of the response body

    // its good practice to call end() after writing the full response
    res.end(); // End the response and send it to the client
  });
});

// Define the port where the server will listen
const port = 3000;

// Make the server listen for incoming requests on the defined port
server.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

Here, req.end() & res.end() does not terminate the TCP connection, It only informs the server/client that i am done sending information for this request and now waiting for response.

What happens if you don't end the request or forgot to call req.end()?

The request will never be complete, and connection will remain open. The server will wait for the remaining data to be sent and client will be left hanging. This will lead to resource leakage and poor performance.

Cool, Hope you understand basics of HTTP, How does it work what does it uses to send the information and handhsake.

We will learn TCP and Stream in coming chapter stay tuned.

Happy Learning :)

How to Scale Docker Containers with NGINX

Sujit M — Tue, 21 Jan 2025 15:47:52 +0000

Nowadays, nearly every project we build or encounter utilizes Dockerized containers. However, scaling these containers when traffic spikes is a challenge that not everyone understands.

You might be familiar with Kubernetes or Docker Swarm as tools for container orchestration. While adopting Kubernetes is one thing, testing Kubernetes (K8s) locally presents unique challenges for developers. Nevertheless, gaining at least a foundational understanding of Kubernetes, pods, and how K8s can replace Docker Compose is crucial. I'll cover Kubernetes in a separate post, simplifying its implementation and providing guidance on how to use it effectively without unnecessary overhead.

What About Scaling Docker Without Kubernetes?

Let's focus on what can be achieved without Kubernetes. How do we scale Docker effectively?

Assuming you are already familiar with Docker's architecture and functionality.

In simple terms, you can scale a Docker service with a single command:

docker service scale api=10

But What About Handling Incoming Requests?

Once you scale the service, you might have questions like:

How do you handle incoming requests?
How are requests routed to different containers?
What happens if one service instance gets overloaded with traffic?

The Solution: Load Balancer as a Service

We can introduce a load balancer to manage traffic and distribute requests across scaled services using a round-robin or similar strategy.

Here’s how to configure it using Docker Compose with NGINX as the load balancer.

Docker Compose Configuration

version: "3.9"

services:
  api:
    # Container name is omitted for scalability; Docker assigns dynamic names.
    build: .
    # No ports are mapped here as Docker manages ports internally for scaled services.

  nginx:
    image: nginx:latest
    volumes:
      - ./conf.d:/etc/nginx/conf.d
    depends_on:
      - api
    ports:
      - 3000:3000

How NGINX Works in This Setup

The nginx service will handle traffic routing through its configuration file. Here's an example:

NGINX Configuration (conf.d/default.conf)

server {
    listen 3000;
    location / {
        proxy_pass http://api:3000;
    }
}

This configuration proxies all incoming traffic on port 3000 to the api service. Since we've scaled the api service to multiple instances, NGINX will distribute the traffic across them.

Key Considerations:

Dynamic Port Mapping:
We didn't expose ports for the api service in the docker-compose.yml file. This is intentional because scaled services share the same container port internally, and Docker handles dynamic port assignment. NGINX, mapped to a single external port, manages routing to the internal services.
Round-Robin Traffic Distribution:
By default, NGINX distributes traffic in a round-robin manner. This ensures no single instance gets overwhelmed.

And there you have it! You've successfully scaled your API service while ensuring balanced traffic distribution using NGINX as a load balancer. With this setup, scaling Docker services without Kubernetes becomes simple and efficient.

Cheers! Happy Coding

The Journey to Building a Color-Matching Library with Euclidean Distance

Sujit M — Fri, 17 Jan 2025 11:27:08 +0000

Color is one of the most powerful elements in design, branding, and user experience. Whether you're developing a product or designing a website, selecting the right color can make all the difference. But with so many shades, hues, and variations, how do you match the perfect color?

At the core of our solution is Euclidean Distance, a mathematical concept that helps us achieve accurate and efficient color matching. Let’s walk through the journey of how i built this color-matching library and why Euclidean Distance is the key to success.

Why Build a Color-Matching Library?

When developing a library for color matching, the primary goal was to create a solution that allows developers to seamlessly identify and match colors with minimal effort. The library would support the following:

Hex-to-RGB Conversion: To convert color codes from hex format to RGB, which is a more commonly used format for color manipulation.
Color Matching: To identify the closest color in a palette, given a color in hex format.
Distance Calculation: To determine how close or far away two colors are, using a standard measure like Euclidean Distance.
Exact Match Detection: To check if a color exactly matches one from a predefined palette.

The goal was to make the process simple, efficient, and easily integrable into other projects. And that’s where Euclidean Distance comes in.

The Role of Euclidean Distance in Color Matching

What is Euclidean Distance?

In the context of colors, Euclidean Distance is used to calculate the "distance" between two colors in a 3D color space (RGB). Each color is represented by three components: Red, Green, and Blue. The Euclidean distance formula measures how far apart two colors are by considering their RGB values.

In simpler terms, it tells us how "close" or "far" two colors are in terms of their visual appearance. A small distance means the colors are very similar, while a large distance means they are significantly different.

Why Euclidean Distance?

The importance of Euclidean Distance in color matching lies in its ability to quantify how similar two colors are. By calculating the Euclidean distance between a given color and a set of predefined colors, we can efficiently determine the closest match. Here’s why it’s useful:

Precision: Euclidean distance gives a precise measure of how close two colors are, which allows for accurate color matching.
Simplicity: It's easy to implement and understand, making it a perfect choice for many color-matching applications.
Scalability: As the number of colors in the palette grows, Euclidean distance helps in quickly identifying the closest match without the need for complex computations.

In this color-matching library, I used Euclidean Distance to compare any given hex color to a predefined palette of colors and find the closest match. It makes the process of matching colors both accurate and fast.

What Can We Achieve with Euclidean Distance?

By leveraging Euclidean Distance, this library accomplishes the following:

Accurate Color Matching: Given a color in hex format, the library calculates the closest match in a predefined color palette using the Euclidean Distance between the RGB values. For example:

const { colorName, exactMatch, closestHex } = identifyColor("#DD4C22");
console.log(colorName);  // Output: "Vivid Orange"
console.log(exactMatch); // Output: true (if exact match)
console.log(closestHex); // Output: "#DD4C22" (closest hex code)

Hex-to-RGB Conversion: With the help of Euclidean Distance, we also provide a utility to convert hex values to RGB format for further manipulation or analysis:

const rgb = rgb("#DD4C22");
console.log(rgb); // Output: [221, 76, 34] (RGB array)

Color Distance Calculation: The ability to calculate the Euclidean distance between two RGB colors allows us to determine how similar two colors are, which can be used for tasks like:

Finding colors that are visually similar.
Determining the perceptual difference between two colors for UI design or accessibility.

Example:

    const rgb1 = [221, 76, 34];
    const rgb2 = [255, 255, 255];
    const distance = calculateDistance(rgb1, rgb2);
    console.log(distance); // Output: a numeric value representing the "distance" between the two colors

Exact Match Detection: The exactMatch boolean helps determine whether a color exactly matches one in the palette. This is helpful for ensuring that users can identify colors they are certain about.

The journey of building this color-matching library has been an exciting one. By integrating Euclidean Distance, I created a solution that is simple, fast, and highly effective for color matching tasks. Whether you’re building a design system, working on a color-picker tool, or developing a branding kit, this package allows you to seamlessly match and identify colors in your application.

Euclidean Distance has proven to be an invaluable tool in color science and applications. It provides a reliable way to measure color similarity, paving the way for many use cases such as accurate color matching, RGB conversion, and distance calculation between colors.

My goal was to create a tool that streamlines the process of color selection and matching for developers and designers. With this library, I hope to make your design tasks easier and more efficient.

Ready to Get Started?

You can install the package and get started right away:

npm install @iamsuz/color-kit

Here’s how to use it:


const { identifyColor } = require("@iamsuz/color-kit");
const { colorName, closestHex, exactMatch } = identifyColor("#DD4C22");
console.log(colorName);  // "Vivid Orange"
console.log(exactMatch); // true
console.log(closestHex); // "#DD4C22"

This library does have Typescript support

I hope you find the library useful, and I look forward to seeing what you build with it!

Using Firebase Cloud Messaging (FCM) with React for Real-Time Notifications

Sujit M — Fri, 10 Jun 2022 11:08:30 +0000

Note: This guide is part of a public GitHub repository that you can refer to if you encounter any issues while implementing the notification system. Feel free to check it out for the full code and additional resources.
Repository: Repo

Integration with React

This is quite simple and straight forward.

I believe you do have the project ready if not then create using vite

We are using a react with typescript

npm create vite@latest my-vue-app --template react-ts

To work with notification you need a device token APN token.(App registration on specific device) for that we need to convert your app into a PWA (Progressive Web App).

What is PWA?

At a high level, a PWA consists of a web application manifest to give the browser information about your app, and a service worker to manage the offline experience.

Lets add PWA Support

npm install vite-plugin-pwa --save-dev

Refer Vite PWA for more info.

Now, open firebase console and set up a new project.

Navigate to project Settings
Locate Your apps
Add a new app by clicking on Add app

You can select any environment but in our case we will choose web

Select web
Register your app

Remember to enable hosting as well

Once you finish the process you will receive the file and instructions.

Now we will create a notification modal.

To create a notification modal, let's install Bootstrap.

npm install bootstrap react-bootstrap

Open App.tsx and replace with below code.

import "./App.css";
import { useState } from "react";
import { Button, Toast } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
    const [show, setShow] = useState(false);

    return (
        <div className="App">
            <Toast
                onClose={() => setShow(false)}
                show={show}
                delay={3000}
                autohide
                animation
                style={{
                    position: "absolute",
                    top: 20,
                    right: 20,
                }}
            >
                <Toast.Header>
                    <img src="holder.js/20x20?text=%20" className="rounded mr-2" alt="" />
                    <strong className="mr-auto">Notification</strong>
                    <small>5 mins ago</small>
                </Toast.Header>
                <Toast.Body>This will give us the Notification details</Toast.Body>
            </Toast>
            <header className="App-header">
                <Button onClick={() => setShow(true)}>Show Toast</Button>
            </header>
        </div>
    );
}

export default App;

This will create a bootstrap toaster to display

Lets add firebase JS SDK

npm i firebase

Now, create a new file in src directory firebase.js and add below code

import { initializeApp } from 'firebase/app';
import { getMessaging, getToken, onMessage } from "firebase/messaging";


const firebaseConfig = {
    apiKey: API_KEY,
    authDomain: AUTH_DOMAIN,
    projectId: PROJECT_ID,
    storageBucket: STORAGE_BUCKET,
    messagingSenderId: MESSAGING_SENDER_ID,
    appId: APP_ID,
    measurementId: MEASUREMENT_ID
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app); //Comment this out

Import firebase.js in your App.tsx

import "./firebase.js"

Create a new file in public directory called firebase-messaging-sw.js and keep it empty for now

Start your react application

npm run dev

This is how your screen will look like

Generate a token

go to firebase.js and create new function which will request a permission from a user

const messaging = getMessaging(app);


export const getTokens = async (setTokenFound) => {
//VAPID_KEY is the Web push certificates key pair
    return getToken(messaging, {vapidKey: VAPID_KEY }).then((currentToken) => {
        if (currentToken) {
            console.log('current token for client: ', currentToken);
            setTokenFound(true);
            // Track the token -> client mapping, by sending to backend server
            // show on the UI that permission is secured
        } else {
            console.log('No registration token available. Request permission to generate one.');
            setTokenFound(false);
            // shows on the UI that permission is required 
        }
    }).catch((err) => {
    console.log('An error occurred while retrieving token. ', err);
    // catch error while creating client token
});
}

Generate VAPID_KEY

head back to the firebase console

Open Project Settings
Navigate to tab Cloud Messaging
Locate Web configuration
Select Web push certificate
Generate Key pair

Update vapidKey in firebase.js file to newly generated key.

What is VAPID?

The first is to restrict the validity of a subscription to a specific application server (so, by using VAPID, only your server will be able to send notifications to a subscriber).

The second is to add more information to the push notification, so that the push service operator knows who is sending the notifications. If something is going wrong with your notifications, the operator knows who you are and can contact you. Moreover, they can offer you some kind of interface to monitor your push notifications.

Now back to App.tsx and add the below code

import {getTokens} from './firebase'

// Inside a App function Just to be sure 😅
const [isTokenFound, setTokenFound] = useState(false);
getTokens(setTokenFound);

Now open you devtool F12 and check console, you will have token if not there are might be error saying

Permission denied.

Ok this is the part is bit interesting you can manually unable the notification allow from i button before URL

But the interesting part is you can change your localhost:3000 to 127.0.0.1:3000 and it will ask you for a permission on chrome but both will work on firefox

Note - if you are using IPV6 then 127.0.0.1 will not work

The operation is unsecure

then the file you created. in public folder is not correct

check if the files has correct name as firebase-messaging-sw.js and it should be empty for now.

Perfect All seems working till this point and you might have a token as well but now we want to see the notification from the server

go to firebase-messaging-sw.js and copy below code

// Scripts for firebase and firebase messaging
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing the generated config
const firebaseConfig = {
    apiKey: API_KEY,
    authDomain: AUTH_DOMAIN,
    projectId: PROJECT_ID,
    storageBucket: STORAGE_BUCKET,
    messagingSenderId: MESSAGING_SENDER_ID,
    appId: APP_ID,
    measurementId: MEASUREMENT_ID
};

firebase.initializeApp(firebaseConfig);

// Retrieve firebase messaging
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
  console.log('Received background message ', payload);
 // Customize notification here
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});

Now go to src->firebase.js and paste a listener function

export const onMessageListener = () =>
  new Promise((resolve) => {
    onMessage(messaging, (payload) => {
      console.log("payload", payload)
      resolve(payload);
    });
  });

back to App.tsx and add use the newly created listener

import {getTokens, onMessageListener} from './firebase'

// Inside APP function
onMessageListener().then(payload=>{
  console.log(payload)
  setShow(true)
}).catch(err=>console.log(err))

Okay, there is one thing need to receive our first message is we have to host this repo, Since firebase does not allow to send messages on http and it needs a secure channel https

Lets use firebase hosting

Install firebase tools

npm install -g firebase-tools

firebase login

This will prompt you to login to your google account or the account you used to create above project

firebase init

use space bar to select
Select Use an existing project
Select the project that you created from google console
Choose the options from below images

Now lets deploy
Verify things before you deploy.

Check your firebase.json and make sure deploy directory is mentioned correctly

{
    "hosting": {
        "public": "dist", // Change dist to your build directory
        "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
    }
}

Build your project

npm run build

Lets deploy

firebase deploy

All good, Awesome! we are ready to receive our first message.

Open firebase console
Navigate to all products from left menu
Find Cloud Messaging
Once you open Cloud Messaging

Create your first Campaign
Select Firebase Notification messages

Provide the required details and click on Send Test Message it will show a modal with asking for FCM Registration Token Like this

Here you add the token from your web console that we just generated. This is your device token where firebase will send the notification.

Note- Notification will not show the same text as we have entered in firebase since we have not configured for demo purpose.

This is the front end part for the backend part i will create part 2 post which will cover server side notifications using firebase-admin and also subscriptions

Reminder: If you get stuck during the process of creating the notification system, you can always refer to this public GitHub repository. It's a great reference to guide you through the steps.
Repository: Repo

Hope it was useful.

Happy learning.