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:   / discord

⭐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/cler...

jStack repo (star if youre cool): https://link.joshtriedcoding.com/jsta...

Copy paste list (optional): https://github.com/joschan21/pingpand...

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

SponsorThanks so much to Clerk for making such a huge project possible by sponsoring this video!