Summary of "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

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
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
Backend basics (Express + TypeScript)
- Create server with tsconfig, start scripts, dotenv, and CORS
DB & ORM (Neon + Prisma)
- Create Neon project, set DATABASE_URL, write Prisma schema (User, Project)
- Run prisma migrate and prisma generate; create Prisma client
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)
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
Sentry
- Install @sentry/node, add instrumentation in server.ts, create a debug error route
- Demonstrate Sentry dashboard and “Fix with Sentry” assistance
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
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: