Build & Deploy a Full Stack AI Short Video Ads Generator | PERN Stack, Gemini API, SaaS Project

Project overview

• Project: Full-stack SaaS that generates UGC-style short video ads from two inputs — a product image and a model image — using AI. The app produces image previews and short videos (with narration/audio), lets users download assets, publish to a community feed, and manages credits/subscriptions.
• Purpose of the tutorial: end-to-end build — implement the frontend, add auth & billing, implement backend image/video generation logic, hook up the database and third-party services, and deploy to a VPS.

Core technologies & services used

• Frontend
  • React (Vite + TypeScript), Tailwind CSS
  • Prebuilt UI template: Pixel IO (prebuiltui.com)
  • React Router, Lucide icons, React Hot Toast
• Backend
  • Node.js + Express + TypeScript
  • multer for multipart uploads
  • Axios for HTTP calls
• Database & ORM
  • Neon (serverless Postgres)
  • Prisma (schema, migrations, client)
• Auth & billing
  • Clerk (auth UI components, subscription/billing, webhooks)
• AI
  • Google Gemini API (GenAI)
    • Gemini 3 Pro for image generation
    • VEO/V3 (video) models for video generation
• Media storage
  • Cloudinary (uploads for generated images and videos)
• Observability & error monitoring
  • Sentry (server-side instrumentation + demo debug route)
• Deployment & process management
  • PM2, Nginx (reverse proxy), Certbot (Let’s Encrypt SSL)
  • Hostinger VPS (Ubuntu)
• Other tools & practices
  • VS Code dev port forwarding for webhook testing
  • Environment variables via .env

Product features implemented

• UI pages:
  • Home, Create/Generate, My Generations, Community (public), Plans, Result (single project), Loading
• Upload zone
  • Drag & drop or click uploads for product/model images with preview and remove
• Two-step generation flow
  1. Generate image (deducts ~5 credits)
     • Creates combined product/model image via Gemini
     • Uploads image to Cloudinary and stores URL in DB
  2. Generate video (deducts ~10 credits)
     • Uses generated image, sends to video model, polls operation until complete
     • Uploads MP4 to Cloudinary and stores URL in DB
• Credits & subscription
  • Clerk subscription plans map to credit amounts (example: Starter 25, Pro 80, Ultra 300)
  • Frontend shows available credits; backend enforces credit checks and refunds on failure
• Project management
  • Users can view, publish/unpublish (to community), and delete projects
  • Community page lists published items; hovering plays video; actions include download, share, delete
• User flows
  • Sign-up & sign-in with Clerk (email or Google)
  • Clerk webhooks handle user.created / user.updated / user.deleted to sync DB and payment events to increment credits
• Error handling & monitoring
  • Sentry integrated; tutorial includes a test/error route and demonstrates how issues surface in Sentry

Credit model example: image generation ≈ 5 credits, video generation ≈ 10 credits (configurable in backend).

Tutorial contents — chapters & key tasks

1. Frontend
   • Use Pixel IO React template; set up client project structure, Tailwind, favicon, assets
   • Build navigation (React Router), hero, features, pricing, FAQ, CTA, footer
   • Create pages: generate, community, my generations, result, plans, loading
   • Implement UploadZone component (TypeScript types, preview, remove)
   • Implement generator form (project name, product name, description, aspect ratio, prompt) and UI loading states
2. Auth & billing (Clerk)
   • Add ClerkProvider to frontend with publishable key and theme
   • Replace static auth UI with Clerk components; add user menu (generate, my generations, community, plans)
   • Integrate Clerk Pricing Table and server-side plan mapping
3. Backend basics (Express + TypeScript)
   • Create server with tsconfig, start scripts, dotenv, and CORS
4. DB & ORM (Neon + Prisma)
   • Create Neon project, set DATABASE_URL, write Prisma schema (User, Project)
   • Run prisma migrate and prisma generate; create Prisma client
5. Clerk webhooks & middleware
   • Add @clerk/express middleware to server
   • Implement auth middleware to protect routes and augment request types
   • Create webhook controller to:
     • upsert/delete users on user.created / user.updated / user.deleted
     • handle payment/subscription events to increment credits based on plan slug
   • Configure webhook endpoint in Clerk dashboard (use forwarded URL or public endpoint)
6. Controllers / routes
   • User controllers: get credits, list projects, get project by id, toggle publish
   • Project controllers:
     • create project: accept multipart/form-data via multer, verify/decrement credits, upload source images to Cloudinary, create temporary DB record, call Gemini to generate combined image, upload result to Cloudinary, update DB, refund on failure
     • create video: verify/decrement credits, fetch generated image, call video model, poll operation until ready, download video, upload to Cloudinary, update DB
     • get published projects / delete project
7. Sentry
   • Install @sentry/node, add instrumentation in server.ts, create a debug error route
   • Demonstrate Sentry dashboard and “Fix with Sentry” assistance
8. Frontend ↔ Backend integration
   • Configure Axios with VITE_BASE_URL
   • Obtain Clerk token in frontend (useAuth/getToken) and attach Authorization: Bearer for protected API calls
   • Implement API calls: create project, fetch project, generate video, get user projects, delete, toggle publish
   • Show credits and redirect to result page after generation
9. Deployment (Hostinger VPS) — full walkthrough
   • VPS setup: Ubuntu server, domain, SSH access
   • Install Node/NPM, Nginx, Git, PM2, Certbot; configure UFW firewall rules
   • Clone repo into /var/www, create .env files for server & client with Neon/Clerk/Cloudinary/Gemini keys and Clerk webhook signing secret
   • Server: npm install, PM2 start via npm script, pm2 save, pm2 startup
   • Client: npm install, npm run build; configure Nginx site for frontend root to /var/www//client/dist
   • Create separate Nginx site for API subdomain (api.example.com) proxy_pass to localhost:5000; enable sites and reload nginx
   • Obtain SSL with certbot for domain and subdomains; verify renewal
   • Common post-deploy fix: increase client_max_body_size in nginx.conf if uploads hit 413 errors
   • Update Clerk webhook endpoint to permanent API subdomain (api.example.com/api/clerk)
   • Demo: sign up, generate image/video, credits deducted (image −5, video −10), download generated media

Practical notes & gotchas

• Credit costs are configurable, but example defaults used: image ≈ 5 credits, video ≈ 10 credits.
• Clerk webhooks require a public permanent endpoint. During development use VS Code port forwarding or ngrok; update Clerk webhook to the deployed API URL later.
• Nginx default client_max_body_size can block uploads (413 Request Entity Too Large) — increase to e.g., 100M in nginx.conf if needed.
• Google Cloud / Gemini: access to Gemini Pro and video models often requires a Google Cloud project with billing/credits and proper API access from ai.studio.google.
• Robust error handling:
  • Refund credits on generation failures
  • Set is_generating=false and store error messages in DB for failed projects
• Sentry: captures exceptions and request context; useful for debugging AI integration and webhook issues
• Security: protect API routes using Clerk middleware and type augmentation for request.auth

Resources & artifacts shared

• GitHub repo(s) referenced (author’s repo: greatstackdev / Greatest Tech assets)
• Assets: sample images/videos and template files linked in the video description
• Hostinger VPS guide and affiliate link used for the deployment walkthrough
• Example Prisma schema, migrations, and Clerk webhook payload handling included in tutorial assets

Main speakers / sources

• Presenter / tutorial author: Greatest Tech / Great Stack Dev
• Third-party services cited: Google Gemini (GenAI), Clerk, Neon, Prisma, Cloudinary, Sentry, Hostinger VPS, Pixel IO, Lucide, React, Tailwind

If you want, I can extract and produce any of the following as clean artifacts:

• concise checklist of commands for server setup
• Nginx config snippets (including client_max_body_size fix)
• the Prisma schema used in the tutorial
• Clerk webhook payload handling example and middleware snippets