Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

supabase

Learn Supabase

Get started with Supabase on your machine

Getting Started with Supabase Local Dev

[Supabase](http://supabase.com?utm_source=egghead&utm_campaign=remix) is a collection of open-source tools that wrap around a PostgreSQL database. In this course, we look at building a realtime chat application with Remix, using Supabase for db hosting, authentication, authorization and subscribe to realtime db events - updating the UI as the database changes.

We will learn about:

- loaders and actions in Remix
- querying and mutating data with Supabase
- authentication with GitHub
- authorization with RLS
- merging client and server state with realtime events
- deploying a Remix app to Vercel

This course is 100% TypeScript, however, don't stress if you don't have any experience with TS, as Supabase does most of the heavy lifting here! 🎉

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Build a Realtime Chat App with Remix and Supabase

In this course, we build a Twitter clone from scratch, using the [Next.js App Router](https://nextjs.org/docs/app) and [Supabase](https://supabase.com/). We dive deep on the Next.js App Router, learning about:

- Client Components
- Server Components
- Route Handlers
- Server Actions
- Middleware
- Implementing Optimistic UI

On the Supabase side we look at:

- Configuring Supabase Auth to use cookies
- Using Row Level Security (RLS) policies to implement Authorization
- Querying data across multiple tables
- Introspecting PostgreSQL schema to generate TypeScript definitions with the Supabase CLI
- Subscribing to realtime database changes

This course is a deep dive into modern web development and I'm very excited to see what you're going to build on the other side! 🚀

Next.js is a minimalistic framework for server-rendered React applications.

Build a Twitter Clone with the Next.js App Router and Supabase

The “Edge” is where you write and store your code where your data is being produced. This allows for a quick and efficient data transfer, eliminating or severely reducing lag. 

Supabase is a suite of open-source tools wrapping a PostgreSQL database. It provides the building blocks of an app - database hosting, auth, file storage, real-time, and edge functions - so we can focus on what makes our app unique.

Cloudflare Workers are serverless functions that run at the Edge! In this course, we will use the Wrangler CLI tool for interfacing with your Cloudflare account and creating or publishing your Workers.

KV Storage is a cache that Cloudflare makes available to our Workers. It replicates across multiple CDN nodes, making it super performant to cache data.

Combined, these three things give you the benefits of that reduced lag in a smooth and streamlined process. 

Throughout this course, Jon will teach you how to create a small blog that hits the key points of how to:

- Query Supabase from Cloudflare Workers
- Read and write KV Storage cache from Cloudflare Worker
- Cache Supabase response at the Edge with KV storage

And more! 

Cloudflare secures and ensures the reliability of your external-facing resources such as websites, APIs, and applications. It protects your internal resources such as behind-the-firewall applications, teams, and devices. And it is your platform for developing globally-scalable applications.

cloudflare

Cache Supabase data at the Edge with Cloudflare Workers and KV Storage

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

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

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

Build a SaaS product with Next.js, Supabase and Stripe

In this video, you'll learn how to build a full stack app with React, Supabase, and Postgres. We'll start by creating a new Supabase project, initializing a new PostgreSQL "posts" table, and adding rows for the post title and content.

Next, we'll install the Supabase library using NPM or Yarn, and configure a client to connect with the Supabase API. Using the Supabase client, we'll create a basic app that allows users to create and read posts from the Supabase back end.

By the end of this video, you should have a good idea of how to get up and running with building full stack apps using Supabase.

Building a Full Stack App with Supabase and React

To effectively use Supabase, you need to understand the basics of SQL, or Structured Query Language, and how it can be used to work with relational databases. In this talk, we'll look at the basics of SQL — how to query for data, how to insert and remove data, and how structured databases are organized using tables, rows, and columns.

Understand the Basics of SQL and Relational Databases

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

In this video we'll build out an entire GitHub OAuth authentication flow from scratch using Supabase and React. We'll first create a new Supabase project. Next, we'll configure a new OAuth application in the GitHub console, using the Supabase project URI. Finally, we'll create and wire up a React front end to handle the authentication flow, managing the local user state to show and hide UI based on the authentication state of the current user.

Full Stack Github Authentication with Supabase and React

The cancellation event from stripe doesn't get triggered until the end of the billing cycle. Therefore, our customer may still be using our app when their subscription status changes, with their dashboard confusingly displaying the incorrect data.

In this video, we implement Supabase real-time to subscribe the UI to changes in the database. We can initiate the subscription in our `useUser` hook, and specify that we only care about updates to our currently logged in user.

In order for Supabase to broadcast these changes on our websocket connection, we need to enable replication for the specific tables we want to subscribe to.

This means that anytime our `is_subscribed` value changes in the `profile` table, our `useUser` hook will automatically be updated with the new value, and the dashboard will immediately update to display the correct data.

Subscribe the UI to Database Changes with Supabase Real-Time

Row level security is a feature of PostgreSQL, that secures our database by automatically denying all read and write requests. We can then create policies to enable particular actions for specific tables. This is similar to declaring an SQL `where` clause that is automatically appended to every query.

We use the Supabase dashboard to write a simple `select` policy. This allows anyone (signed in or not) to view rows from the lesson table. 

Taking this concept a little further, we create a `select` policy for the `profile` table. This will allow any logged in user to select their specific profile.

Row level security is a powerful way to implement authorization, as it is enforced by the database itself, and runs for each row returned by a query. No need to go through an API to determine whether the user should have access or not. This can drastically improve the performance and reliability of our data fetching, as we can remove an unnecessary hop! 🎉

Implement Authorization Using Row Level Security and Policies

We're using Row Level Security (RLS) to enforce authorization rules for each row in the database. This applies to the entire row, not specific columns. Therefore, if we want to create some premium content that is only available to our subscribed users, we need to create another table. Again, we can reference the `lesson` table's ID, using a foreign key relationship.

We will create a `premium_content` table that will store the `video_url` column for each lesson. We will fetch this data on the lesson details page, and write an RLS policy that will only enable read access for subscribed users. 

This will ensure that our logged-in user has an active subscription, in order to view the video for our lesson. If the user is not signed in or has not paid for a subscription, they will only see the content from the `lesson` table.

Lastly, we want to display our video (hosted on YouTube) in an inline video player. For this, we can use the `react-player` package, and set some simple styling defaults that look great!

Implement Gated Content Using Row Level Security with Supabase

We now have a Postgres function that can handle creating a profile for a user. In this video, we implement a Postgres trigger to listen to `INSERT` events on the `auth.users` table and call our `create_profile_for_user` function. This will ensure that every new user that logs into our application has an associated profile.

Triggers are a super powerful feature of PostgreSQL! When combined with Supabase real-time - covered later in the course - our applications can have multiple users changing data in the db, and  UIs automatically updating without refreshing the page.

Use Supabase to Subscribe to Database Events with Postgres Triggers

Each time a new user signs in, we want to create an associated profile. In PostgreSQL, we can use triggers to listen to events - such as `INSERT` - on specific tables - such as `auth.users` - and execute a Postgres function.

In this video, we use the Supabase UI to create a Postgres function that returns a trigger. This is a special kind of function that can be invoked when particular events occur in the database - covered in the next lesson. This function will be responsible for creating a new row in the `profile` table, using the ID from our `auth.users` record.

Use Postgres Functions to Implement Database Logic with Supabase

Supabase is a collection of tools around a PostgreSQL database. Postgres is a relational database, which means we can create tables that are related to other tables - by referencing columns with a foreign key relationship.

In this video, we query our `auth.users` table to inspect the data that Supabase stores about our user. This is a special table that is managed by Supabase, and not something we should modify ourselves.

In order to store additional data about our user, we create a profile table. This will contain our user's stripe customer ID and whether or not they are currently subscribed. A profile should only ever exist for a specific user, therefore, we can create a relationship between these two tables.

Additionally, this will enforce constraints to stop our data becoming corrupted. It will not be possible to create a profile for a user that does not exist, and we will not be able to delete a user that has a profile.

Add Relationships Between Tables in Supabase Using Foreign Keys

Supabase offers a number of authentication options out of the box. In this video, we look at implementing third party auth using GitHub as a provider.

In order to do this, we need to register a new OAuth application in GitHub, and configure it to communicate with our Supabase project. Supabase automatically handles receiving tokens at the `/auth/v1/callback` endpoint.

Additionally, we implement `/login` and `/logout` pages to handle authentication in our Next.js application. We can use the `supabase-js` library to detect whether or not a user is signed in using the `supabase.auth.user()` function.

Implement Third Party Authentication with GitHub in Next.js Using Supabase

In this video, we look at building a pre-rendered static page for each of our lessons from Supabase. We use a Next.js dynamic route to create a page that can display the details for a lesson, and specify a finite list of possible urls with the `getStaticPaths` function.

The `getStaticProps` function will then be called for each of these lessons, and passed a params object to determine which page is currently being built. This is where we make a request for additional data from Supabase - in this case, the lesson's description. Again, the request will only happen once at build time, rather than each time the user requests the page.

Additionally, we use the Next.js `<Link>` component to enable client-side transitions from the landing page to each of the lesson details pages. This means we do not need to do a full page load from the server each time the user navigates to a new page. the `<Link>` component will pre-fetch each of our lesson's detail pages, while the user is browsing the list. 

Use Next.js to Query a Single Record From Supabase

`supabase-js` is a JavaScript library that makes interacting with your Supabase database simple!

In this video, we install the package with npm using `npm i @supabase/supabase.js`. We then create a reusable Supabase client that can be used throughout our application.

Additionally, we create environment variables for the Supabase `URL` and `key`, which are available in our Next.js client. Exposing these values to the client is not a security risk, as we will be enabling Row Level Security in a future lesson.

Lastly, we tell Next.js that we would like to pre-render our landing page at build time, by exporting out a `getStaticProps` function. This ensures that our lesson data is only fetched once - when we rebuild our application - rather than each time to user visits the page.

Query Data From Supabase Using Next.js

Supabase makes it super easy to create new tables, and change the structure of your database over time!

In this video, we look at creating a lesson table, which will store our publicly available data for each lesson. We add a column for `title` and `description`, and input some basic test data.

Create a Table in Supabase

Supabase is a backend-as-a-service (BaaS) that makes it super simple to create databases, tables, columns and input data.

Every project contains the infrastructure to handle database storage, authentication, authorization, file storage and real-time.

In this video, we look at setting up a Supabase project from scratch - creating an account, organisation and a project - with a geographically close region.

Create a Supabase Project

Pre-rendered static pages are great for performance, however, they can reduce the quality of our user's experience. Content may feel less relevant and engaging if it doesn't change based on the information our user has already the app.

We will use the state of our user to dynamically change the call to action button for each plan. If we don't have a user, we want them to create an account; if we have a user but they are not subscribed, we want them to subscribe; and if we have a user that is subscribed, we want to give them the option to manage their subscription.

Additionally, we implement a loading state for our `useUser` hook, which can be used to determine whether we are waiting for our `auth.users` data to be enriched with the columns from our `profile` table.

By using the `isLoading` state, our pricing page can delay the rendering of the call to action button until we have the necessary state to display the correct one.

Query Dynamic Supabase Data in Static Pages Using Next.js

There are a few steps to go through to push our application and all of our services to production!

1. In order to "activate" our Stripe account, we need to fill out some details about our business. 

2. Update everywhere `[http://localhost:3000](http://localhost:3000)` is referenced in our application to use the `CLIENT_URL` environment variable, which can be set to localhost in `.env.local`.

3. Create a GitHub repo, and commit and push all of our changes.

4. Create a Vercel account, import project from GitHub, configure all environment variables and deploy!

5. Use our Vercel domain to configure our Customer Portal and Webhooks in Stripe.

6. Update `STRIPE_SIGNING_SECRET` environment variable in Vercel and manually redeploy.

7. Update our Site URL in Supabase and remove our test `user` and `profile` records.

8. Create a function hook in Supabase to use our Vercel domain

We now have a SaaS application deployed to the Internet that we can start making that side hustle money from!! 🎉

Topics

Instructors

Content Type

Supabase