From 189afa4187863b9a126db64c54b8670d2f1c9947 Mon Sep 17 00:00:00 2001
From: Vercel <vercel[bot]@users.noreply.github.com>
Date: Wed, 30 Sep 2026 15:45:25 +0000
Subject: [PATCH] Install Vercel Web Analytics
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implemented Vercel Web Analytics for this project.

CHANGES MADE:

1. Installed @vercel/analytics package (v2.0.1)
   - Added to project dependencies in package.json
   - Updated package-lock.json with the new dependency

2. Integrated Analytics component in src/App.jsx
   - Imported Analytics component from '@vercel/analytics/react'
   - Added <Analytics /> component at the end of the Layout component
   - Follows the official Vercel documentation for React/Vite applications

IMPLEMENTATION DETAILS:

Framework: Vite + React
Integration Method: Used '@vercel/analytics/react' as per official documentation
Component Placement: Added the Analytics component inside the Layout wrapper, after the Footer component

The Analytics component will automatically:
- Track page views and user interactions
- Send analytics data to Vercel's analytics dashboard
- Work seamlessly in both development and production environments

TESTING COMPLETED:

✓ Linter passed with no errors
✓ Build completed successfully (vite build)
✓ All existing tests passed (9 tests in 6 test files)
✓ No breaking changes introduced

NEXT STEPS FOR USER:

After deploying to Vercel:
1. Navigate to your Vercel dashboard
2. Select your project
3. Click on "Analytics" in the sidebar
4. Click "Enable" button to activate Web Analytics
5. Deploy the application to start collecting analytics data
6. View analytics data in the Vercel dashboard after deployment

Note: Analytics data will only be collected after enabling the feature in the Vercel dashboard and deploying the application.

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
---
 package-lock.json | 43 +++++++++++++++++++++++++++++++++++++++++++
 package.json      |  1 +
 src/App.jsx       |  2 ++
 3 files changed, 46 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index d44df30..d0762c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "andrew-thompson-portfolio",
       "version": "0.2.0",
       "dependencies": {
+        "@vercel/analytics": "^2.0.1",
         "react": "^19.3.0",
         "react-dom": "^19.3.0",
         "react-icons": "^5.7.0",
@@ -2948,6 +2949,48 @@
         "node": ">=16.20.0"
       }
     },
+    "node_modules/@vercel/analytics": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-2.0.1.tgz",
+      "integrity": "sha512-MTQG6V9qQrt1tsDeF+2Uoo5aPjqbVPys1xvnIftXSJYG2SrwXRHnqEvVoYID7BTruDz4lCd2Z7rM1BdkUehk2g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@remix-run/react": "^2",
+        "@sveltejs/kit": "^1 || ^2",
+        "next": ">= 13",
+        "nuxt": ">= 3",
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "svelte": ">= 4",
+        "vue": "^3",
+        "vue-router": "^4"
+      },
+      "peerDependenciesMeta": {
+        "@remix-run/react": {
+          "optional": true
+        },
+        "@sveltejs/kit": {
+          "optional": true
+        },
+        "next": {
+          "optional": true
+        },
+        "nuxt": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        },
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
diff --git a/package.json b/package.json
index 3e984a4..cac4da6 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@vercel/analytics": "^2.0.1",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-icons": "^5.7.0",
diff --git a/src/App.jsx b/src/App.jsx
index 6600e1a..924e910 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,3 +1,4 @@
+import { Analytics } from '@vercel/analytics/react';
 import Layout from "./layout/Layout";
 import Hero from "./components/Hero";
 import About from "./components/About";
@@ -23,6 +24,7 @@ export default function App() {
       <Certificates />
       <Contact />
       <Footer />
+      <Analytics />
     </Layout>
   );
 }