Readme updated

Author: AdityaGoyal1999

README.md

@@ -67,3 +67,37 @@ It includes a dashboard experience for history and favorites, plus subscription-
     - `get-onboarding-status/`: returns prior onboarding state and marks first-time users onboarded
     - Stripe sync functions (`create-stripe-checkout`, `stripe-webhook`, `create-stripe-portal`) 💳
 
+## Local development 🛠️
+
+From the `frontend/` directory:
+
+| Command | Description |
+|--------|-------------|
+| `npm run dev` | Start the Next.js dev server |
+| `npm run build` | Production build |
+| `npm run start` | Run the production server (after `build`) |
+| `npm run lint` | ESLint (Next.js + TypeScript rules) |
+| `npm run test` | Vitest — runs all `*.test.ts(x)` / `*.spec.ts(x)` files |
+
+Requirements: **Node.js 20+** (matches CI).
+
+## Testing 🧪
+
+- **Runner:** [Vitest](https://vitest.dev/) v4 with **jsdom** as the test environment.
+- **Assertions / DOM:** [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) and [@testing-library/jest-dom](https://github.com/testing-library/jest-dom) (via `vitest.setup.ts`).
+- **Config:** `frontend/vitest.config.ts` — path alias `@/` matches the Next.js app, `include` pattern `**/*.{test,spec}.{ts,tsx}`.
+- **Current tests:** `frontend/app/page.test.tsx` — smoke test for the landing page (branding, primary heading, signup links).
+
+Add new tests next to the code they cover using the `*.test.tsx` (or `.test.ts`) naming convention.
+
+## Continuous integration (GitHub Actions) 🔄
+
+Workflows live under [`.github/workflows/`](.github/workflows/) and run on **push** and **pull_request** to **`main`**. Both use **Node 20** and `npm ci` in **`frontend/`**.
+
+| Workflow | File | What it runs |
+|----------|------|----------------|
+| **Linter** | [`ci.yml`](.github/workflows/ci.yml) | `npm run lint` |
+| **Frontend** | [`frontend-tests.yml`](.github/workflows/frontend-tests.yml) | `npm run test` (Vitest) |
+
+Together they keep ESLint clean and the Vitest suite passing on every change to `main`.
+

frontend/app/dashboard/layout.tsx

@@ -1,15 +1,9 @@
 import { DashboardSidebar } from "@/components/dashboard-sidebar";
-import { DashboardOnboardingTrigger } from "@/components/dashboard-onboarding-trigger";
 
 export default function DashboardLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return (
-    <>
-      <DashboardOnboardingTrigger />
-      <DashboardSidebar>{children}</DashboardSidebar>
-    </>
-  );
+  return <DashboardSidebar>{children}</DashboardSidebar>;
 }

frontend/app/layout.tsx

@@ -14,8 +14,13 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "What to read AI",
+  description: "Personalized book recommendations from your shelf photos, favorites, and preferences.",
+  icons: {
+    icon: [{ url: "/logo/default.png", type: "image/png" }],
+    shortcut: "/logo/default.png",
+    apple: "/logo/default.png",
+  },
 };
 
 export default function RootLayout({

frontend/components/dashboard-onboarding-trigger.tsx

@@ -5,13 +5,10 @@ import { Button } from "@/components/ui/button";
 import { createClient } from "@/lib/supabase/client";
 import { DASHBOARD_ONBOARDING_START_EVENT } from "@/lib/dashboard-onboarding-events";
 
-export function DashboardOnboardingTrigger() {
+/** Auto-starts the product tour for users who are not yet onboarded (invokes edge function once). */
+function useDashboardOnboardingAutoStart() {
   const autoStartedRef = useRef(false);
 
-  const handleStartOnboarding = () => {
-    window.dispatchEvent(new Event(DASHBOARD_ONBOARDING_START_EVENT));
-  };
-
   useEffect(() => {
     if (autoStartedRef.current) return;
 
@@ -33,13 +30,18 @@ export function DashboardOnboardingTrigger() {
 
     void run();
   }, []);
+}
+
+export function DashboardDemoButton() {
+  useDashboardOnboardingAutoStart();
+
+  const handleStartOnboarding = () => {
+    window.dispatchEvent(new Event(DASHBOARD_ONBOARDING_START_EVENT));
+  };
 
   return (
-    <div className="fixed right-4 top-3 z-50 rounded-md border border-border bg-background/95 p-0.5 shadow-sm backdrop-blur-sm">
-      <Button type="button" variant="outline" size="sm" onClick={handleStartOnboarding}>
-        Demo App
-      </Button>
-    </div>
+    <Button type="button" variant="outline" size="sm" onClick={handleStartOnboarding}>
+      Demo App
+    </Button>
   );
 }
-

frontend/components/dashboard-sidebar.tsx

@@ -21,6 +21,7 @@ import {
 import { createClient } from "@/lib/supabase/client";
 import { useDashboardUser } from "@/hooks/use-dashboard-user";
 import { useDashboardOnboardingListener } from "@/hooks/use-dashboard-onboarding-listener";
+import { DashboardDemoButton } from "@/components/dashboard-onboarding-trigger";
 import { DashboardSidebarNav } from "@/components/dashboard-sidebar-nav";
 import { DashboardSidebarProfile } from "@/components/dashboard-sidebar-profile";
 
@@ -85,6 +86,9 @@ export function DashboardSidebar({ children }: { children: React.ReactNode }) {
       <SidebarInset>
         <header className="flex h-12 shrink-0 items-center gap-2 border-b border-border bg-background px-4">
           <SidebarTrigger />
+          <div className="ml-auto flex items-center gap-2">
+            <DashboardDemoButton />
+          </div>
         </header>
         {children}
       </SidebarInset>