First push on this branch. At about 29 minutes in the video for Issue #71.

JamieBort · JamieBort · commit 4030f09c8789 · 2024-03-13T09:03:53.000-04:00
diff --git a/personal-dashboard/package-lock.json b/personal-dashboard/package-lock.json
diff --git a/personal-dashboard/package.json b/personal-dashboard/package.json
@@ -9,19 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@upstash/redis": "^1.28.4",
+    "date-fns": "^3.4.0",
+    "next": "14.1.3",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.1.3"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.3",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.1.3"
+    "typescript": "^5"
   }
 }
diff --git a/personal-dashboard/src/app/analytics/page.tsx b/personal-dashboard/src/app/analytics/page.tsx
@@ -0,0 +1,5 @@
+const Page = ()=>{
+return <p>Hello world</p>
+}
+
+export default Page;
diff --git a/personal-dashboard/src/app/globals.css b/personal-dashboard/src/app/globals.css
@@ -1,33 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
diff --git a/personal-dashboard/src/app/layout.tsx b/personal-dashboard/src/app/layout.tsx
@@ -16,7 +16,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={'${inter.className} dark bg-[#020817]'}>{children}</body>
     </html>
   );
 }
diff --git a/personal-dashboard/src/lib/redis.ts b/personal-dashboard/src/lib/redis.ts
@@ -0,0 +1,10 @@
+// NOTE: @about 17:00 -  minutes
+
+import { Redis } from "@upstash/redis";
+
+export const redis = new Redis({
+  url: "https://us1-sharing-oryx-41733.upstash.io",
+  token: process.env.REDIS_KEY!,
+});
+
+// const data = await redis.set("foo", "bar");
diff --git a/personal-dashboard/src/middleware.ts b/personal-dashboard/src/middleware.ts
@@ -0,0 +1,28 @@
+// NOTE: @about 6:00 minutes
+import { NextRequest, NextResponse } from "next/server";
+import { analytics } from "./utils/analytics";
+
+export default async function middleware(req: NextRequest) {
+  // Anytime the url is `http://localhost:3000/`, `req.nextUrl.pathname === "/"` will evaluates to `true`, it is truthy.
+  if (req.nextUrl.pathname === "/") {
+    // track analytics event
+    // console.log("Tracking");
+    // NOTE: @about ?:00 -  minutes
+    try {
+      // what are we going to track?
+      //   pageview is our namespace that we are going to track
+      //   namespace fancy word for event name
+      analytics.track("pageview", { page: "/", country: req.geo?.country });
+    } catch (error) {
+      // fail silently
+      console.log(error);
+    }
+  }
+  return NextResponse.next();
+}
+
+// See NextJS documentation for why this is needed.
+// https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
+export const matcher = {
+  matcher: ["/"],
+};
diff --git a/personal-dashboard/src/utils/analytics.ts b/personal-dashboard/src/utils/analytics.ts
@@ -0,0 +1,35 @@
+// NOTE: @about 11:00 -  minutes
+
+import { redis } from "@/lib/redis";
+import { getDate } from "@/utils/";
+
+type AnalyticsArgs = {
+  retention?: number;
+};
+
+type TrackOptions = { persist?: boolean };
+
+export class Analytics {
+  private retention: number = 60 * 60 * 24 * 7;
+
+  constructor(opts?: AnalyticsArgs) {
+    if (opts?.retention) this.retention = opts.retention;
+  }
+
+  async track(namespace: string, event: object = {}, opts?: TrackOptions) {
+    let key = `analytics::${namespace}`;
+
+    if (!opts?.persist) {
+      key += `::${getDate()}`;
+    }
+
+    // db call to persist this event
+    await redis.hincrby(key, JSON.stringify(event), 1);
+
+    if (!opts?.persist) await redis.expire(key, this.retention);
+  }
+}
+
+export const analytics = new Analytics();
+
+// analytics.track()
diff --git a/personal-dashboard/src/utils/index.ts b/personal-dashboard/src/utils/index.ts
@@ -0,0 +1,9 @@
+// NOTE: @about 25:00 -  minutes
+
+import { format, subDays } from "date-fns";
+
+export const getDate = (sub: number = 0) => {
+  const dateXDaysAgo = subDays(new Date(), sub);
+
+  return format(dateXDaysAgo, "dd/MM/yyyy");
+};

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ export default function RootLayout({`
`16`	`16`	`}>) {`
`17`	`17`	`return (`
`18`	`18`	`<html lang="en">`
`19`		`- <body className={inter.className}>{children}</body>`
	`19`	`+ <body className={'${inter.className} dark bg-[#020817]'}>{children}</body>`
`20`	`20`	`</html>`
`21`	`21`	`);`
`22`	`22`	`}`