Studio Prompt 3.0 - AI Creative Suite Full-Stack Web Application | React + Node.js + TypeScript

Studio Prompt 3.0 - AI Creative Suite

Full-Stack Web Application | React + Node.js + TypeScript

Overview

A professional AI-powered creative platform for filmmakers and content creators featuring 4 core applications with subscription-based monetization.

Frontend Technologies

• React 18

  with TypeScript and Vite build system

• Shadcn/ui

  +

  Radix UI

  primitives for accessible components

• Tailwind CSS

  with custom theming and dark mode support

• TanStack Query

  for server state management

• Wouter

  for client-side routing

• React Hook Form

  +

  Zod

  for form validation

• Framer Motion

  for animations

• DnD Kit

  for drag-and-drop functionality

Backend Technologies

• Express.js

  with Node.js and TypeScript

• PostgreSQL

  database with

  Drizzle ORM

• Passport.js

  for authentication (local strategy)

• Stripe

  for subscription payments

• OpenAI API

  (GPT-4o-mini, DALL-E 3, Sora 2)

• Google Gemini

  for image generation

• Resend

  for transactional emails

• Sharp

  for image processing/watermarking

• Helmet.js

  + rate limiting for security

Core Features

1. AI Prompt Builder

• Scene-by-scene video prompt builder

• 30+ cinema styles (film noir, documentary, anime, etc.)

• AI-powered prompt generation with GPT-4o-mini

• Real-time Sora 2-compliant prompt preview

• Drag-and-drop scene reordering

• Multi-project management with auto-save

• Export to TXT functionality

• Duration tracking per scene

2. AI Image Generator

• Dual-engine support (OpenAI DALL-E 3 + Google Gemini)

• AI-powered field suggestions

• Server-side watermarking for free tier

• Multiple aspect ratios and styles

• Request history tracking

• Subscription-based quota enforcement

3. Sora 2 Video Generator

• Real video generation via OpenAI Sora 2 API

• Async job queue with polling system

• 8-12 second HD video clips

• 1080p watermark-free output for subscribers

• Video generation tracking and analytics

4. Make Me an Ad Wizard

• 5-step guided wizard for video ad creation

• 7 niche templates (real estate, fitness, SaaS, etc.)

• Product image upload with object storage

• AI-generated scripts and visual styles

• Multiple ad tone options

Authentication & Security

• Email/password registration with bcrypt hashing

• Email verification via Resend API

• Forgot password flow with secure tokens

• Account lockout after failed attempts

• Session management with secure cookies

• Rate limiting on all endpoints

• Geo-blocking for restricted regions

• CSRF protection

Subscription System (Stripe)

• 3 paid tiers: Starter ($9/mo), Pro ($19/mo), Business ($39/mo)

• Monthly and yearly billing options

• Webhook handling for subscription lifecycle

• Customer portal for self-service management

• Quota enforcement per tier

Admin Dashboard

• User management and analytics

• Email verification status tracking

• Subscription management

• Video generation statistics

• OpenAI API usage tracking with cost estimates

• User messaging system

SEO & Performance

• Dynamic sitemap and robots.txt

• Schema.org structured data

• Meta tags and Open Graph support

• Lazy loading and code splitting

• React.memo, useMemo, useCallback optimizations

• Aggressive caching strategies

Community Features

• Browse and publish prompts

• Upvote system

• Style filtering

• "Use as template" functionality

• Personal analytics dashboard

• Reputation badges

Homepage Demo System

• 3 interactive demos with IP-based usage limits

• HMAC-SHA256 IP hashing for privacy

• One-time demo generation per visitor

• Blurred paywall overlays for conversion

This represents 50,000+ lines of production code across frontend, backend, database models, and API integrations.