DEV Community: Developer Sabbir

Complete Crash Course: Elysia.js Framework in Bangla - Build Scalable Apps - 2024

Developer Sabbir — Mon, 23 Sep 2024 11:56:32 +0000

Click on that bigger thumbnail to watch the full course on YouTube.

how to connect the PostgreSQL database with Django

Developer Sabbir — Sun, 08 Sep 2024 17:37:33 +0000

🎉 Click the larger photo to watch YouTube video

How to host NodeJs server into the docker container

Developer Sabbir — Sat, 23 Sep 2023 20:40:52 +0000

In this tutorial, I'm going to show you how you can create your Nodejs server to your docker container.
Ever wondered how streamlined your workflow can be when you host your NodeJS server in a Docker container? 💭💼

Stay tuned, as I’m thrilled to share insights around it. Master the art of simplifying complex systems with easy implementation! 💡

Follow these step to create and run your docker container

Creating Dockerfile & Configure

Create a file called Dockerfile in your root direcotry

  touch Dockerfile

  FROM node:slim

  WORKDIR /shopify_server

  COPY . ./package*.json ./

  RUN npm install

  EXPOSE 5000

  CMD ["npm", "run", "start"]

Run a docker build command

  docker build -t shopify-docker-image .

docker build This part of the command tells Docker to build a Docker image. Docker images are like templates or blueprints for creating containers.
-t shopify-docker-image: The -t flag is used to specify a name and optionally a tag for the image you're building. In this case, you're giving the image the name "shopify-docker-image." The name/tag combination is typically used to identify and manage different versions of an image.
.: The period (dot) at the end of the command specifies the build context. The build context is the set of files and directories that Docker will use to build the image. In this case, Docker will look for a Dockerfile in the current directory (the directory where you're running the docker build command) and use it as the instructions for building the image.
- Create container and start

  docker run --rm -d -p 5000:5000 --name shopify-docker-container shopify-docker-image

docker run: This part of the command tells Docker to run a container.
--rm: This flag tells Docker to automatically remove the container when it exits. This is useful for cleaning up containers after they've finished running to avoid cluttering your system with unused containers.
-d: This flag tells Docker to run the container in detached mode, which means the container runs in the background, and you get your terminal prompt back immediately.
-p 5000:5000: This flag is used to publish ports from the container to the host system. In this case, it's mapping port 5000 from the container to port 5000 on the host. This allows you to access any services running inside the container on port 5000 from your host machine.
--name shopify-docker-container: This flag assigns a name to the running container. In this case, the container will be named "shopify-docker-container." You can use this name to reference the container in other Docker commands.
shopify-docker-image: This is the name of the Docker image that you want to use for creating the container. In your previous command, you built an image with the name "shopify-docker-image," and now you are running a container based on that image.

docker ps
- Container ID: A unique identifier for the container.
- Image: The Docker image from which the container was created.
- Command: The command that is running inside the container.
- Created: The timestamp indicates when the container was created.
- Status: The current status of the container (e.g., Up, Exited, etc.).
- Ports: Information about port mappings between the container and the host.
- Names: The name(s) assigned to the container (if any).

How to Create OWN Visual Studio Code Extension | Code Snippets Extension

Developer Sabbir — Sun, 17 Sep 2023 11:02:03 +0000

Hello guys

Are you looking to enhance your coding experience in Visual Studio Code? In this informative video tutorial, ST Sabbir, a seasoned developer, will guide you step-by-step on how to create your own Visual Studio Code extension, specifically focusing on code snippets. This extensive tutorial is perfect for both beginner and intermediate programmers who want to how to create visual studio code snippets extension.🔥🔥

⭕OPEN SOURCE CODE SNIPPETS⭕
https://github.com/devlopersabbir/sabbir-code-snippet

YouTube Video Link

Contributing...

Since this package is fully open-source so, if you would like to contribute to
this project, please follow these steps:

Fork this repository.
Clone your forked repository.
For your changes.
Open snippets directory and if you want to add new framework snippet then create a new file like snippets.java.snippets or Make your changes, and commit them.
- Remember, don't forget to added your language id inside this array

   "snippets": [
      {
        "language": "html",
        "path": "./snippets/snippets.html-snippets"
      },
      {
        "language": "javascript",
        "path": "./snippets/snippets.javascript-snippets"
      }
    ]

If possible update README.md file based on your changes or new functions.
Push them to your forked repository:
Create a pull request on this repository.
Add a simple message that you made change or add on your pull request.

🔥 Build OWN YouTube Video Downloader Chrome Extension With #react & #CRXJS | [2023 - ST SABBIR]

Developer Sabbir — Wed, 24 May 2023 21:30:51 +0000

🔥 Keyword Maker Google Chrome Extension With #OpenAI & CRXJS | [2022 - ST SABBIR]

Developer Sabbir — Tue, 16 May 2023 20:09:36 +0000

In this video, I was showed how you can easily build an extension using CRXJS vite plugin and also we will going to use #typescript. In this tutorial I'm going to teach you, how you can create a useful and very powerful google chrome extension. Anyway, to do this we are going to use CRXJS which is a vite plugin and also the most famous and useful ReactJs.🔥🔥

Create a Keyword Generator Chrome Extension🔥

Developer Sabbir — Sun, 30 Apr 2023 00:18:03 +0000

Introduction

Browser extensions have become increasingly popular in recent times. They are no longer just simple mini applications, but rather well-tailored, profitable products that are used by hundreds of users every day. As these extensions grow in size and complexity, it becomes important to consider building them using helpful JavaScript libraries. By leveraging these libraries, developers can create more attractive and engaging extensions that offer a better user experience. With the right tools and techniques, browser extensions can be transformed into powerful tools that users rely on every day.

In this tutorial I'm going to teach you, how you can create a a use-full and very power-full google chrome extension. Anyway, to do this we are goin to use CRXJS which is a vite plugin and also most famous and use-full ReactJs.

Here's a little sneak peek 👀

Main screen
Modal screen

Technology

Let's talk about about technology which we are goin to use in this tutorial.

Vite

Vite is a build tool for modern web applications. It is designed to be fast and efficient allowing developers to quickly build prototype their applications. Vite supports a variety of modern web technologies, including ES modules, TypeScript, and CSS preprocessors. It also includes a built-in development server with hot module replacement, making it easy to develop and test applications in real-time. Vite is a popular choice for building Vue.js applications, but it can also be used with other frameworks and libraries. Overall, Vite is a powerful and flexible tool that can help streamline the development process for modern web applications.

React | Preact

ReactJS is a JavaScript library for building user interfaces. It uses a component-based and a virtual DOM to efficiently update the UI. ReactJS is fast, flexible, and widely used in modern web development.

If you want you can use Preact. PreactJS is a lightweight alternative to ReactJS, designed for high performance and compatibility. is often used in applications where performance is critical and has a small footprint.

I think you need know what is CRXJS. So, here is my the question and answer for you🙂

What is CRXJS?

CRXJS Vite Plugin is a tool that helps you make Chrome Extensions using modern web development technology.

Alright now we can jump to start coding 🚀

Code

To create our CRXJS project just we need to run this code into our terminal. There was a funny thing @jacksteamdev does predict to create a CRXJS project it take only 60 second.😍

npm init vite@latest

Now select typescript as a template and choice React for this project.

When init finished then run this command to install plugin.

yarn add @crxjs/vite-plugin@latest -D

Finally we are ready to see our output🙂. Just 1 step is left.

We have to update the Vite config

To do that just go to your project directory and find vite.config.ts. Open this file then delete everything and paste this code right there.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { crx } from "@crxjs/vite-plugin";
import manifest from "./manifest.json";

export default defineConfig({
  plugins: [react(), crx({ manifest })],
});

Now if I don't wrong currently your are face a error message in the 4 line.😅
Howerver to fixed this issue just call manifest.json from tsconfig.node.json.
Open tsconfig.node.json from the project dir. Now you have to add manifest.json file in the include array. Anyway here is the code example.

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts", "manifest.json"]
}

Now create a file called manifest.json with this command

touch manifest.json

After creating manifest.json file then past this code into your new manifest.json file.

{
  "name": "Keyword Maker",
  "description": "A powerfull keyword maker google chrome extension. Give a paragraph it's make keyword for you.",
  "version": "0.0.1",
  "manifest_version": 3,
  "action": {
    "default_popup": "index.html",
    "default_title": "Keyword Maker",
    "default_icon": {
      "16": "icon.png",
      "24": "icon.png",
      "32": "icon.png"
    }
  },
  "icons": {
    "128": "icon.png",
    "16": "icon.png",
    "256": "icon.png",
    "48": "icon.png"
  }
}

As you can see I'm using icon. Bu we don't have any icon yet. However, you can download a icon from anywhere and paste into your /public folder.

I hope now your project directory should look like this:

Run run the development server

yarn run dev

That's it! CRXJS will do the rest.

Now it's ready to add to our chrome. to do this follow this step. or if you know to load manifest in extension then continue this...

Add the extension to Chrome

Let's try it out.

When the build completes, open Chrome or Edge and navigate to chrome://extensions. Make sure to turn on the developer mode switch.
Drag your dist folder into the Extensions Dashboard to install it. Your extension icon will be in the top bar. The icon will be the first letter of the extension's name.

Now just change the App width;

/* App.css */
.App {
  text-align: center;
  min-width: 350px;
}

Now can see like this output. 🚀

Add UI library and another dependencies.

For the UI purpose I'm going to use Chakra-UI which is very popular component based UI library. Also we will a use a react-hot-toast for make a awesome toast.

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion react-hot-toast axios && yarn dev

So far, we have ready to create awesome UI and functionality.
Anyway, we have to set ChakraProvider from the Chakra-UI also we have to set Toaster in the main.tsx file. To do that just go to the src -> main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
// import "./index.css";
import { ChakraProvider } from "@chakra-ui/react";
import { Toaster } from "react-hot-toast";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <ChakraProvider> // chakra provider setup
      <Toaster position="bottom-center" reverseOrder={false} /> // toaster provider setup
      <App />
    </ChakraProvider>
  </React.StrictMode>
);

let's create main screen UI
Here is the code. for App.tsx

import {
  Button,
  Center,
  Container,
  HStack,
  Heading,
  Image,
  Text,
  Textarea,
  VStack,
} from "@chakra-ui/react";

const App = () => {
  return (
    <Container w="400px" h="auto" mx="auto" p={4}>
      <Center>
        <Image w="16" src="icon.png" alt="logo" />
      </Center>
      <VStack spacing={0} my={2}>
        <Heading as="h1" fontSize="xl" fontWeight="bold">
          Keyword Macker AI
        </Heading>
        <Text
          fontSize="sm"
          color="gray.600"
          fontWeight="400"
          textAlign="center"
        >
          Past your text in the bellow section and it will generate{" "}
          <strong>Keyword</strong> for you. 🙂
        </Text>
      </VStack>
      <VStack my={4}>
        <Textarea w="full" h="auto" placeholder="Past your text here..." />
        <Button colorScheme="twitter">Generate Keyworld</Button>
      </VStack>
      <HStack
        w="full"
        textAlign="center"
        fontWeight="semibold"
        mt={3}
        justify="center"
      >
        <Text>Created by </Text>
        <Text
          cursor="pointer"
          color="green"
          textDecor="underline"
          onClick={() =>
            window.open("https://www.showwcase.com/devlopersabbir")
          }
        >
          @devlopersabbir
        </Text>
      </HStack>
    </Container>
  );
};

export default App;

Now create some state using useState React hooks. I'm going to create text state for store prompt text. And 2nd one is keyword state that will be help us to store our response data as keyword. 3rd is loading state to make spinner when HTTP request is pending... And the last one is useDisclosure hooks from the @chakra-ui/react because of we will create a modal later.

Also we have to take text from the onChange method. after then now set a click handler into our generate button.

State

  const [text, setText] = useState<string>("");
  const [keyword, setKeyword] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);
  const { isOpen, onOpen, onClose } = useDisclosure();

Handler Function

const generate = async () => {}

Update our code

<Textarea
          onChange={(event: any) => setText(event.target.value)}
          w="full"
          value={text}
          h="auto"
          placeholder="Past your text here..."
        />
        <Button disabled={loading} colorScheme="twitter" onClick={generate}>
          {loading ? <Spinner /> : "Generate Keyword"}
        </Button>

Our function should be async because of we will make HTTP request.

OpenAI integration

Now we are going to create api_key for generate our keyword. We will use OpenAI platform. If you have openAi account then okey or if not then create a new account. And now go to this url to create api key Click me to create api_key.

Copy secret key and paste anywhere because of we will never see this key again.

Now create a variable in the App.tsx file called YOUR_API_KEY.

const YOUR_API_KEY = "Enter your secret key here...";

So far, we have finished a lot's of thing. At this time we are ready to make a http request using axios and our api key.

Configure body data & header

Make a object using data variable for prompt data.

const datas: any = {
       model: "text-davinci-003",
      prompt: `Make some keyword with this text. For example prompt is javascript and we expect response should be like js, javascript, javascript course, js tutorial, JavaScript Programing.. etc. Here is the text prompt: ${text}`,
      temperature: 0.5,
      max_tokens: 200,
      top_p: 1.0,
      frequency_penalty: 0.8,
      presence_penalty: 0.0,
     };

Now set up our header with bearer token.

 headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${YOUR_API_KEY}`,
          },

Alright now you are ready to seen full `App.tsx` file???

Here is our complete App.tsx code.

import {
  Button,
  Center,
  Container,
  HStack,
  Heading,
  Image,
  Spinner,
  Text,
  Textarea,
  VStack,
  useDisclosure,
} from "@chakra-ui/react";
import { useState } from "react";
import Modals from "./components/Modals";
import axios from "axios";
import { toast } from "react-hot-toast";

const App = () => {
  const YOUR_API_KEY = "sk-xxxxxxxxxxxxxxxxxxxxxxxx";
  const [text, setText] = useState<string>("");
  const [keyword, setKeyword] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);
  const { isOpen, onOpen, onClose } = useDisclosure();

  const generate = async () => {
    setLoading(true);
    const datas: any = {
      model: "text-davinci-003",
      prompt: `Make some keyword with this text. For example prompt is javascript and we expect response should be like js, javascript, javascript course, js tutorial, JavaScript Programing.. etc. Here is the text prompt: ${text}`,
      temperature: 0.5,
      max_tokens: 200,
      top_p: 1.0,
      frequency_penalty: 0.8,
      presence_penalty: 0.0,
    };
    try {
      const { data } = await axios.post(
        "https://api.openai.com/v1/completions",
        datas,
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${YOUR_API_KEY}`,
          },
        }
      );
      const keyword = data.choices[0]?.text?.trim();
      toast.success("Keyword generated😍");
      setText("");
      onOpen();
      return setKeyword(keyword);
    } catch (error: any) {
      if (!error?.response?.data || !error?.response)
        return toast.error("Something went wrong!😒");

      const mess = error?.response.data?.message;
      if (mess) return toast.error(mess);
      toast.error("Fail to generate keyword😪");
    } finally {
      setLoading(false);
    }
  };
  return (
    <Container w="400px" h="auto" mx="auto" p={4}>
      <Center>
        <Image w="16" src="icon.png" alt="logo" />
      </Center>
      <VStack spacing={0} my={2}>
        <Heading as="h1" fontSize="xl" fontWeight="bold">
          Keyword Macker AI
        </Heading>
        <Text
          fontSize="sm"
          color="gray.600"
          fontWeight="400"
          textAlign="center"
        >
          Past your text in the bellow section and it will generate{" "}
          <strong>Keyword</strong> for you. 🙂
        </Text>
      </VStack>
      <VStack my={4}>
        <Textarea
          onChange={(event: any) => setText(event.target.value)}
          w="full"
          value={text}
          h="auto"
          placeholder="Past your text here..."
        />
        <Button disabled={loading} colorScheme="twitter" onClick={generate}>
          {loading ? <Spinner /> : "Generate Keyworld"}
        </Button>
      </VStack>
      <HStack
        w="full"
        textAlign="center"
        fontWeight="semibold"
        mt={3}
        justify="center"
      >
        <Text>Created by </Text>
        <Text
          cursor="pointer"
          color="green"
          textDecor="underline"
          onClick={() =>
            window.open("https://www.showwcase.com/devlopersabbir")
          }
        >
          @devlopersabbir
        </Text>
      </HStack>
      <Modals data={keyword} isOpen={isOpen} onClose={onClose} />
    </Container>
  );
};

export default App;

Note: As we can see here have a Modals component. But we haven't create like this component yet.
To do that let's create a component folder into src -> component -> and create a component called Modals.

So, here is our modal component code.

import {
  Button,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Text,
} from "@chakra-ui/react";
import { toast } from "react-hot-toast";

interface IModals {
  isOpen: boolean;
  onClose: () => void;
  data: string;
}

const Modals = ({ isOpen, onClose, data }: IModals) => {
  return (
    <Modal size="sm" isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>Keyword</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <Text fontSize="lg" fontWeight="500">
            {data}
          </Text>
        </ModalBody>
        <ModalFooter>
          <Button colorScheme="blue" mr={3} onClick={onClose}>
            Close
          </Button>
          <Button colorScheme="green">
            Copy
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default Modals;

As we can see in the Modals component we receive 3 parameter as a props. Also we use a interface. However, have you seen this?? we have copy button😎.
What do you thing??🤣
Sorry for lot's of fun. We will create a simple functionality for copy our result keyword. Okey, let's create...

Copy keyword in clipboard

const handleCopyClick = async () => {
    try {
      await navigator.clipboard.writeText(data);
      toast.success("🚀 Keyword copied🥹");
    } catch (error) {
      toast.error("Fail to copy the keyword!");
    }
  };

// add replace copy button line with this line.
<Button onClick={handleCopyClick} colorScheme="green">
            Copy
          </Button>

Finished

Finished our extension😁
Anyway, if you want you see full source code into my GitHub profile Repo Link. Also here is the YouTube video tutorial link
.
.

Author

Full Name Sabbir Hossain Shuvo. And the GitHub profile is https://github.com/devlopersabbir.

For support just Buy Me A Coffee
https://www.buymeacoffee.com/devlopersabbir

How to create JWT accesstoken and refresh token & validate

Developer Sabbir — Thu, 13 Apr 2023 11:50:08 +0000

dev-auth-middleware-jwt this package allows handle auth middleware.

This library will help us to generate access & refresh token also able to validate

INSTALLATION

$ npm i dev-auth-middleware-jwt --save

or if you are use yarn then just run this code

$ yarn add dev-auth-middleware-jwt --save

REQUIRED TASK

We have to create a .env file into the root project directory for store our all of environment variable.
Create all variable following the down below code example.

ACCESS_TOKEN_SECRET=key //use your secret key
ACCESS_TOKEN_EXPIRES_IN=1d //modify as you need eg: 60s, 1m, 1h, 7d

REFRESH_TOKEN_SECRET=key //use your secret key
REFRESH_TOKEN_EXPIRES_IN=1d //modify as you need eg: 60s, 1m, 1h, 7d

That is required

USAGES

Firstly, just import this package using

import { JWT, Validate } from "dev-auth-middleware-jwt";

Now it's ready to use.

If you want you try with this template. I just try to explement this package features and show...

import express, { Request, Response } from "express";
import dotenv from "dotenv";
import { JwtPayload } from "jsonwebtoken";
dotenv.config();
import { JWT, Validate } from "dev-auth-middleware-jwt";

declare module "express" {
  interface Request {
    user?: any;
  }
}

const app = express();
app.use(express.json());

let refreshTokens: any = [];
app.post("/", async (req: Request, res: Response) => {
  const { username, password } = req.body;
  try {
    const payload: JwtPayload = {
      id: "4234124123423535",
      username,
    };
    const accessToken = JWT.generateAccessToken(payload);
    const refreshToken = JWT.generateRefreshToken(payload);
    refreshTokens.push(refreshToken);

    // response
    res.status(200).json({
      data: {
        accessToken,
        refreshToken,
      },
    });
  } catch (error) {
    console.log(error);
    res.status(500).json({ message: "Something went wrong!", error });
  }
});

app.post("/pro", Validate.accessToken, async (req: Request, res: Response) => {
  if (req.user) {
    res.json({
      data: {
        user: req.user,
      },
    });
  } else {
    res.json({ data: { message: "User not found" } });
  }
});

app.post(
  "/get-ref",
  Validate.refreshToken,
  async (req: Request, res: Response) => {
    console.log(req.user);
    if (req.user) {
      res.json({
        data: {
          user: req.user,
        },
      });
    } else {
      res.json({ data: { message: "User not found" } });
    }
  }
);

const PORT = process.env.PORT || 4000;
app.listen(PORT, () => console.log(`🚀 Server is running at ${PORT}`));

Author

This package created by Sabbir Hossain Shuvo. And the GitHub profile is https://github.com/devlopersabbir.

LICENSE

MIT

For support just Buy Me A Coffee
https://www.buymeacoffee.com/devlopersabbir

How we can logging our http Request and Response

Developer Sabbir — Thu, 13 Apr 2023 11:48:27 +0000

dev-http-logger

https://github.com/devlopersabbir/dev-http-logger

INSTALLATION

$ npm i dev-http-logger --save-dev

$ npm install dev-http-logger --save-dev

$ yarn add dev-http-logger --save-dev

$ yarn add dev-http-logger --save

ABOUT THE PACKAGE

We can able to log our http all history like METHOD request PATH also so many thing with this middleware. It's a very simple middleware for only NodeJs. It is simple NPM package but trust me it's a very usefull.

SUMMARY

A simple logging library that combines the simple ExpressJs and NodeJs to loggin our all HTTP request and response.

USAGES

import logger from "dev-http-logger";
// middleware
app.use(logger());

We can able to pass so many thing as logger() agument.
For example:

import logger from "dev-http-logger";
// pass so so many arguments
app.use(logger({ origin: true, showHeader: true, purpose: EPurpose.TEST }));

Name	Type	Description
origin	boolean	You can pass a boolean value like `true \
showHeader	boolean	If you are pass {% raw %}`showHeader: true \
purpose	string	Purpose has an {% raw %}`enum` if you are using typescript then you can use this feature. In the purpose have some value like `TEST && PRODUCTION && DEV`. You can use only one value to define purpose.

You can only use this library in your nodeJs express app.
In the below section have a full example how you can use this logger in your express app.

import express from "express";
import { logger, EPurpose } from "dev-http-logger";

const app = express();
app.use(express.json());
app.use(logger({ origin: true, showHeader: true, purpose: EPurpose.DEV }));

app.get("/", (req, res) => res.status(200).json({ message: "Hello world" }));

app.listen(5000, () => console.log(`🚀 Server is running...`));

Author

This package created by Sabbir Hossain Shuvo. And the GitHub profile is https://github.com/devlopersabbir.

LICENSE

MIT

For support just Buy Me A Coffee
https://www.buymeacoffee.com/devlopersabbir

DEV Community: Developer Sabbir

Complete Crash Course: Elysia.js Framework in Bangla - Build Scalable Apps - 2024

Click on that bigger thumbnail to watch the full course on YouTube.

how to connect the PostgreSQL database with Django

🎉 Click the larger photo to watch YouTube video

How to host NodeJs server into the docker container

Follow these step to create and run your docker container

How to Create OWN Visual Studio Code Extension | Code Snippets Extension

Hello guys

YouTube Video Link

Contributing...

🔥 Build OWN YouTube Video Downloader Chrome Extension With #react & #CRXJS | [2023 - ST SABBIR]

🔥 Keyword Maker Google Chrome Extension With #OpenAI & CRXJS | [2022 - ST SABBIR]

Create a Keyword Generator Chrome Extension🔥

Introduction

Technology

Vite

React | Preact

What is CRXJS?

Code

We have to update the Vite config

Run run the development server

Add the extension to Chrome

Add UI library and another dependencies.

OpenAI integration

Configure body data & header

Alright now you are ready to seen full App.tsx file???

Copy keyword in clipboard

Finished

Author

How to create JWT accesstoken and refresh token & validate

dev-auth-middleware-jwt this package allows handle auth middleware.

INSTALLATION

REQUIRED TASK

USAGES

Author

LICENSE

How we can logging our http Request and Response

dev-http-logger

INSTALLATION

ABOUT THE PACKAGE

SUMMARY

USAGES

Author

LICENSE

Alright now you are ready to seen full `App.tsx` file???