From 0a0db19190cfb6d2b1b8a431f875c5fca4958f6b Mon Sep 17 00:00:00 2001
From: Rupali Haldiya <78981177+rupali-codes@users.noreply.github.com>
Date: Sun, 26 Feb 2023 15:12:15 +0530
Subject: [PATCH] feat: added popup when clicked on card (#248)

* Clean up (#246)

* [clean-up] chores: code clean up and bug fixes

* [clean-up] chores: code clean up and bug fixes

* [clean-up] chores: code clean up and bug fixes

* [clean-up] chores: code clean up and bug fixes

* [clean-up] chores: code clean up and bug fixes

* chore: code clean up and bug fixes (#223)

* [clean-up] chores: code clean up and bug fixes

* [clean-up] chores: code clean up and bug fixes

* [clean-up] chores: code clean up and bug fixes

* [clean-up] chores: code clean up and bug fixes

* [clean-up] chores: code clean up and bug fixes

* chore: add new links (#211)

* add new links

* fix wrong spelling

* format design-inspiration.json file

* Remove ids from database

---------

Co-authored-by: Rupali Haldiya <78981177+rupali-codes@users.noreply.github.com>

* feat: added run command in README.md(#229)

* Fixing the README.md file

* Fixing the README.md file

* chore: adding a sub-category under youtube (#228)

* Adding a sub-category under youtube

* fixed all the issues regarding the new sub-category

* resolved some issues

* chore: added new illustration link (#225)

* chore: added two icons websites (#231)

* Update: Added two icons websites

* Resolved

* chore: adding table of content (#241)

* Added Contributors

* Update README.md

* Update README.md

* Update README.md

* Added Discord Icon

* Update README.md

* Update README.md

* Update README.md

* chore: added dope ui link (#239)

* fix: change theme toggler color (#238)

* single card page setup

* single card page setup

* single card page setup

* single card page setup

* single card popup setup

---------

Co-authored-by: Oyebolade Oladokun <57053389+Oyebolade@users.noreply.github.com>
Co-authored-by: Rupali Haldiya <78981177+rupali-codes@users.noreply.github.com>
Co-authored-by: Harsh Parashar <96375055+hparashar27@users.noreply.github.com>
Co-authored-by: RAGHAV <94848646+raghav1030@users.noreply.github.com>
Co-authored-by: Sofiritari Amgbara <38821635+swissjake@users.noreply.github.com>
Co-authored-by: Priyankar Pal <88102392+priyankarpal@users.noreply.github.com>
Co-authored-by: Atharva Salitri <121221252+the-amazing-atharva@users.noreply.github.com>
Co-authored-by: ALIND SHARMA <alindsharmasimply@gmail.com>

* chore: designing popup & adding language for youtube

* chore:adding language in youtube category

* fix: fixing popup color for light theme

* chore: fixing colors

---------

Co-authored-by: Eugene44-hub <75457464+Eugene44-hub@users.noreply.github.com>
Co-authored-by: Oyebolade Oladokun <57053389+Oyebolade@users.noreply.github.com>
Co-authored-by: Harsh Parashar <96375055+hparashar27@users.noreply.github.com>
Co-authored-by: RAGHAV <94848646+raghav1030@users.noreply.github.com>
Co-authored-by: Sofiritari Amgbara <38821635+swissjake@users.noreply.github.com>
Co-authored-by: Priyankar Pal <88102392+priyankarpal@users.noreply.github.com>
Co-authored-by: Atharva Salitri <121221252+the-amazing-atharva@users.noreply.github.com>
Co-authored-by: ALIND SHARMA <alindsharmasimply@gmail.com>
---
 components/LinksContainer/LinkContainer.jsx   |  24 ++-
 components/SideNavbar/SideNavbar.tsx          |   2 +-
 components/SideNavbar/SideNavbarCategory.tsx  |   2 +-
 .../SideNavbar/SideNavbarCategoryList.tsx     |   2 +-
 components/SideNavbar/SideNavbarElement.tsx   |   2 +-
 components/TopBar/TopBar.tsx                  |   2 +-
 components/cards/index.tsx                    |  36 ++--
 components/popup/index.tsx                    |  56 +++++
 database/frontend/animations.json             |  71 +++----
 database/frontend/colors.json                 | 113 +++++-----
 database/frontend/design-inspirations.json    | 200 +++++++++---------
 database/frontend/fonts.json                  |  71 +++----
 database/frontend/icons.json                  | 113 +++++-----
 database/frontend/illustrations.json          |   1 -
 database/frontend/images.json                 |  57 +++--
 database/frontend/online-code-editors.json    |  71 +++----
 database/frontend/ui-generators.json          | 127 ++++++-----
 database/resources/blogs.json                 | 127 ++++++-----
 database/resources/hosting.json               | 113 +++++-----
 database/youtube/android.json                 |   9 +-
 database/youtube/data-structures.json         |   9 +-
 database/youtube/machine-learning.json        |   9 +-
 database/youtube/web-development.json         |  91 ++++----
 database/youtube/web3-metaverse               |  31 ---
 database/youtube/web3-metaverse.json          |  12 +-
 hooks/useFilterDB.ts                          |  21 ++
 .../index.tsx}                                |   0
 types/index.ts                                |  11 +
 28 files changed, 718 insertions(+), 665 deletions(-)
 create mode 100644 components/popup/index.tsx
 delete mode 100644 database/youtube/web3-metaverse
 create mode 100644 hooks/useFilterDB.ts
 rename pages/{[subcategory].tsx => [subcategory]/index.tsx} (100%)

diff --git a/components/LinksContainer/LinkContainer.jsx b/components/LinksContainer/LinkContainer.jsx
index d9439c790..1371b2746 100644
--- a/components/LinksContainer/LinkContainer.jsx
+++ b/components/LinksContainer/LinkContainer.jsx
@@ -1,18 +1,30 @@
 import React from "react";
-import {BsBoxArrowUpRight} from 'react-icons/bs';
+import { BsBoxArrowUpRight } from "react-icons/bs";
 
-export const LinkContainer = ({ name, description, url }) => {
+export const LinkContainer = (props) => {
+  const { name, description, url, getCardId } = props;
   return (
-    <div className="transition-all ease-in duration-300 w-full md:w-72 h-64 bg-white shadow-xl border border-dashed border-violet-500 rounded-3xl dark:bg-gray-900 dark:text-gray-300">
+    <div
+      onClick={() => getCardId(props)}
+      className="transition-all ease-in duration-100 w-full cursor-pointer md:w-72 h-64 bg-gray-100 shadow-lg dark:shadow-sm border hover:scale-[1.02] border-dashed border-violet-500 rounded-3xl dark:bg-gray-900 dark:text-gray-300"
+    >
       <div className="card-body">
-        <h2 className="card-title text-violet-500 text-2xl truncate cursor-default" title={name}>{name}</h2>
-        <p className="w-full text-clip-30 h-24 overflow-hidden">{description}</p>
+        <h2
+          className="text-violet-500 text-xl cursor-default truncate ..."
+          title={name}
+        >
+          {name}
+        </h2>
+        <p className="w-full font-sans text-clip-30 h-24 w-full overflow-hidden">
+          {description}
+        </p>
         <div className="card-actions justify-end">
           <a
+            onClick={(e) => e.stopPropagation()}
             href={url}
             target="_blank"
             rel="noreferrer"
-            className="mt-2 px-6 py-2 text-white text-center font-semibold bg-violet-600 rounded-2xl w-full hover:bg-transparent hover:text-violet-500 border border-dashed border-transparent duration-100 hover:border-violet-400  bottom-0 flex items-center justify-center"
+            className="mt-2 px-6 py-2 text-white text-center bg-violet-600 rounded-2xl w-full hover:bg-transparent hover:text-violet-500 border border-dashed border-transparent duration-100 hover:border-violet-400  bottom-0 flex items-center justify-center"
           >
             Visit site
             <span className="ml-2">
diff --git a/components/SideNavbar/SideNavbar.tsx b/components/SideNavbar/SideNavbar.tsx
index 207140654..0702ae0e2 100644
--- a/components/SideNavbar/SideNavbar.tsx
+++ b/components/SideNavbar/SideNavbar.tsx
@@ -42,7 +42,7 @@ export const SideNavbar = () => {
     <div
       className={`lg:w-[290px] fixed top-0 left-0 w-full h-[87px] z-[10] lg:h-full`}
     >
-      <div className="flex bg-white p-4 justify-between dark:bg-gray-900 transition-all ease-in duration-300">
+      <div className="flex bg-gray-100 p-4 justify-between dark:bg-gray-900 transition-all ease-in duration-300">
         <Link href={"/"}>
           <Logo className="text-3xl mb-4" />
         </Link>
diff --git a/components/SideNavbar/SideNavbarCategory.tsx b/components/SideNavbar/SideNavbarCategory.tsx
index 3c3f82a5b..669261e78 100644
--- a/components/SideNavbar/SideNavbarCategory.tsx
+++ b/components/SideNavbar/SideNavbarCategory.tsx
@@ -40,7 +40,7 @@ export const SideNavbarCategory: FC<{item: ISidebar, openByDefault: string}> = (
         className="flex w-full cursor-pointer justify-between py-2 hover:text-violet-500 focus-visible:rounded-md focus-visible:outline-none focus-visible:ring focus-visible:ring-violet-500" 
         onClick={handleToggle}
       >
-        <h2 className="text-xl font-bold uppercase">
+        <h2 className="text-xl uppercase">
           {item.category}
         </h2>
         <FaAngleDown className={`${isOpen && 'rotate-180'} self-center transition duration-300 ease-in-out`}/>  
diff --git a/components/SideNavbar/SideNavbarCategoryList.tsx b/components/SideNavbar/SideNavbarCategoryList.tsx
index cdfef8b39..be80e6d9d 100644
--- a/components/SideNavbar/SideNavbarCategoryList.tsx
+++ b/components/SideNavbar/SideNavbarCategoryList.tsx
@@ -6,7 +6,7 @@ export const SideNavbarCategoryList: FC<{items: ISidebar[], openByDefault: strin
   const { items, openByDefault } = props;
 
   return (
-    <ul className="mt-2 flex flex-col justify-center gap-4 px-4 pb-24">
+    <ul className="mt-2 flex flex-col justify-center px-4 pb-24">
       {items.map((item, index) => {
         return (
           <SideNavbarCategory key={index} item={item} openByDefault={openByDefault} />
diff --git a/components/SideNavbar/SideNavbarElement.tsx b/components/SideNavbar/SideNavbarElement.tsx
index f9607bd71..39058d308 100644
--- a/components/SideNavbar/SideNavbarElement.tsx
+++ b/components/SideNavbar/SideNavbarElement.tsx
@@ -18,7 +18,7 @@ export const SideNavbarElement = ({ name, url }: SubCategories) => {
           : ""
       } collapse w-full hover:bg-gradient-to-l hover:text-gray-200 from-violet-900 to-violet-500 text-start rounded `}
     >
-      <div className="text-md border-b py-3 font-medium uppercase transition-all duration-300 hover:pl-5 dark:border-gray-600">{name}</div>
+      <div className="text-sm py-3 uppercase transition-all duration-300 hover:pl-5 dark:border-gray-600">{name}</div>
     </Link>
   );
 };
diff --git a/components/TopBar/TopBar.tsx b/components/TopBar/TopBar.tsx
index e7d4bc63d..01a50206c 100644
--- a/components/TopBar/TopBar.tsx
+++ b/components/TopBar/TopBar.tsx
@@ -10,7 +10,7 @@ export const TopBar = ({ header }: { header?: string }) => {
     <div className="sticky top-0 dark:bg-[#101623] bg-gray-100 transition-all ease-in duration-300 w-full xs:overflow-x-hidden mb-4 flex flex-col-reverse items-center md:flex-row md:justify-between md:py-4">
       <div className="my-2 flex items-center place-self-start text-lg dark:text-gray-300 sm:text-3xl">
         <FaSlackHash className="mt-1 mr-2 text-gray-600 dark:text-gray-300" />
-        <span className="text-gray-900 dark:text-gray-100 uppercase font-bold">
+        <span className="text-gray-900 dark:text-gray-100 uppercase font-semmibold">
           {header ?? category}
         </span>
       </div>
diff --git a/components/cards/index.tsx b/components/cards/index.tsx
index 5eadfa6ad..4a5a94e5d 100644
--- a/components/cards/index.tsx
+++ b/components/cards/index.tsx
@@ -1,38 +1,27 @@
-import { useRouter } from "next/router";
-import React from "react";
+import React, { useState } from "react";
 import { LinkContainer } from "../LinksContainer/LinkContainer";
 import { BackToTopButton } from "../BackToTop/BackToTopButton";
-import * as DB from "database";
-import { database } from "database/data";
+import useFilterDB from "hooks/useFilterDB";
+import Popup from "components/popup";
+import { DBType } from "types";
 
 const Cards = () => {
-  const router = useRouter();
-  const { subcategory } = router.query;
-
-  // This filters trough the DB with the subcategory which results in an array of arrays
-  const filterSubCat = database?.map((item: any) =>
-    item?.filter((cat: any) => cat.subcategory.includes(subcategory))
-  );
-
-  // This filters out an empty array from the filterSubCat
-  const filterDB = filterSubCat.filter(
-    (item: any, index: number) => item.length !== 0
-  );
-
-  console.log(database)
-
+  const { filterDB } = useFilterDB();
+  const [currentCard, setCurrentCard] = useState<DBType | null>(null);
+  const getCardId = (item: DBType | null) => {
+    setCurrentCard(item);
+  };
   return (
     <div
       className={`flex flex-wrap md:flex-row w-full md:justify-start gap-4 content-start lg:min-h-[calc(90vh-80px)] min-h-[calc(90vh-150px)] mb-2 ${
         filterDB.length < 3 && "lg:justify-start"
       }`}
     >
-      {filterDB[0]?.map((data: any, key: number) => (
+      {filterDB[0]?.map((data: DBType, key: number) => (
         <LinkContainer
-          name={data.name}
-          description={data.description}
-          url={data.url}
+          {...data}
           key={key + "-" + data.name}
+          getCardId={getCardId}
         />
       ))}
       <div>
@@ -46,6 +35,7 @@ const Cards = () => {
         )}
       </div>
       <BackToTopButton />
+      <Popup getCardId={getCardId} currentCard={currentCard} />
     </div>
   );
 };
diff --git a/components/popup/index.tsx b/components/popup/index.tsx
new file mode 100644
index 000000000..9884cae24
--- /dev/null
+++ b/components/popup/index.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { DBType } from "types";
+import { BsGlobe } from "react-icons/bs";
+
+const Popup: React.FC<{
+  currentCard: null | DBType;
+  getCardId: (item: DBType | null) => void;
+}> = ({ currentCard, getCardId }) => {
+  return (
+    <div
+      onClick={() => getCardId(null)}
+      className={` ${
+        currentCard ? "w-full h-screen" : "w-0 h-0"
+      } overflow-hidden flex fixed top-0 left-0 bg-[rgba(0,0,0,.5)] backdrop-blur-md z-20`}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className={`max-w-[500px] transition-all ${
+          currentCard ? "scale-100" : "scale-0"
+        } h-fit w-full overflow-hidden  px-5 md:py-10 dark:bg-gray-900 bg-gray-100 rounded-2xl m-auto gap-5 flex flex-col justify-between border border-dashed border-violet-600`}
+      >
+        <div className="flex flex-col gap-5">
+          <div className="flex justify-between items-center">
+            <h2 className="max-w-[80%] text-2xl text-violet-500 capitalize">
+              {currentCard?.name}
+            </h2>
+            <h5 className="max-w-[20%] text-xsm text-violet-500 capitalize flex items-center gap-1">
+              {
+                currentCard?.language ? (
+                  <>
+                  <BsGlobe />
+                  {currentCard?.language}
+                  </>
+                ) : ''
+              }
+            </h5>
+          </div>
+          <p className="">{currentCard?.description}</p>
+        </div>
+        <div className="card-actions justify-end">
+          <a
+            onClick={(e) => e.stopPropagation()}
+            href={currentCard?.url}
+            target="_blank"
+            rel="noreferrer"
+            className="mt-2 px-6 py-2 text-white text-center bg-violet-600 rounded-2xl w-full hover:bg-transparent hover:text-violet-500 border border-dashed border-transparent duration-100 hover:border-violet-400  bottom-0 flex items-center justify-center bottom-0 relative"
+          >
+            Visit site
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Popup;
diff --git a/database/frontend/animations.json b/database/frontend/animations.json
index 59d36e15a..e49bbb652 100644
--- a/database/frontend/animations.json
+++ b/database/frontend/animations.json
@@ -1,37 +1,36 @@
-[
-  {
-    "name": "Lottie files",
-    "description": "LottieFiles takes away the complexity from Motion Design. It lets you Create, Edit, Test, Collaborate and Ship a Lottie in the easiest way possible.",
-    "url": "https://lottiefiles.com/",
-    "category": "frontend",
-    "subcategory": "animations"
-  },
-  {
-    "name": "Cubic Bezier",
-    "description": "A tool for visualisation and creation of cubic-bezier curves for animation in CSS",
-    "url": "https://cubic-bezier.com/",
-    "category": "frontend",
-    "subcategory": "animations"
-  },
-  {
-    "name": "Framer Motion",
-    "description": "Framer Motion is a production-ready motion library for React from Framer, It's simple yet powerful, allowing you to express complex user interactions with robust, semantic markup.",
-    "url": "https://www.framer.com/motion/",
-    "category": "frontend",
-    "subcategory": "animations"
-  },
-  {
-    "name": "Proton",
-    "description": "A JavaScript particle based animation engine. Which provides you tones of animated elements.",
-    "url": "https://drawcall.github.io/Proton/",
-    "category": "frontend",
-    "subcategory": "animations"
-  },
-  {
-    "name": "AutoAnimate",
-    "description": "Add motion to your apps with a single line of code.",
-    "url": "https://auto-animate.formkit.com/",
-    "category": "frontend",
-    "subcategory": "animations"
-  }
+[{
+        "name": "Lottie files",
+        "description": "LottieFiles takes away the complexity from Motion Design. It lets you Create, Edit, Test, Collaborate and Ship a Lottie in the easiest way possible.",
+        "url": "https://lottiefiles.com/",
+        "category": "frontend",
+        "subcategory": "animations"
+    },
+    {
+        "name": "Cubic Bezier",
+        "description": "A tool for visualisation and creation of cubic-bezier curves for animation in CSS",
+        "url": "https://cubic-bezier.com/",
+        "category": "frontend",
+        "subcategory": "animations"
+    },
+    {
+        "name": "Framer Motion",
+        "description": "Framer Motion is a production-ready motion library for React from Framer, It's simple yet powerful, allowing you to express complex user interactions with robust, semantic markup.",
+        "url": "https://www.framer.com/motion/",
+        "category": "frontend",
+        "subcategory": "animations"
+    },
+    {
+        "name": "Proton",
+        "description": "A JavaScript particle based animation engine. Which provides you tones of animated elements.",
+        "url": "https://drawcall.github.io/Proton/",
+        "category": "frontend",
+        "subcategory": "animations"
+    },
+    {
+        "name": "AutoAnimate",
+        "description": "Add motion to your apps with a single line of code.",
+        "url": "https://auto-animate.formkit.com/",
+        "category": "frontend",
+        "subcategory": "animations"
+    }
 ]
diff --git a/database/frontend/colors.json b/database/frontend/colors.json
index ecb13039c..4f8506ead 100644
--- a/database/frontend/colors.json
+++ b/database/frontend/colors.json
@@ -1,58 +1,57 @@
-[
-  {
-    "name": "Open Color",
-    "description": "An open-source color scheme, optimized for UI. My go-to resource to choose colors from scratch. ",
-    "url": "https://yeun.github.io/open-color/",
-    "category": "frontend",
-    "subcategory": "colors"
-  },
-  {
-    "name": "UI Gradients",
-    "description": "Collection of beautiful color gradients for you to choose from and export to your project. ",
-    "url": "https://uigradients.com/#MoonlitAsteroid",
-    "category": "frontend",
-    "subcategory": "colors"
-  },
-  {
-    "name": "Tailwind Colors",
-    "description": "This an excellent and popular set of color pallettes by TailwindCSS. Get beautiful colors of all shades ",
-    "url": "https://tailwindcss.com/docs/customizing-colors",
-    "category": "frontend",
-    "subcategory": "colors"
-  },
-  {
-    "name": "Color Contract Checker",
-    "description": "This an excellent site to check whether contrast of two colors is good or not ",
-    "url": "https://coolors.co/contrast-checker",
-    "category": "frontend",
-    "subcategory": "colors"
-  },
-  {
-    "name": "0to255",
-    "description": "0to255 is a color tool that makes it easy to find lighter and darker colors, or tints and shades, based on any color. ",
-    "url": "https://0to255.com/",
-    "category": "frontend",
-    "subcategory": "colors"
-  },
-  {
-    "name": "Coolors",
-    "description": "Coolors is the essential tool for creating color palettes. It generates perfect matching colors in seconds.",
-    "url": "https://coolors.co/",
-    "category": "frontend",
-    "subcategory": "colors"
-  },
-  {
-    "name": "HTML Color Picker",
-    "description": "This is a color picker by w3schools which provides different shades of colors based on your requirements. It also gives Hex and RGB value of color.",
-    "url": "https://w3schools.com/colors/colors_picker.asp",
-    "category": "frontend",
-    "subcategory": "colors"
-  },
-  {
-    "name": "UI Color Picker",
-    "description": "A color picker that contains different shades of solid colors & gradients. Which can be used in any kind of projects.",
-    "url": "https://uicolorpicker.com/",
-    "category": "frontend",
-    "subcategory": "colors"
-  }
+[{
+        "name": "Open Color",
+        "description": "An open-source color scheme, optimized for UI. My go-to resource to choose colors from scratch. ",
+        "url": "https://yeun.github.io/open-color/",
+        "category": "frontend",
+        "subcategory": "colors"
+    },
+    {
+        "name": "UI Gradients",
+        "description": "Collection of beautiful color gradients for you to choose from and export to your project. ",
+        "url": "https://uigradients.com/#MoonlitAsteroid",
+        "category": "frontend",
+        "subcategory": "colors"
+    },
+    {
+        "name": "Tailwind Colors",
+        "description": "This an excellent and popular set of color pallettes by TailwindCSS. Get beautiful colors of all shades ",
+        "url": "https://tailwindcss.com/docs/customizing-colors",
+        "category": "frontend",
+        "subcategory": "colors"
+    },
+    {
+        "name": "Color Contract Checker",
+        "description": "This an excellent site to check whether contrast of two colors is good or not ",
+        "url": "https://coolors.co/contrast-checker",
+        "category": "frontend",
+        "subcategory": "colors"
+    },
+    {
+        "name": "0to255",
+        "description": "0to255 is a color tool that makes it easy to find lighter and darker colors, or tints and shades, based on any color. ",
+        "url": "https://0to255.com/",
+        "category": "frontend",
+        "subcategory": "colors"
+    },
+    {
+        "name": "Coolors",
+        "description": "Coolors is the essential tool for creating color palettes. It generates perfect matching colors in seconds.",
+        "url": "https://coolors.co/",
+        "category": "frontend",
+        "subcategory": "colors"
+    },
+    {
+        "name": "HTML Color Picker",
+        "description": "This is a color picker by w3schools which provides different shades of colors based on your requirements. It also gives Hex and RGB value of color.",
+        "url": "https://w3schools.com/colors/colors_picker.asp",
+        "category": "frontend",
+        "subcategory": "colors"
+    },
+    {
+        "name": "UI Color Picker",
+        "description": "A color picker that contains different shades of solid colors & gradients. Which can be used in any kind of projects.",
+        "url": "https://uicolorpicker.com/",
+        "category": "frontend",
+        "subcategory": "colors"
+    }
 ]
diff --git a/database/frontend/design-inspirations.json b/database/frontend/design-inspirations.json
index aa0650c77..64f35420c 100644
--- a/database/frontend/design-inspirations.json
+++ b/database/frontend/design-inspirations.json
@@ -1,101 +1,99 @@
-[
-  {
-    "name": "Dribbble",
-    "description": "Explore the world’s leading design portfolios.",
-    "url": "https://dribbble.com",
-    "category": "frontend",
-    "subcategory": "design-inspiration"
-  },
-  {
-    "name": "Godly Website",
-    "description": "A curated collection of good web design from all over the web",
-    "url": "https://godly.website",
-    "category": "frontend",
-    "subcategory": "design-inspiration"
-  },
-  {
-    "name": "Behance",
-    "description": "Behance is the world's largest creative network for showcasing and discovering creative work.",
-    "url": "https://www.behance.net/",
-    "category": "frontend",
-    "subcategory": "design-inspiration"
-  },
-  {
-    "name": "Refero Design",
-    "description": "Get inspired by the best examples of product design.",
-    "url": "https://refero.design/",
-    "category": "frontend",
-    "subcategory": "design-inspiration"
-  },
-  {
-    "name": "Page Collective",
-    "description": "Get inspired and keep up with the latest landing page design trends.",
-    "url": "https://pagecollective.com/",
-    "category": "frontend",
-    "subcategory": "design-inspiration"
-  },
-  {
-    "name": "Landingfolio",
-    "description": "Landingfolio features the best landing page designs, templates, component and more on teh web.",
-    "url": "https://www.landingfolio.com/",
-    "category": "frontend",
-    "subcategory": "design-inspiration"
-  },
-  {
-    "name": "Land-book",
-    "description": "Find the best hand-picked website design inspiration.",
-    "url": "https://land-book.com/",
-    "category": "frontend",
-    "subcategory": "design-inspiration"
-  },
-
-  {
-    "name": "Lapa Ninja",
-    "description": "Lapa Ninja is a gallery featuring the best 5443 landing page examples, free books for designers and free UI kits from aroun the web.",
-    "url": "https://www.lapa.ninja/",
-    "category": "frontend",
-    "subcategory": "design-inspiration"
-  },
-  {
-    "name": "Landings dev",
-    "description": "Discover hundreds of landing pages created by leading companies for your design inspiration.",
-    "url": "https://landings.dev/",
-    "category": "frontend",
-    "subcategory": "design-inspiration"
-  },
-  {
-    "name": "Awwwards",
-    "description": "Awwward are the Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.",
-    "url": "https://www.awwwards.com/",
-    "category": "frontend",
-    "subcategory": "design-inspiration"
-  },
-  {
-    "name": "Saas Landing Page",
-    "description": "Saas Landing Page showcases the best landing page examples created bt top-class SaaS companies. Get ideas and inspirations for your next design project.",
-    "url": "https://saaslandingpage.com/",
-    "category": "frontend",
-    "subcategory": "design-inspiration"
-  },
-  {
-    "name": "SiteInspire",
-    "description": "Siteinspire is a showcase of the finest web and interactive design.",
-    "url": "https://www.siteinspire.com/",
-    "category": "frontend",
-    "subcategory": "design-inspiration"
-  },
-  {
-    "name": "Best Website Gallery ",
-    "description": "The most beautiful websites handpicked for you — since 2008!",
-    "url": "https://bestwebsite.gallery/",
-    "category": "frontend",
-    "subcategory": "design-inspiration"
-  },
-  {
-    "name": "Dope Ui ",
-    "description": "Design templates for dopeass Developers and Designers",
-    "url": "https://dopeui.co/",
-    "category": "frontend",
-    "subcategory": "design-inspiration"
-  }
-]
+[{
+        "name": "Dribbble",
+        "description": "Explore the world’s leading design portfolios.",
+        "url": "https://dribbble.com",
+        "category": "frontend",
+        "subcategory": "design-inspiration"
+    },
+    {
+        "name": "Godly Website",
+        "description": "A curated collection of good web design from all over the web",
+        "url": "https://godly.website",
+        "category": "frontend",
+        "subcategory": "design-inspiration"
+    },
+    {
+        "name": "Behance",
+        "description": "Behance is the world's largest creative network for showcasing and discovering creative work.",
+        "url": "https://www.behance.net/",
+        "category": "frontend",
+        "subcategory": "design-inspiration"
+    },
+    {
+        "name": "Refero Design",
+        "description": "Get inspired by the best examples of product design.",
+        "url": "https://refero.design/",
+        "category": "frontend",
+        "subcategory": "design-inspiration"
+    },
+    {
+        "name": "Page Collective",
+        "description": "Get inspired and keep up with the latest landing page design trends.",
+        "url": "https://pagecollective.com/",
+        "category": "frontend",
+        "subcategory": "design-inspiration"
+    },
+    {
+        "name": "Landingfolio",
+        "description": "Landingfolio features the best landing page designs, templates, component and more on teh web.",
+        "url": "https://www.landingfolio.com/",
+        "category": "frontend",
+        "subcategory": "design-inspiration"
+    },
+    {
+        "name": "Land-book",
+        "description": "Find the best hand-picked website design inspiration.",
+        "url": "https://land-book.com/",
+        "category": "frontend",
+        "subcategory": "design-inspiration"
+    },
+    {
+        "name": "Lapa Ninja",
+        "description": "Lapa Ninja is a gallery featuring the best 5443 landing page examples, free books for designers and free UI kits from aroun the web.",
+        "url": "https://www.lapa.ninja/",
+        "category": "frontend",
+        "subcategory": "design-inspiration"
+    },
+    {
+        "name": "Landings dev",
+        "description": "Discover hundreds of landing pages created by leading companies for your design inspiration.",
+        "url": "https://landings.dev/",
+        "category": "frontend",
+        "subcategory": "design-inspiration"
+    },
+    {
+        "name": "Awwwards",
+        "description": "Awwward are the Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.",
+        "url": "https://www.awwwards.com/",
+        "category": "frontend",
+        "subcategory": "design-inspiration"
+    },
+    {
+        "name": "Saas Landing Page",
+        "description": "Saas Landing Page showcases the best landing page examples created bt top-class SaaS companies. Get ideas and inspirations for your next design project.",
+        "url": "https://saaslandingpage.com/",
+        "category": "frontend",
+        "subcategory": "design-inspiration"
+    },
+    {
+        "name": "SiteInspire",
+        "description": "Siteinspire is a showcase of the finest web and interactive design.",
+        "url": "https://www.siteinspire.com/",
+        "category": "frontend",
+        "subcategory": "design-inspiration"
+    },
+    {
+        "name": "Best Website Gallery ",
+        "description": "The most beautiful websites handpicked for you — since 2008!",
+        "url": "https://bestwebsite.gallery/",
+        "category": "frontend",
+        "subcategory": "design-inspiration"
+    },
+    {
+        "name": "Dope Ui ",
+        "description": "Design templates for dopeass Developers and Designers",
+        "url": "https://dopeui.co/",
+        "category": "frontend",
+        "subcategory": "design-inspiration"
+    }
+]
\ No newline at end of file
diff --git a/database/frontend/fonts.json b/database/frontend/fonts.json
index 9faa7a311..13ffb95c7 100644
--- a/database/frontend/fonts.json
+++ b/database/frontend/fonts.json
@@ -1,37 +1,36 @@
-[
-  {
-    "name": "Google Fonts",
-    "description": "The No. 1 resource for free and easy-to-use webfonts by Google. It has a huge library of fonts. ",
-    "url": "https://fonts.google.com/",
-    "category": "frontend",
-    "subcategory": "fonts"
-  },
-  {
-    "name": "Fonts Quirrel",
-    "description": "Fonts Quirrel is platform to get free commercial fonts for your project. It's another huge library for fonts ",
-    "url": "https://fontsquirrel.com/",
-    "category": "frontend",
-    "subcategory": "fonts"
-  },
-  {
-    "name": "1001 fonts",
-    "description": "1001 fonts is a platform that offers 42933 free fonts in 24214 families · Free licenses for commercial use·",
-    "url": "https://www.1001fonts.com/",
-    "category": "frontend",
-    "subcategory": "fonts"
-  },
-  {
-    "name": "Font Joy",
-    "description": "Font Joy is a website that generates font pairings for designers and developers to use in their projects. ",
-    "url": "https://fontjoy.com/",
-    "category": "frontend",
-    "subcategory": "fonts"
-  },
-  {
-    "name": "Type Scale",
-    "description": "A tool to create visual type scales - sets of font sizes that follow good-looking proportions.",
-    "url": "https://type-scale.com",
-    "category": "frontend",
-    "subcategory": "fonts"
-  }
+[{
+        "name": "Google Fonts",
+        "description": "The No. 1 resource for free and easy-to-use webfonts by Google. It has a huge library of fonts. ",
+        "url": "https://fonts.google.com/",
+        "category": "frontend",
+        "subcategory": "fonts"
+    },
+    {
+        "name": "Fonts Quirrel",
+        "description": "Fonts Quirrel is platform to get free commercial fonts for your project. It's another huge library for fonts ",
+        "url": "https://fontsquirrel.com/",
+        "category": "frontend",
+        "subcategory": "fonts"
+    },
+    {
+        "name": "1001 fonts",
+        "description": "1001 fonts is a platform that offers 42933 free fonts in 24214 families · Free licenses for commercial use·",
+        "url": "https://www.1001fonts.com/",
+        "category": "frontend",
+        "subcategory": "fonts"
+    },
+    {
+        "name": "Font Joy",
+        "description": "Font Joy is a website that generates font pairings for designers and developers to use in their projects. ",
+        "url": "https://fontjoy.com/",
+        "category": "frontend",
+        "subcategory": "fonts"
+    },
+    {
+        "name": "Type Scale",
+        "description": "A tool to create visual type scales - sets of font sizes that follow good-looking proportions.",
+        "url": "https://type-scale.com",
+        "category": "frontend",
+        "subcategory": "fonts"
+    }
 ]
\ No newline at end of file
diff --git a/database/frontend/icons.json b/database/frontend/icons.json
index a363b5f15..c4a23e4e4 100644
--- a/database/frontend/icons.json
+++ b/database/frontend/icons.json
@@ -1,59 +1,58 @@
-[
-  {
-    "name": "Font Awesome",
-    "description": "A highly popular icon font, consisting of 1000+ icons spread across countless categories.",
-    "url": "https://fontawesome.com/",
-    "category": "frontend",
-    "subcategory": "icons"
-  },
-  {
-    "name": "Phosphor Icons",
-    "description": "Another beautiful, more boxy SVG collection of free icons. Customizable thickness and color.",
-    "url": "https://phosphoricons.com/",
-    "category": "frontend",
-    "subcategory": "icons"
-  },
-  {
-    "name": "Flat Icon",
-    "description": "It is a collection of fully customisable PSD icons, in two styles, available to use on your next project.",
-    "url": "https://flaticon.com/",
-    "category": "frontend",
-    "subcategory": "icons"
-  },
-  {
-    "name": "Line Awesome",
-    "description": "It is a collection of fully customisable PSD icons, in two styles, available to use on your next project.",
-    "url": "https://icons8.com/line-awesome",
-    "category": "frontend",
-    "subcategory": "icons"
-  },
+[{
+        "name": "Font Awesome",
+        "description": "A highly popular icon font, consisting of 1000+ icons spread across countless categories.",
+        "url": "https://fontawesome.com/",
+        "category": "frontend",
+        "subcategory": "icons"
+    },
+    {
+        "name": "Phosphor Icons",
+        "description": "Another beautiful, more boxy SVG collection of free icons. Customizable thickness and color.",
+        "url": "https://phosphoricons.com/",
+        "category": "frontend",
+        "subcategory": "icons"
+    },
+    {
+        "name": "Flat Icon",
+        "description": "It is a collection of fully customisable PSD icons, in two styles, available to use on your next project.",
+        "url": "https://flaticon.com/",
+        "category": "frontend",
+        "subcategory": "icons"
+    },
+    {
+        "name": "Line Awesome",
+        "description": "It is a collection of fully customisable PSD icons, in two styles, available to use on your next project.",
+        "url": "https://icons8.com/line-awesome",
+        "category": "frontend",
+        "subcategory": "icons"
+    },
 
-  {
-    "name": "Icon Sets",
-    "description": "Icon-sets is a website that provides a collection of icons for designers and developers to use in their projects.",
-    "url": "https://icon-sets.iconify.design/",
-    "category": "frontend",
-    "subcategory": "icons"
-  },
-  {
-    "name": "Devicon",
-    "description": "Set of icons representing programming languages, designing & development tools, all in one single font.",
-    "url": "https://devicon.dev",
-    "category": "frontend",
-    "subcategory": "icons"
-  },
-  {
-    "name": "Simple Icons",
-    "description": "Simple Icons is the website where you can find lots of SVG icons",
-    "url": "https://simpleicons.org",
-    "category": "frontend",
-    "subcategory": "icons"
-  },
-  {
-    "name": "Freeicons",
-    "description": "The largest collections of premium and free icons",
-    "url": "https://freeicons.io",
-    "category": "frontend",
-    "subcategory": "icons"
-  }
+    {
+        "name": "Icon Sets",
+        "description": "Icon-sets is a website that provides a collection of icons for designers and developers to use in their projects.",
+        "url": "https://icon-sets.iconify.design/",
+        "category": "frontend",
+        "subcategory": "icons"
+    },
+    {
+        "name": "Devicon",
+        "description": "Set of icons representing programming languages, designing & development tools, all in one single font.",
+        "url": "https://devicon.dev",
+        "category": "frontend",
+        "subcategory": "icons"
+    },
+    {
+        "name": "Simple Icons",
+        "description": "Simple Icons is the website where you can find lots of SVG icons",
+        "url": "https://simpleicons.org",
+        "category": "frontend",
+        "subcategory": "icons"
+    },
+    {
+        "name": "Freeicons",
+        "description": "The largest collections of premium and free icons",
+        "url": "https://freeicons.io",
+        "category": "frontend",
+        "subcategory": "icons"
+    }
 ]
diff --git a/database/frontend/illustrations.json b/database/frontend/illustrations.json
index 3a16e01d7..98efc4d9e 100644
--- a/database/frontend/illustrations.json
+++ b/database/frontend/illustrations.json
@@ -1,4 +1,3 @@
-
 [{
         "name": "Glaze",
         "description": "All in one resource to get free illustrations images for characters, backgrounds, avatar and more",
diff --git a/database/frontend/images.json b/database/frontend/images.json
index aaef98736..c6dcd6958 100644
--- a/database/frontend/images.json
+++ b/database/frontend/images.json
@@ -1,30 +1,29 @@
-[
-  {
-    "name": "Unsplash",
-    "description": "Unsplash is a site to get free images, you can download all kind of HD images in here for free.",
-    "url": "https://unsplash.com",
-    "category": "frontend",
-    "subcategory": "images"
-  },
-  {
-    "name": "Pixabay",
-    "description": "Pixabay have Over 2M free stock photos, vectors and art illustrations you can use anywhere.",
-    "url": "https://pixabay.com/",
-    "category": "frontend",
-    "subcategory": "images"
-  },
-  {
-    "name": "Pexels",
-    "description": "A great resource for free stock photos and videos, created by photographers around the world.",
-    "url": "https://pexels.com/",
-    "category": "frontend",
-    "subcategory": "images"
-  },
-  {
-    "name": "Kaboompics",
-    "description": "it allows to search pictures by color, and  it provides a complementary palette of colors in the photo.",
-    "url": "https://kaboompics.com/",
-    "category": "frontend",
-    "subcategory": "images"
-  }
+[{
+        "name": "Unsplash",
+        "description": "Unsplash is a site to get free images, you can download all kind of HD images in here for free.",
+        "url": "https://unsplash.com",
+        "category": "frontend",
+        "subcategory": "images"
+    },
+    {
+        "name": "Pixabay",
+        "description": "Pixabay have Over 2M free stock photos, vectors and art illustrations you can use anywhere.",
+        "url": "https://pixabay.com/",
+        "category": "frontend",
+        "subcategory": "images"
+    },
+    {
+        "name": "Pexels",
+        "description": "A great resource for free stock photos and videos, created by photographers around the world.",
+        "url": "https://pexels.com/",
+        "category": "frontend",
+        "subcategory": "images"
+    },
+    {
+        "name": "Kaboompics",
+        "description": "it allows to search pictures by color, and  it provides a complementary palette of colors in the photo.",
+        "url": "https://kaboompics.com/",
+        "category": "frontend",
+        "subcategory": "images"
+    }
 ]
\ No newline at end of file
diff --git a/database/frontend/online-code-editors.json b/database/frontend/online-code-editors.json
index fdf8ad907..7ba922baa 100644
--- a/database/frontend/online-code-editors.json
+++ b/database/frontend/online-code-editors.json
@@ -1,37 +1,36 @@
-[
-  {
-    "name": "Codepen",
-    "description": "An amazing online community for testing and showcasing HTML, CSS, JavaScript code snippets.",
-    "url": "https://codepen.io",
-    "category": "frontend",
-    "subcategory": "online-code-editors"
-  },
-  {
-    "name": "Tryit",
-    "description": "Another online platform for testing codes written in HTML, CSS and JavaScript.",
-    "url": "https://w3schools.com/html/tryit.asp?filename=tryhtml_basic",
-    "category": "frontend",
-    "subcategory": "online-code-editors"
-  },
-  {
-    "name": "OnlineGDB",
-    "description": "Another online platform for testing codes written in HTML, CSS and JavaScript.",
-    "url": "https://w3schools.com/html/tryit.asp?filename=tryhtml_basic",
-    "category": "frontend",
-    "subcategory": "online-code-editors"
-  },
-  {
-    "name": "Sololearn",
-    "description": "It's multi-language online code editor test and share your code snippets.",
-    "url": "https://sololearn.com/compiler-playground/cVRUy2BwauK8",
-    "category": "frontend",
-    "subcategory": "online-code-editors"
-  },
-  {
-    "name": "CodeChef",
-    "description": "An online IDE to practice you competitive programming skills. It allows you to code in multiple languages.",
-    "url": "https://www.codechef.com/ide",
-    "category": "frontend",
-    "subcategory": "online-code-editors"
-  }
+[{
+        "name": "Codepen",
+        "description": "An amazing online community for testing and showcasing HTML, CSS, JavaScript code snippets.",
+        "url": "https://codepen.io",
+        "category": "frontend",
+        "subcategory": "online-code-editors"
+    },
+    {
+        "name": "Tryit",
+        "description": "Another online platform for testing codes written in HTML, CSS and JavaScript.",
+        "url": "https://w3schools.com/html/tryit.asp?filename=tryhtml_basic",
+        "category": "frontend",
+        "subcategory": "online-code-editors"
+    },
+    {
+        "name": "OnlineGDB",
+        "description": "Another online platform for testing codes written in HTML, CSS and JavaScript.",
+        "url": "https://w3schools.com/html/tryit.asp?filename=tryhtml_basic",
+        "category": "frontend",
+        "subcategory": "online-code-editors"
+    },
+    {
+        "name": "Sololearn",
+        "description": "It's multi-language online code editor test and share your code snippets.",
+        "url": "https://sololearn.com/compiler-playground/cVRUy2BwauK8",
+        "category": "frontend",
+        "subcategory": "online-code-editors"
+    },
+    {
+        "name": "CodeChef",
+        "description": "An online IDE to practice you competitive programming skills. It allows you to code in multiple languages.",
+        "url": "https://www.codechef.com/ide",
+        "category": "frontend",
+        "subcategory": "online-code-editors"
+    }
 ]
\ No newline at end of file
diff --git a/database/frontend/ui-generators.json b/database/frontend/ui-generators.json
index e9de55895..c32f8fa9e 100644
--- a/database/frontend/ui-generators.json
+++ b/database/frontend/ui-generators.json
@@ -1,65 +1,64 @@
-[
-  {
-    "name": "Neumorphism.io",
-    "description": "It's a platform where you can generate Soft-UI CSS elements for your webiste or app.",
-    "url": "https://neumorphism.io/#e0e0e0",
-    "category": "frontend",
-    "subcategory": "ui-generators"
-  },
-  {
-    "name": "Hype4 Academy",
-    "description": "Another cool and excellent site to generate Glassmorphism CSS for your project.",
-    "url": "https://hype4.academy/tools/glassmorphism-generator",
-    "category": "frontend",
-    "subcategory": "ui-generators"
-  },
-  {
-    "name": "Universe.io",
-    "description": "It provides tones of cool UI elements made with HTML & CSS.",
-    "url": "https://uiverse.io/all",
-    "category": "frontend",
-    "subcategory": "ui-generators"
-  },
-  {
-    "name": "CSS Portal",
-    "description": "A bundle of amazing and UI CSS elements for you to use in your project.",
-    "url": "https://www.cssportal.com/ui-generators.php",
-    "category": "frontend",
-    "subcategory": "ui-generators"
-  },
-  {
-    "name": "EnjoyCSS",
-    "description": "A platform to implement amazing CSS elements of your choice for your porject.",
-    "url": "https://enjoycss.com/",
-    "category": "frontend",
-    "subcategory": "ui-generators"
-  },
-  {
-    "name": "CSS Generator",
-    "description": "A CSS generator that helps you demonstrate and quickly generate CSS declarations for your website.",
-    "url": "https://cssgenerator.org/",
-    "category": "frontend",
-    "subcategory": "ui-generators"
-  },
-  {
-    "name": "Code Magic",
-    "description": "An amazing open source platform for generating ready to use CSS elements for your project. ",
-    "url": "https://code-magic.vercel.app/",
-    "category": "frontend",
-    "subcategory": "ui-generators"
-  },
-  {
-    "name": "daisyUI",
-    "description": "A platform where you can generate UI components based on TailwindCSS. ",
-    "url": "https://daisyui.com/",
-    "category": "frontend",
-    "subcategory": "ui-generators"
-  },
-  {
-    "name": "TailBlocks",
-    "description": "Another great platform where you can generate UI components based on TailwindCSS. ",
-    "url": "https://tailblocks.cc/",
-    "category": "frontend",
-    "subcategory": "ui-generators"
-  }
+[{
+        "name": "Neumorphism.io",
+        "description": "It's a platform where you can generate Soft-UI CSS elements for your webiste or app.",
+        "url": "https://neumorphism.io/#e0e0e0",
+        "category": "frontend",
+        "subcategory": "ui-generators"
+    },
+    {
+        "name": "Hype4 Academy",
+        "description": "Another cool and excellent site to generate Glassmorphism CSS for your project.",
+        "url": "https://hype4.academy/tools/glassmorphism-generator",
+        "category": "frontend",
+        "subcategory": "ui-generators"
+    },
+    {
+        "name": "Universe.io",
+        "description": "It provides tones of cool UI elements made with HTML & CSS.",
+        "url": "https://uiverse.io/all",
+        "category": "frontend",
+        "subcategory": "ui-generators"
+    },
+    {
+        "name": "CSS Portal",
+        "description": "A bundle of amazing and UI CSS elements for you to use in your project.",
+        "url": "https://www.cssportal.com/ui-generators.php",
+        "category": "frontend",
+        "subcategory": "ui-generators"
+    },
+    {
+        "name": "EnjoyCSS",
+        "description": "A platform to implement amazing CSS elements of your choice for your porject.",
+        "url": "https://enjoycss.com/",
+        "category": "frontend",
+        "subcategory": "ui-generators"
+    },
+    {
+        "name": "CSS Generator",
+        "description": "A CSS generator that helps you demonstrate and quickly generate CSS declarations for your website.",
+        "url": "https://cssgenerator.org/",
+        "category": "frontend",
+        "subcategory": "ui-generators"
+    },
+    {
+        "name": "Code Magic",
+        "description": "An amazing open source platform for generating ready to use CSS elements for your project. ",
+        "url": "https://code-magic.vercel.app/",
+        "category": "frontend",
+        "subcategory": "ui-generators"
+    },
+    {
+        "name": "daisyUI",
+        "description": "A platform where you can generate UI components based on TailwindCSS. ",
+        "url": "https://daisyui.com/",
+        "category": "frontend",
+        "subcategory": "ui-generators"
+    },
+    {
+        "name": "TailBlocks",
+        "description": "Another great platform where you can generate UI components based on TailwindCSS. ",
+        "url": "https://tailblocks.cc/",
+        "category": "frontend",
+        "subcategory": "ui-generators"
+    }
 ]
diff --git a/database/resources/blogs.json b/database/resources/blogs.json
index 425170578..21ad33dae 100644
--- a/database/resources/blogs.json
+++ b/database/resources/blogs.json
@@ -1,65 +1,64 @@
-[
-  {
-    "name": "Medium",
-    "description": "Medium is a website that allows people to publish and share articles, stories, and ideas with a community of readers.",
-    "url": "https://medium.com",
-    "category": "resources",
-    "subcategory": "blogs"
-  },
-  {
-    "name": "GeeksforGeeks",
-    "description": "GeeksforGeeks is a computer science portal for geeks offering coding and algorithm tutorials, interview questions and more.",
-    "url": "https://geeksforgeeks.org",
-    "category": "resources",
-    "subcategory": "blogs"
-  },
-  {
-    "name": "Javatpoint",
-    "description": "A platform that provides free tutorials and interview questions about technologies related to computer science.",
-    "url": "https://www.javatpoint.com/",
-    "category": "resources",
-    "subcategory": "blogs"
-  },
-  {
-    "name": "W3Schools",
-    "description": "W3Schools is a platform that offers tutorials, references, and courses covering all aspects of web development.",
-    "url": "https://www.w3schools.com",
-    "category": "resources",
-    "subcategory": "blogs"
-  },
-  {
-    "name": "LogRocket",
-    "description": "It is a frontend monitoring tool that helps with debugging by providing insights into user behavior.",
-    "url": "https://logrocket.com",
-    "category": "resources",
-    "subcategory": "blogs"
-  },
-  {
-    "name": "Tutorialspoint",
-    "description": "Tutorials Point is an Ed Tech platform that offers the best learning material for technical and non-technical subjects.",
-    "url": "https://tutorialspoint.com",
-    "category": "resources",
-    "subcategory": "blogs"
-  },
-  {
-    "name": "Dev.to",
-    "description": "A constructive and inclusive social network for software developers where they share and discover great ideas.",
-    "url": "https://dev.to/",
-    "category": "resources",
-    "subcategory": "blogs"
-  },
-  {
-    "name": "FreeCodeCamp",
-    "description": "A platform that has thousands of videos, articles, and coding lessons for helping people learn to code for free.",
-    "url": "https://freecodecamp.com",
-    "category": "resources",
-    "subcategory": "blogs"
-  },
-  {
-    "name": "Hashnode",
-    "description": "A free blogging platform where people in tech, developers, and engineers share their ideas.",
-    "url": "https://hashnode.com",
-    "category": "resources",
-    "subcategory": "blogs"
-  }
+[{
+        "name": "Medium",
+        "description": "Medium is a website that allows people to publish and share articles, stories, and ideas with a community of readers.",
+        "url": "https://medium.com",
+        "category": "resources",
+        "subcategory": "blogs"
+    },
+    {
+        "name": "GeeksforGeeks",
+        "description": "GeeksforGeeks is a computer science portal for geeks offering coding and algorithm tutorials, interview questions and more.",
+        "url": "https://geeksforgeeks.org",
+        "category": "resources",
+        "subcategory": "blogs"
+    },
+    {
+        "name": "Javatpoint",
+        "description": "A platform that provides free tutorials and interview questions about technologies related to computer science.",
+        "url": "https://www.javatpoint.com/",
+        "category": "resources",
+        "subcategory": "blogs"
+    },
+    {
+        "name": "W3Schools",
+        "description": "W3Schools is a platform that offers tutorials, references, and courses covering all aspects of web development.",
+        "url": "https://www.w3schools.com",
+        "category": "resources",
+        "subcategory": "blogs"
+    },
+    {
+        "name": "LogRocket",
+        "description": "It is a frontend monitoring tool that helps with debugging by providing insights into user behavior.",
+        "url": "https://logrocket.com",
+        "category": "resources",
+        "subcategory": "blogs"
+    },
+    {
+        "name": "Tutorialspoint",
+        "description": "Tutorials Point is an Ed Tech platform that offers the best learning material for technical and non-technical subjects.",
+        "url": "https://tutorialspoint.com",
+        "category": "resources",
+        "subcategory": "blogs"
+    },
+    {
+        "name": "Dev.to",
+        "description": "A constructive and inclusive social network for software developers where they share and discover great ideas.",
+        "url": "https://dev.to/",
+        "category": "resources",
+        "subcategory": "blogs"
+    },
+    {
+        "name": "FreeCodeCamp",
+        "description": "A platform that has thousands of videos, articles, and coding lessons for helping people learn to code for free.",
+        "url": "https://freecodecamp.com",
+        "category": "resources",
+        "subcategory": "blogs"
+    },
+    {
+        "name": "Hashnode",
+        "description": "A free blogging platform where people in tech, developers, and engineers share their ideas.",
+        "url": "https://hashnode.com",
+        "category": "resources",
+        "subcategory": "blogs"
+    }
 ]
\ No newline at end of file
diff --git a/database/resources/hosting.json b/database/resources/hosting.json
index fcd3de7e0..18b9710f3 100644
--- a/database/resources/hosting.json
+++ b/database/resources/hosting.json
@@ -1,58 +1,57 @@
-[
-  {
-    "name": "GitHub Pages",
-    "description": "A free hosting service provided by GitHub for hosting static websites from a GitHub repository. Simple to use but limited in customization options.",
-    "url": "https://pages.github.com/",
-    "category": "resources",
-    "subcategory": "hosting"
-  },
-  {
-    "name": "Vercel",
-    "description": "A cloud platform for building and deploying web projects, including static websites. Known for its fast CDN and Git integration. Offers custom domains, environment variables, and free hosting.",
-    "url": "https://vercel.com/",
-    "category": "resources",
-    "subcategory": "hosting"
-  },
-  {
-    "name": "Netlify",
-    "description": "A popular platform for deploying and managing web projects, including static websites. Offers easy setup and integration with popular front-end frameworks, as well as features such as continuous deployment, custom domains, SSL certificates, and free hosting.",
-    "url": "https://www.netlify.com/",
-    "category": "resources",
-    "subcategory": "hosting"
-  },
-  {
-    "name": "Heroku",
-    "description": "Heroku is a cloud platform for deploying static as well dynamic websites, supporting multiple programming languages. It offers convenient management and scaling options, but with a cost based on usage",
-    "url": "https://www.heroku.com/",
-    "category": "resources",
-    "subcategory": "hosting"
-  },
-  {
-    "name": "PythonAnywhere",
-    "description": "A platform for hosting Python based web apps with a cloud-based development environment. Offers free hosting with limited options and paid plans for additional features.",
-    "url": "https://www.pythonanywhere.com/",
-    "category": "resources",
-    "subcategory": "hosting"
-  },
-  {
-    "name": "Render",
-    "description": "Render is a comprehensive solution for hosting web applications, both static and dynamic, with a simple and streamlined deployment process. It offers a range of plans, including a free option with limited resources, and paid plans with increased storage, bandwidth, and processing power.",
-    "url": "https://www.render.com/",
-    "category": "resources",
-    "subcategory": "hosting"
-  },
-  {
-    "name": "Fly",
-    "description": "Fly is a serverless hosting platform that charges only for actual usage and provides automatic scaling and high availability for web applications. It offers a free plan with limited resources and paid plans with more processing power, storage, and bandwidth.",
-    "url": "https://www.fly.io/",
-    "category": "resources",
-    "subcategory": "hosting"
-  },
-  {
-    "name": "Firebase Hosting",
-    "description": "Firebase Hosting is a Google hosting service which provides fast and secure hosting for your web app, static and dynamic microservices. it is production-grade web content hosting for developers.",
-    "url": "https://firebase.google.com/",
-    "category": "resources",
-    "subcategory": "hosting"
-  }
+[{
+        "name": "GitHub Pages",
+        "description": "A free hosting service provided by GitHub for hosting static websites from a GitHub repository. Simple to use but limited in customization options.",
+        "url": "https://pages.github.com/",
+        "category": "resources",
+        "subcategory": "hosting"
+    },
+    {
+        "name": "Vercel",
+        "description": "A cloud platform for building and deploying web projects, including static websites. Known for its fast CDN and Git integration. Offers custom domains, environment variables, and free hosting.",
+        "url": "https://vercel.com/",
+        "category": "resources",
+        "subcategory": "hosting"
+    },
+    {
+        "name": "Netlify",
+        "description": "A popular platform for deploying and managing web projects, including static websites. Offers easy setup and integration with popular front-end frameworks, as well as features such as continuous deployment, custom domains, SSL certificates, and free hosting.",
+        "url": "https://www.netlify.com/",
+        "category": "resources",
+        "subcategory": "hosting"
+    },
+    {
+        "name": "Heroku",
+        "description": "Heroku is a cloud platform for deploying static as well dynamic websites, supporting multiple programming languages. It offers convenient management and scaling options, but with a cost based on usage",
+        "url": "https://www.heroku.com/",
+        "category": "resources",
+        "subcategory": "hosting"
+    },
+    {
+        "name": "PythonAnywhere",
+        "description": "A platform for hosting Python based web apps with a cloud-based development environment. Offers free hosting with limited options and paid plans for additional features.",
+        "url": "https://www.pythonanywhere.com/",
+        "category": "resources",
+        "subcategory": "hosting"
+    },
+    {
+        "name": "Render",
+        "description": "Render is a comprehensive solution for hosting web applications, both static and dynamic, with a simple and streamlined deployment process. It offers a range of plans, including a free option with limited resources, and paid plans with increased storage, bandwidth, and processing power.",
+        "url": "https://www.render.com/",
+        "category": "resources",
+        "subcategory": "hosting"
+    },
+    {
+        "name": "Fly",
+        "description": "Fly is a serverless hosting platform that charges only for actual usage and provides automatic scaling and high availability for web applications. It offers a free plan with limited resources and paid plans with more processing power, storage, and bandwidth.",
+        "url": "https://www.fly.io/",
+        "category": "resources",
+        "subcategory": "hosting"
+    },
+    {
+        "name": "Firebase Hosting",
+        "description": "Firebase Hosting is a Google hosting service which provides fast and secure hosting for your web app, static and dynamic microservices. it is production-grade web content hosting for developers.",
+        "url": "https://firebase.google.com/",
+        "category": "resources",
+        "subcategory": "hosting"
+    }
 ]
\ No newline at end of file
diff --git a/database/youtube/android.json b/database/youtube/android.json
index 3c82865fb..fc294a97c 100644
--- a/database/youtube/android.json
+++ b/database/youtube/android.json
@@ -1,9 +1,8 @@
-[
-  {
+[{
     "name": "FreeCodeCamp",
     "description": "This channel provides free multi programming language courses for Web-dev, android and more.",
     "url": "https://www.youtube.com/watch?v=fis26HvvDII",
     "category": "youtube",
-    "subcategory": "android"
-  }
-]
\ No newline at end of file
+    "subcategory": "android",
+    "language": "english"
+}]
diff --git a/database/youtube/data-structures.json b/database/youtube/data-structures.json
index 34b8c91c8..7aa5b6699 100644
--- a/database/youtube/data-structures.json
+++ b/database/youtube/data-structures.json
@@ -1,9 +1,8 @@
-[
-  {
+[{
     "name": "Jennys Lectures CSIT",
     "description": "This channel provides free courses for DSA, C, C++, Python etc.",
     "url": "https://www.youtube.com/@JennyslecturesCSIT",
     "category": "youtube",
-    "subcategory": "dsa"
-  }
-]
\ No newline at end of file
+    "subcategory": "dsa",
+    "language": "english"
+}]
diff --git a/database/youtube/machine-learning.json b/database/youtube/machine-learning.json
index 6d439ae87..f11005f8c 100644
--- a/database/youtube/machine-learning.json
+++ b/database/youtube/machine-learning.json
@@ -1,9 +1,8 @@
-[
-  {
+[{
     "name": "3Blue1Brown",
     "description": "3Blue1Brown, by Grant Sanderson, is some combination of math and entertainment, depending on your disposition. The goal is for explanations to be driven by animations and for difficult problems to be made simple with changes in perspective.",
     "url": "https://www.youtube.com/@3blue1brown",
     "category": "youtube",
-    "subcategory": "machine-learning"
-  }
-]
\ No newline at end of file
+    "subcategory": "machine-learning",
+    "language": "english"
+}]
diff --git a/database/youtube/web-development.json b/database/youtube/web-development.json
index ea6eefe62..cab9c6fcc 100644
--- a/database/youtube/web-development.json
+++ b/database/youtube/web-development.json
@@ -1,44 +1,49 @@
-[
-  {
-    "name": "The Net Ninja",
-    "description": "The Net Ninja is a YouTube channel that teaches web development, including HTML, CSS, JavaScript, PHP, Python, C#, and more.",
-    "url": "https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg",
-    "category": "youtube",
-    "subcategory": "web-development"
-  },
-  {
-    "name": "Traversy Media",
-    "description": "This channel is for all level of developers who want to start or continue their journey in tech.",
-    "url": "https://www.youtube.com/@TraversyMedia",
-    "category": "youtube",
-    "subcategory": "web-development"
-  },
-  {
-    "name": "FreeCodeCamp",
-    "description": "This channel provide free courses related to web-dev, app-dev, projects and many more.",
-    "url": "https://www.youtube.com/@freecodecamp",
-    "category": "youtube",
-    "subcategory": "web-development"
-  },
-  {
-    "name": "Fireship",
-    "description": "Fireship is a channel which provides short introuction videos and quick learning guides.",
-    "url": "https://www.youtube.com/@Fireship",
-    "category": "youtube",
-    "subcategory": "web-development"
-  },
-  {
-    "name": "Programming with Mosh",
-    "description": "It's another great channel for starting you web development journey.",
-    "url": "https://www.youtube.com/@programmingwithmosh",
-    "category": "youtube",
-    "subcategory": "web-development"
-  },
-  {
-    "name": "Academind",
-    "description": "It's a great channel for web development. It's more focused on JavaScript and it's frameworks.",
-    "url": "https://www.youtube.com/@academind",
-    "category": "youtube",
-    "subcategory": "web-development"
-  }
+[{
+        "name": "The Net Ninja",
+        "description": "The Net Ninja is a YouTube channel that teaches web development, including HTML, CSS, JavaScript, PHP, Python, C#, and more.",
+        "url": "https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg",
+        "category": "youtube",
+        "subcategory": "web-development",
+        "language": "english"
+    },
+    {
+        "name": "Traversy Media",
+        "description": "This channel is for all level of developers who want to start or continue their journey in tech.",
+        "url": "https://www.youtube.com/@TraversyMedia",
+        "category": "youtube",
+        "subcategory": "web-development",
+        "language": "english"
+    },
+    {
+        "name": "FreeCodeCamp",
+        "description": "This channel provide free courses related to web-dev, app-dev, projects and many more.",
+        "url": "https://www.youtube.com/@freecodecamp",
+        "category": "youtube",
+        "subcategory": "web-development",
+        "language": "english"
+    },
+    {
+        "name": "Fireship",
+        "description": "Fireship is a channel which provides short introuction videos and quick learning guides.",
+        "url": "https://www.youtube.com/@Fireship",
+        "category": "youtube",
+        "subcategory": "web-development",
+        "language": "english"
+    },
+    {
+        "name": "Programming with Mosh",
+        "description": "It's another great channel for starting you web development journey.",
+        "url": "https://www.youtube.com/@programmingwithmosh",
+        "category": "youtube",
+        "subcategory": "web-development",
+        "language": "english"
+    },
+    {
+        "name": "Academind",
+        "description": "It's a great channel for web development. It's more focused on JavaScript and it's frameworks.",
+        "url": "https://www.youtube.com/@academind",
+        "category": "youtube",
+        "subcategory": "web-development",
+        "language": "english"
+    }
 ]
\ No newline at end of file
diff --git a/database/youtube/web3-metaverse b/database/youtube/web3-metaverse
deleted file mode 100644
index ab6a57a26..000000000
--- a/database/youtube/web3-metaverse
+++ /dev/null
@@ -1,31 +0,0 @@
-[
-    {
-      "name": "Code Eater",
-      "description": "This channel provides quality content for the most demanding topics like Web3, Blockchain & Metaverse in a very simple, easy to understand manner in Hindi language.",
-      "url": "https://www.youtube.com/@CodeEater21",
-      "category": "youtube",
-      "subcategory": "web3-metaverse"
-    },
-    {
-      "name": "Code Eater",
-      "description": "This channel also aims at providing you the best material for the Web3 and Blockchain and helps you in building some awesome projects .",
-      "url": "https://www.youtube.com/@DappUniversity",
-      "category": "youtube",
-      "subcategory": "web3-metaverse"
-    },
-    {
-        "name": "freeCodeCamp.org",
-        "description": "freeCodeCamp is a superb weebsite that aims at providing quality ontent for free across all domains and it provides quality content for this domain too.",
-        "url": "https://www.youtube.com/@freecodecamp",
-        "category": "youtube",
-        "subcategory": "web3-metaverse"
-    },
-    {
-        
-        "name": "Eat the Blocks",
-        "description": "Eat the Block is yet another a youtube channel with some in depth content on various topics on Web3 and Blockchain. It is one of those channels that you should definitely give a try if you want to step into this emerging field of Web3.",
-        "url": "https://www.youtube.com/@EatTheBlocks",
-        "category": "youtube",
-        "subcategory": "web3-metaverse"
-      } 
-  ]
\ No newline at end of file
diff --git a/database/youtube/web3-metaverse.json b/database/youtube/web3-metaverse.json
index ab6a57a26..4b3d23081 100644
--- a/database/youtube/web3-metaverse.json
+++ b/database/youtube/web3-metaverse.json
@@ -4,21 +4,24 @@
       "description": "This channel provides quality content for the most demanding topics like Web3, Blockchain & Metaverse in a very simple, easy to understand manner in Hindi language.",
       "url": "https://www.youtube.com/@CodeEater21",
       "category": "youtube",
-      "subcategory": "web3-metaverse"
+      "subcategory": "web3-metaverse",
+        "language": "english"
     },
     {
       "name": "Code Eater",
       "description": "This channel also aims at providing you the best material for the Web3 and Blockchain and helps you in building some awesome projects .",
       "url": "https://www.youtube.com/@DappUniversity",
       "category": "youtube",
-      "subcategory": "web3-metaverse"
+      "subcategory": "web3-metaverse",
+        "language": "english"
     },
     {
         "name": "freeCodeCamp.org",
         "description": "freeCodeCamp is a superb weebsite that aims at providing quality ontent for free across all domains and it provides quality content for this domain too.",
         "url": "https://www.youtube.com/@freecodecamp",
         "category": "youtube",
-        "subcategory": "web3-metaverse"
+        "subcategory": "web3-metaverse",
+        "language": "english"
     },
     {
         
@@ -26,6 +29,7 @@
         "description": "Eat the Block is yet another a youtube channel with some in depth content on various topics on Web3 and Blockchain. It is one of those channels that you should definitely give a try if you want to step into this emerging field of Web3.",
         "url": "https://www.youtube.com/@EatTheBlocks",
         "category": "youtube",
-        "subcategory": "web3-metaverse"
+        "subcategory": "web3-metaverse",
+        "language": "english"
       } 
   ]
\ No newline at end of file
diff --git a/hooks/useFilterDB.ts b/hooks/useFilterDB.ts
new file mode 100644
index 000000000..a61a06ea3
--- /dev/null
+++ b/hooks/useFilterDB.ts
@@ -0,0 +1,21 @@
+import { database } from "database/data";
+import { useRouter } from "next/router";
+
+const useFilterDB = () => {
+  const router = useRouter();
+  const { subcategory } = router.query;
+  // This filters trough the DB with the subcategory which results in an array of arrays
+  const filterSubCat = database?.map((item) =>
+    item?.filter((cat: any) => cat.subcategory.includes(subcategory))
+  );
+
+  // This filters out an empty array from the filterSubCat
+  const filterDB = filterSubCat?.filter((item) => item.length !== 0);
+
+  return {
+    filterSubCat,
+    filterDB: filterDB,
+  };
+};
+
+export default useFilterDB;
diff --git a/pages/[subcategory].tsx b/pages/[subcategory]/index.tsx
similarity index 100%
rename from pages/[subcategory].tsx
rename to pages/[subcategory]/index.tsx
diff --git a/types/index.ts b/types/index.ts
index b494e7149..504e99c93 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -15,6 +15,7 @@ export interface IData {
   url: string;
   category: Category;
   subcategory: SubCategory;
+  language?:string;
 }
 
 export type Category = "frontend" | "backend" | "youtube" | "resources";
@@ -66,3 +67,13 @@ export interface IContext {
   closeNav?: () => void;
   toggleNav?: () => void;
 }
+
+export type DBType = {
+  id: string;
+  name: string;
+  description: string;
+  url: string;
+  category: string;
+  subcategory: string;
+  language?:string;
+};