Merge pull request #11 from alexmarqs/chore/add-analytics-openpanel

chore: create analytics package, integrate with openpanel

.env.example

@@ -0,0 +1,2 @@
+# For turbo builds, prefixes with NEXT_PUBLIC_ are automatically considered to force a rebuild
+NEXT_PUBLIC_OPENPANEL_CLIENT_ID=

.vscode/settings.json

@@ -1,8 +1,8 @@
 {
   "editor.defaultFormatter": "biomejs.biome",
-  "editor.formatOnSave": true,
+
   "editor.codeActionsOnSave": {
     "source.organizeImports": "always",
-    "source.fixAll.biome": "always"
+    "source.fixAll.biome": "explicit",
   }
 }

README.md

@@ -5,6 +5,7 @@ The main goal is to provide a better way to explore tech companies in Portugal.
 ## Monorepo structure 📦
 
 - `apps/web`: The main web app
+- `packages/analytics`: Analytics package
 - `tooling/typescript`: TypeScript configuration
 
 ## Features 🚀
@@ -26,6 +27,7 @@ The main goal is to provide a better way to explore tech companies in Portugal.
 - [Nuqs](https://nuqs.47ng.com) - URL query state management (client and server support + some other cool features out of the box)
 - [Turbo](https://turbo.build/) - Monorepo build system
 - [Vercel](https://vercel.com/) - Hosting and CI/CD
+- [OpenPanel](https://openpanel.dev/) - Analytics
 
 ## How to contribute 🤝
 

apps/web/next.config.ts

@@ -2,6 +2,7 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   reactStrictMode: true,
+  transpilePackages: ["@tech-companies-portugal/analytics"],
 };
 
 export default nextConfig;

apps/web/package.json

@@ -6,7 +6,7 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "biome check .",
+    "lint": "biome check . --write",
     "format": "biome format --write .",
     "check-types": "tsc --noEmit",
     "clean": "git clean -xdf .next .turbo node_modules",
@@ -34,7 +34,8 @@
     "slugify": "1.6.6",
     "tailwind-merge": "2.2.1",
     "tailwindcss-animate": "1.0.7",
-    "use-debounce": "10.0.4"
+    "use-debounce": "10.0.4",
+    "@tech-companies-portugal/analytics": "*"
   },
   "devDependencies": {
     "@tech-companies-portugal/typescript": "*",
@@ -51,4 +52,4 @@
     "@types/react-dom": "19.0.2",
     "react-is": "19.0.0"
   }
-}
+}

apps/web/src/app/layout.tsx

@@ -10,6 +10,7 @@ import {
 } from "@/lib/metadata";
 import { LayoutProps } from "@/lib/types";
 import { cn } from "@/lib/utils";
+import { AnalyticsProvider } from "@tech-companies-portugal/analytics/client";
 import { Metadata, Viewport } from "next/types";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import "./globals.css";
@@ -44,16 +45,20 @@ export default function RootLayout({ children }: LayoutProps) {
           GeistMono.variable,
         )}
       >
-        <NuqsAdapter>
-          <Navbar />
-          {children}
-          <Footer />
-          <DotPattern
-            className={cn(
-              "[mask-image:radial-gradient(620px_circle_at_center,white,transparent)] fixed inset-0 -z-10",
-            )}
-          />
-        </NuqsAdapter>
+        <AnalyticsProvider
+          clientId={process.env.NEXT_PUBLIC_OPEN_PANEL_CLIENT_ID!}
+        >
+          <NuqsAdapter>
+            <Navbar />
+            {children}
+            <Footer />
+            <DotPattern
+              className={cn(
+                "[mask-image:radial-gradient(620px_circle_at_center,white,transparent)] fixed inset-0 -z-10",
+              )}
+            />
+          </NuqsAdapter>
+        </AnalyticsProvider>
       </body>
     </html>
   );

biome.json

@@ -2,8 +2,7 @@
   "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
   "vcs": {
     "enabled": false,
-    "clientKind": "git",
-    "useIgnoreFile": false
+    "clientKind": "git"
   },
   "files": {
     "ignoreUnknown": false,
@@ -15,7 +14,6 @@
       "out",
       ".next",
       "package-lock.json",
-      "package.json",
       ".vscode",
       "next-env.d.ts",
       "biome.json"
@@ -58,4 +56,4 @@
       "bracketSpacing": true
     }
   }
-}
+}

package.json

@@ -2,10 +2,7 @@
   "name": "tech-companies-portugal",
   "private": true,
   "author": "Alexandre Marques",
-  "workspaces": [
-    "apps/*",
-    "tooling/*"
-  ],
+  "workspaces": ["apps/*", "tooling/*", "packages/*"],
   "description": "Monorepo for the Tech Companies in Portugal",
   "scripts": {
     "build": "turbo build",
@@ -27,4 +24,4 @@
     "turbo": "2.3.3"
   },
   "packageManager": "npm@10.9.0"
-}
+}

packages/analytics/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@tech-companies-portugal/analytics",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "clean": "git clean -xdf .turbo node_modules",
+    "lint": "biome check . --write",
+    "format": "biome format --write .",
+    "check-types": "tsc --noEmit"
+  },
+  "exports": {
+    "./client": "./src/client.tsx"
+  },
+  "dependencies": {
+    "@openpanel/nextjs": "1.0.7"
+  },
+  "devDependencies": {
+    "@tech-companies-portugal/typescript": "*",
+    "typescript": "^5"
+  }
+}

packages/analytics/src/client.tsx

@@ -0,0 +1,43 @@
+import {
+  OpenPanelComponent,
+  PostEventPayload,
+  useOpenPanel,
+} from "@openpanel/nextjs";
+
+const isProd = process.env.NODE_ENV === "production";
+
+type AnalyticsProviderProps = {
+  children: React.ReactNode;
+  clientId?: string;
+};
+
+const AnalyticsProvider = ({ children, clientId }: AnalyticsProviderProps) => {
+  return (
+    <>
+      <OpenPanelComponent
+        clientId={clientId ?? ""}
+        trackScreenViews={isProd}
+        trackAttributes={isProd}
+        trackOutgoingLinks={isProd}
+      />
+      {children}
+    </>
+  );
+};
+
+const trackAnalytics = (
+  options: { event: string } & PostEventPayload["properties"],
+) => {
+  const { track: openTrack } = useOpenPanel();
+
+  if (!isProd) {
+    console.log("Track", options);
+    return;
+  }
+
+  const { event, ...rest } = options;
+
+  openTrack(event, rest);
+};
+
+export { AnalyticsProvider, trackAnalytics };

packages/analytics/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@tech-companies-portugal/typescript/react-lib.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

tooling/typescript/nextjs.json

@@ -14,4 +14,4 @@
     "jsx": "preserve",
     "noEmit": true
   }
-}
+}

tooling/typescript/package.json

@@ -1,5 +1,14 @@
 {
   "name": "@tech-companies-portugal/typescript",
   "private": true,
-  "version": "0.0.0"
+  "version": "0.0.0",
+  "scripts": {
+    "clean": "git clean -xdf .turbo",
+    "lint": "biome lint . --write"
+  },
+  "files": [
+    "base.json",
+    "react-lib.json",
+    "nextjs.json"
+  ]
 }

turbo.json

@@ -1,24 +1,15 @@
 {
   "$schema": "https://turbo.build/schema.json",
-  "globalDependencies": [
-    "**/.env"
-  ],
+  "globalDependencies": ["**/.env"],
   "ui": "stream",
   "tasks": {
     "transit": {
-      "dependsOn": [
-        "^transit"
-      ]
+      "dependsOn": ["^transit"]
     },
     "build": {
-      "dependsOn": [
-        "^build"
-      ],
+      "dependsOn": ["^build"],
       "env": [],
-      "inputs": [
-        "$TURBO_DEFAULT$",
-        ".env*"
-      ],
+      "inputs": ["$TURBO_DEFAULT$", ".env*"],
       "outputs": [
         ".next/**",
         "!.next/cache/**",
@@ -27,9 +18,7 @@
       ]
     },
     "check-types": {
-      "dependsOn": [
-        "^transit"
-      ]
+      "dependsOn": ["^transit"]
     },
     "test": {},
     "test:watch": {
@@ -43,17 +32,12 @@
       "cache": false
     },
     "lint": {
-      "dependsOn": [
-        "^transit"
-      ]
+      "dependsOn": ["^transit"]
     },
     "dev": {
       "persistent": true,
       "cache": false,
-      "inputs": [
-        "$TURBO_DEFAULT$",
-        ".env*"
-      ]
+      "inputs": ["$TURBO_DEFAULT$", ".env*"]
     }
   }
-}
+}