Ajared · prudentbird · Nov 26, 2025 · Nov 26, 2025 · Nov 26, 2025
diff --git a/frontend/package.json b/frontend/package.json
@@ -41,6 +41,7 @@
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",
     "lucide-react": "^0.545.0",
+    "mixpanel-browser": "^2.72.0",
     "next": "16.0.0-canary.0",
     "next-auth": "5.0.0-beta.28",
     "next-themes": "^0.4.6",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -2,7 +2,6 @@ import './globals.css';
 import { Suspense } from 'react';
 import Providers from './providers';
 import type { Metadata } from 'next';
-import Script from 'next/script';
 import Loader from '~/components/loader';
 import { Outfit } from 'next/font/google';
 import { Toaster } from '~/components/ui/sonner';
@@ -31,22 +30,6 @@ export default function RootLayout({
           crossOrigin="anonymous"
           src="https://tweakcn.com/live-preview.min.js"
         />
-        <Script
-          id="mixpanel-init"
-          strategy="afterInteractive"
-          dangerouslySetInnerHTML={{
-            __html: `
-            (function(e,c){if(!c.__SV){var l,h;window.mixpanel=c;c._i=[];c.init=function(q,r,f){function t(d,a){var g=a.split(".");2==g.length&&(d=d[g[0]],a=g[1]);d[a]=function(){d.push([a].concat(Array.prototype.slice.call(arguments,0)))}}var b=c;"undefined"!==typeof f?b=c[f]=[]:f="mixpanel";b.people=b.people||[];b.toString=function(d){var a="mixpanel";"mixpanel"!==f&&(a+="."+f);d||(a+=" (stub)");return a};b.people.toString=function(){return b.toString(1)+".people (stub)"};l="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders start_session_recording stop_session_recording people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
-            for(h=0;h<l.length;h++)t(b,l[h]);var n="set set_once union unset remove delete".split(" ");b.get_group=function(){function d(p){a[p]=function(){b.push([g,[p].concat(Array.prototype.slice.call(arguments,0))])}}for(var a={},g=["get_group"].concat(Array.prototype.slice.call(arguments,0)),m=0;m<n.length;m++)d(n[m]);return a};c._i.push([q,r,f])};c.__SV=1.2;var k=e.createElement("script");k.type="text/javascript";k.async=!0;k.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===
-            e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";e=e.getElementsByTagName("script")[0];e.parentNode.insertBefore(k,e)}})(document,window.mixpanel||[])
-
-            mixpanel.init('62c042c7c84959c74b1a700644589a75', {
-              autocapture: true,
-              record_sessions_percent: 100,
-            })
-            `,
-          }}
-        />
       </head>
       <body className={`${outfit.variable} antialiased`}>
         <Providers>

diff --git a/frontend/src/app/providers.tsx b/frontend/src/app/providers.tsx
@@ -2,9 +2,14 @@
 
 import * as React from 'react';
 import { ThemeProvider } from './theme';
+import { initMixpanel } from '~/lib/mixpanel';
 import { ProgressProvider } from '@bprogress/next/app';
 
 const Providers = ({ children }: { children: React.ReactNode }) => {
+  React.useEffect(() => {
+    initMixpanel();
+  }, []);
+
   return (
     <ProgressProvider
       height="3px"

diff --git a/frontend/src/env.ts b/frontend/src/env.ts
@@ -11,7 +11,12 @@ export const env = createEnv({
     UPLOADTHING_TOKEN: z.string(),
     UPLOADTHING_APP_ID: z.string(),
   },
+  client: {
+    NEXT_PUBLIC_MIXPANEL_TOKEN: z.string(),
+  },
   emptyStringAsUndefined: true,
-  experimental__runtimeEnv: process.env,
+  experimental__runtimeEnv: {
+    NEXT_PUBLIC_MIXPANEL_TOKEN: process.env.NEXT_PUBLIC_MIXPANEL_TOKEN,
+  },
   skipValidation: !!process.env.SKIP_ENV_VALIDATION,
 });
diff --git a/frontend/src/lib/mixpanel.ts b/frontend/src/lib/mixpanel.ts
@@ -0,0 +1,14 @@
+import { env } from '~/env';
+import mixpanel from 'mixpanel-browser';
+
+export const initMixpanel = () => {
+  if (!env.NEXT_PUBLIC_MIXPANEL_TOKEN) {
+    console.warn('Mixpanel token is missing! Check your .env file.');
+    return;
+  }
+
+  mixpanel.init(env.NEXT_PUBLIC_MIXPANEL_TOKEN, {
+    autocapture: true,
+    record_sessions_percent: 100,
+  });
+};