Loading video player...
π Build an AI Image Editor SaaS with Next.js 15, Neon, Polar, Better Auth & ImageKit ImageKit β https://tinyurl.com/yc4uz5t6 Neon β https://get.neon.com/BzsDb4L Eraser Diagram β https://app.eraser.io/workspace/WQa2bvFxwX5kaoqG3KfN?origin=share Welcome back to the channel! In this video, Iβll show you how to build a fully featured AI Image Editor SaaS application using the latest technologies β Next.js 15, Neon (PostgreSQL), Polar payments, Better Auth authentication, and ImageKit for AI-powered image editing β all deployed on Vercel, completely free to get started. Also I have used ImageKit. ImageKit is an image and video API with AI powered DAM. π©βπ» Learn to Code (Save 20% Pro) https://scrimba.com/s0fg0h412l?via=reactproject β Key Features: Secure user authentication with email, password & social logins (Better Auth) Payments & credits system with Polar AI-powered image editing: background removal, upscaling & smart cropping Project management with saved history in database Customer portal with invoices, billing info & credit packs Fully responsive design with modern UI Real-time credit deduction system Smooth transitions & professional SaaS layout Deployed serverlessly on Vercel π§ Built With: Next.js 15 (App Router + Server Actions) Tailwind CSS for styling Neon + Prisma for database Polar for payments Better Auth for authentication ImageKit for image storage, optimisation & AI features Vercel for free, scalable deployment π‘ Perfect for anyone learning full-stack development, Next.js SaaS apps, or integrating AI features into modern projects. π Useful Links: ImageKit β https://tinyurl.com/yc4uz5t6 Neon β https://get.neon.com/BzsDb4L Polar β https://polar.sh Better Auth β https://better-auth.com GitHub Repo β https://github.com/sahandghavidel/ai-image-editor-saas-app Eraser Diagram β https://app.eraser.io/workspace/WQa2bvFxwX5kaoqG3KfN?origin=share If you enjoy this project, donβt forget to like, subscribe, and turn on notifications, so you donβt miss the next video, where we set up the development environment and start building the template. #nextjs #ai #saas #fullstackdevelopment #imagekit β± Timestamps: 00:00 - Intro 07:30 - Install Next.js and Tailwind CSS and create our first template 22:50 - Add Authentication using Better Auth 50:46 - Add sidebar components and utilities 01:08:17 - Add user credits retrieval and display in sidebar component 01:14:30 - Add Polar authentication integration and settings management 01:44:01 - Integrate ImageKit for image upload and processing 03:12:32 - Add Projects page with project management features and UI components 03:23:08 - Implement dashboard page with user project stats and quick actions 03:30:46 - Add customer portal redirect and enhance homepage layout with features, testimonials, and pricing sections 03:41:01 - Deploy to Vercel