Install and configure Vercel Web Analytics

## Vercel Web Analytics Implementation

Successfully installed and configured Vercel Web Analytics for the React/Vite project.

### Changes Made

**1. Installed Package**
- Added `@vercel/analytics` (v2.0.1) to project dependencies
- Updated `frontend/package.json` and `frontend/package-lock.json`

**2. Modified Files**
- **frontend/src/App.jsx**
- Added import: `import { Analytics } from "@vercel/analytics/react";`
- Added `<Analytics />` component in the main App export function within the `<PlayerProvider>` wrapper
- Component placed at the root level to ensure analytics tracking across all pages/tabs

### Implementation Details

According to the official Vercel documentation (retrieved from https://vercel.com/docs/analytics/quickstart), for React/Vite projects, the Analytics component should be added to the root component. The implementation follows the recommended pattern:

```jsx
import { Analytics } from '@vercel/analytics/react';

export default function App() {
return (
<PlayerProvider>
<AppContent />
<Analytics />
</PlayerProvider>
);
}
```

This placement ensures that:
- Analytics tracks all user interactions across the app
- The component is rendered once at the root level
- It works seamlessly with the existing React context providers

### Verification Steps Completed

✅ Package installed successfully via npm
✅ Build completed successfully (`npm run build`)
✅ No new linting errors introduced by the changes
✅ Generated build assets (912.78 kB main bundle)

### Next Steps for Deployment

To complete the analytics setup:
1. Deploy the application to Vercel
2. Navigate to the Vercel project dashboard
3. Go to Analytics section in the sidebar
4. Click "Enable" to activate Web Analytics
5. After deployment, verify analytics data collection in the Vercel dashboard

The analytics will automatically start collecting page views and web vitals data once deployed to Vercel with analytics enabled in the project settings.

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>

frontend/package-lock.json

@@ -14,6 +14,7 @@
         "@react-oauth/google": "^0.13.4",
         "@tailwindcss/postcss": "^4.2.2",
         "@tanstack/react-table": "^8.21.3",
+        "@vercel/analytics": "^2.0.1",
         "clsx": "^2.1.1",
         "framer-motion": "^12.38.0",
         "lucide-react": "^1.6.0",
@@ -1425,6 +1426,48 @@
       "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
       "license": "MIT"
     },
+    "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": "6.0.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.1.tgz",

frontend/package.json

@@ -16,6 +16,7 @@
     "@react-oauth/google": "^0.13.4",
     "@tailwindcss/postcss": "^4.2.2",
     "@tanstack/react-table": "^8.21.3",
+    "@vercel/analytics": "^2.0.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.38.0",
     "lucide-react": "^1.6.0",

frontend/src/App.jsx

@@ -10,6 +10,7 @@ import {
   Settings,
   X,
 } from "lucide-react";
+import { Analytics } from "@vercel/analytics/react";
 
 import { LandingPage } from "./components/LandingPage";
 import ProjectionsTable from "./components/ProjectionsTable";
@@ -275,6 +276,7 @@ export default function App() {
   return (
     <PlayerProvider>
       <AppContent />
+      <Analytics />
     </PlayerProvider>
   );
 }