🔴 React.js Clones by PAPA React - 🔴 Let's build a Receipt Tracker SaaS with NEXT.JS 15 (AI Agents, Inngest, Schematic, Stripe, Clerk)

1️⃣ Get Started with Inngest 👉 https://innge.st/yt-sonny-1 2️⃣ Get Started with Schematic 👉 https://schematichq.com/papareact?utm_source=youtube&utm_campaign=sonny_20250317 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