@rensblitz/customer-instant-feedback-app 2.0.5 → 3.0.1

package/README.md

@@ -2,13 +2,20 @@
 
 A React component library for collecting user feedback directly within your application. Uses a centralized Supabase backend with reviewer-based authentication.
 
+## Repository layout (this monorepo)
+
+- **`packages/customer-instant-feedback-app`** — the publishable npm package (`npm run build`, `npm publish -w @rensblitz/customer-instant-feedback-app`).
+- **`apps/demo`** — local consumer app (workspace `file:` link).
+- **`apps/demo-npm`** — same idea, but depends on the **published** package from npm (see `apps/demo-npm/README.md`).
+- **`apps/feedback-admin-app`** — standalone admin UI (deploy from repo root; see [`render.yaml`](./render.yaml)).
+
 ## Features
 
 - Capture screenshots with feedback
 - Annotate specific elements
 - Categorize feedback (Bug, UX, Content, Other)
 - Reviewer-based authentication (no anonymous feedback)
-- Admin UI for managing companies, projects, and reviewers
+- Admin UI is a **standalone app** in [`apps/feedback-admin-app/`](./apps/feedback-admin-app/) (not exported from the npm package in v3+)
 - Feedback review page for reviewers to see all feedback (including from colleagues)
 - Client-side rate limiting
 - Input validation
@@ -35,8 +42,15 @@ pnpm add @rensblitz/customer-instant-feedback-app @supabase/supabase-js react re
 
 > **Note:** React, React DOM, React Router, and Supabase are peer dependencies. If your project already has them, you only need to install the feedback package.
 
+### Upgrading from 2.x to 3.x
+
+- **`FeedbackAdminPage` was removed** from the package. Remove any import and route; use the standalone [`apps/feedback-admin-app`](./apps/feedback-admin-app/) (or deploy it separately).
+- **`getSupabaseClient`** is now exported if you need direct Supabase access in advanced integrations.
+
 ## Quick Start
 
+**Host app integration (typical):** install the package, add Supabase URL + anon key to `.env`, wrap the app with `FeedbackAuthProvider` / `FeedbackProvider`, and pass the `project_id` string from your operator. You do **not** need to run database migrations in your repo—that happens on the Supabase project (see below if you operate that backend). The in-app setup page at `/readme` (`FeedbackReadmePage`) describes only this flow; full operator steps stay in this README.
+
 ### 1. Environment variables (host project)
 
 Add these to your **host project's** `.env` file (not this package):
@@ -100,7 +114,6 @@ import {
   FeedbackAuthProvider,
   FeedbackProvider,
   FeedbackLoginPage,
-  FeedbackAdminPage,
   FeedbackReviewPage,
 } from '@rensblitz/customer-instant-feedback-app';
 import '@rensblitz/customer-instant-feedback-app/style.css';
@@ -114,7 +127,6 @@ function App() {
       <BrowserRouter>
         <Routes>
           <Route path="/feedback-login" element={<FeedbackLoginPage />} />
-          <Route path="/feedback-admin" element={<FeedbackAdminPage />} />
           <Route path="/feedback" element={<FeedbackReviewPage projectId={projectId} />} />
           <Route
             path="/*"
@@ -131,11 +143,13 @@ function App() {
 }
 ```
 
+**Admin UI** (companies, projects, reviewers) is **not** part of the npm package. Run the standalone app in [`apps/feedback-admin-app/`](./apps/feedback-admin-app/) (see its README) or deploy it separately (e.g. Render).
+
 **Important:** Always import the CSS file. Without it, the feedback modal has no styles.
 
 ### 5. Get your project ID
 
-Go to `/feedback-admin`, create a company and project, then copy the `project_id` (format: `short-code_uuid`) and pass it to `FeedbackProvider` and `FeedbackReviewPage`.
+Use the **Feedback Admin** standalone app (in `apps/feedback-admin-app/` in this repo) to create a company and project, then copy the `project_id` (format: `short-code_uuid`) and pass it to `FeedbackProvider` and `FeedbackReviewPage`.
 
 ### 6. Create the first admin
 
@@ -146,7 +160,7 @@ Go to `/feedback-admin`, create a company and project, then copy the `project_id
 ## How it works
 
 - **Reviewers** visit `/feedback-login` to sign in with credentials provided by an admin. Only logged-in reviewers can see and use the feedback widget. They can visit `/feedback` to see all feedback for the project (including from colleagues).
-- **Admins** visit `/feedback-admin` to manage companies, projects, and reviewers. Only users in the `admins` table can access this page.
+- **Admins** use the standalone **Feedback Admin** app (`apps/feedback-admin-app/` in this repository, or your deployed instance) to manage companies, projects, and reviewers. Only users in the `admins` table can access it.
 - **Feedback** is stored in the centralized Supabase project, scoped by project. Each host app passes its `projectId` to identify which project the feedback belongs to.
 
 ## Usage
@@ -235,7 +249,7 @@ interface FeedbackReviewPageProps {
 
 ### Testing the library locally
 
-The `demo/` folder contains a separate app that imports the library like a real consumer would:
+The `apps/demo/` folder contains a separate app that imports the library like a real consumer would:
 
 1. **First time setup:**
    ```bash
@@ -243,7 +257,7 @@ The `demo/` folder contains a separate app that imports the library like a real
    npm link
    cd demo && npm link @rensblitz/customer-instant-feedback-app
    ```
-   Add `VITE_FEEDBACK_SUPABASE_URL` and `VITE_FEEDBACK_SUPABASE_ANON_KEY` to `demo/.env` (copy from `demo/.env.example` if present).
+   Add `VITE_FEEDBACK_SUPABASE_URL` and `VITE_FEEDBACK_SUPABASE_ANON_KEY` to `apps/demo/.env` (copy from `apps/demo/.env.example` if present).
 
 2. **Build the library:**
    ```bash
@@ -261,13 +275,14 @@ The demo app imports from `node_modules` using `npm link`, so it works exactly l
 - Rebuild: `npm run build`
 - The demo will hot-reload automatically
 
-**Demo includes:**
-- `/feedback-admin` - Admin interface for managing companies, projects, and reviewers
+**Demo includes** (typical host routes; see `apps/demo/`):
 - `/feedback-login` - Login page for reviewers
 - `/feedback` - Feedback review page
 - `/readme` - Setup guide (also available as `FeedbackReadmePage` for host apps)
 - `/` - Demo page with the feedback widget
 
+**Admin** is a separate Vite app: run `npm run admin:dev` from the repo root (see [`apps/feedback-admin-app/README.md`](./apps/feedback-admin-app/README.md)).
+
 ### Building for npm
 
 ```bash