In case you missed it, I spent six weeks building a SaaS project and writing about what I learnt.
Framework: Next.js
Hosting:
@vercel
Auth:
@auth0
DB:
@prisma
and
@supabase_io
Payments:
@stripe
Check out my weekly summary blog to follow along! ๐
Such a simple but awesome tool for
@supabase
! ๐โก๏ธ๐
Simply plug in your URL and anon key and see a visual representation of your database schema! ๐ง
Thanks
@zernonia
๐ฏ
We have completely rewritten our server-side auth docs! ๐
Check out how easy it it to use
@supabase
with any server-side language or framework, thanks to the new `
@supabase
/ssr` package! ๐ช
Our new `
@supabase
/ssr` package configures
@supabase
to use cookies! ๐ช
We've already written guides for Next.js, SvelteKit, Astro, Remix and Express! ๐
What server-side framework do you want to see next? ๐ค
Nobody will remember:
- Your salary
- Your fancy title
- How โbusyโ you were
- How stressed you were
- How many hours you worked
People will remember:
- Whether you alphabetised your imports
๐ How to do authentication properly with the Next.js App Router! ๐
This one has been updated to use Middleware for Protected Routes, rather than a Layout! ๐ง
@supabase
just won't stop shipping! ๐ข
Ready for day three? ๐
This one is the one I am most excited about all week!
REALTIME! โ๏ธ
Can't tell you exactly what's coming, but let's say we're patching up a gaping hole that makes this ready for prod! ๐
Wanna build apps with
@nextjs
and
@supabase
? ๐ค
This is the fastest possible way to get started - one command:
$ npx create-next-app -e with-supabase
โฒ Next.js App Router
โฒ Cookie-based, server-side auth
โฒ Styled with Tailwind
โฒ 100% TypeScript
We have been working Supa hard on optimizing the
@nextjs
and
@supabase
experience! ๐ค
I think we have finally nailed it! ๐จ
Best bit: it now works with any server language or framework! ๐
Check out my Next.js Conf talk in a couple of hours to learn more! โฒ
Configure
@nextjs
,
@supabase
and
@stripe
for Local Development so you don't break your production SaaS ๐ธ
โฒ Use diffing to generate migration files
โฒ Pull existing migrations to local
โฒ Push new migrations to prod
Get really good at
@supabase
! ๐
๐ฆ Postgres Functions
๐ซ Postgres Triggers
๐ช Function Hooks
๐งโ๐คโ๐ง Relationships across tables
๐ฎ When to use service vs anon key
๐ Realtime subscriptions
๐จ Row Level Security and policies
๐ช Sessions and cookies
๐ณ Day 2 - Database Branching ๐ณ
Today, we look at generating
@PostgreSQL
migrations, and how to use Database Branching to create separate databases for Local Development, Preview and Production! ๐
Check out more about
#SupaLaunchWeek
8:
Really enjoyed this
@remix_run
article comparing their tradeoffs to those of
@nextjs
.
I feel like every time I read something about Remix I learn a new thing about the web itself! ๐ฏ
๐จ New
@eggheadio
course! ๐จ
Let's build a realtime chat app with
@supabase
v2 and
@remix_run
! ๐
๐ฅ Server-side Supabase client with Remix Auth Helpers
๐ Authorization with RLS
โ Merge server state with realtime db changes
๐ฎ 100%
@typescript
6 people have already completed this brand new, entirely free
@eggheadio
course! ๐
I wonder what they're gonna build with their new found
@nextjs
and
@supabase
skills? ๐ค
๐ฆ Supabase Storage is now S3 Compatible ๐ฆ
Use tools like the AWS CLI, CyberDuck or DuckDB to talk to S3 and have your files automagically sync with Supabase Storage! ๐
Managed to get
@supabase
data cached at the edge - thanks to
@Cloudflare
workers and KV storage - and automatically updated when changed - Function Hooks! ๐
Feel like I am starting to see the matrix here!
Proof coming soon! ๐ค
๐ Greatly improve UX with Anonymous Sign-ins! ๐
@supabase
now allows you to authenticate users without requiring them to enter credentials!
Demonstrate value to your users before jamming a login screen in their face! ๐คฆ
๐คฏ Make your queries 43,240x faster ๐คฏ
It is surprisingly simple to add indexes to your
@PostgreSQL
database and massively improve the performance of your queries! ๐
$ create index table (column)
CACHING ISN'T ACTUALLY ONE OF THE HARDEST PROBLEMS IN COMPUTER SCIENCE, IF YOU PAIR
@Cloudflare
WITH
@supabase
! WEBHOOKS CAN UPDATE A KV STORE WHEN DATA IN THE DATABASE CHANGES, AND CLOUDFLARE CAN HANDLE PROPAGATING THOSE CHANGES TO THE OTHER EDGE NODES!
If you haven't checked out
@JoshWComeau
's blog yet, I highly recommend it! ๐ฏ
He even wrote this awesome resource that shows how just a little bit of MDX and animation can make things truly delightful! ๐
Once again,
@eggheadio
have perfectly nailed the illustration! ๐ฏ
Sign up for the mailing list for early access to my new course: Build a Twitter clone with the
@nextjs
App Router and
@supabase
๐
Wanna learn how to add Supabase auth to an existing
@nextjs
project?
In this one we extend
@leeerob
's email client example and add the ability to authenticate with
@github
OAuth! ๐
Usage-based restrictions for different subscription tiers! ๐ฐ
We extend our
@nextjs
,
@stripe
and
@supabase
SaaS, using a combination of
@PostgreSQL
Functions, Triggers and RLS policies to ensure a user is only able to do the number of things their subscription tier allows!
I am super proud of this article I wrote for
@eggheadio
! ๐
Huge thanks to the whole team for all the encouragement to take this further and build a
#SaaS
course! ๐
๐ชตSplinter ๐ชต
Supabase Linter automatically detects Security and Performance issues, and provides helpful suggestions for how to fix them!
Let's go through 8 common issues that can be surfaced with Splinter!
Do you like building beautiful things? ๐ค
Do you like making data useful and informative? ๐
Come join the
@supabase
team ๐
P.S. you get access to the internal
#memes
channel! ๐คฏ
@vercel
and
@nextjs
are a match made in heaven - maybe just built by the same awesome team ๐ซ
In my new
#SaaS
course on
@eggheadio
, learn how to:
๐ write server logic in API routes
๐ฎโโ๏ธ secure API routes with custom keys
๐ redeploy on every commit
Go beyond the
@supabase
basics with this in-depth guide to building your own
#SaaS
product! ๐
This free
@eggheadio
course goes from an empty
@nextjs
application to building a real product hosted on
@vercel
that can process subscription-based payments ๐ฐ
My new
@eggheadio
course is the best possible way to get started with
@supabase
v2,
@remix_run
and understand the brand new Auth Helpers! ๐
Let's build a realtime chat app! ๐ฌ
Did you know you can generate a static page for every row in a
@supabase
table using
@nextjs
13 async server components? ๐ค
Check out the blog to learn more! ๐
Wanna get more confident with
@typescript
? ๐ค
Check out this entirely free
@eggheadio
course to learn how to:
๐ฆGenerate types from
@postgresql
schema
๐ฆ Write custom and union types
๐ฆ Define global types for frequently used data
๐ฐBuild a fully hosted SaaS in <15mins! ๐ฐ
We use
@vercel
's Subscription Starter template to get up and running with
@nextjs
,
@supabase
and
@stripe
!
Wanna see how easy it is to spin up a local instance of
@supabase
and clone down the state of any hosted project? ๐ค
This new
@eggheadio
course from Ben Patton is exactly what you're looking for! ๐ง
Wow! Amazing feedback on my free
#SaaS
course on
@eggheadio
๐ฅ
You too could learn how to build a subscription-based app with
@nextjs
and
@supabase
"in a feel-good way" ๐
Feeling refreshed after six weeks away! ๐ง
Very grateful for the awesome
@supabase
team for being so supportive of me taking time off with the new fam! ๐
I highly recommend you all take some time off - especially those dads with little ones! You won't get this time back! ๐ฏ
Cookies are something I have always kind of understood but never taken the time to go deep! ๐ช
... until now! ๐
Over the next few weeks I will be looking at a bunch of awesome use cases for using cookies in
@remix_run
๐
๐ค Day 3: Generate
@PostgreSQL
with AI ๐ค
Today we launch some huge improvements to
@supabase
AI, making it "your own personal DBA that doesn't even have eyes to roll if you keep asking it the same question" ๐
More
#SupaLaunchWeek
8:
๐ค AI Models on Disk for Edge Functions ๐ค
No more paying for AI with download times and cold starts! ๐ธ
You can even run the entire thing on localhost! ๐คฏ
This one was so big it blew my hat clean off! ๐
Combine
@nextjs
Client Components and Server Components to create
@supabase
Realtime Components, that remain in sync with changes in the database! ๐
The fastest possible way to get started with a hosted
@PostgreSQL
database! ๐
Take a whirlwind tour of
@supabase
and learn about:
๐ Relationships across schemas
๐ Executing raw SQL
๐ AI generating SQL
๐ Row Level Security (RLS)
๐ Impersonating specific users to test RLS
Damn!
@eggheadio
have nailed it yet again! ๐
This is the illustration by Artem Gromov for my upcoming course - caching
@supabase
data at the Edge with
@Cloudflare
Workers and KV Storage! ๐
Subscribe to my weekly newsletter to get early access! ๐คซ
Look at this amazing artwork! ๐
The team at
@eggheadio
just gets it! Love working with them! ๐
Want to be the first to learn how to build a
#SaaS
product using
#nextjs
,
@stripe
and
@supabase
?
Join the mailing list๐
This lesson could be its own stand-alone course on
@tailwindcss
! ๐
Check it out to learn how to:
๐ Style an app with atomic, maintainable classes
๐ Co-locate styles with Components
๐ Use groups to link elements as a single hover target
What confuses you about
@supabase
? ๐ค
I'm using it to build a
#SaaS
product for an upcoming
@eggheadio
course, and would love to help clarify some things!
The new Incremental Static Regeneration on demand in
@nextjs
12.1 is Supa exciting! ๐
I have some cool ideas on how this could be used with
@supabase
Function Hooks to ensure that static data is almost always fresh! ๐ฅฌ