rapid

byMeet Saboo

# ROLE & GOAL You are an expert full-stack SaaS developer and UX/UI designer. Your objective is to build a lightweight, production-ready Micro-SaaS called "ProofBox" — a Testimonial Collection and Social Proof Embed Widget designed for creators, freelancers, and e-commerce stores. The tool must be simple, non-AI based, and focus purely on solid CRUD (Create, Read, Update, Delete) operations, clean database architecture, and frictionless frontend widgets. --- # CORE ARCHITECTURE & STACK - Frontend: Next.js (App Router), Tailwind CSS, Lucide React (Icons). - Backend / Database: Supabase (PostgreSQL, Auth, Row Level Security, Storage for images/avatars). - Billing Integration: Stripe Billing (Subscriptions + Customer Portal). - Deployment / Widget Engine: Vercel / Static CDN hosting for lightweight embed script (`<script src="..."></script>`). --- # CORE FEATURES & DATA STRUCTURE ### 1. Database Schema (PostgreSQL / Supabase) Generate the SQL schema and RLS policies for the following tables: - `users`: Managed by Supabase Auth (id, email, created_at). - `projects`: Belongs to a user. - `id`, `user_id`, `name`, `domain`, `slug` (unique link for form submission), `created_at`. - `testimonials`: Belongs to a project. - `id`, `project_id`, `author_name`, `author_title`, `author_company`, `avatar_url`, `rating` (1-5), `content`, `status` ('pending', 'approved', 'archived'), `created_at`. - `widget_settings`: Belongs to a project. - `project_id`, `theme` ('light' | 'dark'), `accent_color`, `layout` ('grid' | 'carousel' | 'wall_of_fame'), `border_radius`. ### 2. User User Interface & Dashboard Build a clean, high-converting dashboard with these views: - Dashboard / Projects View: Create projects and see overall stats (Total Reviews, Approved Reviews). - Review Inbox: Tabbed view (Pending / Approved / Archived) with 1-click "Approve" or "Delete" actions. - Public Collection Page (`/p/[slug]`): A distraction-free, branded public landing page where clients submit testimonials, star ratings, and upload their avatars. - Embed Code Generator: A modal in the project dashboard providing a copy-paste `<script>` tag and dynamic Preview component. ### 3. Embed Widget (`/embed.js` or iFrame Component) - Create a lightweight JavaScript widget or React component that can be embedded into any Shopify, Webflow, or HTML site. - Layout Types: 1. Grid Layout (Responsive cards) 2. Wall of Fame (Masonry layout) 3. Badge Widget (Floating "Rated 4.9/5 by 120+ clients" badge) --- # UI/UX STYLING GUIDELINES - Minimalist, modern B2B SaaS aesthetic (similar to Vercel, Linear, or Raycast). - Use Tailwind colors: `slate-900` for dark accents, `amber-400` for star ratings, crisp white card containers with subtle borders (`border-slate-200`). - Responsive by default on mobile, tablet, and desktop. --- # MONETIZATION & STRIPE PAYWALL Set up Stripe integration logic: - Free Tier: Up to 1 Project, 10 Approved Testimonials, standard layout. - Pro Tier ($19/mo): Unlimited Projects, Unlimited Testimonials, custom colors, removal of "Powered by ProofBox" badge. --- # TASK INSTRUCTIONS 1. Start by detailing the complete PostgreSQL database schema with SQL commands. 2. Provide the main API routes/actions for creating projects, approving testimonials, and fetching public reviews. 3. Write the component code for the Embeddable Review Card and Widget Preview. 4. Provide step-by-step instructions on how to run and deploy this project.