Skip to content

Latest commit

 

History

History
230 lines (186 loc) · 7.44 KB

File metadata and controls

230 lines (186 loc) · 7.44 KB

ProofPulse - Project Overview

What Is This?

A social proof notification SaaS that shows "John from NYC just signed up" style popups on websites to boost conversions. Revenue target: $1000/month.

Live URLs


COMPLETED FEATURES

1. Landing Page (src/app/page.tsx)

  • Hero section with value proposition
  • Feature highlights (Easy Setup, Customizable, Real-time API)
  • Pricing tiers: Starter ($0), Pro ($19), Business ($49)
  • Call-to-action buttons

2. Authentication (src/app/(auth)/)

  • Login page: src/app/(auth)/login/page.tsx
  • Signup page: src/app/(auth)/signup/page.tsx
  • NextAuth config: src/lib/auth.ts
  • API routes: src/app/api/auth/[...nextauth]/route.ts, src/app/api/auth/signup/route.ts

3. Dashboard (src/app/(dashboard)/dashboard/page.tsx)

  • View all sites
  • Add new sites
  • Site detail modal with:
    • Enable/disable widget
    • Copy embed code
    • View API key
    • Add test notifications
    • View recent notifications

4. Embeddable Widget (public/widget.js)

  • Self-contained JavaScript file
  • Shows animated notification popups
  • Customizable position, colors, timing
  • Cycles through recent notifications
  • Usage: <script src="https://proofpulse-six.vercel.app/widget.js" data-key="YOUR_API_KEY"></script>

5. API Endpoints

Endpoint Method Purpose
/api/sites GET List user's sites
/api/sites POST Create new site
/api/sites/[siteId] GET Get site details
/api/sites/[siteId] PATCH Update site/settings
/api/sites/[siteId] DELETE Delete site
/api/sites/[siteId]/notifications GET List notifications
/api/sites/[siteId]/notifications POST Create notification
/api/widget?key=API_KEY GET Get widget data (public)
/api/widget?key=API_KEY POST Track new event (public)

6. Database - FULLY CONNECTED!

  • Type: PostgreSQL on DevCollective VPS
  • Host: 5.78.98.98:5432
  • Database: proofpulse
  • User: dbadmin
  • Connection String: postgresql://dbadmin:dani2025@5.78.98.98:5432/proofpulse

Schema (prisma/schema.prisma):

User: id, email, password, name, createdAt, updatedAt
Site: id, name, domain, apiKey, userId, createdAt, updatedAt
SiteSettings: id, siteId, position, displayDuration, delayBetween, bgColor, textColor, accentColor, borderRadius, showIcon, enabled
Notification: id, siteId, type, name, location, message, imageUrl, createdAt

NOT YET COMPLETED - NEEDS FINISHING

1. STRIPE INTEGRATION (Required to collect payments)

Stripe packages already installed (stripe, @stripe/stripe-js). Need to create:

Files to Create:

  • src/lib/stripe.ts - Stripe client config
  • src/app/api/stripe/checkout/route.ts - Create checkout sessions
  • src/app/api/stripe/webhook/route.ts - Handle subscription events
  • src/app/api/stripe/portal/route.ts - Customer billing portal

Schema Updates Needed:

Add to User model in prisma/schema.prisma:

stripeCustomerId       String?   @unique
stripeSubscriptionId   String?
stripePriceId          String?
stripeCurrentPeriodEnd DateTime?
plan                   String    @default("free") // free, pro, business

Stripe Dashboard Setup:

  1. Create products in Stripe:
    • Pro Plan: $19/month (price_xxx)
    • Business Plan: $49/month (price_xxx)
  2. Get API keys (publishable + secret)
  3. Set up webhook endpoint pointing to /api/stripe/webhook
  4. Add env vars to Vercel:
    • STRIPE_SECRET_KEY
    • STRIPE_PUBLISHABLE_KEY
    • STRIPE_WEBHOOK_SECRET
    • STRIPE_PRO_PRICE_ID
    • STRIPE_BUSINESS_PRICE_ID

Update Pricing Page:

Modify src/app/page.tsx to call Stripe checkout on button click instead of just linking to /signup.

TIP: Use the Stripe MCP plugin (enabled via /plugin) to create products and manage Stripe setup.

2. PLAN ENFORCEMENT (After Stripe)

  • Check user's plan before allowing site creation
  • Starter: 1 site max
  • Pro: 3 sites max
  • Business: Unlimited
  • Add notification limits for Starter plan (100/month)

KEY FILES REFERENCE

D:\startup\proofpulse\
├── prisma/
│   └── schema.prisma          # Database models
├── public/
│   └── widget.js              # Embeddable notification widget
├── src/
│   ├── app/
│   │   ├── (auth)/
│   │   │   ├── login/page.tsx
│   │   │   └── signup/page.tsx
│   │   ├── (dashboard)/
│   │   │   └── dashboard/page.tsx
│   │   ├── api/
│   │   │   ├── auth/[...nextauth]/route.ts
│   │   │   ├── auth/signup/route.ts
│   │   │   ├── sites/route.ts
│   │   │   ├── sites/[siteId]/route.ts
│   │   │   ├── sites/[siteId]/notifications/route.ts
│   │   │   └── widget/route.ts
│   │   ├── layout.tsx
│   │   └── page.tsx           # Landing page
│   ├── components/
│   │   └── SessionProvider.tsx
│   ├── generated/prisma/      # Prisma client (auto-generated)
│   ├── lib/
│   │   ├── auth.ts            # NextAuth config
│   │   └── prisma.ts          # Prisma client with PG adapter
│   └── types/
│       └── next-auth.d.ts     # Type extensions
├── .env                       # Local env vars
├── package.json
└── PROJECT_OVERVIEW.md        # This file

ENVIRONMENT VARIABLES

Already Set in Vercel:

Need to Add for Stripe:

  • STRIPE_SECRET_KEY - Stripe secret key
  • STRIPE_PUBLISHABLE_KEY - Stripe publishable key
  • STRIPE_WEBHOOK_SECRET - Stripe webhook signing secret
  • STRIPE_PRO_PRICE_ID - Stripe price ID for Pro plan
  • STRIPE_BUSINESS_PRICE_ID - Stripe price ID for Business plan

COMMANDS REFERENCE

# Development
cd D:\startup\proofpulse
npm run dev                    # Start dev server at localhost:3000

# Database
npx prisma studio              # Open database GUI
npx prisma db push             # Push schema changes
npx prisma generate            # Regenerate client after schema changes

# Deployment
vercel                         # Deploy preview
vercel --prod                  # Deploy to production
vercel env ls                  # List env vars
vercel logs                    # View deployment logs

# Git
git add . && git commit -m "message" && git push

REVENUE MATH

Plan Price Customers Needed for $1000/mo
Pro $19/mo 53 customers
Business $49/mo 21 customers
Mix ~$30 avg 34 customers

NEXT SESSION CHECKLIST

  1. Set up database - DONE! Using PostgreSQL on VPS
  2. Use Stripe MCP plugin to create products/prices
  3. Create Stripe API routes (checkout, webhook, portal)
  4. Update Prisma schema with subscription fields
  5. Update pricing page with Stripe checkout buttons
  6. Add plan enforcement logic
  7. Test full flow: signup -> subscribe -> create site -> embed widget
  8. Deploy final version

HOW TO CONTINUE

Tell the next Claude:

"Read D:\startup\proofpulse\PROJECT_OVERVIEW.md - I need to finish Stripe integration for ProofPulse. Use the Stripe MCP plugin to set up payments."


Last updated: January 10, 2026