Revive — Product Designer & Print-on-Demand SaaS Platform JS Script

IMPORTANT: This application uses AI features powered by Google Gemini and OpenAI. AI API usage costs are NOT included in the purchase price. You will need to provide your own API keys and pay for AI usage according to the respective provider’s pricing.

Revive — Product Designer & Print-on-Demand SaaS Platform

Revive is a production-grade, installable Product Designer and Custom Product SaaS platform built with React 18, Vite 5, TypeScript, Tailwind CSS, and a fully managed Supabase backend. Ship a complete design studio, storefront, and admin console — with role-based access, a first-run setup wizard, PWA install, and offline support — in hours instead of months.

Every module is production-ready, fully responsive, secured with server-side Row-Level Security, and documented inside the codebase (/docs). Whether you are launching a print-on-demand store, a branded merchandise portal, or a white-label custom-product SaaS, Revive gives you a polished, native-feel foundation you can rebrand and deploy the same day.

Live Demo

Demo URL: https://revive.wrapcoders.com

App Overview

• End-to-end product designer with templates, cliparts, mockups, effects, and stickers.
• Custom product catalog with pricing, role-based visibility, and inventory hooks.
• Cart, checkout, order management, and order confirmation flows.
• Installable PWA with offline routing, update prompts, and admin-controlled branding.
• First-run Setup Wizard that provisions the Super Admin securely and locks itself after completion.
• Fully responsive: full sidebar on desktop, mini-rail on tablet, off-canvas drawer on mobile.
• Multi-role access system (User, Admin, Moderator, Agent, Provider, Staff) with server-enforced permissions.

Key Features

• Modern React 18 + Vite 5 + TypeScript 5 stack (no legacy build tooling).
• Tailwind CSS v3 with a semantic design-token system (fully themable — dark mode ready).
• shadcn/ui + Radix Primitives + Lucide icons for accessible, composable UI.
• TanStack Query for data fetching, caching, and background refresh.
• React Router with lazy-loaded route chunks and a splash-aware Suspense fallback.
• i18next multi-language ready (drop-in translation catalogs).
• Global splash screen preloader using dynamic brand assets — one launch experience, zero flicker.
• Toast + banner notification system built on sonner and shadcn Toaster.
• Anonymous guest sessions that upgrade seamlessly into full accounts (cart and designs survive signup).
• Admin console for branding, PWA configuration, and system defaults.

Multi-Role System

Roles live in a dedicated user_roles table (never on profiles) and are enforced server-side by a SECURITY DEFINER function to prevent privilege-escalation attacks.

• User — Default authenticated shopper/designer. Owns their designs, cart, and orders.
• Admin — Full control of branding, PWA, catalog, users, and system settings.
• Moderator — Reviews user-generated content (designs, cliparts, stickers).
• Agent — Customer-support console: read orders, respond to tickets, act on behalf of users.
• Provider — Fulfilment partner surface, scoped to assigned orders only.
• Staff — Internal operator with read-mostly access to operational dashboards.

Adding a new role is a one-line enum change plus an RLS policy — the client-side useHasRole() hook and the server-side has_role(uid, role) function pick it up automatically.

Authentication System

• Email + password with strong-password enforcement and strength meter.
• Google OAuth sign-in ready out of the box.
• Anonymous sessions on first visit — guest carts and designs never get lost.
• Anonymous-to-authenticated upgrade preserves user.id and all owned rows.
• Password reset via one-time recovery link with a dedicated /reset-password page.
• Session persistence with automatic refresh and onAuthStateChange listener.
• Server-validated identity — no client trust for privileged actions.

Role-Based Redirect System

• Unauthenticated visitors are routed to /auth.
• Admins land on /admin; standard users land on the app home.
• Role gates protect every admin surface at both the route and query level.
• Deep-link protection: unauthorized users bounce back to the correct destination after login.

Setup Wizard (Installation Flow)

A polished, first-run installation experience that provisions the system securely and locks itself after completion.

1. Environment Validation — pings the database, auth service, and storage. Blocks progress on any failure with human-readable errors.
2. Super Admin Creation — full name, email, password with strength meter. Promoted atomically via a one-shot bootstrap_super_admin() RPC.
3. App Identity & Branding — app name, tagline, primary color, logo, favicon.
4. System Defaults — timezone, currency, date format, default language.
5. Review & Launch — writes app_settings.setup_completed = true and redirects into the app.

Security-first: the SetupGate forces every visitor to /setup until an admin exists. Once one exists, /setup is blocked. The bootstrap RPC refuses to run if any admin already exists — the promotion is a one-shot server-side check.

PWA System (Installable, Offline, Admin-Controlled)

• Installable on Android, iOS, and desktop with a native-app feel.
• Runtime manifest patching — admins change name, icons, colors, and display mode without a rebuild.
• Offline banner, offline fallback page, and Workbox-powered asset caching.
• Update prompt toast when a new service worker is waiting — one-click reload.
• Device-specific install instructions at /install (Android / iOS / Desktop).
• Favicon, Apple touch icon, and manifest icons all driven by admin-uploaded brand logos.

Supabase Integration

• Auth — email/password, OAuth, anonymous, password reset — all wired.
• Database — versioned SQL migrations under supabase/migrations/, every table with RLS enabled and explicit GRANTs in the same migration.
• Row-Level Security — users only see their own data; admins gated by has_role(); policies audited and non-recursive.
• Storage — dedicated buckets for avatars (owner-scoped), logos (admin-write), mockups, cliparts, and user-uploads.
• Realtime-ready — subscriptions can be enabled per table for live updates.
• Edge Functions — clean scaffolding for auth handlers, email senders, and webhooks.

Demo / Test Mode (.env Controlled)

A build-time flag governs the entire demo experience so no demo credentials ever leak into production bundles.

• VITE_DEMO_MODE=true — quick-login buttons visible, demo credentials pre-fillable, one-tap login enabled for seeded accounts.
• VITE_DEMO_MODE=false — all quick-login UI removed from the DOM, no demo credentials in the bundle, production-safe auth only.

Demo checks are compile-time constants — the bundler tree-shakes demo code out of production builds entirely.

Responsive Navigation System

• ≥ 1200 px (Desktop) — full sidebar with icons, labels, hover states, and premium spacing.
• 768 – 1199 px (Tablet / Laptop) — 60 px mini rail with icons and hover tooltips.
• < 768 px (Mobile) — off-canvas drawer with backdrop, scroll lock, and auto-close on route change.
• Scrollable menu, keyboard navigation, and full ARIA support at every breakpoint.

Documentation System

A self-contained SaaS-grade documentation portal ships inside the project at /docs — sidebar navigation, live search, syntax-highlighted code blocks, sticky active-section tracking, and a mobile drawer.

• Introduction & Tech Stack
• Step-by-step Installation Guide
• Build & Deployment (VPS, Docker, cPanel, managed hosting)
• Project Structure & Core Modules
• Configuration Guide (.env, App Settings, PWA, Storage)
• Features Documentation (Auth, Roles, PWA, Setup Wizard, Demo Mode)
• Troubleshooting, FAQ, and Changelog v1.1.0

Security Features

• Server-enforced Row-Level Security on every public table.
• Roles stored in a dedicated table with SECURITY DEFINER checks — immune to client tampering.
• Zod-based schema validation on every form and edge function input.
• No dangerouslySetInnerHTML on user content anywhere in the app.
• Setup wizard hard-locks after completion — the bootstrap RPC cannot be re-run.
• Secrets stored in environment variables and Vault — never in source.
• Optional HIBP leaked-password check switch on the auth backend.

Performance Optimization

• Lazy-loaded route chunks with splash-aware Suspense fallbacks.
• PWA asset caching for instant repeat loads.
• Tree-shaken production bundles (demo code excluded when disabled).
• Optimized image handling with dimension pre-computation.
• Tanstack Query background refresh and cache reuse.
• Zero horizontal overflow across all breakpoints — verified from 320 px to 1920 px.

Deployment Guide (Summary)

• Development — bun install && bun run dev — open http://localhost:8080.
• Production build — bun run build outputs a static dist/ bundle.
• Managed hosting — publish directly; frontend updates on demand, backend deploys automatically.
• VPS / Docker / cPanel — serve dist/ with nginx / Caddy / Apache and add a SPA fallback to index.html.
• First run — visit the site; the Setup Wizard provisions the Super Admin automatically.

Who Is It For?

• Print-on-demand entrepreneurs launching a branded store.
• Merchandise companies offering personalized products (t-shirts, mugs, stickers, posters).
• White-label SaaS builders selling design studios to end clients.
• Agencies delivering custom-product portals for their customers.
• Developers who need a production-grade React + Supabase starter with roles, PWA, and admin.

What You Get

• Complete source code (React 18, TypeScript, Vite 5, Tailwind CSS v3).
• All SQL migrations, RLS policies, and storage bucket definitions.
• Full documentation portal (/docs).
• Setup Wizard, Admin Console, PWA, and Offline pages.
• Lifetime updates and support as per CodeCanyon license terms.

Launch faster. Ship safer. Stand out. Revive gives you the entire product-designer SaaS foundation — polished, secured, and documented — so you can focus on your brand and your customers.

Crafted by WRAPCODERS.