Build A Full Stack AI SaaS Web App With Authentication In NextJS 15, Stripe, TypeScript, TailwindCSS
Check out clerk for easy user authentication: https://go.clerk.com/TFWZCy5
Learn to build a full stack AI SaaS web app with robust authentication using NextJS 15, TailwindCSS, Stripe, and TypeScript in this step-by-step tutorial that covers user authentication, payment integration, and modern responsive design.
Code: https://github.com/machadop1407/meal-...
Join my newsletter: https://www.pedrotech.co/newsletter
Want to buy me a coffee? https://buymeacoffee.com/pedrow
🚀 Learn ReactJS By Building 6 Projects: https://codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: https://codedamn.com/learn/graphql-fo...
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: https://www.pedrotech.co
Linkedin: / machadop1407
Instagram: / pedro.fmachado_
Github: https://github.com/machadop1407
Business Email: [email protected]
🌟 Gear / Hardware I Use and Recommend 🌟
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 https://amzn.to/42kqFuM 💻 Monitor
🖱️https://amzn.to/3C0ZhHb 🖱️ Mouse
📷 https://amzn.to/3OHJvbM 📷 My Camera
🎤 https://amzn.to/3oxSthj 🎤 My Microphone
⌨️ https://amzn.to/3oFPpj1 ⌨️ My Microphone
⚡ https://amzn.to/3MYMnzM ⚡ LED Lights In the Background
Timestamps:
00:00:00 Introduction & Overview
00:03:12 Create Navbar Component
00:04:40 Setup File & Folder Structure
00:08:05 Test Routes & Navbar UI
00:10:07 Setup Navigation & Logo Link
00:10:31 Clerk Authentication Setup
00:12:03 Create Clerk App Instance
00:13:03 Configure Env & Middleware
00:15:10 Wrap App with Clerk Provider
00:16:26 Expand Signup Route
00:17:47 Test Signup Component
00:20:06 Modify Navbar for Auth State
00:24:10 Display User Profile Image
00:28:05 Setup Signed-Out Navbar Links
00:32:09 Center Signup Page UI
00:33:06 Set Redirect After Signup
00:33:47 Update Homepage Content
00:35:00 Paste Landing Page HTML
00:36:04 Change Theme to Light Mode
00:37:03 Test "Get Started" Redirection
00:41:01 Middleware: Logging & Checks
00:43:00 Define Public Routes
00:44:04 Redirect Unauthenticated Users
00:47:15 Stripe Integration Overview
00:48:18 Track Subscription Status
00:49:01 Setup Neon Database & Prisma
00:50:04 Initialize Prisma Setup
00:52:08 Review Prisma Schema
00:53:03 Define User Profile Model
00:54:02 Migrate Database Schemas
00:59:05 Create Profile API Endpoint
01:01:00 Handle Profile Creation Request
01:05:00 Use React Query for API
01:09:00 Setup Stripe Checkout API
01:14:00 Create Stripe Checkout Session
01:18:00 Handle Stripe Webhook Events
01:24:00 Update Database Post-Checkout
01:29:00 Build Subscription Flow Logic
01:33:00 React Query: Checkout Mutation
01:37:00 Test Stripe Checkout Process
01:41:00 Integrate Toast Notifications
01:45:00 Verify Stripe Payment Success
01:50:00 Generate AI Meal Plan
01:55:00 Build Meal Plan Form & UI
02:00:00 Submit Meal Plan Request
02:05:00 Display AI Meal Plan Results
02:10:00 Build Weekly Meal Calendar
02:15:00 Profile Page Overview
02:20:00 Display User Profile Info
02:25:00 Show Subscription Details
02:30:00 Change Subscription Plan
02:35:00 Implement Plan Update API
02:40:00 Test Plan Update Mutation
02:45:00 Unsubscribe Functionality
02:50:00 Confirm Unsubscription Flow
02:55:00 Final Profile Page Updates
03:00:00 Generate Final AI Meal Plan & UI Adjustments
03:05:00 Review Meal Plan Display & Calendar Layout
03:10:00 Refine Meal Plan Styling & Data Presentation
03:15:00 Test Meal Plan Generation Across Days
03:20:00 Integrate UI Feedback (Spinner, Toasts)
03:25:00 Finalize Weekly Calendar Navigation
03:30:00 Profile Page: Update & Change Plan Flow
03:35:00 Test Subscription Plan Update & Redirects
03:40:00 Validate Unsubscription & Final Profile Cleanup
03:45:00 Finalize React Query & Toast Integration on Profile
04:15:00 Wrap-Up: Next Steps & Recommendations
04:20:00 Final Review of Project Functionality
#nextjs #saas
Смотрите видео Build A Full Stack AI SaaS Web App With Authentication In NextJS 15, Stripe, TypeScript, TailwindCSS онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь PedroTech 11 Февраль 2025, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 2,713 раз и оно понравилось 214 людям.