Initial Commit

Author: Rushabhshroff

README.md

@@ -1,36 +1,51 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+## Percy Build Report Generator
 
-## Getting Started
+This tool fetches snapshots from a specific **Percy** build via the BrowserStack/Percy API, calculates visual and AI diff percentages, and provides a downloadable CSV report.
 
-First, run the development server:
+---
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+### 🚀 Getting Started
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+1.  **Clone the repository** and install dependencies:
+    ```bash
+    npm install
+    ```
+2.  **Get your Token:**
+    * Log into Percy.io.
+    * Go to **Project Settings**.
+    * Copy the **Read-only Token**.
+3.  **Run the App:**
+    ```bash
+    npm run dev
+    ```
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+---
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+### 🛠 How to Use
 
-## Learn More
+1.  **Enter Token:** Paste your Percy Read-only token into the first input field.
+2.  **Enter Build URL:** Paste the full URL of the build you want to analyze (e.g., `https://percy.io/org/project/builds/1234567`).
+3.  **Generate Report:** Click **"Get Report"**. The app will:
+    * Identify the project slug and organization.
+    * Fetch all snapshots (handling pagination automatically).
+    * Calculate diff ratios as percentages.
+4.  **Export:** Use the **"Download CSV"** button to save the results for stakeholder reporting.
 
-To learn more about Next.js, take a look at the following resources:
+---
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+### 📊 Data Points Captured
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+| Column | Description |
+| :--- | :--- |
+| **Snapshot Name** | The name defined in your test suite. |
+| **Visual Diff %** | The percentage of pixels changed across all viewports. |
+| **Percy URL** | A direct deep-link to the `/changed/` view for that snapshot. |
 
-## Deploy on Vercel
+---
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+### 📁 Tech Stack
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+* **Framework:** [Next.js](https://nextjs.org/) (App Router)
+* **Styling:** [Tailwind CSS](https://tailwindcss.com/) + [DaisyUI](https://daisyui.com/)
+* **Notifications:** [React-Toastify](https://fkhadra.github.io/react-toastify/)
+* **API:** [Percy JSON:API v1](https://www.browserstack.com/docs/percy/api-reference)

next.config.ts

@@ -2,6 +2,8 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
+  output:"export",
+  basePath:'/percy-build-diff-summary'
 };
 
 export default nextConfig;

package-lock.json

@@ -10,13 +10,15 @@
   "dependencies": {
     "next": "16.2.1",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "react-toastify": "^11.0.5"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "daisyui": "^5.5.19",
     "tailwindcss": "^4",
     "typescript": "^5"
   }