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

> Build a Fullstack AI SaaS app like PhotoAI using Next.js, Supabase, Replicate, and Stripe. Learn AI model training, payment integration, and deployment step-by-step.

- **Source:** DevDreaming (https://devdreaming.com)
- **Canonical URL:** https://devdreaming.com/videos/build-ai-saas-app-nextjs-supabase-replicate-stripe
- **Author:** CodeBucks
- **Published:** 2024-12-09
- **Last updated:** 2025-01-27
- **Topics:** Web App, Next.js, AI

---

**[▶ Watch on YouTube](https://www.youtube.com/watch?v=7AQNeii5K7E)**

### 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](https://dub.sh/eIJ3Y9S)
- Final Source Code (Personal Use): [Link](https://dub.sh/28zS5DW)
- Final Source Code (Commercial Use): [Link](https://dub.sh/wYWBX9z)

### Timestamps

- Intro [@00:00:00](https://www.youtube.com/watch?v=7AQNeii5K7E&t=0s)
- AI Sass Demo [@00:01:24](https://www.youtube.com/watch?v=7AQNeii5K7E&t=84s)
- Scrimba (Sponsor) [@00:15:58](https://www.youtube.com/watch?v=7AQNeii5K7E&t=958s)
- Setup & Installation [@00:18:16](https://www.youtube.com/watch?v=7AQNeii5K7E&t=1096s)
- Authentication pages [@00:25:15](https://www.youtube.com/watch?v=7AQNeii5K7E&t=1515s)
- Creating Supabase project [@01:01:45](https://www.youtube.com/watch?v=7AQNeii5K7E&t=3705s)
- Adding SSR authentication with Supabase [@01:02:55](https://www.youtube.com/watch?v=7AQNeii5K7E&t=3775s)
- App sidebar and Internal pages [@01:36:55](https://www.youtube.com/watch?v=7AQNeii5K7E&t=5815s)
- Image generation using Replicate API [@02:04:40](https://www.youtube.com/watch?v=7AQNeii5K7E&t=7480s)
- Storing image in Supabase [@03:26:55](https://www.youtube.com/watch?v=7AQNeii5K7E&t=12415s)
- Create Image gallery component [@03:56:40](https://www.youtube.com/watch?v=7AQNeii5K7E&t=14140s)
- Flux model Training [@04:49:22](https://www.youtube.com/watch?v=7AQNeii5K7E&t=17362s)
- Implementing Webhook [@05:52:34](https://www.youtube.com/watch?v=7AQNeii5K7E&t=21154s)
- Render all models [@06:13:36](https://www.youtube.com/watch?v=7AQNeii5K7E&t=22416s)
- Using our custom model to generate images [@07:20:15](https://www.youtube.com/watch?v=7AQNeii5K7E&t=26415s)
- Adding billing/subscription functionality using Stripe [@07:39:17](https://www.youtube.com/watch?v=7AQNeii5K7E&t=27557s)
- Stripe setup [@07:46:00](https://www.youtube.com/watch?v=7AQNeii5K7E&t=27960s)
- Creating Pricing component [@08:18:22](https://www.youtube.com/watch?v=7AQNeii5K7E&t=29902s)
- Adding credits functionality [@09:22:30](https://www.youtube.com/watch?v=7AQNeii5K7E&t=33750s)
- Creating Account Settings page [@10:47:05](https://www.youtube.com/watch?v=7AQNeii5K7E&t=38825s)
- Adding Reset password functionality [@11:02:35](https://www.youtube.com/watch?v=7AQNeii5K7E&t=39755s)
- Creating Dashboard page [@11:19:50](https://www.youtube.com/watch?v=7AQNeii5K7E&t=40790s)
- Adding Landing page [@11:49:50](https://www.youtube.com/watch?v=7AQNeii5K7E&t=42590s)
- Making it mobile responsive [@12:59:45](https://www.youtube.com/watch?v=7AQNeii5K7E&t=46785s)

---

## Related on DevDreaming

- [All Video Tutorials](https://devdreaming.com/videos)
- [Blog & Tutorials](https://devdreaming.com/blogs)
- [Free Developer Tools](https://devdreaming.com/tools)

---

_This is the Markdown twin of a page on **DevDreaming** -- free developer tutorials, tools, and AI resources. Source of truth: the canonical HTML URL above._