1️⃣ Get Started with Inngest 👉 https://innge.st/yt-sonny-1
2️⃣ Get Started with Schematic 👉 https://schematichq.com/papareact?utm...
3️⃣ Get Started with Clerk 👉 https://go.clerk.com/iBbiHIf
💻 Get the Complete AgentKit Source Code for FREE 👉 https://www.papareact.com/agent-kit-form
🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course
🛠️ Looking for the Code for this build? (Plus over 55+ others!)
https://links.papareact.com/github
🎯 What You'll Learn:
👉 Full-Stack Development with Next.js 15
Server Components & Server Actions for secure file handling and uploading
Modern app router architecture with optimized routing
TypeScript for type-safe application development
👉 SaaS Application Architecture
Feature flag implementation with Schematic HQ
Subscription-based access to premium features
Usage-based pricing model
User entitlements and permission management
👉 AI-Powered Receipt Processing
Document OCR with AI integration
Intelligent receipt data extraction
Expense categorization with the power of AI Agents
👉 Authentication & User Management
Secure authentication with Clerk
User profiles and upload history
Protected routes and premium features
👉 Advanced File Handling
Drag-and-drop file uploads with DND Kit
Multi-file processing capabilities
Secure file storage and retrieval
👉 Modern UI/UX
Responsive design with Tailwind CSS
Beautiful components with Shadcn UI
Interactive feedback during file processing
Upload animations and transitions
Comprehensive error handling with user feedback
👉 SaaS Monetization & Business Model
Tiered subscription plans implementation
Feature-gated functionality
Usage quotas and limits
Upgrade paths and user conversion
🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter
🕐 TIMESTAMPS:
0:00 Introduction
1:04 Build Demo
10:53 Build Tech Stack & Breakdown (1/2)
13:25 Explaining Inngest
16:07 Schematic for Monetizing the App
22:18 Build Tech Stack & Breakdown (2/2)
28:19 Initialising the Build with Convex
37:10 Setting Up Clerk for Authentication
47:34 Building the Header Component
58:18 Setting Up Schematic & Stripe for Payments
1:07:29 Setting Up Pricing Plans with Schematic & Stripe
1:13:33 Setting Up Entitlements with Schematic
1:17:00 Further Configuring the Pricing Plans with Schematic
1:21:49 Implementing Schematic in the Build
1:43:58 Setting Up Inngest
1:51:59 Building the Landing Page
2:02:27 Creating the My Receipts Page
2:03:44 Implementing the Drag & Drop File Upload Dropzone
2:20:39 Implementing the File Upload to Convex Functionality
2:39:21 Stylizing the Drag & Drop File Upload Dropzone
2:44:06 Building the Receipt List Component
2:52:32 Implementing a Inngest Agent Flow (with AgentKit)
3:04:06 Creating the Database & Receipt Scanning AI Agents
3:19:34 Continuing to Build the Inngest AgentKit Network
3:24:07 Testing the Inngest AI Agentic Flow
3:31:49 Building the Receipt Page & Feature Gating with Schematic
3:46:02 Implementing the Delete Receipt Functionality
3:53:09 Deploying to Vercel & Final Build Demo
4:17:21 Final Build Summary
4:19:07 Outro
Let’s get it PAPAFAM 🔥.
DISCLAIMER: This Video is made for informational and educational purposes only. Copyright Disclaimer Under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for educational purposes.
#nextjs15 #ai #reactjs #aiagent #inngest #schematichq #javascript #cms #clerk #lms #learning #coding #tutorial #beginner #programming #stripe #saas
