Feedback Module Setup

This project integrates the @rensblitz/customer-instant-feedback-app npm package to collect in-app feedback from reviewers. Feedback is stored in a dedicated, separate Supabase project — not in this project's own database.

1. Environment variables

Add the following to frontend/.env:

# Feedback module — dedicated Supabase project
VITE_FEEDBACK_SUPABASE_URL=https://<your-supabase-project>.supabase.co
VITE_FEEDBACK_SUPABASE_ANON_KEY=<your-anon-key>

# The project ID assigned by projectinablitz (format: short-code_uuid)
VITE_FEEDBACK_PROJECT_ID=<your-project-id>

# Set to "true" to enable the feedback widget, "false" to disable it
VITE_FEEDBACK_ENABLED=true

These are distinct from the app's own Supabase credentials (VITE_SUPABASE_URL / VITE_SUPABASE_ANON_KEY), which are used for the app's own auth and data and must remain in .env alongside these.

Note: Because Vite does not substitute env vars inside pre-bundled npm packages, configureFeedbackClient() must be called from within the host project's own source (see section 3). This is what makes the env vars available to the package at runtime.

Next.js users: use NEXT_PUBLIC_ instead of VITE_:

NEXT_PUBLIC_FEEDBACK_SUPABASE_URL=https://<your-supabase-project>.supabase.co
NEXT_PUBLIC_FEEDBACK_SUPABASE_ANON_KEY=<your-anon-key>
NEXT_PUBLIC_FEEDBACK_PROJECT_ID=<your-project-id>
NEXT_PUBLIC_FEEDBACK_ENABLED=true

TypeScript users: add type declarations for these env vars. For Vite, in src/vite-env.d.ts:

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_FEEDBACK_SUPABASE_URL: string
  readonly VITE_FEEDBACK_SUPABASE_ANON_KEY: string
  readonly VITE_FEEDBACK_PROJECT_ID: string
  readonly VITE_FEEDBACK_ENABLED: string
}

2. Installation

npm install @rensblitz/customer-instant-feedback-app

The package requires these peer dependencies, which are already present in this project:

• react ^18
• react-dom ^18
• react-router-dom ^6
• @supabase/supabase-js ^2

Also import the stylesheet once in the app entry point:

import '@rensblitz/customer-instant-feedback-app/style.css'

3. App.tsx setup

Imports

import {
  FeedbackAuthProvider,
  FeedbackProvider,
  FeedbackLoginPage,
  FeedbackReviewPage,
  configureFeedbackClient,
} from '@rensblitz/customer-instant-feedback-app'
import '@rensblitz/customer-instant-feedback-app/style.css'

Client configuration (module level, after all imports)

Call this once at module level — outside any component or function — so the package has its Supabase credentials before it initialises:

configureFeedbackClient({
  url: import.meta.env.VITE_FEEDBACK_SUPABASE_URL,
  anonKey: import.meta.env.VITE_FEEDBACK_SUPABASE_ANON_KEY,
})

Component tree structure

The full provider/route structure in App.tsx:

function App() {
  return (
    <FeedbackAuthProvider>                         {/* outermost — manages reviewer auth state */}
      <BrowserRouter>
        <Routes>

          {/* Feedback-specific routes — rendered outside FeedbackProvider intentionally */}
          <Route path="/feedback-login" element={<FeedbackLoginPage />} />
          <Route path="/feedback" element={<FeedbackReviewPage projectId={import.meta.env.VITE_FEEDBACK_PROJECT_ID} />} />

          {/* All app routes — wrapped with FeedbackProvider so the widget appears on every page */}
          <Route path="*" element={
            <FeedbackProvider
              projectId={import.meta.env.VITE_FEEDBACK_PROJECT_ID}
              rateLimitSeconds={30}
              enabled={import.meta.env.VITE_FEEDBACK_ENABLED === 'true'}
              feedbackReviewPath="/feedback"
            >
              {/* rest of the app */}
            </FeedbackProvider>
          } />

        </Routes>
      </BrowserRouter>
    </FeedbackAuthProvider>
  )
}

FeedbackProvider props

| Prop | Type | Description | |---|---|---| | projectId | string | Project ID from projectinablitz. Required for feedback to be stored correctly. | | enabled | boolean | Toggle the widget on/off without redeployment. Driven by VITE_FEEDBACK_ENABLED. | | rateLimitSeconds | number | Minimum seconds between submissions per reviewer. | | feedbackReviewPath | string | Path to the review page. Used for the "View all" link in the widget. | | validation | object | Optional. Limits: maxCommentLength, maxNameLength, allowScreenshots, maxScreenshotSize. |

4. Reviewer flow

• Reviewers navigate to /feedback-login and sign in with credentials provisioned by an admin.
• Once logged in, the feedback widget becomes visible on all app pages (wherever FeedbackProvider wraps the UI).
• Reviewers can visit /feedback to see all submitted feedback for the project.

5. Managing companies, projects, and reviewers

The operator UI (projectinablitz) is a separate application that lives in the package's monorepo (apps/projectinablitz-frontend). It is not part of this project. Use it to:

• Create companies and projects (which gives you the project_id to use in the env)
• Provision and manage reviewer accounts

6. Toggling feedback off

Set VITE_FEEDBACK_ENABLED=false in frontend/.env and restart the Vite dev server. The widget will not render. All other feedback infrastructure (routes, providers) remains in place but is inert.

License

MIT © Rens Blitz