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
rupali-codes · Feb 18, 2023 · 4cf29be · 4cf29be · vercel · Feb 18, 2023
1 parent e834a1e
commit 4cf29be
Show file tree

Hide file tree

Showing 22 changed files with 581 additions and 608 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+./package-lock.json
 
 # testing
 /coverage

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -43,7 +43,6 @@ Thank you for taking the time to contribute to our project. Please take a moment
 The subcategory object should follow this pattern
 
   ```sh
-    id: '',
     name:'', 
     description:'',
     url:'',
@@ -53,7 +52,6 @@ The subcategory object should follow this pattern
 
   #### Details 
 
-  * `id`: +1 to it's previous element
   * `name`: name of the site
 
   * `description`: define what the site does in a 

diff --git a/components/cards/index.tsx b/components/cards/index.tsx
@@ -3,13 +3,14 @@ import React from "react";
 import { LinkContainer } from "../LinksContainer/LinkContainer";
 import { BackToTopButton } from "../BackToTop/BackToTopButton";
 import * as DB from "database";
+import { database } from "database/data";
 
 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 = Object.values(DB)?.map((item: any) =>
+  const filterSubCat = database?.map((item: any) =>
     item?.filter((cat: any) => cat.subcategory.includes(subcategory))
   );
 
@@ -18,6 +19,8 @@ const Cards = () => {
     (item: any, index: number) => item.length !== 0
   );
 
+  console.log(database)
+
   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 ${

diff --git a/database/backend/validation.json b/database/backend/validation.json
@@ -1,10 +1,7 @@
-[
-  {
-    "id": "66",
+[{
     "name": "Express Validator",
     "description": "Express validator is a set of express.js middlewares that wraps validator.js validator and sanitizer functions.",
     "url": "https://express-validator.github.io/docs/",
     "category": "backend",
     "subcategory": "validation"
-  }
-]
+}]
diff --git a/database/data.ts b/database/data.ts
@@ -1,4 +1,8 @@
 import { IData, ISidebar } from "../types";
+import * as DB from "database";
+import uuid from "react-uuid";
+
+export const database=Object.values(DB).map(item=>item.map(subcat=>({...subcat,id:uuid()})));
 
 export const sidebarData: ISidebar[] = [
   {

diff --git a/database/frontend/animations.json b/database/frontend/animations.json
@@ -1,42 +1,36 @@
-[
-  {
-    "id": "23",
-    "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"
-  },
-  {
-    "id": "27",
-    "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"
-  },
-  {
-    "id": "28",
-    "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"
-  },
-  {
-    "id": "40",
-    "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"
-  },
-  {
-    "id": "41",
-    "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
@@ -1,66 +1,57 @@
-[
-  {
-    "id": "4",
-    "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"
-  },
-  {
-    "id": "5",
-    "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"
-  },
-  {
-    "id": "6",
-    "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"
-  },
-  {
-    "id": "7",
-    "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"
-  },
-  {
-    "id": "8",
-    "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"
-  },
-  {
-    "id": "22",
-    "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"
-  },
-  {
-    "id": "30",
-    "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"
-  },
-  {
-    "id": "49",
-    "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
@@ -1,18 +1,15 @@
-[
-  {
-    "id": "25",
-    "name": "Dribbble",
-    "description": "Explore the world’s leading design portfolios.",
-    "url": "https://dribbble.com",
-    "category": "frontend",
-    "subcategory": "design-inspiration"
-  },
-  {
-    "id": "26",
-    "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": "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"
+    }
+]
diff --git a/database/frontend/fonts.json b/database/frontend/fonts.json
@@ -1,42 +1,36 @@
-[
-  {
-    "id": "9",
-    "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"
-  },
-  {
-    "id": "10",
-    "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"
-  },
-  {
-    "id": "21",
-    "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"
-  },
-  {
-    "id": "18",
-    "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"
-  },
-  {
-    "id": "24",
-    "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"
+    }
+]