feat: integrate website-hook-sdk with auto-screenshot capture component

.github/workflows/playwright.yml

@@ -10,13 +10,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v2
+      - uses: pnpm/action-setup@v4
       - name: Install dependencies
-        run: bun install
+        run: pnpm install
       - name: Install Playwright Browsers
-        run: bun x playwright install --with-deps
+        run: pnpm exec playwright install --with-deps
       - name: Run Playwright tests
-        run: bun run test
+        run: pnpm run test
       - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:

Dockerfile

@@ -1,21 +1,24 @@
-FROM oven/bun:1-alpine AS deps
+FROM node:20-alpine AS deps
+RUN corepack enable && corepack prepare pnpm@9 --activate
 WORKDIR /app
 
-COPY package.json bun.lock ./
+COPY package.json pnpm-lock.yaml ./
 
-RUN bun install --frozen-lockfile
+RUN pnpm install --frozen-lockfile
 
-FROM oven/bun:1-alpine AS builder
+FROM node:20-alpine AS builder
+RUN corepack enable && corepack prepare pnpm@9 --activate
 WORKDIR /app
 
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
+
 ENV NEXT_TELEMETRY_DISABLED=1
 ENV DOCKER_BUILD=true
-RUN bun run build:docker
+RUN pnpm build
 
-FROM oven/bun:1-alpine AS runner
+FROM node:20-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV=production
@@ -35,4 +38,4 @@ EXPOSE 3000
 ENV PORT=3000
 ENV HOSTNAME=0.0.0.0
 
-CMD ["bun", "server.js"]
+CMD ["node", "server.js"]

README.md

@@ -24,7 +24,7 @@ Modern e-commerce storefront built with Next.js 15, React 19, and Tailwind CSS v
 
 ## Prerequisites
 
-- Bun v1.3+
+- Pnpm
 
 ## Quick Start
 
@@ -43,10 +43,10 @@ Docker Hub: [bitbybitb3/rogue-store](https://hub.docker.com/r/bitbybitb3/rogue-s
 # Clone and install
 git clone https://github.com/CROW-B3/rogue-store.git
 cd rogue-store
-bun install
+pnpm install
 
 # Run dev server
-bun run dev
+pnpm run dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) to view the app.
@@ -70,17 +70,17 @@ rogue-store/
 
 ```bash
 # Development
-bun run dev              # Start dev server
-bun run build            # Build for production
-bun run lint             # Run ESLint
-bun run format           # Format with Prettier
+pnpm run dev              # Start dev server
+pnpm run build            # Build for production
+pnpm run lint             # Run ESLint
+pnpm run format           # Format with Prettier
 
 # Testing
-bun run test             # Run Playwright tests
-bun run test:ui          # Run tests in UI mode
+pnpm run test             # Run Playwright tests
+pnpm run test:ui          # Run tests in UI mode
 
 # Deployment
-bun run deploy           # Deploy to Cloudflare Pages
+pnpm run deploy           # Deploy to Cloudflare Pages
 ```
 
 ## Deployment
@@ -89,7 +89,7 @@ bun run deploy           # Deploy to Cloudflare Pages
 
 ```bash
 wrangler login
-bun run deploy
+pnpm run deploy
 ```
 
 ### Vercel

app/layout.tsx

@@ -6,6 +6,7 @@ import { Footer } from "@/components/layout/footer";
 import { CartDrawer } from "@/components/cart/cart-drawer";
 import { ToastProvider } from "@/components/ui/toast-provider";
 import { WebVitals } from "@/_components/web-vitals";
+import { InteractionTracker } from "@/components/interaction-tracker";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -37,6 +38,7 @@ export default function RootLayout({
         <CartDrawer />
         <ToastProvider />
         {process.env.NODE_ENV === "production" ? null : <WebVitals />}
+        <InteractionTracker />
       </body>
     </html>
   );

components/interaction-tracker.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { useEffect } from "react";
+import { initInteractionTracking } from "@b3-crow/website-hook-sdk";
+
+export function InteractionTracker() {
+  useEffect(() => {
+    // This starts both screenshot capture and mouse cursor tracking
+    initInteractionTracking({
+      logging: true, // Enable detailed pointer tracking logs
+    });
+  }, []);
+
+  return null;
+}

next.config.ts

@@ -9,9 +9,6 @@ const nextConfig: NextConfig = {
   compress: false,
   poweredByHeader: false,
   trailingSlash: true,
-  experimental: {
-    serverMinification: false,
-  },
   images: {
     remotePatterns: [
       {

package.json

@@ -2,8 +2,9 @@
   "name": "rouge-store",
   "version": "0.1.0",
   "private": true,
+  "packageManager": "pnpm@10.26.2",
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
     "build": "next build",
     "build:cloudflare": "opennextjs-cloudflare build",
     "build:docker": "next build",
@@ -22,41 +23,41 @@
     "cf-typegen": "wrangler types --env-interface CloudflareEnv ./cloudflare-env.d.ts",
     "prepare": "husky",
     "lint-staged": "lint-staged",
-    "lighthouse:performance": "bunx lighthouse http://localhost:3000 --only-categories=performance --output=json --verbose --chrome-flags=\"--headless\" --output-path ./.lighthouse/lighthouse-performance.json"
+    "lighthouse:performance": "pnpm exec lighthouse http://localhost:3000 --only-categories=performance --output=json --verbose --chrome-flags=\"--headless\" --output-path ./.lighthouse/lighthouse-performance.json"
   },
   "dependencies": {
-    "@b3-crow/website-hook-sdk": "^0.0.9",
+    "@b3-crow/website-hook-sdk": "0.0.17",
     "@opennextjs/cloudflare": "^1.14.7",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "framer-motion": "^12.0.2",
+    "framer-motion": "^12.23.26",
     "lighthouse": "^13.0.1",
     "lucide-react": "^0.462.0",
     "next": "15.5.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "sonner": "^1.7.1",
+    "sonner": "^1.7.4",
     "tailwind-merge": "^2.6.0",
-    "zustand": "^5.0.2"
+    "zustand": "^5.0.9"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@playwright/test": "^1.56.1",
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20.19.24",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
+    "@eslint/eslintrc": "^3.3.3",
+    "@playwright/test": "^1.57.0",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^20.19.27",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^9.39.2",
     "eslint-config-next": "15.5.6",
     "husky": "^9.1.7",
-    "lint-staged": "^16.2.6",
-    "prettier": "^3.6.2",
-    "tailwindcss": "^4",
-    "typescript": "^5",
-    "wrangler": "^4.45.3"
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.7.4",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "wrangler": "^4.56.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

playwright.config.ts

@@ -29,7 +29,7 @@ export default defineConfig({
   ],
 
   webServer: {
-    command: "bun run dev",
+    command: "pnpm run dev",
     url: "http://localhost:3000",
     reuseExistingServer: !process.env.CI,
   },