Feat/analytics

package.json

@@ -40,6 +40,7 @@
     "@tanstack/react-query": "^5.66.9",
     "@tanstack/react-table": "^8.20.5",
     "@types/chroma-js": "^3.1.1",
+    "@vercel/analytics": "^1.5.0",
     "@vitest/web-worker": "^3.0.7",
     "axios": "^1.7.7",
     "chess.js": "^1.0.0-beta.8",

src/main.tsx

@@ -1,16 +1,18 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { ThemeProvider } from '@/components/theme-provider.tsx';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Analytics } from '@vercel/analytics/react';
 import App from './app.tsx';
 import '@/i18n.config.ts';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 export const queryClient = new QueryClient();
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
       <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+        <Analytics />
         <App />
       </ThemeProvider>
     </QueryClientProvider>

src/pages/login/login.tsx

@@ -8,6 +8,8 @@ import { Button } from '@/components/ui/button.tsx';
 import { login } from '@/api/auth.ts';
 import { useNavigate, Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { track } from '@vercel/analytics';
+import { useDeviceData } from 'react-device-detect';
 // import lichessIcon from '@/assets/icons/lichess.svg?url';
 // import chessComIcon from '@/assets/icons/chesscom.svg?url';
 
@@ -57,11 +59,20 @@ export const Login = () => {
   });
 
   const navigate = useNavigate();
+  const { browser, cpu, engine, os, ua } = useDeviceData(window.navigator.userAgent);
 
   const onSubmit = async (data: z.infer<typeof LoginSchema>) => {
     try {
       await login(data);
 
+      track('Signin', {
+        email: data.email,
+        browser,
+        cpu,
+        engine,
+        os,
+        ua,
+      });
       navigate('/');
     } catch (error) {
       console.error('Failed to login:', error);

src/pages/register/register.tsx

@@ -8,6 +8,8 @@ import { Button } from '@/components/ui/button.tsx';
 import { register } from '@/api/auth.ts';
 import { useNavigate, Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { track } from '@vercel/analytics';
+import { useDeviceData } from 'react-device-detect';
 // import lichessIcon from '@/assets/icons/lichess.svg?url';
 // import chessComIcon from '@/assets/icons/chesscom.svg?url';
 
@@ -46,11 +48,20 @@ export const Register = () => {
   });
 
   const navigate = useNavigate();
+  const { browser, cpu, engine, os, ua } = useDeviceData(window.navigator.userAgent);
 
   const onSubmit = async (data: z.infer<typeof RegisterSchema>) => {
     try {
       await register(data);
 
+      track('Signup', {
+        email: data.email,
+        browser,
+        cpu,
+        engine,
+        os,
+        ua,
+      });
       navigate('/');
       /* eslint-disable @typescript-eslint/no-explicit-any */
     } catch (error: any) {

src/pages/start-analysis/start-analysis.tsx

@@ -37,6 +37,9 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog.tsx';
+import { useDeviceData } from 'react-device-detect';
+import { track } from '@vercel/analytics';
+import { useAuthStore } from '@/store/auth.ts';
 
 const PGN_PLACEHOLDER = `[Event "F/S Return Match"]
 [Site "Belgrade, Serbia JUG"]
@@ -123,6 +126,7 @@ enum ImportMode {
  */
 export const StartAnalysis = () => {
   const { setAnalysis, chess } = useAnalysisStore();
+  const user = useAuthStore((state) => state.user);
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(false);
   const [isDownloading, setIsDownloading] = useState(false);
@@ -148,11 +152,11 @@ export const StartAnalysis = () => {
     },
   });
 
+  const { browser, cpu, engine, os, ua } = useDeviceData(window.navigator.userAgent);
+
   const onSubmit = async (data: z.infer<typeof StartAnalysisFormSchema>) => {
     setIsLoading(true);
 
-    console.log(data);
-
     try {
       const analysis = await analyseGame(data);
 
@@ -161,6 +165,15 @@ export const StartAnalysis = () => {
 
       setAnalysis({ ...analysis, id: response.data.id });
 
+      track('Create Analysis', {
+        user: user?.email || 'Guest',
+        browser,
+        cpu,
+        engine,
+        os,
+        ua,
+      });
+
       navigate(`/analysis/${response.data.id}`);
     } catch (error) {
       console.error(error);