DEV Community: Deepak Sharma

Use OpenAI’s Node.js SDK with DeepSeek R1 Running Locally via Ollama

Deepak Sharma — Sun, 09 Feb 2025 07:42:48 +0000

Introduction

DeepSeek R1 is an open-source LLM that offers powerful generative AI capabilities. If you're running it locally using Ollama, you might be wondering how to integrate it with your Node.js applications. This guide will show you how to set up and use the OpenAI SDK with your locally running DeepSeek R1 model.

Step 1: Start DeepSeek R1 Locally with Ollama

Make sure Ollama is running and has the DeepSeek R1 model downloaded. If you haven't installed it yet, do this:

ollama pull deepseek-r1:1.5b

Then, start a test session to verify it's working:

ollama run deepseek-r1:1.5b

Step 2: Install Dependencies (Nodejs)

First, ensure you have Node.js installed, then install the OpenAI SDK:

npm install openai

Step 3: Configure OpenAI SDK to Use Ollama

const OpenAI = require("openai");

const openai = new OpenAI({
    baseURL: "http://localhost:11434/v1", // Pointing to Ollama's local API
    apiKey: "ollama", // Required by the OpenAI SDK, but Ollama doesn’t validate it
});

async function chatWithDeepSeek(prompt) {
    try {
        const response = await openai.chat.completions.create({
            model: "deepseek-r1:1.5b", // Ensure this model is running
            messages: [{ role: "user", content: prompt }],
        });

        console.log(response.choices[0].message.content);
    } catch (error) {
        console.error("Error:", error.message);
    }
}

// Test the function
chatWithDeepSeek("Hello, how are you?");

Step 4: Enabling Streaming Responses

To improve performance and get responses in real-time, enable streaming
Streaming Version of the Function

async function chatWithDeepSeekStream(prompt) {
    try {
        const stream = await openai.chat.completions.create({
            model: "deepseek-r1:1.5b",
            messages: [{ role: "user", content: prompt }],
            stream: true, // Enable streaming
        });

        for await (const chunk of stream) {
            process.stdout.write(chunk.choices[0]?.delta?.content || "");
        }
        console.log("\n");
    } catch (error) {
        console.error("Error:", error.message);
    }
}

chatWithDeepSeekStream("Tell me a fun fact about space.");

Custom Hooks made easy :)

Deepak Sharma — Sat, 11 May 2024 12:08:33 +0000

Custom Hooks in React: A Beginner's Guide

Custom hooks in React can sometimes seem like an advanced topic, intimidating beginners with their complexity. However, once you grasp the fundamentals, you'll find that custom hooks are an incredibly powerful tool that can simplify your code and enhance reusability. In this article, we'll break down custom hooks into simple, digestible pieces, demystifying their concept and empowering you to leverage them effectively in your React applications. Whether you're just starting your journey with React or looking to deepen your understanding, by the end of this guide, you'll feel confident in creating and using custom hooks in your projects. Let's dive in!

What Are Custom Hooks?
Custom hooks are simply functions that encapsulate common logic or behavior in your application. They follow the naming convention of starting with the word "use," making them recognizable as hooks.

const useMyHook = () => { /* your logic */ }

Why Custom Hooks?
Custom hooks empower you to abstract away repetitive code into reusable functions, promoting a modular and scalable architecture for your React applications.

But how do they work, and how can you create your own? Let's explore further.
Sure, let's create examples of two common custom hooks: useToggle and useFetch

1. useToggle Hook:

The useToggle hook is useful for managing boolean state toggles in your components.

import { useState } from 'react';

const useToggle = (initialState = false) => {
  const [state, setState] = useState(initialState);

  const toggle = () => {
    setState((prevState) => !prevState);
  };

  return [state, toggle];
};

// Usage example:
// const [isOpen, toggleOpen] = useToggle(false);

You can use it in your component like this:

const MyComponent = () => {
  const [isOpen, toggleOpen] = useToggle(false);

  return (
    <div>
      <button onClick={toggleOpen}>
        {isOpen ? 'Close' : 'Open'} Menu
      </button>
      {isOpen && (
        <ul>
          <li>Menu Item 1</li>
          <li>Menu Item 2</li>
          <li>Menu Item 3</li>
        </ul>
      )}
    </div>
  );
};

This hook simplifies managing boolean state toggles, such as opening and closing modals, collapsible sections, or toggling visibility of elements.

2. useFetch Hook:

The useFetch hook simplifies data fetching in React components. It handles fetching data from an API endpoint and manages loading and error states.

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      // Cleanup function to cancel fetch on unmount or on re-fetch
    };
  }, [url]);

  return { data, loading, error };
};

// Usage example:
// const { data, loading, error } = useFetch('https://api.example.com/data');

const MyComponent = () => {
  const { data, loading, error } = useFetch(`https://api.example.com/data?search=${debouncedSearchTerm}`);

  // Render your component based on data, loading, and error states
};

Conclusion

In this article, we've explored the concept of custom hooks in React and how they can simplify your code and enhance reusability. We started by understanding what custom hooks are and why they're valuable in React development. We then delved into creating practical examples of custom hooks, including useToggle and useFetch.

As you continue your journey with React, consider exploring more custom hooks. A great resource for discovering additional hooks is usehooks-ts where you can find a variety of pre-made hooks for different use cases.

With practice, you'll become more comfortable leveraging custom hooks to build powerful and efficient React applications. Happy coding!

Happy coding!

"TypeScript and process.env: A Match Made in Node.js Heaven"

Deepak Sharma — Tue, 26 Sep 2023 14:54:27 +0000

Introduction:

Elevate your Node.js configuration game in just two simple steps! In this guide, we'll walk you through the process of adding TypeScript types to process.env, ensuring type safety and minimizing runtime errors. Transform your environment variables into a robust and error-resistant asset for your Node.js applications.

Step:1

Create /types/env.d.ts in the root of your project.
and add your types in ProcessEnv interface as shown below.

/types/env.d.ts



export {};

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      SUPABASE_ANON_KEY: string;
      SUPABASE_PROJECT_URL: string;
      ENV: "test" | "dev" | "prod";
    }
  }
}

Step:2

you have created types of your process.env but typescipt dont know where you defined it , so add your types to ts.config.json as shown below.

ts.config.json



{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./types"]
  }
}

🎉🎉 you have added types to your process.env.
you can check it in your code editor by auto suggestions.

Enhancing Your CSS Skills: Dive into :not, :is, and :where Pseudo-Classes.

Deepak Sharma — Sun, 11 Jun 2023 15:52:06 +0000

Introduction:

In the world of CSS, readability and maintainability are crucial factors when it comes to writing clean and efficient code. Fortunately, CSS provides powerful pseudo-classes such as :is, :where, and :not, which can significantly improve the readability of your stylesheets. These pseudo-classes allow you to write concise and targeted selectors, making your code easier to understand and navigate. In this blog post, we will explore how leveraging the :is, :where, and :not pseudo-classes can enhance the readability of your CSS code, leading to more maintainable and efficient stylesheets. Let's dive in and unlock the potential of these powerful selectors!

Assuming you have a fundamental knowledge of what CSS pseudo classes are, let's begin.

:not() :

:not(<complex-selector-list>) {
   /* styles */
}

The parameter for the :not() pseudo-class must be a list of one or more selectors separated by commas.

Consider the blow index.html :

<div class="card">
  <h1>Heading</h1>
  <p>Caption</p>
  <p>Paragraph</p>
  <button>Learn More</button>
</div>

Just assume for any reason you wanted to apply some common styles to all the elements except the button in the above code.

How will you respond? The straightforward solution is to override the button's styles, right?

This is where the ':not()' function comes into play, it will apply the styles to all but ignore the elements passed as a parameter to it.

.card > :not(button) {
  color: teal;
  margin-top: 3px;
  letter-spacing: 0.8px;
}

Above styles will only be applied to all the direct children of .card except the button.

The amazing feature of this pseudo-class is that it allows for chaining: `:not(x) y:not(z)`.

: is() and where() :

Basically is() and where() are similar and help in writing more clean and readable code.

:is(<complex-selector-list>) {
   /* styles */
}

The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

<ol>
    <li>Saturn</li>
    <li>
        <ul>
            <li>Mimas</li>
            <li>Enceladus</li>
            <li>
                <ol>
                    <li>Voyager</li>
                    <li>Cassini</li>
                </ol>
            </li>
            <li>Tethys</li>
        </ul>
    </li>
    <li>Uranus</li>
    <li>
        <ol>
            <li>Titania</li>
            <li>Oberon</li>
        </ol>
    </li>
</ol>

It might sound confusing, but once you see the "CSS," everything will make sense. Take the HTML code above, for example. Imagine that you wanted to change the style of the "ol" element, which is a child of the "ol" or "ul" element, and again, which is a child of the "ol" or "ul" element.

I was talking aboout the area highlited in red.

:is(ol, ul) :is(ol, ul) ol {
  list-style-type: lower-greek;
  color: chocolate;
}
Wow ! Do you think the CSS is now easier to read?

The sole distinction between `is()` and the `where()` pseudo-class is that `where()` lacks the specificity that `is()` possesses.

List of most commonly used pseudo-class :

:hover - Matches when an element is being hovered over by the mouse.
:active - Matches when an element is being activated (clicked or pressed).
:focus - Matches when an element has received focus (such as through keyboard navigation).
:visited - Matches visited links.
:first-child - Matches the first child element of its parent.
:last-child - Matches the last child element of its parent.
:nth-child() - Matches elements based on their position among siblings (e.g., :nth-child(2) selects the second child).

and the list goes on...

Conclusion:

In conclusion, by harnessing the power of CSS pseudo-classes like :is, :where, and :not, we can significantly improve the readability and maintainability of our code. These pseudo-classes provide us with flexible and targeted selectors that allow us to write concise and expressive stylesheets.

Building a Real-time API with Next.js, Nest.js, and Docker: A Comprehensive Guide

Deepak Sharma — Wed, 07 Jun 2023 14:09:58 +0000

In this blog post, I will guide you through the process of creating a real-time API using the powerful combination of Next.js, Nest.js, and Docker. We will start by building a simple UI and demonstrate how to listen for server changes in real-time from the frontend. Additionally, I will show you how to leverage Docker to containerize your application. As an added bonus, you'll learn how to utilize custom React hooks to enhance the functionality and efficiency of your application. Join me on this step-by-step journey as we explore the world of real-time APIs, containerization, and React hooks.

Check out the source code

Step 1: Installing packages and Containerize the Backend.

Step 2: Writing Backend APIs for the Frontend.

Step 3: Installing packages and Containerize the Frontend.

Step 4: Listening to Real-time Updates on the Frontend.

Let's kickstart this exciting journey by diving into code.

Let's Step 1: Containersize Backend.

Install the nestjs cli if not installed yet:

npm i -g @nestjs/cli

Create a new project using nestjs cli:

nest new project-name

Create a Dockerfile in the root of the folder and paste the following code. Do not worry, I will explain each line of code step by step.

FROM node:16
WORKDIR /app
COPY . .
RUN yarn install
RUN yarn build
EXPOSE 3001
CMD [ "yarn" , "start:dev" ]

FROM node:16 in a Dockerfile specifies the base image to use for the container as Node.js version 16.
WORKDIR /app in a Dockerfile sets the working directory inside the container to /app.
COPY . . in a Dockerfile copies all the files and directories from the current directory into the container.
RUN yarn install in a Dockerfile executes the yarn install command to install project dependencies inside the container.
RUN yarn build in a Dockerfile executes the command yarn build during the image building process, typically used for building the project inside the container.
EXPOSE 3001 in a Dockerfile specifies that the container will listen on port 3001, allowing external access to that port.
CMD [ "yarn" , "start:dev" ] in a Dockerfile sets the default command to run when the container starts, executing yarn start:dev.
In the root of the folder, create a docker-compose.yml file, and paste the following code. I will explain it briefly because it is really simple.

version: '3.9'
services:
  nestapp:
    container_name: nestapp
    image: your-username/nestjs
    volumes:
      - type: bind
        source: .
        target: /app
    build: .
    ports:
      - 3001:3001
    environment:
      MONGODB_ADMINUSERNAME: root
      MONGODB_ADMINPASSWORD: example
      MONGODB_URL: mongodb://root:example@mongo:27017/
    depends_on:
      - mongo
  mongo:
    image: mongo
    volumes:
      - type: volume
        source: mongodata
        target: /data/db
    ports:
      - 27017:27017
    environment:
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: example
volumes:
  mongodata:

To build nestjs image, we use Dockerfile and pass some environment variables as well as "bind" volume to apply the changes to the continuous.
Additionally, we are running a mongodb container that stores data on volumes and passes a few environment variables to it.

In order to run the container, run the command docker compose up -d using the images we created earlier.

Step 2: Writing Backend APIs for the Frontend.

When calling the backend's api from the frontend using port 3001, we will run into the CORS problem. Therefore, update your main to resolve this main.ts:

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors();
  await app.listen(3001);
}

nest g resource order --no-spec

By running the above command, you will be able to create the necessary files like the module, service, and controller through Nest CLI.

As we will be using MongoDB as our data base run the below package :

npm i @nestjs/mongoose mongoose

To let Nestjs know that MongoDB is being used in our project, update the import array in 'app.module.ts'.

imports: [MongooseModule.forRoot(process.env.MONGODB_URL), OrderModule]

To create a MongoDB schema, add schema.ts to the'src/order' directory.

Because the schema is so straight forward, let me explain briefly how it works.

import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose';
import { HydratedDocument } from 'mongoose';

@Schema({ timestamps: true })
export class Order {
  @Prop({ required: true })
  customer: string;

  @Prop({ required: true })
  price: number;

  @Prop({ required: true })
  address: string;
}

export const OrderSchema = SchemaFactory.createForClass(Order);

// types
export type OrderDocument = HydratedDocument<Order>;

@Schema({ timestamps: true }) enables automatic creation of createdAt and updatedAt fields in the schema.
In the schema, @Prop([ required: true ]) specifies that this field is a required one.

The Order module does not know about the schema, so import it, now your import array should update as follows:

  imports: [
    MongooseModule.forFeature([{ schema: OrderSchema, name: Order.name }]),
  ],

Our backend will have two API's

http://localhost:3001/order (GET request) to get all orders from MongoDB.
http://localhost:3001/order (POST request) to create a new order.

Let me explain the code in order.service.ts, which is really simple, since you simply need to call those methods from your order.controller.ts.

import { Injectable } from '@nestjs/common';
import { InjectModel } from '@nestjs/mongoose';
import { Order } from './schema/order.schema';
import { Model } from 'mongoose';
import { OrderGateway } from './order.gateway';

@Injectable()
export class OrderService {
  constructor(
    @InjectModel(Order.name) private orderModel: Model<Order>,
    private orderGateway: OrderGateway,
  ) {}

  async getAll(): Promise<Order[]> {
    return this.orderModel.find({});
  }

  async create(orderData: Order): Promise<Order> {
    const newOrder = await this.orderModel.create(orderData);
    await newOrder.save();

    return newOrder;
  }
}

We are simply returning all of the orders that are saved in MongoDB with the getAll() function.
The data needed to generate an order is taken out of the create() function, saved in our MongoDB, and then the created order is returned from the function.

Now all you have to do is call those functions from your order.controller.ts file as described below.

@Controller('order')
export class OrderController {
  constructor(private readonly orderService: OrderService) {}

  @Get()
  async findAll(): Promise<Order[]> {
    return this.orderService.getAll();
  }

  @Post()
  async create(@Body() orderData: Order): Promise<Order> {
    return this.orderService.create(orderData);
  }
}

As we will be using Socket.io to listen realtime upadtes lets download requried packages :

yarn add -D @nestjs/websockets @nestjs/platform-socket.io socket.io

We need to develop a "gateway" in order to use socket.io in nestjs. A gateway is nothing more than a straightforward class that simplifies socket handling.Io is incredibly easy.

Create a order.gateway.ts into your order folder and past the below code.

import {
  OnGatewayConnection,
  OnGatewayDisconnect,
  WebSocketGateway,
  WebSocketServer,
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

@WebSocketGateway({ cors: true })
export class OrderGateway implements OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer() server: Server;

  handleConnection(client: Socket, ...args: any[]) {
    console.log(`Client connected:${client.id}`);
  }

  handleDisconnect(client: Socket) {
    console.log(`Client disconnected:${client.id}`);
  }

  notify<T>(event: string, data: T): void {
    this.server.emit(event, data);
  }
}

handleConnection is called when any new socket is connected.
handleDisconnect is called when any socket is disconneted.
The notify function emits an event with a specified name and data using a server to other sockets.

Our application does not yet recognise the "gateway" we have created, therefore we must import the order.gateway.ts file into the "providers" array of the order.module.ts as shown below:

  providers: [OrderService, OrderGateway],

Use the gateway's notify function in the create method of the 'OrderService' to alert other sockets when an order is made. Don't forget to inject the gateway into the constructor as well.

updated create function should look like :

  async create(orderData: Order): Promise<Order> {
    const newOrder = await this.orderModel.create(orderData);
    await newOrder.save();
    this.orderGateway.notify('order-added', newOrder);

    return newOrder;
  }

The backend portion is now fully finished.

Step 3: Installing packages and Containerize the Frontend.

First lets start with creating a Next.js application :

npx create-next-app@latest

and go a head with default option.

Now, create a "Dockerfile" in the root of your Next.js application and paste the following; as this is quite similar to the "Dockerfile" for the backend, I won't go into much detail here.

FROM node:16
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
EXPOSE 3000
CMD [ "npm" , "run" , "dev" ]

On port: 3000, we'll be running our frontend.

Let's build 'docker-compose.yml' with the code below:

version: "3.9"
services:
  nestapp:
    container_name: nextapp
    image: your-username/nextjs
    volumes:
      - type: bind
        source: .
        target: /app
    build: .
    ports:
      - 3000:3000

We utilise the "bind" volume because when we update the code, the container reflects our changes.

For your frontend container to start, run docker compose up -d.

Step 4: Listening to Real-time Updates on the Frontend.

Install sockt.io-client to subscribe to server updates.

npm install socket.io-client

On the home page we will display all the orders list.

inorder to fetch orders we will be creating a custom hook useOrder

you may think why to use a custom hook ?

I'm using a custom hook because I don't want to make my JSX big, which I believe is difficult to maintain.

Overfiew of useOrder hook :

It will essentially maintain the state by retrieving orders and listening to server real-time updates.

import { socket } from "@/utils/socket";
import { useEffect, useState } from "react";

interface Order {
  _id: string;
  customer: string;
  address: string;
  price: number;
  createdAt: string;
  updatedAt: string;
}

const GET_ORDERS_URL = "http://localhost:3001/order";
const useOrder = () => {
  const [orders, setOrders] = useState<Order[]>([]);
  //   responseable to fetch intital data through api.
  useEffect(() => {
    const fetchOrders = async () => {
      const response = await fetch(GET_ORDERS_URL);
      const data: Order[] = await response.json();
      setOrders(data);
    };

    fetchOrders();
  }, []);

  //   subscribes to realtime updates when order is added on server.
  useEffect(() => {
    socket.on("order-added", (newData: Order) => {
      setOrders((prevData) => [...prevData, newData]);
    });
  }, []);

  return {
    orders,
  };
};

export default useOrder;

Create a 'OrdersList' component that will utilise the 'useOrders' hook to produce the list.

OrderList :

"use client";
import useOrder from "@/hooks/useOrder";
import React from "react";

const OrdersList = () => {
  const { orders } = useOrder();

  return (
    <div className="max-w-lg mx-auto">
      {orders.map(({ _id, customer, price, address }) => (
        <div key={_id} className="p-2 rounded border-black border my-2">
          <p>Customer: {customer}</p>
          <p>Price: {price}</p>
          <p>Address: {address}</p>
        </div>
      ))}
    </div>
  );
};

export default OrdersList;

Render 'OrderList' just in the home route ('/'):

const Home = () => {
  return (
    <>
      <h1 className="font-bold text-2xl text-center mt-3">Orders</h1>
      <OrdersList />
    </>
  );
};

I am using TailwindCSS you can skip it.

Time to create another Custom Hook useCreateOrder which will be responeble to return function which will help th create a order from a form.

useCreateOrder :

const Initial_data = {
  customer: "",
  address: "",
  price: 0,
};
const useCreateOrder = () => {
  const [data, setData] = useState(Initial_data);

  const onChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = target;
    setData((prevData) => ({ ...prevData, [name]: value }));
  };

  const handleSubmit = async (event: FormEvent) => {
    event.preventDefault();
    if (!data.address || !data.customer || !data.price) return;

    try {
      await fetch("http://localhost:3001/order", {
        method: "POST",
        headers: {
          "content-type": "application/json",
        },
        body: JSON.stringify(data),
      });

      setData(Initial_data);
    } catch (error) {
      console.error(error);
    }
  };

  return {
    onChange,
    handleSubmit,
    data,
  };
};

As you can see, I control the state and return methods that are used to build orders because doing otherwise results in a thin JSX.

Create a new folder called app/create, and in the page.tsx file of the create folder, there will be a display form that will create an order.

create/page.tsx

const Create = () => {
  const { handleSubmit, onChange, data } = useCreateOrder();

  return (
    <form
      onSubmit={handleSubmit}
      className="bg-teal-900 rounded absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col p-3 space-y-3 w-1/2"
    >
      <input
        type="text"
        name="customer"
        onChange={onChange}
        value={data.customer}
        className="bg-slate-300 p-2 outline-none"
        autoComplete="off"
        placeholder="customer"
      />
      <input
        type="text"
        name="address"
        onChange={onChange}
        value={data.address}
        autoComplete="off"
        className="bg-slate-300 p-2 outline-none"
        placeholder="address"
      />
      <input
        type="number"
        name="price"
        onChange={onChange}
        value={data.price}
        autoComplete="off"
        className="bg-slate-300 p-2 outline-none"
        placeholder="price"
      />

      <button type="submit" className="py-2  rounded bg-slate-100">
        submit
      </button>
    </form>
  );
};

Once you have completed the form and clicked "Submit," an order will be created.

Congratulations you have created a realtime-api which can listen changes on your server.

Conclusion :

In conclusion, we have successfully built a real-time API using Next.js, Nest.js, and Docker. By containerizing our backend and frontend, and leveraging custom React hooks.

DEV Community: Deepak Sharma

Use OpenAI’s Node.js SDK with DeepSeek R1 Running Locally via Ollama

Introduction

Step 1: Start DeepSeek R1 Locally with Ollama

Step 2: Install Dependencies (Nodejs)

Step 3: Configure OpenAI SDK to Use Ollama

Step 4: Enabling Streaming Responses

Custom Hooks made easy :)

"TypeScript and process.env: A Match Made in Node.js Heaven"

Step:1

Step:2

Enhancing Your CSS Skills: Dive into :not, :is, and :where Pseudo-Classes.

Introduction:

:not() :

The amazing feature of this pseudo-class is that it allows for chaining: :not(x) y:not(z).

: is() and where() :

The sole distinction between is() and the where() pseudo-class is that where() lacks the specificity that is() possesses.

List of most commonly used pseudo-class :

Conclusion:

Building a Real-time API with Next.js, Nest.js, and Docker: A Comprehensive Guide

Step 1: Installing packages and Containerize the Backend.

Step 2: Writing Backend APIs for the Frontend.

Step 3: Installing packages and Containerize the Frontend.

Step 4: Listening to Real-time Updates on the Frontend.

Let's Step 1: Containersize Backend.

Step 2: Writing Backend APIs for the Frontend.

Step 3: Installing packages and Containerize the Frontend.

Step 4: Listening to Real-time Updates on the Frontend.

you may think why to use a custom hook ?

Conclusion :

The amazing feature of this pseudo-class is that it allows for chaining: `:not(x) y:not(z)`.

The sole distinction between `is()` and the `where()` pseudo-class is that `where()` lacks the specificity that `is()` possesses.