๐Ÿš€ PromptShip

Complete Technical Architecture, System Design & Portal Strategy

๐Ÿ“… March 2026 ๐Ÿ“„ Version 2.0 ๐Ÿ—๏ธ Architecture Document ๐Ÿ‘ค Author: Mubashir Ahmed

0 Executive Summary

PromptShip is a hybrid SaaS + Education platform providing curated AI prompts, one-click code generation, and comprehensive learning resources for developers. This document outlines the complete technical architecture optimized for:

๐Ÿ’ฐ
Cost Efficiency
๐Ÿ“ˆ
Scalability
๐Ÿ”’
Reliability
โšก
Performance
๐Ÿ’ก Key Decision: Single Codebase, Multiple Entry Points

We recommend a monorepo architecture with Next.js serving all portals from a single deployment. This approach minimizes infrastructure costs, simplifies development, and maintains consistency while supporting distinct user experiences.

1 Portal Strategy & Deployment Architecture

1.1 Portal Overview

Based on the product requirements, we need 4 distinct portals with different purposes, audiences, and access levels. However, these are deployed as a single Next.js application with route-based separation.

1

๐ŸŒ Marketing Portal (Public)

promptship.dev

Landing page, pricing, blog, SEO content. Goal: Convert visitors to users.

  • Landing page with value proposition
  • Pricing page (INR/USD toggle)
  • Blog/SEO content
  • Documentation
  • Changelog
Static Generation ISR
2

๐ŸŽฏ Application Portal (Authenticated)

app.promptship.dev

Main product experience. Dashboard, prompts, generator, learning hub.

  • User dashboard
  • Prompt library browser
  • AI code generator
  • Learning hub & courses
  • Generation history
  • User settings
SSR Auth Required
3

โš™๏ธ Admin Portal (Internal)

admin.promptship.dev

Content management, analytics, user management. Admin role only.

  • Prompt CRUD management
  • Course content editor
  • User management
  • Analytics dashboard
  • Revenue tracking
  • System health monitoring
Admin Only SSR
4

๐Ÿ“š API & Docs Portal (Public/Auth)

promptship.dev/docs/*

API documentation, integration guides, developer resources.

  • API reference (OpenAPI)
  • Integration guides
  • SDK documentation
  • Webhook documentation
  • Code examples
Static + MDX Phase 2

1.2 Why Single Deployment Over Multiple Sites?

Approach Pros Cons Monthly Cost
Single Next.js App โœ… Shared auth, components, types; single deployment; unified analytics; simpler CI/CD Larger bundle if not optimized $0-20 (Vercel Pro)
Separate Apps (Monorepo) Independent deployments; isolated failures Complex auth sharing; multiple Vercel projects; duplicated code $60-100
Separate Repos Team independence Sync nightmares; divergent codebases; no shared types $100+
โœ… Recommendation

Use single Next.js app with App Router + subdomain routing. A proxy.ts middleware detects the hostname and rewrites requests: app.promptship.dev/* โ†’ (app)/*, admin.promptship.dev/* โ†’ (admin)/admin/*. Route groups (marketing), (app), (admin) give clean separation without deployment complexity. Locally: app.localhost:3000, admin.localhost:3000.

1.3 Route Structure

src/
โ”œโ”€โ”€ proxy.ts                       # Subdomain routing (replaces middleware.ts in Next.js 16)
โ”œโ”€โ”€ app/
โ”‚   โ”œโ”€โ”€ layout.tsx                 # Root layout
โ”‚   โ”‚
โ”‚   โ”œโ”€โ”€ (marketing)/               # promptship.dev โ€” public marketing pages
โ”‚   โ”‚   โ”œโ”€โ”€ layout.tsx             # Marketing layout (header + footer)
โ”‚   โ”‚   โ”œโ”€โ”€ page.tsx               # Landing page (/)
โ”‚   โ”‚   โ”œโ”€โ”€ pricing/page.tsx       # Pricing (/pricing)
โ”‚   โ”‚   โ””โ”€โ”€ blog/                  # Blog (/blog/*)
โ”‚   โ”‚       โ”œโ”€โ”€ page.tsx
โ”‚   โ”‚       โ””โ”€โ”€ [slug]/page.tsx
โ”‚   โ”‚
โ”‚   โ”œโ”€โ”€ (auth)/                    # app.promptship.dev/login, /signup, /verify
โ”‚   โ”‚   โ”œโ”€โ”€ layout.tsx             # Centered auth layout
โ”‚   โ”‚   โ”œโ”€โ”€ login/page.tsx
โ”‚   โ”‚   โ”œโ”€โ”€ signup/page.tsx
โ”‚   โ”‚   โ””โ”€โ”€ verify/page.tsx
โ”‚   โ”‚
โ”‚   โ”œโ”€โ”€ (app)/                     # app.promptship.dev/* โ€” authenticated user portal
โ”‚   โ”‚   โ”œโ”€โ”€ layout.tsx             # App layout with sidebar
โ”‚   โ”‚   โ”œโ”€โ”€ dashboard/page.tsx     # Dashboard (/dashboard)
โ”‚   โ”‚   โ”œโ”€โ”€ prompts/               # Prompt library (/prompts/*)
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ page.tsx
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ [category]/page.tsx
โ”‚   โ”‚   โ”œโ”€โ”€ generate/page.tsx      # AI Generator (/generate)
โ”‚   โ”‚   โ”œโ”€โ”€ learn/                 # Learning hub (/learn/*)
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ page.tsx
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ [moduleId]/[lessonId]/page.tsx
โ”‚   โ”‚   โ”œโ”€โ”€ history/page.tsx       # Generation history
โ”‚   โ”‚   โ””โ”€โ”€ settings/page.tsx      # User settings
โ”‚   โ”‚
โ”‚   โ”œโ”€โ”€ (admin)/                   # admin.promptship.dev โ€” proxy rewrites / โ†’ /admin
โ”‚   โ”‚   โ”œโ”€โ”€ layout.tsx             # Admin layout
โ”‚   โ”‚   โ””โ”€โ”€ admin/                 # Internal path prefix (hidden from admin subdomain URLs)
โ”‚   โ”‚       โ”œโ”€โ”€ page.tsx           # Admin dashboard (admin.promptship.dev/)
โ”‚   โ”‚       โ”œโ”€โ”€ prompts/page.tsx   # Prompt management (admin.promptship.dev/prompts)
โ”‚   โ”‚       โ”œโ”€โ”€ users/page.tsx     # User management (admin.promptship.dev/users)
โ”‚   โ”‚       โ””โ”€โ”€ analytics/page.tsx # Analytics (admin.promptship.dev/analytics)
โ”‚   โ”‚
โ”‚   โ”œโ”€โ”€ (docs)/                    # promptship.dev/docs/*
โ”‚   โ”‚   โ”œโ”€โ”€ docs/page.tsx
โ”‚   โ”‚   โ””โ”€โ”€ docs/[...slug]/page.tsx
โ”‚   โ”‚
โ”‚   โ””โ”€โ”€ api/                       # API routes (all subdomains)
โ”‚       โ”œโ”€โ”€ auth/[...all]/route.ts # Better Auth
โ”‚       โ”œโ”€โ”€ generate/route.ts      # AI generation
โ”‚       โ”œโ”€โ”€ prompts/route.ts       # Prompts CRUD
โ”‚       โ””โ”€โ”€ webhooks/
โ”‚           โ”œโ”€โ”€ stripe/route.ts
โ”‚           โ””โ”€โ”€ razorpay/route.ts
โ”‚
โ””โ”€โ”€ config/
    โ”œโ”€โ”€ site.ts                    # Subdomain URLs (appUrl, adminUrl, marketingUrl)
    โ””โ”€โ”€ navigation.ts              # Per-portal navigation configs

1.4 Domain & Subdomain Strategy

All portals are served from a single Next.js deployment. The proxy.ts file inspects the Host header and rewrites/redirects requests to the correct route group. Cross-subdomain links use plain <a> tags (not Next.js <Link>) since they are different origins.

URL Purpose Proxy Action Local Dev URL Rendering
promptship.dev Landing, Marketing, Blog, Docs Pass-through localhost:3000 Static (SSG) + ISR
app.promptship.dev Main Application (authenticated) Auth check โ†’ pass-through to (app)/ and (auth)/ routes app.localhost:3000 SSR + Client
admin.promptship.dev Admin Panel (admin role) Auth check โ†’ rewrite / โ†’ /admin, /prompts โ†’ /admin/prompts admin.localhost:3000 SSR
promptship.dev/docs/* Documentation Pass-through localhost:3000/docs Static (MDX)
promptship.dev/blog/* Blog/SEO Pass-through localhost:3000/blog Static + ISR
api.promptship.dev Public API (Phase 2) โ€” โ€” Serverless
๐Ÿ”€ Proxy Routing Logic (proxy.ts)

The proxy detects subdomains by comparing the Host header against NEXT_PUBLIC_ROOT_DOMAIN. On the main domain, requests to /dashboard, /prompts, etc. are redirected to app.promptship.dev. Requests to /admin/* are redirected to admin.promptship.dev. Auth pages (/login, /signup, /verify) live on the app subdomain and redirect to /dashboard if already authenticated.

2 System Architecture

2.1 High-Level Architecture

System Architecture Overview
๐ŸŒ Client Layer
Web Browser (Next.js)
Mobile Web (PWA)
Future: Mobile Apps
โ†“
๐Ÿ›ก๏ธ Edge Layer (Vercel Edge Network)
Global CDN
Edge Middleware (Auth, Rate Limit)
Static Asset Caching
DDoS Protection (Cloudflare)
โ†“
โš™๏ธ Application Layer (Next.js 15 on Vercel)
SSR Pages
API Routes
Server Actions
Better Auth
Background Jobs (Inngest)
โ†“
๐Ÿ—„๏ธ Data Layer
PostgreSQL (Neon)
Redis (Upstash)
Blob Storage (Vercel)
Vector DB - Future
โ†“
๐Ÿ”— External Services
Claude API (Primary AI)
OpenAI API (Fallback)
Stripe (Global Payments)
Razorpay (India Payments)
Resend (Email)
Mux (Video)
PostHog (Analytics)
Sentry (Errors)

2.2 Request Flow Architecture

AI Generation Request Flow
User Request
โ†’
Edge Middleware
โ†’
Auth Check
โ†’
Rate Limit
โ†“
Credit Check
โ†’
Build Prompt
โ†’
Claude API
โ†’
Parse Response
โ†“
Save to DB
โ†’
Deduct Credit
โ†’
Return Code

2.3 Technology Stack (Final)

Frontend

FrameworkNext.js 15 (App Router)
LanguageTypeScript 5.x
StylingTailwind CSS 3.x
Componentsshadcn/ui
StateZustand + TanStack Query
FormsReact Hook Form + Zod
AnimationsFramer Motion
IconsLucide React

Backend

RuntimeNode.js 20 LTS
APINext.js API Routes + Server Actions
AuthBetter Auth (Magic Link)
DatabasePostgreSQL (Neon Serverless)
ORMDrizzle ORM
CacheUpstash Redis
QueueInngest (Background Jobs)
StorageVercel Blob

AI & ML

Primary AIClaude Sonnet 3.5 (95%)
Fallback AIGPT-4 Turbo (5%)
Prompt EngineCustom Template System
Code ValidationTypeScript Compiler API

Infrastructure

HostingVercel
CDNVercel Edge Network
DNSCloudflare
MonitoringSentry + Vercel Analytics
AnalyticsPostHog
VideoMux
EmailResend

3 Complete Module Specifications

3.1 Module Dependency Map

Module Dependencies & Data Flow
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚                           MARKETING PORTAL                               โ”‚
โ”‚  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”   โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”   โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”   โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”                 โ”‚
โ”‚  โ”‚ Landing โ”‚   โ”‚ Pricing โ”‚   โ”‚  Blog   โ”‚   โ”‚  Docs   โ”‚                 โ”‚
โ”‚  โ””โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”˜   โ””โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”˜   โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜   โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜                 โ”‚
โ”‚       โ”‚             โ”‚                                                    โ”‚
โ”‚       โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”                                     โ”‚
โ”‚                     โ–ผ             โ”‚                                     โ”‚
โ”‚              โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”        โ”‚                                     โ”‚
โ”‚              โ”‚   Auth   โ”‚โ—„โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜                                     โ”‚
โ”‚              โ””โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”˜                                               โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
                    โ”‚
                    โ–ผ
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚                           APPLICATION PORTAL                             โ”‚
โ”‚                                                                          โ”‚
โ”‚  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”      โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”          โ”‚
โ”‚  โ”‚  Dashboard  โ”‚โ—„โ”€โ”€โ”€โ”€โ–บโ”‚              Sidebar                 โ”‚          โ”‚
โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”˜      โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜          โ”‚
โ”‚         โ”‚                                                                โ”‚
โ”‚         โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”           โ”‚
โ”‚         โ–ผ                โ–ผ                โ–ผ                โ–ผ           โ”‚
โ”‚  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”   โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”   โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”   โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”      โ”‚
โ”‚  โ”‚  Prompts   โ”‚   โ”‚ Generator  โ”‚   โ”‚  Learning  โ”‚   โ”‚ Settings โ”‚      โ”‚
โ”‚  โ”‚  Library   โ”‚   โ”‚            โ”‚   โ”‚    Hub     โ”‚   โ”‚          โ”‚      โ”‚
โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”˜   โ””โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”˜   โ””โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”˜   โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜      โ”‚
โ”‚        โ”‚                โ”‚                โ”‚                              โ”‚
โ”‚        โ”‚                โ–ผ                โ”‚                              โ”‚
โ”‚        โ”‚         โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”         โ”‚                              โ”‚
โ”‚        โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ–บโ”‚  History   โ”‚โ—„โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜                              โ”‚
โ”‚                  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜                                         โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
                                    โ”‚
                                    โ–ผ
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚                              SERVICES LAYER                              โ”‚
โ”‚                                                                          โ”‚
โ”‚  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚
โ”‚  โ”‚ AI Svc   โ”‚  โ”‚ Auth Svc โ”‚  โ”‚ Payment  โ”‚  โ”‚ Email    โ”‚  โ”‚ Analyticsโ”‚ โ”‚
โ”‚  โ”‚          โ”‚  โ”‚          โ”‚  โ”‚ Service  โ”‚  โ”‚ Service  โ”‚  โ”‚ Service  โ”‚ โ”‚
โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
            

3.2 Detailed Module Specifications

๐Ÿ 
M1: Landing Page Module
Public SSG
Route/
RenderingStatic Generation with ISR (revalidate: 3600)
PurposeConvert visitors โ†’ signups through compelling value proposition
DependenciesNone (standalone)
Data SourcesStatic content + CMS (future)

Components

  • HeroSection โ€” Main headline, video demo, dual CTAs
  • SocialProof โ€” User count, testimonials, company logos
  • FeaturesGrid โ€” 4 feature cards with icons
  • PromptGalleryPreview โ€” 6-8 prompt cards (from static data)
  • HowItWorks โ€” 3-step visual process
  • PricingPreview โ€” 3 tier cards (links to /pricing)
  • FAQAccordion โ€” 8 common questions
  • FinalCTA โ€” "Ready to ship faster?" conversion block

Performance Targets

  • LCP < 2.5s
  • FID < 100ms
  • CLS < 0.1
  • Page Weight < 500KB (initial load)
๐Ÿ”
M2: Authentication Module
Hybrid Critical Path
Routes/login, /signup, /verify, /onboarding
ProviderBetter Auth (Magic Link primary, OAuth optional)
SessionJWT in httpOnly cookie + Upstash Redis session store
DependenciesResend (email), Neon (users table)

Auth Flows

// Signup Flow
1. User enters email โ†’ POST /api/auth/signup
2. Create user record (tier: 'free', credits: 0)
3. Generate magic link token (expires: 15min)
4. Send email via Resend
5. User clicks link โ†’ GET /api/auth/verify?token=xxx
6. Validate token, create session
7. Redirect to /app/onboarding (first time) or /app/dashboard

// Login Flow
1. User enters email โ†’ POST /api/auth/login
2. Check user exists
3. Generate magic link token
4. Send email via Resend
5. User clicks link โ†’ Session created โ†’ Dashboard

// Session Management
- JWT token in httpOnly cookie (7 days)
- Session data in Upstash Redis (fast lookup)
- Middleware validates on every /app/* request
๐Ÿ“Š
M3: Dashboard Module
Auth Required SSR
Route/app/dashboard
RenderingSSR (user-specific data)
PurposeCentral hub for all user activities
DependenciesAuth, Prompts, Generator, Learning modules

Dashboard Layout

  • Sidebar โ€” Navigation (Home, Prompts, Generate, Learn, History, Settings)
  • WelcomeBanner โ€” Personalized greeting + quick tips
  • StatsCards โ€” Credits remaining, generations this month, prompts copied
  • QuickActions โ€” Generate, Browse Prompts, Continue Course
  • RecentGenerations โ€” Last 4-6 generations with thumbnails
  • CourseProgress โ€” Current module + completion percentage
  • NewPromptsCarousel โ€” Latest additions to library
๐Ÿ“
M4: Prompt Library Module
Auth Required Core Feature
Routes/app/prompts, /app/prompts/[category], /app/prompts/[id]
RenderingSSR with client-side filtering
PurposeBrowse, search, copy, and favorite prompts
Access ControlTier-based (free: 5 copies/mo, starter: 50, pro: unlimited)

Features

  • Search โ€” Full-text search with instant results
  • Filters โ€” Category, Framework, Tier, Sort (popular/newest)
  • PromptCard โ€” Preview image, title, category, framework icons, quick actions
  • PromptModal โ€” Full prompt text, usage instructions, copy button, generate button
  • Favorites โ€” Save prompts for quick access
  • Usage Tracking โ€” Copy count, generate count per prompt

Copy Limit Logic

// Copy Limit Check
async function canCopyPrompt(userId: string, tier: Tier): Promise {
  const limits = { free: 5, starter: 50, pro: Infinity, team: Infinity };
  
  const copiesThisMonth = await db.promptCopies
    .where({ userId, createdAt: { gte: startOfMonth() } })
    .count();
  
  return copiesThisMonth < limits[tier];
}
โœจ
M5: AI Generator Module
Auth Required Credits Required
Route/app/generate
RenderingClient-side (heavy interactivity)
PurposeOne-click AI code generation from prompts
Credit Cost1 credit per generation
DependenciesAI Service, Prompts module, History module

Generator Interface

Left Panel - Configuration
  • Template Selection (dropdown/grid)
  • Framework Selection (React, Flutter, HTML, Vue)
  • Style Options (Glassmorphism, Minimal, Bold, Gradient)
  • Color Picker (primary color + presets)
  • Dark Mode Toggle
  • Animation Level (None, Subtle, Dynamic)
  • Border Radius Slider (0-24px)
  • Custom Instructions (textarea)
  • Generate Button + Credit Display
Right Panel - Output
  • Live Preview (Sandpack iframe)
  • Device Toggle (Desktop/Tablet/Mobile)
  • Theme Toggle (Light/Dark)
  • Code Tabs (framework views)
  • Syntax Highlighted Code
  • Copy/Download Buttons
  • Regenerate Button
  • Save to History (auto)

Generator State Machine

type GeneratorState = 
  | 'IDLE'           // Default, waiting for input
  | 'VALIDATING'     // Checking input validity
  | 'CHECKING_CREDITS' // Verifying user has credits
  | 'GENERATING'     // AI processing (2-8 seconds)
  | 'SUCCESS'        // Display output
  | 'ERROR';         // Show error with retry option

// State Transitions
IDLE โ†’ (click generate) โ†’ VALIDATING
VALIDATING โ†’ (valid) โ†’ CHECKING_CREDITS
VALIDATING โ†’ (invalid) โ†’ IDLE (show errors)
CHECKING_CREDITS โ†’ (has credits) โ†’ GENERATING
CHECKING_CREDITS โ†’ (no credits) โ†’ IDLE (show upgrade modal)
GENERATING โ†’ (success) โ†’ SUCCESS
GENERATING โ†’ (failure) โ†’ ERROR
SUCCESS โ†’ (regenerate) โ†’ GENERATING
ERROR โ†’ (retry) โ†’ GENERATING
๐ŸŽ“
M6: Learning Hub Module
Pro/Team Only Video Content
Routes/app/learn, /app/learn/[moduleId], /app/learn/[moduleId]/[lessonId]
Video ProviderMux (HLS streaming)
Access ControlPro and Team tiers only
Progress TrackingLesson completion, resume position

Course Structure (40 Lessons)

Module 1: Foundations

5 lessons โ€ข 72 min

Module 2: UI Generation

10 lessons โ€ข 195 min

Module 3: Architecture

8 lessons โ€ข 158 min

Module 4: Flutter Deep Dive

8 lessons โ€ข 160 min

Module 5: Ship Like a Pro

9 lessons โ€ข 173 min

Total

40 lessons โ€ข ~13 hours

3.3 Complete Module Matrix

Module Route Auth Tier Rendering Priority
M1: Landing / No All SSG + ISR P0
M2: Auth /login, /signup No All SSR P0
M3: Dashboard /app/dashboard Yes All SSR P0
M4: Prompts /app/prompts/* Yes All (limited) SSR + Client P0
M5: Generator /app/generate Yes Pro/Team Client P0
M6: Learning Hub /app/learn/* Yes Pro/Team SSR P1
M7: History /app/history Yes All SSR P1
M8: Settings /app/settings Yes All SSR P1
M9: Pricing /pricing No All SSG P0
M10: Blog /blog/* No All SSG + ISR P2
M11: Admin Dashboard /admin Admin Admin SSR P1
M12: Admin Content /admin/prompts Admin Admin SSR P1
M13: Docs /docs/* No All SSG (MDX) P2

4 Database Design

4.1 Database Architecture

๐Ÿ’ก Database Choice: Neon PostgreSQL

Serverless PostgreSQL with autoscaling, branching for development, and generous free tier. Perfect for startups with variable load patterns.

4.2 Complete Schema

-- =============================================
-- USERS & AUTHENTICATION
-- =============================================

CREATE TYPE user_tier AS ENUM ('free', 'starter', 'pro', 'team');
CREATE TYPE user_role AS ENUM ('user', 'admin');

CREATE TABLE users (
    id                  UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    email               VARCHAR(255) UNIQUE NOT NULL,
    name                VARCHAR(255),
    avatar_url          TEXT,
    tier                user_tier DEFAULT 'free',
    role                user_role DEFAULT 'user',
    credits             INTEGER DEFAULT 0,
    default_framework   VARCHAR(20) DEFAULT 'react',
    preferred_currency  VARCHAR(3) DEFAULT 'USD',
    onboarding_completed BOOLEAN DEFAULT false,
    email_verified      BOOLEAN DEFAULT false,
    created_at          TIMESTAMPTZ DEFAULT NOW(),
    updated_at          TIMESTAMPTZ DEFAULT NOW()
);

CREATE TABLE sessions (
    id                  UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id             UUID REFERENCES users(id) ON DELETE CASCADE,
    token               VARCHAR(255) UNIQUE NOT NULL,
    expires_at          TIMESTAMPTZ NOT NULL,
    ip_address          INET,
    user_agent          TEXT,
    created_at          TIMESTAMPTZ DEFAULT NOW()
);

CREATE TABLE magic_links (
    id                  UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    email               VARCHAR(255) NOT NULL,
    token               VARCHAR(255) UNIQUE NOT NULL,
    expires_at          TIMESTAMPTZ NOT NULL,
    used_at             TIMESTAMPTZ,
    created_at          TIMESTAMPTZ DEFAULT NOW()
);

-- =============================================
-- SUBSCRIPTIONS & PAYMENTS
-- =============================================

CREATE TYPE subscription_status AS ENUM ('active', 'canceled', 'past_due', 'paused', 'trialing');
CREATE TYPE payment_provider AS ENUM ('stripe', 'razorpay');

CREATE TABLE subscriptions (
    id                      UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id                 UUID REFERENCES users(id) ON DELETE CASCADE,
    plan                    VARCHAR(50) NOT NULL,  -- starter, pro_monthly, pro_yearly, team
    status                  subscription_status DEFAULT 'active',
    provider                payment_provider NOT NULL,
    provider_subscription_id VARCHAR(255),
    provider_customer_id    VARCHAR(255),
    current_period_start    TIMESTAMPTZ,
    current_period_end      TIMESTAMPTZ,
    cancel_at_period_end    BOOLEAN DEFAULT false,
    created_at              TIMESTAMPTZ DEFAULT NOW(),
    updated_at              TIMESTAMPTZ DEFAULT NOW()
);

CREATE TABLE payments (
    id                      UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id                 UUID REFERENCES users(id) ON DELETE SET NULL,
    subscription_id         UUID REFERENCES subscriptions(id),
    provider                payment_provider NOT NULL,
    provider_payment_id     VARCHAR(255),
    amount                  INTEGER NOT NULL,  -- in smallest currency unit (paise/cents)
    currency                VARCHAR(3) NOT NULL,
    status                  VARCHAR(50) NOT NULL,
    created_at              TIMESTAMPTZ DEFAULT NOW()
);

-- =============================================
-- PROMPTS & CATEGORIES
-- =============================================

CREATE TABLE categories (
    id                  UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    name                VARCHAR(100) NOT NULL,
    slug                VARCHAR(100) UNIQUE NOT NULL,
    description         TEXT,
    icon                VARCHAR(50),
    display_order       INTEGER DEFAULT 0,
    created_at          TIMESTAMPTZ DEFAULT NOW()
);

CREATE TABLE prompts (
    id                  UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    category_id         UUID REFERENCES categories(id),
    title               VARCHAR(255) NOT NULL,
    slug                VARCHAR(255) UNIQUE NOT NULL,
    description         TEXT,
    prompt_text         TEXT NOT NULL,
    tier                user_tier DEFAULT 'free',
    frameworks          VARCHAR(20)[] DEFAULT '{react}',
    preview_image_url   TEXT,
    usage_count         INTEGER DEFAULT 0,
    copy_count          INTEGER DEFAULT 0,
    favorite_count      INTEGER DEFAULT 0,
    is_featured         BOOLEAN DEFAULT false,
    is_published        BOOLEAN DEFAULT true,
    created_at          TIMESTAMPTZ DEFAULT NOW(),
    updated_at          TIMESTAMPTZ DEFAULT NOW()
);

CREATE TABLE prompt_copies (
    id                  UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id             UUID REFERENCES users(id) ON DELETE CASCADE,
    prompt_id           UUID REFERENCES prompts(id) ON DELETE CASCADE,
    created_at          TIMESTAMPTZ DEFAULT NOW()
);

CREATE TABLE favorites (
    id                  UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id             UUID REFERENCES users(id) ON DELETE CASCADE,
    prompt_id           UUID REFERENCES prompts(id) ON DELETE CASCADE,
    created_at          TIMESTAMPTZ DEFAULT NOW(),
    UNIQUE(user_id, prompt_id)
);

-- =============================================
-- AI GENERATIONS
-- =============================================

CREATE TABLE generations (
    id                  UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id             UUID REFERENCES users(id) ON DELETE CASCADE,
    prompt_id           UUID REFERENCES prompts(id) ON DELETE SET NULL,
    framework           VARCHAR(20) NOT NULL,
    template_type       VARCHAR(50),
    options             JSONB DEFAULT '{}',
    input_prompt        TEXT NOT NULL,
    output_code         TEXT NOT NULL,
    ai_provider         VARCHAR(20) DEFAULT 'claude',
    ai_model            VARCHAR(50),
    tokens_input        INTEGER,
    tokens_output       INTEGER,
    latency_ms          INTEGER,
    cost_usd            DECIMAL(10, 6),
    created_at          TIMESTAMPTZ DEFAULT NOW()
);

-- =============================================
-- LEARNING HUB
-- =============================================

CREATE TABLE course_modules (
    id                  UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    title               VARCHAR(255) NOT NULL,
    slug                VARCHAR(255) UNIQUE NOT NULL,
    description         TEXT,
    display_order       INTEGER DEFAULT 0,
    is_published        BOOLEAN DEFAULT false,
    created_at          TIMESTAMPTZ DEFAULT NOW()
);

CREATE TABLE lessons (
    id                  UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    module_id           UUID REFERENCES course_modules(id) ON DELETE CASCADE,
    title               VARCHAR(255) NOT NULL,
    slug                VARCHAR(255) NOT NULL,
    description         TEXT,
    video_url           TEXT,  -- Mux playback ID
    video_duration_sec  INTEGER,
    display_order       INTEGER DEFAULT 0,
    is_free_preview     BOOLEAN DEFAULT false,
    is_published        BOOLEAN DEFAULT false,
    created_at          TIMESTAMPTZ DEFAULT NOW()
);

CREATE TABLE lesson_progress (
    id                  UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id             UUID REFERENCES users(id) ON DELETE CASCADE,
    lesson_id           UUID REFERENCES lessons(id) ON DELETE CASCADE,
    watch_time_sec      INTEGER DEFAULT 0,
    is_completed        BOOLEAN DEFAULT false,
    completed_at        TIMESTAMPTZ,
    last_position_sec   INTEGER DEFAULT 0,
    updated_at          TIMESTAMPTZ DEFAULT NOW(),
    UNIQUE(user_id, lesson_id)
);

-- =============================================
-- INDEXES
-- =============================================

CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_users_tier ON users(tier);
CREATE INDEX idx_sessions_token ON sessions(token);
CREATE INDEX idx_sessions_user ON sessions(user_id);
CREATE INDEX idx_subscriptions_user ON subscriptions(user_id);
CREATE INDEX idx_subscriptions_provider ON subscriptions(provider, provider_subscription_id);
CREATE INDEX idx_prompts_category ON prompts(category_id);
CREATE INDEX idx_prompts_tier ON prompts(tier);
CREATE INDEX idx_prompts_published ON prompts(is_published);
CREATE INDEX idx_generations_user_date ON generations(user_id, created_at DESC);
CREATE INDEX idx_prompt_copies_user_date ON prompt_copies(user_id, created_at);
CREATE INDEX idx_favorites_user ON favorites(user_id);
CREATE INDEX idx_lesson_progress_user ON lesson_progress(user_id);

-- Full-text search on prompts
CREATE INDEX idx_prompts_search ON prompts 
    USING GIN(to_tsvector('english', title || ' ' || COALESCE(description, '')));

4.3 Entity Relationship Diagram

Database Relationships
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”       โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”       โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚   users     โ”‚โ”€โ”€โ”€1:Nโ”€โ”‚  subscriptions  โ”‚       โ”‚   categories   โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค       โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค       โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚ id (PK)     โ”‚       โ”‚ id (PK)         โ”‚       โ”‚ id (PK)        โ”‚
โ”‚ email       โ”‚       โ”‚ user_id (FK)    โ”‚       โ”‚ name           โ”‚
โ”‚ tier        โ”‚       โ”‚ plan            โ”‚       โ”‚ slug           โ”‚
โ”‚ credits     โ”‚       โ”‚ status          โ”‚       โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”˜       โ”‚ provider        โ”‚               โ”‚
       โ”‚              โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜               โ”‚
       โ”‚                                                โ”‚ 1:N
       โ”‚                                                โ–ผ
       โ”‚              โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”       โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
       โ”œโ”€โ”€โ”€โ”€โ”€โ”€1:Nโ”€โ”€โ”€โ”€โ–บโ”‚  generations    โ”‚       โ”‚    prompts     โ”‚
       โ”‚              โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค       โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
       โ”‚              โ”‚ id (PK)         โ”‚โ—„โ”€N:1โ”€โ”€โ”‚ id (PK)        โ”‚
       โ”‚              โ”‚ user_id (FK)    โ”‚       โ”‚ category_id(FK)โ”‚
       โ”‚              โ”‚ prompt_id (FK)  โ”‚       โ”‚ title          โ”‚
       โ”‚              โ”‚ output_code     โ”‚       โ”‚ prompt_text    โ”‚
       โ”‚              โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜       โ”‚ tier           โ”‚
       โ”‚                                        โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
       โ”‚                                                โ”‚
       โ”‚              โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”               โ”‚
       โ”œโ”€โ”€โ”€โ”€โ”€โ”€1:Nโ”€โ”€โ”€โ”€โ–บโ”‚  prompt_copies  โ”‚โ—„โ”€โ”€โ”€โ”€โ”€โ”€N:1โ”€โ”€โ”€โ”€โ”€โ”ค
       โ”‚              โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค               โ”‚
       โ”‚              โ”‚ user_id (FK)    โ”‚               โ”‚
       โ”‚              โ”‚ prompt_id (FK)  โ”‚               โ”‚
       โ”‚              โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜               โ”‚
       โ”‚                                                โ”‚
       โ”‚              โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”               โ”‚
       โ””โ”€โ”€โ”€โ”€โ”€โ”€1:Nโ”€โ”€โ”€โ”€โ–บโ”‚   favorites     โ”‚โ—„โ”€โ”€โ”€โ”€โ”€โ”€N:1โ”€โ”€โ”€โ”€โ”€โ”˜
                      โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
                      โ”‚ user_id (FK)    โ”‚
                      โ”‚ prompt_id (FK)  โ”‚
                      โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”       โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”       โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚   users     โ”‚โ”€โ”€โ”€1:Nโ”€โ”‚ lesson_progress โ”‚โ”€โ”€โ”€N:1โ”€โ”‚    lessons     โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜       โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜       โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
                                                โ”‚ module_id (FK) โ”‚
                                                โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
                                                        โ”‚ N:1
                                                        โ–ผ
                                                โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
                                                โ”‚ course_modules โ”‚
                                                โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
            

5 AI Engineering & Prompt System

5.1 AI Provider Strategy

Primary: Claude Sonnet 3.5

  • 95% of all generations
  • Best code quality for UI components
  • Input: $3/1M tokens
  • Output: $15/1M tokens
  • Avg cost per generation: ~$0.02

Fallback: GPT-4 Turbo

  • 5% of generations (fallback only)
  • Activated when Claude is down or rate limited
  • Input: $10/1M tokens
  • Output: $30/1M tokens
  • Avg cost per generation: ~$0.05

5.2 Prompt Template Architecture

// Prompt Template Structure

interface PromptTemplate {
  id: string;
  name: string;
  category: PromptCategory;
  basePrompt: string;
  frameworkInstructions: Record<Framework, string>;
  styleVariants: Record<Style, string>;
  optionModifiers: OptionModifier[];
}

// Complete Prompt Assembly
function buildPrompt(
  template: PromptTemplate,
  options: GeneratorOptions
): string {
  return `
${SYSTEM_PROMPT}

${template.frameworkInstructions[options.framework]}

${template.basePrompt}

${template.styleVariants[options.style]}

## Specifications:
- Primary Color: ${options.primaryColor}
- Dark Mode: ${options.darkMode ? 'Yes' : 'No'}
- Animation Level: ${options.animationLevel}
- Border Radius: ${options.borderRadius}px

${options.customInstructions ? `## Additional Requirements:\n${options.customInstructions}` : ''}

## Output Requirements:
- Output ONLY the code, no explanations
- Code must be complete and copy-paste ready
- Include all necessary imports
`.trim();
}

5.3 System Prompts by Framework

Framework Key Instructions Output Format
React + Tailwind Functional components, TypeScript, Tailwind CSS, Framer Motion for animations, named export .tsx file
Flutter StatelessWidget (or Stateful if needed), const constructors, Material 3 guidelines, proper widget composition .dart file
HTML/CSS Semantic HTML5, CSS in <style> tag, CSS custom properties, flexbox/grid, media queries .html file
Vue Composition API, TypeScript, <script setup>, scoped styles .vue file

5.4 AI Cost Projections

$125
Launch (5K gens/mo)
$500
Growth (20K gens/mo)
$2,500
Scale (100K gens/mo)
80%
Gross Margin Target

5.5 AI Service Implementation

// lib/ai/generate.ts

import Anthropic from '@anthropic-ai/sdk';
import OpenAI from 'openai';

const anthropic = new Anthropic();
const openai = new OpenAI();

interface GenerationResult {
  code: string;
  provider: 'claude' | 'openai';
  tokensInput: number;
  tokensOutput: number;
  latencyMs: number;
  costUsd: number;
}

export async function generateCode(
  prompt: string,
  framework: Framework
): Promise<GenerationResult> {
  const startTime = Date.now();
  
  try {
    // Try Claude first
    const response = await anthropic.messages.create({
      model: 'claude-3-5-sonnet-20241022',
      max_tokens: 4096,
      messages: [{ role: 'user', content: prompt }],
    });
    
    const code = extractCode(response.content[0].text, framework);
    const latencyMs = Date.now() - startTime;
    
    return {
      code,
      provider: 'claude',
      tokensInput: response.usage.input_tokens,
      tokensOutput: response.usage.output_tokens,
      latencyMs,
      costUsd: calculateCost('claude', response.usage),
    };
  } catch (error) {
    // Fallback to OpenAI
    console.error('Claude failed, falling back to OpenAI:', error);
    
    const response = await openai.chat.completions.create({
      model: 'gpt-4-turbo',
      max_tokens: 4096,
      messages: [{ role: 'user', content: prompt }],
    });
    
    const code = extractCode(response.choices[0].message.content!, framework);
    const latencyMs = Date.now() - startTime;
    
    return {
      code,
      provider: 'openai',
      tokensInput: response.usage!.prompt_tokens,
      tokensOutput: response.usage!.completion_tokens,
      latencyMs,
      costUsd: calculateCost('openai', response.usage!),
    };
  }
}

6 Cost Optimization Strategy

6.1 Monthly Infrastructure Costs (Projected)

Service Launch (Month 1) Growth (Month 6) Scale (Month 12) Notes
Vercel (Hosting) $0 (Hobby) $20 (Pro) $20 (Pro) Pro tier at 5K+ users
Neon (Database) $0 (Free) $19 (Launch) $69 (Scale) Scale at 50K+ users
Upstash (Redis) $0 (Free) $10 $30 Pay-per-request
Claude API $100 $400 $2,000 ~$0.02/generation
Mux (Video) $0 $20 $50 Pay-per-minute watched
Resend (Email) $0 (Free) $20 $40 3K free, then pay
Cloudflare (DNS) $0 $0 $20 Pro at high traffic
Sentry (Monitoring) $0 (Free) $26 $26 Team tier
PostHog (Analytics) $0 (Free) $0 $50 1M free events/mo
TOTAL ~$100 ~$535 ~$2,305

6.2 Cost Optimization Techniques

AI Cost Optimization

  • Prompt caching โ€” Cache identical requests in Redis (15 min TTL)
  • Token optimization โ€” Strip unnecessary whitespace, use efficient prompts
  • Output limits โ€” Set max_tokens to prevent runaway costs
  • Tiered models โ€” Use Claude Haiku for simpler generations (future)
  • Request batching โ€” Batch API calls where possible

Infrastructure Optimization

  • Edge caching โ€” CDN for all static assets
  • ISR โ€” Incremental Static Regeneration for semi-static pages
  • Connection pooling โ€” Neon serverless handles this automatically
  • Image optimization โ€” Vercel Image Optimization, WebP/AVIF
  • Lazy loading โ€” Code split, defer non-critical JS

6.3 Revenue vs Cost Analysis

Month Revenue (INR) Revenue (USD) Costs (USD) Gross Margin Net Profit
Month 1 โ‚น50,000 $600 $100 83% $500
Month 3 โ‚น1,45,000 $1,740 $300 83% $1,440
Month 6 โ‚น3,05,000 $3,660 $535 85% $3,125
Month 12 โ‚น5,50,000 $6,600 $2,305 65% $4,295

7 Scalability Architecture

7.1 Scaling Strategy by Component

Frontend (Vercel)

Automatic horizontal scaling. Edge-first architecture.

  • Static pages served from 100+ edge locations
  • SSR functions auto-scale to demand
  • No configuration needed up to millions of requests
Auto-scales

Database (Neon)

Serverless PostgreSQL with automatic scaling.

  • Scales to zero when idle (cost savings)
  • Automatic read replicas at Scale tier
  • Connection pooling built-in
Auto-scales

AI Generation Queue

Rate limiting + queue for burst protection.

  • Upstash Redis for rate limiting
  • Inngest for background job processing
  • Circuit breaker for AI provider failures
Managed scaling

Video Streaming (Mux)

Enterprise-grade video infrastructure.

  • HLS adaptive streaming
  • Global CDN delivery
  • No scaling concerns
Fully managed

7.2 Traffic Projections

Metric Launch Month 6 Year 1 Year 2
Monthly Active Users 500 5,000 15,000 50,000
Page Views/Month 25,000 250,000 750,000 2.5M
AI Generations/Month 5,000 20,000 100,000 400,000
Video Hours Watched 500 2,000 10,000 40,000
Database Size 100 MB 1 GB 5 GB 20 GB

7.3 Rate Limiting Strategy

// middleware.ts - Edge Rate Limiting

import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';

const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(10, '10 s'), // 10 requests per 10 seconds
});

const aiRatelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(5, '60 s'), // 5 AI calls per minute
});

export async function middleware(request: NextRequest) {
  const ip = request.ip ?? '127.0.0.1';
  
  // Different limits for different endpoints
  if (request.nextUrl.pathname.startsWith('/api/generate')) {
    const { success, remaining } = await aiRatelimit.limit(ip);
    
    if (!success) {
      return new Response('Too many requests', { status: 429 });
    }
  }
  
  return NextResponse.next();
}

8 DevOps & CI/CD

8.1 Repository Structure

promptship/
โ”œโ”€โ”€ .github/
โ”‚   โ””โ”€โ”€ workflows/
โ”‚       โ”œโ”€โ”€ ci.yml           # Lint, type-check, test on PR
โ”‚       โ”œโ”€โ”€ preview.yml      # Deploy preview on PR
โ”‚       โ””โ”€โ”€ production.yml   # Deploy to production on main
โ”œโ”€โ”€ src/
โ”‚   โ”œโ”€โ”€ app/                 # Next.js App Router
โ”‚   โ”œโ”€โ”€ components/          # React components
โ”‚   โ”œโ”€โ”€ lib/                 # Utilities, services
โ”‚   โ”œโ”€โ”€ db/                  # Drizzle schema, migrations
โ”‚   โ””โ”€โ”€ styles/              # Global styles
โ”œโ”€โ”€ public/                  # Static assets
โ”œโ”€โ”€ scripts/                 # Build, seed scripts
โ”œโ”€โ”€ tests/                   # Test files
โ”œโ”€โ”€ drizzle.config.ts        # Drizzle ORM config
โ”œโ”€โ”€ next.config.js
โ”œโ”€โ”€ tailwind.config.js
โ”œโ”€โ”€ tsconfig.json
โ””โ”€โ”€ package.json

8.2 CI/CD Pipeline

Deployment Pipeline
Push to Branch
โ†’
Lint & Type Check
โ†’
Run Tests
โ†’
Build
โ†“
Preview Deploy (PR)
or
Production Deploy (main)
โ†“
Run DB Migrations
โ†’
Smoke Tests
โ†’
Live โœ“

8.3 Environment Variables

# .env.example

# Database
DATABASE_URL="postgresql://..."
DIRECT_URL="postgresql://..."

# Auth
BETTER_AUTH_SECRET="..."
BETTER_AUTH_URL="https://promptship.dev"

# AI Providers
ANTHROPIC_API_KEY="sk-ant-..."
OPENAI_API_KEY="sk-..."

# Payments
STRIPE_SECRET_KEY="sk_live_..."
STRIPE_WEBHOOK_SECRET="whsec_..."
RAZORPAY_KEY_ID="rzp_live_..."
RAZORPAY_KEY_SECRET="..."
RAZORPAY_WEBHOOK_SECRET="..."

# Redis
UPSTASH_REDIS_REST_URL="..."
UPSTASH_REDIS_REST_TOKEN="..."

# Email
RESEND_API_KEY="re_..."

# Video
MUX_TOKEN_ID="..."
MUX_TOKEN_SECRET="..."

# Analytics
NEXT_PUBLIC_POSTHOG_KEY="..."
SENTRY_DSN="..."

8.4 Monitoring & Alerting

Sentry

  • Error tracking
  • Performance monitoring
  • Release tracking
  • Slack alerts for P0 issues

Vercel Analytics

  • Core Web Vitals
  • Page-level performance
  • Real user monitoring

PostHog

  • Product analytics
  • Conversion funnels
  • Feature flags
  • Session recordings

9 Security Architecture

9.1 Security Layers

Layer Protection Implementation
Edge DDoS, Bot Protection Cloudflare, Vercel WAF
Transport Encryption in Transit HTTPS everywhere, TLS 1.3
Authentication Identity Verification Better Auth, Magic Links, httpOnly cookies
Authorization Access Control Tier-based permissions, RBAC for admin
Application Input Validation Zod schemas, parameterized queries
Data Data Protection Encryption at rest (Neon), hashed tokens
Secrets Credential Management Vercel Environment Variables, no .env in repo

9.2 Authentication Security

// Security Headers (next.config.js)

const securityHeaders = [
  {
    key: 'X-DNS-Prefetch-Control',
    value: 'on'
  },
  {
    key: 'Strict-Transport-Security',
    value: 'max-age=63072000; includeSubDomains; preload'
  },
  {
    key: 'X-Frame-Options',
    value: 'SAMEORIGIN'
  },
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff'
  },
  {
    key: 'Referrer-Policy',
    value: 'origin-when-cross-origin'
  },
  {
    key: 'Content-Security-Policy',
    value: ContentSecurityPolicy.replace(/\s{2,}/g, ' ').trim()
  }
];

9.3 Data Protection

10 API Design

10.1 Internal API Routes

Endpoint Method Auth Description
/api/auth/[...all] * No Better Auth catch-all
/api/generate POST Yes AI code generation
/api/prompts GET Yes List prompts (filtered by tier)
/api/prompts/[id] GET Yes Get single prompt
/api/prompts/[id]/copy POST Yes Record prompt copy
/api/favorites GET, POST, DELETE Yes Manage favorites
/api/generations GET Yes User's generation history
/api/user/settings GET, PATCH Yes User preferences
/api/webhooks/stripe POST Signature Stripe webhooks
/api/webhooks/razorpay POST Signature Razorpay webhooks

10.2 Request/Response Examples

// POST /api/generate

// Request
{
  "templateId": "hero-cinematic",
  "framework": "react",
  "options": {
    "style": "glassmorphism",
    "primaryColor": "#6366F1",
    "darkMode": true,
    "animationLevel": "dynamic",
    "borderRadius": 16
  },
  "customInstructions": "Add a newsletter signup form"
}

// Response (200 OK)
{
  "success": true,
  "data": {
    "id": "gen_abc123",
    "code": "import React from 'react';\n\nexport default function Hero() {\n  ...",
    "framework": "react",
    "tokensUsed": 1247,
    "creditsRemaining": 84
  }
}

// Response (402 - No Credits)
{
  "success": false,
  "error": {
    "code": "INSUFFICIENT_CREDITS",
    "message": "You have 0 credits remaining. Upgrade to continue.",
    "upgradeUrl": "/pricing"
  }
}

10.3 Public API (Phase 2)

๐Ÿ”ฎ Future: Public API for Team Tier

In Phase 2 (Month 6+), we'll expose a public API at api.promptship.dev for Team tier users to integrate AI generation into their own tools. This will include API keys, rate limiting, and usage billing.

11 Development Roadmap

12-Week Implementation Plan

Week Phase Deliverables Priority
1 Foundation Next.js setup, Neon DB, Drizzle schema, Better Auth P0
2 Foundation Dashboard layout, settings page, email templates P0
3 Foundation Prompt library UI, search, categories, copy function P0
4 Core AI service, Claude integration, prompt templates P0
5 Core Generator UI, live preview, code viewer P0
6 Core Stripe + Razorpay, webhooks, subscription logic P0
7 Content Mux setup, video player, progress tracking P1
8 Content Course navigation, 20+ prompts added P1
9 Content 40+ prompts, 5 course videos, admin panel P1
10 Launch Landing page, SEO, analytics setup P0
11 Launch Beta testing, bug fixes, performance optimization P0
12 Launch Product Hunt prep, final polish, LAUNCH ๐Ÿš€ P0

โœ“ Summary & Key Decisions

โœ… Architecture Decisions

  • Single Next.js app for all portals (cost efficient)
  • Route groups for logical separation
  • Serverless-first infrastructure
  • Edge-first caching strategy
  • Claude primary + OpenAI fallback for AI

โš ๏ธ Key Risks & Mitigations

  • AI costs โ†’ Rate limiting, caching, tiered access
  • Scaling โ†’ Serverless auto-scales, Redis queue
  • Security โ†’ Edge WAF, parameterized queries, auth everywhere
  • Vendor lock-in โ†’ Standard PostgreSQL, portable code
๐ŸŽฏ Bottom Line

This architecture supports 50,000+ users at under $2,500/month infrastructure cost while maintaining 80%+ gross margins. The serverless approach means costs scale with revenue, not ahead of it.