feat(web): improve analytics

Author: AmanVarshney01

apps/web/src/app/(home)/_components/stats-section.tsx

@@ -14,38 +14,35 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 
-type EventRow = {
-	_creationTime: number;
-};
+type DailyStats = { date: string; count: number };
 
-function computeStats(events: EventRow[] | undefined) {
-	if (!events || events.length === 0) {
+function computeStats(
+	dailyStats: DailyStats[] | undefined,
+	lastEventTime: number | undefined,
+) {
+	if (!dailyStats || dailyStats.length === 0) {
 		return { totalProjects: 0, avgProjectsPerDay: "0", lastUpdated: null };
 	}
 
-	const byDay = new Set<string>();
-	let maxTime = 0;
-
-	for (const ev of events) {
-		const day = new Date(ev._creationTime).toISOString().slice(0, 10);
-		byDay.add(day);
-		if (ev._creationTime > maxTime) maxTime = ev._creationTime;
-	}
-
-	const totalProjects = events.length;
+	const totalProjects = dailyStats.reduce((sum, d) => sum + d.count, 0);
 	const avgProjectsPerDay =
-		byDay.size === 0 ? "0" : (totalProjects / byDay.size).toFixed(2);
-	const lastUpdated = new Date(maxTime).toLocaleDateString("en-US", {
-		month: "short",
-		day: "numeric",
-		year: "numeric",
-	});
+		dailyStats.length === 0
+			? "0"
+			: (totalProjects / dailyStats.length).toFixed(2);
+	const lastUpdated = lastEventTime
+		? new Date(lastEventTime).toLocaleDateString("en-US", {
+				month: "short",
+				day: "numeric",
+				year: "numeric",
+			})
+		: null;
 
 	return { totalProjects, avgProjectsPerDay, lastUpdated };
 }
 
 export default function StatsSection() {
-	const events = useQuery(api.analytics.getAllEvents, { range: "30d" });
+	const dailyStats = useQuery(api.analytics.getDailyStats, { days: 30 });
+	const stats = useQuery(api.analytics.getStats, {});
 	const githubRepo = useQuery(api.stats.getGithubRepo, {
 		name: "AmanVarshney01/create-better-t-stack",
 	});
@@ -54,7 +51,7 @@ export default function StatsSection() {
 	});
 
 	const liveNpmDownloadCount = useNpmDownloadCounter(npmPackages);
-	const analyticsData = computeStats(events as EventRow[] | undefined);
+	const analyticsData = computeStats(dailyStats, stats?.lastEventTime);
 
 	return (
 		<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">

apps/web/src/app/(home)/analytics/_components/analytics-header.tsx

@@ -1,8 +1,6 @@
 import { format } from "date-fns";
 import { Terminal } from "lucide-react";
-import Image from "next/image";
 import Link from "next/link";
-import discordIcon from "@/public/icon/discord.svg";
 
 export function AnalyticsHeader({
 	totalProjects,
@@ -91,32 +89,6 @@ export function AnalyticsHeader({
 					</span>
 				</div>
 			</div>
-
-			<Link
-				href="https://discord.gg/ZYsbjpDaM5"
-				target="_blank"
-				rel="noopener noreferrer"
-				className="block rounded rounded-t-none border border-border border-t-0 transition-colors hover:bg-muted/5"
-			>
-				<div className="flex items-center justify-between p-3">
-					<div className="flex items-center gap-3">
-						<Image
-							src={discordIcon}
-							alt="Discord"
-							className="h-4 w-4 invert-0 dark:invert"
-						/>
-						<div>
-							<span className="font-semibold text-sm">Join Discord</span>
-							<p className="text-muted-foreground text-xs">
-								Get live project creation notifications
-							</p>
-						</div>
-					</div>
-					<div className="rounded border border-border bg-primary/10 px-2 py-1 font-semibold text-primary text-xs">
-						JOIN
-					</div>
-				</div>
-			</Link>
 		</div>
 	);
 }

apps/web/src/app/(home)/analytics/_components/analytics-page.tsx

@@ -25,7 +25,7 @@ export default function AnalyticsPage({
 	};
 }) {
 	return (
-		<div className="mx-auto min-h-svh max-w-[1280px]">
+		<div className="mx-auto min-h-svh">
 			<div className="container mx-auto space-y-10 px-4 py-8 pt-16">
 				<AnalyticsHeader
 					totalProjects={data.totalProjects}

apps/web/src/app/(home)/analytics/_components/metrics-cards.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import NumberFlow from "@number-flow/react";
 import {
 	Code2,
 	Database,
@@ -16,6 +19,7 @@ type MetricCardProps = {
 	subtitle: string;
 	icon: React.ReactNode;
 	highlight?: boolean;
+	animate?: boolean;
 };
 
 function MetricCard({
@@ -24,6 +28,7 @@ function MetricCard({
 	subtitle,
 	icon,
 	highlight,
+	animate,
 }: MetricCardProps) {
 	return (
 		<div className="rounded border border-border">
@@ -36,11 +41,21 @@ function MetricCard({
 				</div>
 			</div>
 			<div className="p-4">
-				<div
-					className={`truncate font-bold text-xl ${highlight ? "text-primary" : "text-accent"}`}
-				>
-					{value}
-				</div>
+				{animate && typeof value === "number" ? (
+					<NumberFlow
+						value={value}
+						className={`truncate font-bold text-xl ${highlight ? "text-primary" : "text-accent"}`}
+						transformTiming={{ duration: 800, easing: "ease-out" }}
+						willChange
+						isolate
+					/>
+				) : (
+					<div
+						className={`truncate font-bold text-xl ${highlight ? "text-primary" : "text-accent"}`}
+					>
+						{typeof value === "number" ? value.toLocaleString() : value}
+					</div>
+				)}
 				<p className="mt-1 text-muted-foreground text-xs">{subtitle}</p>
 			</div>
 		</div>
@@ -60,17 +75,19 @@ export function MetricsCards({ data }: { data: AggregatedAnalyticsData }) {
 			<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
 				<MetricCard
 					title="TOTAL_PROJECTS"
-					value={totalProjects.toLocaleString()}
+					value={totalProjects}
 					subtitle="Projects created with CLI"
 					icon={<Terminal className="h-4 w-4" />}
 					highlight
+					animate
 				/>
 				<MetricCard
 					title="AVG_PER_DAY"
-					value={avgProjectsPerDay.toFixed(1)}
+					value={Number(avgProjectsPerDay.toFixed(1))}
 					subtitle="Average daily creations"
 					icon={<TrendingUp className="h-4 w-4" />}
 					highlight
+					animate
 				/>
 				<MetricCard
 					title="TOP_FRONTEND"