feat(analytics): add public resume view tracking

Author: DongDuong2001

src/app/[locale]/r/[id]/page.tsx

@@ -9,6 +9,7 @@ import { MinimalTemplate } from "@/components/builder/templates/minimal-template
 import { ModernTemplate } from "@/components/builder/templates/modern-template";
 import { getPdfLabels, getDateLocale } from "@/lib/pdf-labels";
 import { PublicActionBar } from "@/components/builder/public-action-bar";
+import { ResumeAnalyticsTracker } from "@/components/builder/resume-analytics-tracker";
 
 interface PublicResumePageProps {
   params: Promise<{
@@ -26,7 +27,9 @@ const TEMPLATE_MAP = {
   modern: ModernTemplate,
 } as const;
 
-export default async function PublicResumePage({ params }: PublicResumePageProps) {
+export default async function PublicResumePage({
+  params,
+}: PublicResumePageProps) {
   const { locale, id } = await params;
   const resume = await getPublicResume(id);
 
@@ -35,10 +38,12 @@ export default async function PublicResumePage({ params }: PublicResumePageProps
   }
 
   const Template =
-    TEMPLATE_MAP[resume.templateId as keyof typeof TEMPLATE_MAP] ?? HarvardTemplate;
+    TEMPLATE_MAP[resume.templateId as keyof typeof TEMPLATE_MAP] ??
+    HarvardTemplate;
 
   return (
     <div className="min-h-screen bg-gray-100 print:bg-white pt-14 print:pt-0">
+      <ResumeAnalyticsTracker resumeId={resume.id} />
       <PublicActionBar resumeTitle={resume.title} />
       <div className="py-8 px-4 print:py-0 print:px-0">
         <div className="mx-auto max-w-[900px] bg-white shadow-2xl print:shadow-none">

src/app/api/analytics/resume-view/route.ts

@@ -0,0 +1,44 @@
+import { NextResponse } from "next/server";
+import { db } from "@/db";
+import { resumeViews } from "@/db/schema";
+
+export async function POST(request: Request) {
+  try {
+    const rawBody = await request.text();
+    if (!rawBody) return NextResponse.json({ success: true });
+
+    let body;
+    try {
+      body = JSON.parse(rawBody);
+    } catch {
+      return NextResponse.json({ success: true }); // fail silently for analytics
+    }
+
+    const { resumeId, location, durationSeconds } = body;
+
+    if (!resumeId) {
+      return NextResponse.json({ success: true });
+    }
+
+    // Attempt to parse out some pseudo-IP or user agent to prevent infinite logging
+    // by the same exact user in a loop, but keep it lightweight.
+    const ip = request.headers.get("x-forwarded-for") || "unknown";
+    const userAgent = request.headers.get("user-agent") || "unknown";
+
+    // Hash IP safely so we don't store plain PII
+    // For a real production app, do a proper hash/salt, but for a showcase, string concat is okay
+    const viewerIpId = `hash_${ip.substring(0, 10)}_${userAgent.substring(0, 15)}`;
+
+    await db.insert(resumeViews).values({
+      resumeId,
+      location: location || "Unknown Region",
+      durationSeconds: durationSeconds || 0,
+      viewerIpId,
+    });
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("Failed to record analytics:", error);
+    return NextResponse.json({ success: false }, { status: 500 });
+  }
+}

src/components/builder/resume-analytics-tracker.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+export function ResumeAnalyticsTracker({ resumeId }: { resumeId: string }) {
+  const isRecorded = useRef(false);
+
+  useEffect(() => {
+    if (isRecorded.current) return;
+
+    // Track page view load
+    const startTime = Date.now();
+    isRecorded.current = true;
+
+    // Try to get geolocation approximations
+    let location = "Unknown";
+    try {
+      location = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    } catch {
+      // Ignore error and fall back to "Unknown"
+    }
+
+    // When the component unmounts (user leaves), we record the analytics
+    return () => {
+      const durationSeconds = Math.round((Date.now() - startTime) / 1000);
+
+      // We use a small blob trick to send the data on unload using sendBeacon or fetch keepalive
+      const data = {
+        resumeId,
+        location,
+        durationSeconds,
+      };
+
+      const blob = new Blob([JSON.stringify(data)], {
+        type: "application/json",
+      });
+      navigator.sendBeacon("/api/analytics/resume-view", blob);
+    };
+  }, [resumeId]);
+
+  return null;
+}