UI libraries in fronted added

components/TopBar/CategoryDescriptions.ts

@@ -38,6 +38,8 @@ const categoryDescriptions: CategoryDescriptions = {
     'The UI Generator, or User Interface Generator, is an Eclipse tool that takes a user model and generates a role-based user interface for a J2EE Web application.',
   'online code editors':
     "Online code editors, also called cloud-based code editors, are convenient because they usually require no setup. Plus, it's way easier to collaborate with someone over the cloud.",
+  'ui libraries':
+    'UI libraries are collections of reusable components that can be used to build user interfaces. They are often used in conjunction with frameworks like React or Vue.js to create web applications.',
 
   //backend
   architecture:
@@ -81,11 +83,12 @@ const categoryDescriptions: CategoryDescriptions = {
   // Open-source
   articles:
     'There are many open source blogging platforms available for developers. Some of the most popular ones include WordPress, Joomla, and Drupal1. Other open source blogging platforms include Ghost, Serendipity, SilverStripe, and Jekyll',
- projects:
+  projects:
     'Anyone can contribute to the projects are called OpenSource Projects. There are many open source projects available for developers. Some of the most popular ones include Linux, Git, and Apache1. Other open source projects include Kubernetes, TensorFlow, and React Native',
   tools:
     'There are various open source tools available for developers. Some of the most popular ones include Hadoop, VLC Media Player, and GIMP1. Other open source tools include TensorFlow, Eclipse Che, and OpenShift Do.',
-  'os tutorials': 'OS tutorials helps you to learn-by-watching. It contains the list most helping tutorials on open-source.',
+  'os tutorials':
+    'OS tutorials helps you to learn-by-watching. It contains the list most helping tutorials on open-source.',
 
   //devops
   cicd: 'Continuous integration and continuous delivery (CI/CD) is a set of practices that combines continuous integration (CI) and continuous delivery (CD) to automate the process of software development and deployment.',

database/data.ts

@@ -3,7 +3,7 @@ import * as DB from 'database'
 import { v4 as uuidv4 } from 'uuid'
 export const database: IData[][] = Object.values(DB).map((item: IDBData[]) =>
   item.map((subcat: IDBData) => ({ ...subcat, id: uuidv4() }))
-);
+)
 
 export const sidebarData: ISidebar[] = [
   {
@@ -46,6 +46,11 @@ export const sidebarData: ISidebar[] = [
         url: '/accessibility',
         resources: DB.accessibility,
       },
+      {
+        name: 'ui Libraries',
+        url: '/ui-libraries',
+        resources: DB.uilibraries,
+      },
     ],
   },
   {
@@ -202,7 +207,7 @@ export const sidebarData: ISidebar[] = [
       },
     ],
   },
- 
+
   {
     category: 'cloud-computing',
     subcategory: [
@@ -292,7 +297,11 @@ export const sidebarData: ISidebar[] = [
   {
     category: 'technical-writing',
     subcategory: [
-      { name: 'Technical Writing Tools', url: '/technical-writing-tools', resources: DB.technicalWritingTools },
+      {
+        name: 'Technical Writing Tools',
+        url: '/technical-writing-tools',
+        resources: DB.technicalWritingTools,
+      },
     ],
   },
   {

database/frontend/ui-libraries.json

@@ -0,0 +1,23 @@
+[
+    {
+        "name": "MaterialUI",
+        "url": "https://material-ui.com/",
+        "description": "Material-UI is a popular open-source React component library that implements Google's Material Design principles, offering a vast collection of pre-designed and customizable UI components for creating visually appealing and responsive web applications. It's known for its seamless integration with React and extensive theming capabilities.",
+        "category": "frontend",
+        "subcategory": "ui-libraries"
+    },
+    {
+        "name": "ChakraUI",
+        "url": "https://chakra-ui.com/",
+        "description": "Chakra UI is a popular open-source React component library that simplifies building accessible and customizable user interfaces by providing a set of well-designed, composable UI components with a focus on flexibility and theming. It's known for its ease of use and integration with modern web development workflows.",
+        "category": "frontend",
+        "subcategory": "ui-libraries"
+    },
+    {
+        "name": "AntDesign",
+        "url": "https://ant.design/",
+        "description": "Ant Design is a comprehensive design system and React component library that offers a wide range of polished and customizable UI components for building modern web and mobile applications. It's widely used for its aesthetic appeal, robust feature set, and support for internationalization.",
+        "category": "frontend",
+        "subcategory": "ui-libraries"
+    }
+]

database/index.ts

@@ -13,6 +13,7 @@ export { default as uiGenerators } from './frontend/ui-generators.json'
 export { default as react } from './frontend/react.json'
 export { default as next } from './frontend/next.json'
 export { default as three } from './frontend/three.json'
+export { default as uilibraries } from './frontend/ui-libraries.json'
 // backend
 export { default as authentication } from './backend/authentication.json'
 export { default as architecture } from './backend/architecture.json'