Analytics (#10)

Author: ThomasCode92

.env.example

@@ -22,3 +22,7 @@ CLERK_SECRET_KEY=some-secret-key
 
 # Uploadthing
 UPLOADTHING_TOKEN='uploadthing-token'
+
+# Posthog
+NEXT_PUBLIC_POSTHOG_KEY=some-posthog-key
+NEXT_PUBLIC_POSTHOG_HOST=the-posthog-host

README.md

@@ -89,7 +89,7 @@ Tracking progress on key features and tasks for the project.
 - [x] 🔗 Sync folder open state with the URL
 - [x] 🔐 Implement user authentication
 - [x] 📁 Enable file upload functionality
-- [ ] 📊 Add analytics tracking
+- [x] 📊 Add analytics tracking
 
 ### 📝 Note from 5-28-2025
 

netlify.toml

@@ -0,0 +1,13 @@
+[[redirects]]
+  from = "/ingest/static/*"
+  to = "https://us-assets.i.posthog.com/static/:splat"
+  host = "us-assets.i.posthog.com"
+  status = 200
+  force = true
+
+[[redirects]]
+  from = "/ingest/*"
+  to = "https://us.i.posthog.com/:splat"
+  host = "us.i.posthog.com"
+  status = 200
+  force = true

package.json

@@ -31,6 +31,7 @@
     "lucide-react": "^0.511.0",
     "mysql2": "^3.14.1",
     "next": "^15.2.3",
+    "posthog-js": "^1.257.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwind-merge": "^3.3.0",

pnpm-lock.yaml

@@ -0,0 +1,26 @@
+"use client";
+
+import posthog from "posthog-js";
+import { PostHogProvider as PHProvider } from "posthog-js/react";
+import { useEffect } from "react";
+
+import UserIdentification from "./user-identification";
+
+import { env } from "~/env";
+
+export function PostHogProvider({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, {
+      api_host: env.NEXT_PUBLIC_POSTHOG_HOST,
+      person_profiles: "identified_only", // or 'always' to create profiles for anonymous users as well
+      defaults: "2025-05-24",
+    });
+  }, []);
+
+  return (
+    <PHProvider client={posthog}>
+      <UserIdentification />
+      {children}
+    </PHProvider>
+  );
+}

src/app/page.tsx renamed to src/app/(home)/page.tsx

@@ -0,0 +1,20 @@
+import { useUser } from "@clerk/nextjs";
+import { usePostHog } from "posthog-js/react";
+import { useEffect } from "react";
+
+export default function UserIdentification() {
+  const posthog = usePostHog();
+  const { user } = useUser();
+
+  useEffect(() => {
+    if (user) {
+      posthog.identify(user.id, {
+        email: user.emailAddresses[0]?.emailAddress,
+      });
+    } else {
+      posthog.reset();
+    }
+  }, [posthog, user]);
+
+  return null; // Do not render anything
+}

src/app/_providers/posthog-provider.tsx

@@ -2,7 +2,7 @@ import { z } from "zod";
 
 import * as queries from "~/server/db/queries";
 
-import DriveContents from "../../drive-contents";
+import DriveContents from "../drive-contents";
 
 export default async function GoogleDriveClone(props: {
   params: Promise<{ folderId: number }>;