Video: 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!