REMIX: Build a SaaS product using Next.js, Supabase, Stripe, and ✨Sequin✨

This repo accompanies and remixes this free egghead course.

🔍 About

For your frontend, this application will be using Next.js and Tailwind CSS. You will learn how to maneuver around an app and build a strong static pricing page.

For your backend AND authentication, we will make use of Supabase and Sequin.

Supabase is open source and is all of the backend services that you will need to build your site. It includes a dedicated and scalable Postgres database and user management with Row Level Security!

Sequin will sync all your Stripe data directly to your Supabase database. Sequin will handle all the webhooks and API calls so you can work with your Stripe data natively in Supabase.

Lastly, for payments, you will be using Stripe. It will be an individual payment checkout system that will create and update users' subscriptions.

Jon & Eric will take you through all of this and more in just 1 hour and 10 minutes 50 minutes!

🔁 Why Remix?

Sequin and Supabase fit together. We are seeing more and more developers using Sequin to sync their API data into Supabase so they can build faster. Instead of setting up webhooks, wrangling API params, and gluing together functions to keep data up to date - you can just use Sequin.

Yes, we could have written a completely new tutorial. But this tutorial is amazing. Building off the foundation set by Jon allows us to show more developers how Sequin fits in. And because this is a fork, you can compare the approach of building with and without Sequin.

You'll find that with Sequin you don't need to build as much.

You don't need to create a profile table and the associated triggers and functions to populate it. With the Supabase user's table and Sequin's Stripe tables - you have everything you need.

You don't need to touch webhooks at all. No ngrok, switch statements, or issues with your data mismatching Stripe.

And you don't need to create nested Stripe API queries to pull in your products or prices. You can just use Supabase.

Today, there are some manual RLS queries and permission grants we can easily imagine going away soon. We're optimistic that as Supabase improves multi-schema support, this will only get easier and easier.

🎓 Instructor(s)

This course was originally created by Jon Meyers. Jon is a Software Engineer, Educator and Hip Hop Producer from Melbourne, Australia. He's passionate about web development and enabling others to build amazing things!

Jon's courses at egghead.

Enjoyed the course? Follow Jon on Twitter and subscribe to his YouTube channel.

The course is remixed by Eric Goldman. Co-founder of Sequin in California.

Learn more about how Sequin works by creating an account and checking our their docs.

🗺 Table of Contents

Remix Key:

• ✅ : The lessons requires no alterations
• 🔁 : Remix. You'll see some changes here in the repo.
• Skipped all together

1. ✅ Create a Supabase Project
2. ✅ Create a Table in Supabase
3. ✅ Create a Next.js App with Tailwind CSS
4. ✅ Query Data From Supabase Using Next.js
5. ✅ Use Next.js to Query a Single Record From Supabase
6. ✅ Implement Third Party Authentication with GitHub in Next.js Using Supabase
7. Add Relationships Between Tables in Supabase Using Foreign Keys
8. Use Postgres Functions to Implement Database Logic with Supabase
9. Use Supabase to Subscribe to Database Events with Postgres Triggers
10. 🔁 Setup Sequin and Create a Stripe Customer with Next.js API Routes
11. Generate a Custom API Key to Secure an API Route in Next.js
12. Automatically Create a Stripe Customer for Each User with Supabase Function Hooks
13. 🔁 Make User State Globally Accessible in Next.js with React Context and Providers
14. 🔁 Implement Authorization Using Row Level Security and Policies
15. 🔁 Implement Gated Content Using Row Level Security with Supabase
16. 🔁 Use Stripe.js to Query Product Data and Pre-Render with Next.js
17. 🔁 Create Shared Nav Bar in Next.js with _app.js
18. 🔁 Query Dynamic Supabase Data in Static Pages Using Next.js
19. 🔁 Pass Supabase Session Cookie to API Route to Identify User
20. 🔁 Charge Customer for Stripe Subscription in Next.js
21. Subscribe to Stripe Webhooks Using Next.js API Routes
22. Use the Supabase Service Key to Bypass Row Level Security
23. 🔁 Create a Client Page that Requires Authentication in Next.js Using getServerSideProps
24. 🔁 Allow Customer to Manage Their Subscription with Stripe Customer Portal
25. 🔁 Subscribe the UI to Database Changes with Supabase Real-Time
26. ✅ Configure Stripe for Production and Deploy Next.js Application with Vercel