ThomasCode92 · ThomasCode92 · Jul 19, 2025 · Jul 13, 2025 · Jul 13, 2025 · Jul 16, 2025
diff --git a/.env.example b/.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
diff --git a/README.md b/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
 

diff --git a/netlify.toml b/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
diff --git a/package.json b/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",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/page.tsx → src/app/(home)/page.tsx b/src/app/page.tsx → src/app/(home)/page.tsx
diff --git a/src/app/_providers/posthog-provider.tsx b/src/app/_providers/posthog-provider.tsx
@@ -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>
+  );
+}
diff --git a/src/app/_providers/user-identification.tsx b/src/app/_providers/user-identification.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
+}
diff --git a/src/app/f/[folderId]/page.tsx b/src/app/f/[folderId]/page.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 }>;

diff --git a/src/app/drive-contents.tsx → src/app/f/drive-contents.tsx b/src/app/drive-contents.tsx → src/app/f/drive-contents.tsx
diff --git a/src/app/file-row.tsx → src/app/f/file-row.tsx b/src/app/file-row.tsx → src/app/f/file-row.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,9 +1,11 @@
-import "~/styles/globals.css";
-
 import { ClerkProvider } from "@clerk/nextjs";
 import { type Metadata } from "next";
 import { Geist } from "next/font/google";
 
+import { PostHogProvider } from "./_providers/posthog-provider";
+
+import "~/styles/globals.css";
+
 export const metadata: Metadata = {
   title: "Drive Tutorial",
   description: "It's like Google Drive, but worse!",
@@ -20,9 +22,11 @@ export default function RootLayout({
 }: Readonly<{ children: React.ReactNode }>) {
   return (
     <ClerkProvider>
-      <html lang="en" className={`${geist.variable}`}>
-        <body>{children}</body>
-      </html>
+      <PostHogProvider>
+        <html lang="en" className={`${geist.variable}`}>
+          <body>{children}</body>
+        </html>
+      </PostHogProvider>
     </ClerkProvider>
   );
 }
diff --git a/src/env.js b/src/env.js
@@ -23,7 +23,8 @@ export const env = createEnv({
    * `NEXT_PUBLIC_`.
    */
   client: {
-    // NEXT_PUBLIC_CLIENTVAR: z.string(),
+    NEXT_PUBLIC_POSTHOG_KEY: z.string(),
+    NEXT_PUBLIC_POSTHOG_HOST: z.string(),
   },
 
   /**
@@ -37,7 +38,8 @@ export const env = createEnv({
     SINGLESTORE_HOST: process.env.SINGLESTORE_HOST,
     SINGLESTORE_PORT: process.env.SINGLESTORE_PORT,
     SINGLESTORE_DATABASE: process.env.SINGLESTORE_DATABASE,
-    // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
+    NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
+    NEXT_PUBLIC_POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST,
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially