Install Vercel Web Analytics

package.json

@@ -16,6 +16,7 @@
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
+    "@vercel/analytics": "^2.0.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "framer-motion": "^12.38.0",

src/App.jsx

@@ -1,5 +1,6 @@
 import { Suspense } from "react";
 import { Outlet } from "react-router-dom";
+import { Analytics } from "@vercel/analytics/react";
 import Sidebar from "./components/sidebar/Sidebar";
 import InfoBar from "./components/molecules/Infobar";
 import Loader from "./components/atoms/Loader";
@@ -8,13 +9,16 @@ import ContentArea from "./components/organisms/ContentArea";
 
 function App() {
 	return (
-		<LearningLayout sidebar={<Sidebar />} header={<InfoBar />}>
-			<ContentArea>
-				<Suspense fallback={<Loader />}>
-					<Outlet />
-				</Suspense>
-			</ContentArea>
-		</LearningLayout>
+		<>
+			<LearningLayout sidebar={<Sidebar />} header={<InfoBar />}>
+				<ContentArea>
+					<Suspense fallback={<Loader />}>
+						<Outlet />
+					</Suspense>
+				</ContentArea>
+			</LearningLayout>
+			<Analytics />
+		</>
 	);
 }
 

src/pages/Hooks/index.jsx

@@ -11,9 +11,9 @@ const HooksComponents = {
 	"use-click-outside": lazy(() => import("./UseClickOutsideHook")),
 	"use-window-size": lazy(() => import("./UseWindowSizeHook")),
 	"use-key-press": lazy(() => import("./UseKeyPressHook")),
-	"use-throttle": lazy(() => import("./useThrottleHook")),
+	"use-throttle": lazy(() => import("./UseThrottleHook")),
 	"use-undo-redo": lazy(() => import("./UseUndoRedoHook")),
-	"use-infinite-scroll": lazy(() => import("./useInfiniteScrollHook")),
+	"use-infinite-scroll": lazy(() => import("./UseInfiniteScrollHook")),
 };
 
 const Hooks = () => {

src/pages/Hooks/useInfiniteScrollHook.jsx

@@ -24,7 +24,7 @@ export const useInfiniteScroll = (callback, Threshold = 20) => {
 	return handleScroll;
 };
 
-const useInfiniteScrollHook = () => {
+const UseInfiniteScrollHook = () => {
 	const [data, setData] = useState([...new Array(40)]);
 	const handleScroll = useInfiniteScroll(() => {
 		setData((prev) => [...prev, ...new Array(10)]);
@@ -71,4 +71,4 @@ const useInfiniteScrollHook = () => {
 	);
 };
 
-export default useInfiniteScrollHook;
+export default UseInfiniteScrollHook;

src/pages/Hooks/useThrottleHook.jsx

@@ -46,7 +46,7 @@ export const useThrottle = (callback, delay = 500) => {
 	return throttleFn;
 };
 
-const useThrottleHook = () => {
+const UseThrottleHook = () => {
 	const [count, setCount] = useState(0);
 	const [inputValue, setInputValue] = useState("");
 	const throttledValue = useThrottleValue(inputValue, 5000);
@@ -100,4 +100,4 @@ const useThrottleHook = () => {
 	);
 };
 
-export default useThrottleHook;
+export default UseThrottleHook;

src/pages/Hooks/useUndoRedoHook.jsx

@@ -48,7 +48,7 @@ export const useUndoRedo = (initialValues) => {
 	return { set, history, undo, redo };
 };
 
-const useUndoRedoHook = () => {
+const UseUndoRedoHook = () => {
 	const { set, history, undo, redo } = useUndoRedo("");
 	return (
 		<>
@@ -123,4 +123,4 @@ const useUndoRedoHook = () => {
 	);
 };
 
-export default useUndoRedoHook;
+export default UseUndoRedoHook;