Build & Deploy a Full Stack AI Sass application using Next.js 15, Supabase, Replicate API and Stripe

Overview

Transform your photos with AI! In this tutorial, we’ll build Pictoria AI, a full-stack AI-powered SaaS application for generating professional, high-quality AI-enhanced photos. With tools like Next.js, Supabase, Stripe, and Replicate, you’ll gain hands-on experience building and deploying a scalable AI-driven platform similar to PhotoAI.

What You'll Learn

By the end of this tutorial, you’ll be able to:
🌟 Set up your development environment with Next.js, Tailwind CSS, and Shadcn UI for sleek, modern UI.
🌟 Integrate Supabase for authentication, database management, and storage.
🌟 Train an AI model using your personal photos.
🌟 Use Replicate API to deploy custom AI models for photo generation.
🌟 Implement secure payment systems using Stripe.
🌟 Manage application state with Zustand.
🌟 Handle email notifications efficiently using Resend.
🌟 Configure webhooks for long-running tasks.
🌟 Follow best practices for structuring full-stack applications.

Key Features of This Portfolio Website

• 🛠️ Fully functional SaaS built with Next.js.
• 💻 Beautiful, responsive landing page.
• 🤖 AI model training with personalized photos.
• 🖥️ Intuitive event-monitoring dashboard.
• 🎯 Generate AI-powered professional LinkedIn headshots.
• 🌟 Sleek UI with Shadcn UI.
• 📱 Tools for social media content generation.
• 💳 Integrated secure payment system.
• ✉️ Real-time email notifications.
• 📊 Built-in analytics dashboard.

Libraries Used

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS, Shadcn UI
• Database: Supabase (PostgreSQL)
• Authentication: Supabase Auth
• AI Integration: Replicate AI API
• Payment Processing: Stripe
• Email Service: Resend
• Language: TypeScript

Code Links

• Starter Code Repo: Github Repo
• Final Source Code (Personal Use): Link
• Final Source Code (Commercial Use): Link

Timestamps

• Intro @00:00:00
• AI Sass Demo @00:01:24
• Scrimba (Sponsor) @00:15:58
• Setup & Installation @00:18:16
• Authentication pages @00:25:15
• Creating Supabase project @01:01:45
• Adding SSR authentication with Supabase @01:02:55
• App sidebar and Internal pages @01:36:55
• Image generation using Replicate API @02:04:40
• Storing image in Supabase @03:26:55
• Create Image gallery component @03:56:40
• Flux model Training @04:49:22
• Implementing Webhook @05:52:34
• Render all models @06:13:36
• Using our custom model to generate images @07:20:15
• Adding billing/subscription functionality using Stripe @07:39:17
• Stripe setup @07:46:00
• Creating Pricing component @08:18:22
• Adding credits functionality @09:22:30
• Creating Account Settings page @10:47:05
• Adding Reset password functionality @11:02:35
• Creating Dashboard page @11:19:50
• Adding Landing page @11:49:50
• Making it mobile responsive @12:59:45