Build & Deploy: Full Stack AI Course Generator SaaS with NextJS 13, OpenAI, Stripe, TailwindCSS

Video Description

GitHub Repo: https://github.com/elliott-chong/learning-journey-yt Welcome to this comprehensive full-stack tutorial where we delve into the latest features of NextJS 13.4. Join me as we build an entire project from the ground up and seamlessly deploy it to Vercel 🚀. Throughout this journey, you will gain expertise in the following areas: 🌐 Leveraging NextJS 13's cutting-edge App Router. 💳 Managing Payments seamlessly through Stripe. 🎨 Harnessing the beauty of Shadcn and the power of Tailwind CSS. 🧠 Unleashing the capabilities of OpenAI's API for Language Model usage. 🗃️ Interacting with databases with the efficiency of ORMs. 🚀 Self-hosting your NextJS project on DigitalOcean. 🔒 Securing your deployment with a custom domain name and SSL certificate. 🔄 Implementing a robust CI/CD deployment pipeline with GitHub Actions. 📋 Pastebins for Code Timestamps Timestamp 17:54 prisma db.ts file https://pastebin.com/hYYzuFY9 Timestamp 20:00 schema.prisma template code https://pastebin.com/S325fZ4P Timestamp 1:45:00 lib/gpt.ts https://pastebin.com/EiggjLeq Timestamp 1:58:42 lib/unsplash.ts https://pastebin.com/nkykdzdV Timestamp 2:59:51 lib/youtube.ts https://pastebin.com/rqhdDLiU Timestamp 5:48:47 .github/deploys.deploy.yml https://pastebin.com/7XPPNecM 🙏 Credits & Inspirations - A heartfelt thank you to my friends for their unwavering support throughout this project. - Special thanks to Mo for sparking the idea for this project. - Inspiration drawn from https://www.youtube.com/@joshtriedcoding for coding videos. - Thumbnail inspiration credit: https://www.youtube.com/ @codewithantonio 📚 Referenced Resources Shadcn best practices form: https://youtu.be/26bSDD9IEG4 Strict JSON GPT repo: https://github.com/tanchongmin/strictjson/tree/main Connect With Me 🔥🚀 : GitHub: https://github.com/elliott-chong Instagram: https://instagram.com/elliottchong_ Website: https://elliottchong.tech 📖 Chapters Overview 0:00 Intro & Demo 8:02 Set Up NextJS 10:58 Set Up Shadcn 14:18 Set Up PlanetScale & Prisma 19:15 Set Up NextAuth 35:49 Navbar 58:09 Theme Toggle 1:02:53 Create Course Form 1:31:00 Creating the Chapters Endpoint 1:44:00 Strict GPT JSON 2:08:00 Confirming Chapters 2:09:00 Exploring React Query 2:20:51 Gathering Chapters Information 2:27:08 Continuing Chapter Confirmation 2:45:08 Forwarding Refs to Chapter Cards 2:53:55 Retrieving Chapter Information 2:57:31 Utilizing the YouTube API 3:08:02 Generating Questions 3:34:58 Crafting the Course Page 3:47:26 Summarizing the Main Video 3:53:55 Designing Quiz Cards 4:07:11 Navigating Next & Previous Chapters 4:12:03 Building the Gallery Page 4:21:06 Seamless Stripe Integration 4:59:33 Integrating Credits 5:02:45 Loading Pages 5:06:14 Deployment Strategies 5:07:55 Self-hosting on DigitalOcean 5:11:12 Implementing Docker 5:47:07 Embracing GitHub Actions for CI/CD 5:57:00 Outro Join me on this exciting journey to master NextJS 13.4 and unlock the potential of full-stack development. Let's code and create something amazing together! 🚀👨‍💻 #NextJS #FullStackDevelopment #WebDevelopment #StripePayments #ReactQuery #React #TailwindCSS #OpenAI #DatabaseORM #DigitalOceanHosting #GitHubActions #CI/CDPipeline #CodingTutorial #Programming #VercelDeployment #Docker #GitHubRepo #WebDevelopmentTutorial #FrontendDevelopment #BackendDevelopment #CustomDomain #SSL #YouTubeAPI #Prisma #CreditIntegration #GalleryPage #QuizCards #PaymentIntegration #StrictJSONGPT #CodingInspirations #GitHub #Instagram #Website