Build a Complete SaaS With Next.js, Tailwind, React, Hono.js (2024)

In this single video, we're building an entire, modern Next.js SaaS for real-time event notifications from start to finish. ⭐Clerk: https://link.joshtriedcoding.com/clerk ⭐Discord for questions/answers: https://discord.gg/4vCRMyzgA5 ⭐GitHub Repo: https://github.com/joschan21/pingpanda --- Highlights: 🛠️ Complete SaaS built in modern Next.js 💻 Beautiful landing page included 🎨 Custom artworks made by a professional illustrator ✉️ Real-time event messages via Discord 🖥️ Clean & intuitive event monitoring dashboard 💳 Secure payments using Stripe 🛍️ Customers can purchase your PRO plan 🌟 Clean, modern UI on top of shadcn-ui 🔑 Authentication using Clerk ⌨️ 100% written in TypeScript 🎁 ...much more --- IMPORTANT Since this video released, there's a new version of JStack. To follow along with the same version as in the video, use this clone command: git clone -b preserve-old-master https://github.com/upstash/jstack --- relevant links to follow along Clerk quickstart: https://link.joshtriedcoding.com/clerk-quickstart jStack repo (star if youre cool): https://link.joshtriedcoding.com/jstack/tree/preserve-old-master Copy paste list (optional): https://github.com/joschan21/pingpanda/blob/main/COPY-PASTE-LIST.md --- chapters 0:00 Intro 0:40 What you'll learn 3:42 Demo 10:54 Project setup 19:42 Landing page & reusable components 56:18 Creating our navbar w/ auth 1:26:55 Creating our fully featured discord UI 2:39:18 Creating our beautiful bento grid 3:50:52 Creating our auth pages 3:59:11 Database modelling 4:18:07 Syncing users to our database 4:30:07 Writing our first router 4:56:27 Creating our user dashboard 7:37:17 Creating our event details page 8:26:48 Discord integration for real-time messages 9:00:22 We got our first discord message!! 9:05:24 Finishing our event details page 10:06:39 Creating an advanced data table 10:28:28 Integrating secure payments w/ pro plan 10:59:31 Creating a beautiful pricing page 11:13:37 Final UX improvements 11:16:09 Payment thank-you modal 11:26:49 Creating our user settings pages 11:42:44 Integrating stripe webhook 11:47:39 Deployment 11:56:11 Final demo && we're DONE!! Thanks so much to Clerk for making such a huge project possible by sponsoring this video!