8080.AI
DesignReqsTasksUser FlowArchitecture
Log inSign up for free

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.

LandingEmbedLoginReview InboxPublic Page
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 4

System Requirements Document for Project: rapid

1. Introduction

The project "rapid" is designed to develop a lightweight, production-ready Micro-SaaS called "ProofBox." ProofBox is a Testimonial Collection and Social Proof Embed Widget aimed at creators, freelancers, and e-commerce stores. The focus is on solid CRUD operations, clean database architecture, and frictionless frontend widgets.

2. System Overview

ProofBox is a non-AI based tool that provides a simple and efficient way to collect and display testimonials. It is built using Next.js for the frontend, Supabase for the backend and database management, and integrates Stripe for billing. The deployment is handled via Vercel, ensuring a seamless and fast user experience.

3. Functional Requirements as Story Points

  • As a User, I should be able to create and manage projects within the dashboard.
  • As a User, I should be able to view overall statistics of my projects, including total and approved reviews.
  • As a User, I should be able to approve or delete testimonials from a tabbed review inbox.
  • As a User, I should be able to generate a public collection page for clients to submit testimonials.
  • As a User, I should be able to generate and copy an embed code for testimonials to use on external sites.
  • As a User, I should be able to select different layout types for the embed widget.
  • As a User, I should be able to manage my subscription and billing through Stripe.
  • As a User, I should be able to customize widget settings such as theme, accent color, and layout.
Page 2 of 4

4. User Personas

  • Creator: Individuals who create content and need to showcase testimonials to enhance credibility.
  • Freelancer: Professionals offering services who want to display client feedback to attract more clients.
  • E-commerce Store Owner: Business owners who wish to display customer reviews to boost sales.

5. Core User Flows

  • User logs in -> Creates a new project -> Configures widget settings -> Shares public collection page link -> Collects testimonials -> Approves testimonials -> Embeds widget on their site.
  • User logs in -> Views dashboard -> Checks review inbox -> Approves or deletes testimonials -> Updates project settings.

6. Visuals Colors and Theme

  • primary: #1E293B (slate-900)
  • primary_light: #334155 (slate-700)
  • secondary: #F59E0B (amber-400)
  • accent: #F59E0B (amber-400)
  • highlight: #FBBF24 (amber-300)
  • bg: #FFFFFF (white)
  • surface: #F1F5F9 (slate-100)
  • text: #1E293B (slate-900)
  • text_muted: #64748B (slate-500)
  • border: #E2E8F0 (slate-200)
Page 3 of 4

7. Signature Design Concept

Interactive Testimonial Carousel: The landing page will feature an interactive carousel of testimonials that users can swipe through. Each testimonial card will flip to reveal more details when clicked. The carousel will have a dynamic background that changes color based on the testimonial's rating, creating an engaging and visually appealing experience. This will be implemented using motion/react for smooth animations and transitions.

Landing Hero Motion Brief

The hero section will feature a continuously moving carousel of testimonial cards. Each card will display a snippet of a testimonial, and users can click to expand the card for more details. The carousel will loop every 10 seconds, with a smooth transition between cards. The background will subtly change colors to match the testimonial's rating, providing a visual cue of the feedback's positivity.

8. Interaction Model & Motion Direction

  • Interaction Model: Animated
  • The landing page will feature moderate scroll-triggered reveals and hover transitions. The testimonial carousel will have spring physics for interactive elements, providing a polished and engaging user experience.

9. Non-Functional Requirements

  • The system must be responsive and perform well on mobile, tablet, and desktop devices.
  • The system must ensure data security and privacy, particularly for user testimonials and billing information.
  • The system must be scalable to handle an increasing number of users and testimonials.
Page 4 of 4

10. Tech Stack

  • Frontend: Next.js, Tailwind CSS, Lucide React
  • Backend/Database: Supabase (PostgreSQL, Auth, Row Level Security, Storage)
  • Billing Integration: Stripe
  • Deployment: Vercel

11. Assumptions and Constraints

  • The system will be deployed on Vercel, leveraging its CDN for fast content delivery.
  • Supabase will handle authentication and database management, ensuring secure and efficient data handling.
  • Stripe will manage billing and subscription services, providing a reliable payment gateway.

12. Glossary

  • CRUD: Create, Read, Update, Delete
  • SaaS: Software as a Service
  • B2B: Business to Business
  • RLS: Row Level Security
  • CDN: Content Delivery Network

This document outlines the requirements and design specifications for the "ProofBox" project within the "rapid" initiative. It serves as a comprehensive guide for developers and designers to build and deploy the application effectively.

Landing design preview
Landing: View Info
Login: Sign In
Dashboard: Create Project
Dashboard: View Stats
Project: Configure Widget
Project: Generate Public Link
Public Page: Share Link
Review Inbox: View Pending
Review Inbox: Approve Testimonial
Review Inbox: Delete Testimonial
Embed: Generate Code
Embed: Copy Code
Billing: Manage Subscription
Landing design preview
Landing: View Info
Login: Sign In
Dashboard: Create Project
Dashboard: View Stats
Project: Configure Widget
Project: Generate Public Link
Public Page: Share Link
Review Inbox: View Pending
Review Inbox: Approve Testimonial
Review Inbox: Delete Testimonial
Embed: Generate Code
Embed: Copy Code
Billing: Manage Subscription