[UPDATE]:API DEMO ADDED AND SOME MINOR CHANGES DONE

Author: iamajitsharma

src/App.tsx

@@ -16,6 +16,7 @@ import NotFound from "pages/dashboard/pages/NotFound";
 import LayoutVertical from "pages/dashboard/LayoutVertical";
 import Documentation from "pages/dashboard/Documentation";
 import ChangeLog from "pages/dashboard/Changelog";
+import ApiDemo from "./pages/dashboard/pages/ApiDemo";
 
 // import bootstrap components
 import Accordion from "bootstrap-components/Accordions";
@@ -76,6 +77,10 @@ const App = () => {
               path: "pricing",
               Component: Pricing,
             },
+            {
+              path: "api-demo",
+              Component: ApiDemo,
+            },
           ],
         },
         {

src/pages/dashboard/Documentation.tsx

@@ -100,15 +100,15 @@ const Documentation = () => {
                 <li>
                   <h4 className="mb-0 fw-bold">Start</h4>
                   <p>
-                    Run <code>npm run dev</code> or <code>yarn dev</code> or{" "}
-                    <code>pnpm dev</code> to start the development server on
+                    Run <code>npm run dev</code> or <code>yarn run dev</code> or{" "}
+                    <code>pnpm run dev</code> to start the development server on
                     http://localhost:5173
                   </p>
                   <p>
                     Visit{" "}
                     <code>
                       <Link
-                        to="http://localhost:3000"
+                        to="http://localhost:5173"
                         target="_blank"
                         rel="noreferrer"
                       >

src/pages/dashboard/pages/ApiDemo.tsx

@@ -0,0 +1,101 @@
+// Import node module libraries
+import React, { Fragment, useEffect, useState } from "react";
+import { Card } from "react-bootstrap";
+
+// Define types
+interface Dimensions {
+  width: number;
+  height: number;
+  depth: number;
+}
+
+interface Product {
+  id: number;
+  title: string;
+  description: string;
+  category: string;
+  price: number;
+  discountPercentage: number;
+  rating: number;
+  stock: number;
+  tags: string[];
+  brand: string;
+  sku: string;
+  weight: number;
+  dimensions: Dimensions;
+}
+
+interface ErrorState {
+  status_code: string;
+  message: string;
+}
+
+const ApiDemo: React.FC = () => {
+  const [product, setProduct] = useState<Product | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<ErrorState | null>(null);
+
+  useEffect(() => {
+    const fetchProduct = async () => {
+      try {
+        setIsLoading(true);
+        const response = await fetch("https://dummyjson.com/products/1");
+
+        if (!response.ok) {
+          setError({
+            status_code: "400",
+            message: "Something went wrong, please try again.",
+          });
+          throw new Error("Unable to fetch product, Please try again later");
+        }
+
+        const data: Product = await response.json();
+        setProduct(data);
+      } catch (error) {
+        if (error instanceof Error) {
+          setError({
+            status_code: "500",
+            message: error.message,
+          });
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchProduct();
+  }, []);
+
+  return (
+    <Fragment>
+      {isLoading && (
+        <Card className="m-5">
+          <Card.Body>
+            <div className="d-flex justify-content-center align-items-center">
+              <p className="fs-4">Loading...</p>
+            </div>
+          </Card.Body>
+        </Card>
+      )}
+
+      {error && (
+        <Card className="m-5">
+          <Card.Body>
+            <h4>Error: {error.status_code}</h4>
+            <p>{error.message}</p>
+          </Card.Body>
+        </Card>
+      )}
+
+      {product && !isLoading && !error && (
+        <Card className="m-5">
+          <Card.Body>
+            <pre>{JSON.stringify(product, null, 2)}</pre>
+          </Card.Body>
+        </Card>
+      )}
+    </Fragment>
+  );
+};
+
+export default ApiDemo;

tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/types.ts","./src/vite-env.d.ts","./src/bootstrap-components/accordions.tsx","./src/bootstrap-components/alerts.tsx","./src/bootstrap-components/badges.tsx","./src/bootstrap-components/breadcrumbs.tsx","./src/bootstrap-components/buttongroup.tsx","./src/bootstrap-components/buttons.tsx","./src/bootstrap-components/cards.tsx","./src/bootstrap-components/carousels.tsx","./src/bootstrap-components/closebutton.tsx","./src/bootstrap-components/collapse.tsx","./src/bootstrap-components/dropdowns.tsx","./src/bootstrap-components/listgroup.tsx","./src/bootstrap-components/modals.tsx","./src/bootstrap-components/navbars.tsx","./src/bootstrap-components/navs.tsx","./src/bootstrap-components/offcanvas.tsx","./src/bootstrap-components/overlays.tsx","./src/bootstrap-components/paginations.tsx","./src/bootstrap-components/popovers.tsx","./src/bootstrap-components/progress.tsx","./src/bootstrap-components/spinners.tsx","./src/bootstrap-components/tables.tsx","./src/bootstrap-components/toasts.tsx","./src/bootstrap-components/tooltips.tsx","./src/components/bootstrap/dotbadge.tsx","./src/components/navbars/sidebar/customtoggle.tsx","./src/components/navbars/sidebar/customtoggleleveltwo.tsx","./src/components/navbars/sidebar/sidebar.tsx","./src/components/navbars/topbar/desktopnotifications.tsx","./src/components/navbars/topbar/header.tsx","./src/components/navbars/topbar/mobilenotifications.tsx","./src/components/navbars/topbar/notificationlist.tsx","./src/components/navbars/topbar/notifications.tsx","./src/data/notification.ts","./src/data/code/accordioncode.ts","./src/data/code/alertscode.ts","./src/data/code/badgescode.ts","./src/data/code/breadcrumbcode.ts","./src/data/code/buttongroupcode.ts","./src/data/code/buttonscode.ts","./src/data/code/cardscode.ts","./src/data/code/carouselscode.ts","./src/data/code/closecode.ts","./src/data/code/collapsescode.ts","./src/data/code/dropdownscode.ts","./src/data/code/listgroupscode.ts","./src/data/code/modalscode.ts","./src/data/code/navbarscode.ts","./src/data/code/navscode.ts","./src/data/code/offcanvascode.ts","./src/data/code/overlayscode.ts","./src/data/code/paginationscode.ts","./src/data/code/popoverscode.ts","./src/data/code/progresscode.ts","./src/data/code/spinnerscode.ts","./src/data/code/tablescode.ts","./src/data/code/toastscode.ts","./src/data/code/tooltipscode.ts","./src/data/dashboard/activeprojectsdata.ts","./src/data/dashboard/projectsstatsdata.tsx","./src/data/dashboard/teamsdata.ts","./src/data/pricing/faqsdata.ts","./src/data/pricing/featuresdata.ts","./src/data/pricing/pricingplansdata.ts","./src/data/profile/projectscontributionsdata.ts","./src/hooks/usemounted.tsx","./src/hooks/usetoggle.tsx","./src/layouts/authenticationlayout.tsx","./src/layouts/rootlayout.tsx","./src/pages/auth/forgetpassword.tsx","./src/pages/auth/signin.tsx","./src/pages/auth/signup.tsx","./src/pages/dashboard/changelog.tsx","./src/pages/dashboard/documentation.tsx","./src/pages/dashboard/index.tsx","./src/pages/dashboard/layoutvertical.tsx","./src/pages/dashboard/pages/billing.tsx","./src/pages/dashboard/pages/notfound.tsx","./src/pages/dashboard/pages/pricing.tsx","./src/pages/dashboard/pages/profile.tsx","./src/pages/dashboard/pages/settings.tsx","./src/routes/dashboardroutes.ts","./src/sub-components/index.tsx","./src/sub-components/billing/billingaddress.tsx","./src/sub-components/billing/currentplan.tsx","./src/sub-components/changelog/version_01_00_00.tsx","./src/sub-components/dashboard/activeprojects.tsx","./src/sub-components/dashboard/tasksperformance.tsx","./src/sub-components/dashboard/teams.tsx","./src/sub-components/profile/aboutme.tsx","./src/sub-components/profile/activityfeed.tsx","./src/sub-components/profile/myteam.tsx","./src/sub-components/profile/profileheader.tsx","./src/sub-components/profile/projectscontributions.tsx","./src/sub-components/profile/recentfromblog.tsx","./src/sub-components/settings/deleteaccount.tsx","./src/sub-components/settings/emailsetting.tsx","./src/sub-components/settings/generalsetting.tsx","./src/sub-components/settings/notifications.tsx","./src/sub-components/settings/preferences.tsx","./src/widgets/pageheading.tsx","./src/widgets/index.tsx","./src/widgets/cards/pricingcard.tsx","./src/widgets/dropfiles/dropfiles.tsx","./src/widgets/features/featurelefttopicon.tsx","./src/widgets/form-select/formselect.tsx","./src/widgets/highlight-code/highlightcode.tsx","./src/widgets/stats/statrighttopicon.tsx"],"version":"5.6.3"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/types.ts","./src/vite-env.d.ts","./src/bootstrap-components/accordions.tsx","./src/bootstrap-components/alerts.tsx","./src/bootstrap-components/badges.tsx","./src/bootstrap-components/breadcrumbs.tsx","./src/bootstrap-components/buttongroup.tsx","./src/bootstrap-components/buttons.tsx","./src/bootstrap-components/cards.tsx","./src/bootstrap-components/carousels.tsx","./src/bootstrap-components/closebutton.tsx","./src/bootstrap-components/collapse.tsx","./src/bootstrap-components/dropdowns.tsx","./src/bootstrap-components/listgroup.tsx","./src/bootstrap-components/modals.tsx","./src/bootstrap-components/navbars.tsx","./src/bootstrap-components/navs.tsx","./src/bootstrap-components/offcanvas.tsx","./src/bootstrap-components/overlays.tsx","./src/bootstrap-components/paginations.tsx","./src/bootstrap-components/popovers.tsx","./src/bootstrap-components/progress.tsx","./src/bootstrap-components/spinners.tsx","./src/bootstrap-components/tables.tsx","./src/bootstrap-components/toasts.tsx","./src/bootstrap-components/tooltips.tsx","./src/components/bootstrap/dotbadge.tsx","./src/components/navbars/sidebar/customtoggle.tsx","./src/components/navbars/sidebar/customtoggleleveltwo.tsx","./src/components/navbars/sidebar/sidebar.tsx","./src/components/navbars/topbar/desktopnotifications.tsx","./src/components/navbars/topbar/header.tsx","./src/components/navbars/topbar/mobilenotifications.tsx","./src/components/navbars/topbar/notificationlist.tsx","./src/components/navbars/topbar/notifications.tsx","./src/data/notification.ts","./src/data/code/accordioncode.ts","./src/data/code/alertscode.ts","./src/data/code/badgescode.ts","./src/data/code/breadcrumbcode.ts","./src/data/code/buttongroupcode.ts","./src/data/code/buttonscode.ts","./src/data/code/cardscode.ts","./src/data/code/carouselscode.ts","./src/data/code/closecode.ts","./src/data/code/collapsescode.ts","./src/data/code/dropdownscode.ts","./src/data/code/listgroupscode.ts","./src/data/code/modalscode.ts","./src/data/code/navbarscode.ts","./src/data/code/navscode.ts","./src/data/code/offcanvascode.ts","./src/data/code/overlayscode.ts","./src/data/code/paginationscode.ts","./src/data/code/popoverscode.ts","./src/data/code/progresscode.ts","./src/data/code/spinnerscode.ts","./src/data/code/tablescode.ts","./src/data/code/toastscode.ts","./src/data/code/tooltipscode.ts","./src/data/dashboard/activeprojectsdata.ts","./src/data/dashboard/projectsstatsdata.tsx","./src/data/dashboard/teamsdata.ts","./src/data/pricing/faqsdata.ts","./src/data/pricing/featuresdata.ts","./src/data/pricing/pricingplansdata.ts","./src/data/profile/projectscontributionsdata.ts","./src/hooks/usemounted.tsx","./src/hooks/usetoggle.tsx","./src/layouts/authenticationlayout.tsx","./src/layouts/rootlayout.tsx","./src/pages/auth/forgetpassword.tsx","./src/pages/auth/signin.tsx","./src/pages/auth/signup.tsx","./src/pages/dashboard/changelog.tsx","./src/pages/dashboard/documentation.tsx","./src/pages/dashboard/index.tsx","./src/pages/dashboard/layoutvertical.tsx","./src/pages/dashboard/pages/apidemo.tsx","./src/pages/dashboard/pages/billing.tsx","./src/pages/dashboard/pages/notfound.tsx","./src/pages/dashboard/pages/pricing.tsx","./src/pages/dashboard/pages/profile.tsx","./src/pages/dashboard/pages/settings.tsx","./src/routes/dashboardroutes.ts","./src/sub-components/index.tsx","./src/sub-components/billing/billingaddress.tsx","./src/sub-components/billing/currentplan.tsx","./src/sub-components/changelog/version_01_00_00.tsx","./src/sub-components/dashboard/activeprojects.tsx","./src/sub-components/dashboard/tasksperformance.tsx","./src/sub-components/dashboard/teams.tsx","./src/sub-components/profile/aboutme.tsx","./src/sub-components/profile/activityfeed.tsx","./src/sub-components/profile/myteam.tsx","./src/sub-components/profile/profileheader.tsx","./src/sub-components/profile/projectscontributions.tsx","./src/sub-components/profile/recentfromblog.tsx","./src/sub-components/settings/deleteaccount.tsx","./src/sub-components/settings/emailsetting.tsx","./src/sub-components/settings/generalsetting.tsx","./src/sub-components/settings/notifications.tsx","./src/sub-components/settings/preferences.tsx","./src/widgets/pageheading.tsx","./src/widgets/index.tsx","./src/widgets/cards/pricingcard.tsx","./src/widgets/dropfiles/dropfiles.tsx","./src/widgets/features/featurelefttopicon.tsx","./src/widgets/form-select/formselect.tsx","./src/widgets/highlight-code/highlightcode.tsx","./src/widgets/stats/statrighttopicon.tsx"],"version":"5.6.3"}