 Resources from Jon Meyers in 2024

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

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

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

Notion is a note taking application that empowers super productive workflows, without compromising on beautiful UI or intuitive UX. Next.js is a React framework that sprinkles in server-side logic in the places it is needed. This allows each page to be dynamically rendered by the client, rendered by the server or entirely static and rendered at build-time. This makes it an incredibly flexible option that can start off as simple as `create-react-app` and incrementally introduce complexity as the application evolves. 

In this course, you will learn how to pre-render static pages with data from the Notion API. We will cover querying `page`, `block` and `database` data, as well as updating properties with mutations, and some helpful techniques for transforming raw responses into convenient data structures for our React components. Using Incremental Static Regeneration (ISR), we will learn about dynamically creating static pages any time new data is available in Notion. 

We will be building two example applications - a recipe app and a movie picker. The data for these applications will live in Notion, and be queried by Next.js at build time. This allows us to use Notion for its delightful authoring experience, and Next.js to make this data publicly available via super performant static pages.

Build Static Pages Dynamically using Next.js and the Notion API

In this lesson we will learn how to generate static pages at build time using the `getStaticProps` function in Next.js. This ensures that, in production, load times will stay fast as the data is already present on the page when a user navigates there.

We will build a Breaking Bad quote generator and learn the differences between running in development mode and production. The main difference being Next.js will re-build the page for you in development every time you visit it where a page only gets built once in production. This can lead to slightly different behaviors in dev vs production that you need to keep in mind.

Pre-Generate Static Pages with Next.js

We will learn how to fetch page data from the Notion API, and build a static recipe website. We start with a page containing a list of recipes - each a link to its own recipe page - and use Next.js to create a pre-generated page listing our recipe titles.

In order to request data from our Notion API, we create a new integration and share the data from with page with it. We also learn about how to manage secret environment variables in our Next.js application, and how to conveniently pretty print the results from the `getStaticProps` function.

Lastly, we take the raw Notion data and transform it into a convenient array structure, that we can iterate over in our page component, and display in the browser.

Request page data for Next.js from the Notion API

In this video we refactor the structure of our recipe details URL to use its slugified title, rather than its ID. In order to accomplish this, we use an npm library called `slugify`. This is a function that allows us to pass in a string in sentence form, and get back a hyphenated version that we can safely use in our URL.

Since our recipe details page is using the recipe's ID to request data from Notion's API, this requires us to make some additional requests and manually work out which recipe correlates to the URL's slug. 

This gives us a much prettier URL to send to people and, since the URL now contains the title of our recipe, it communicates much more clearly what to expect when the link is clicked.

Use slugified titles for URL in Next.js with the Notion API

In this video we will learn how to use Notion's client library to request block data and display the details of each of our recipes. 

We will be pre-generating these static pages at build-time by using Next.js' `getStaticProps` function, however, because our recipe IDs can be a nearly infinite number of options, we need to explicitly tell Next.js every possible option we would like to create a static page for.

In order to do this, we use Next.js' `getStaticPaths` function. This allows us to make a request to the Notion API for all of our recipes, and provide Next.js with a finite collection of possible paths.

Use the Notion API to request block data in Next.js

In this video, we learn how to use Next.js' `Incremental Static Regeneration` to dynamically create new static assets per route.

Incremental Static Regeneration (ISR) is a great compromise between the performance benefits of static sites/pre-rendered pages and serving up fresh content.

Each time a user visits a particular route, they are served a static page. This is the case for anytime you declare a `getStaticProps` function, however with ISR, Next.js runs the `getStaticProps` function again in the background and creates a new static page for that route. The next person to visit the route will see the newly generated page. We can specify a timeout period to avoid this happening too frequently.

ISR is a complicated concept, but is super easy to implement in Next.js. Simply return `revalidate: 60` from the `getStaticProps` function, and enjoy the magic!

Use Next.js Incremental Static Regeneration to pregenerate Notion API pages on-demand 

In this video, we learn how to perform mutations with the Notion API, and update properties in our Notion Database.

By adding a button to our Next.js application, users can now mark a movie as watched - which will permanently update this value in our Notion Database. Since this action is based off user input, we need to make sure we don't expose our API secrets on the client.

We can keep this value secure by implementing a serverless function to perform the mutation, and calling this URL endpoint from the client, when the user clicks the button.

This is surprisingly easy to do in Next.js using API routes. Simply create a `pages/api` folder and any JS files within it will automatically be turned into serverless functions. Variables such as the movie's `id` and `is_watched` - can be passed to the serverless function, via the request's body.

Additionally, we use the `axios` package to perform the `HTTP` request, as its API is slightly nicer to work with than the built-in `fetch` library.

Mutate database fields with Next.js using the Notion API

In this video, we learn how to implement cursor-based pagination in our Next.js application, to request all movies from the Notion Database.

By default, Notion will return 100 results per request to the API. Therefore, we need to continue fetching results until we have the full set. This can be done using a while loop that checks the `has_more` field, returned by Notion's API, to determine whether we have fetched every movie. 

If the `has_more` property is true, Notion will also provide a cursor value to fetch the next 100 results. When the `has_more` field is set to false, we have retrieved all movies from the Database, and can stop looping.

Request paginated data from Notion API with Next.js

In this video we learn how to use Notion's client library to request data from a Database, and display the results in our Next.js application.

We will be adding a new page to our application that will help select a random movie for us to watch, using data from our Notion Database. To authorize access to this Database we must add it as an integration, and create a client using the Notion Secret value. Again, we will be pre-rendering this static page at build-time, using Next.js' `getStaticProps` function.

Additionally, we will learn how to filter and transform our data on the server-side, so we are only passing our component the necessary data for it to render our movies. Lastly, we implement a `chooseMovie` function that can choose a random value between the bounds of the lowest and highest index of our movies array.

Request Notion database data from the API with Next.js

Using React Context, we can create global variables that are available throughout our Next.js application. In this video, we create a `useUser` hook that exposes the state of our Supabase user to our tree of React components.

To get the state of our Supabase user when our application loads, we can use `supabase.auth.user()`. When the state of our user changes - e.g. our user logs in - Supabase will call the `supabase.auth.onAuthStateChange` callback. We can use this to update the state of our user object whenever the user signs in or out.

In order to consume our user context, we need to wrap our root component in our Context Provider. This can be done in the `pages/_app.js` file. Now any component in our tree of decedents can call `useUser` to get the state of our global singleton user.

Lastly, our user object only contains values from the `auth.users` table. In order to enrich our user with data from the `profile` table, we need to add a request to our Supabase db within our user provider.

Make User State Globally Accessible in Next.js with React Context and Providers

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

Manually typing the URL to navigate between our different pages is becoming cumbersome. Let's create a shared navigation bar that will display on every page in our application.

In this video, we create a new component to display our `Nav` options - `/` and `/pricing`. Each of our routes uses the Next.js `<Link>` component to make transitions between pages client-side. By rendering our `<Nav>` component in `pages/_app.js`, our navbar will display on every page.

Additionally, we would like to dynamically swap out our `login` and `logout` options, based on the user's signed in status. In order to do this, we can use the `useUser` hook and conditionally render each link based on our user's state.

Create Shared Nav Bar in Next.js with _app.js

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.

Topics

Instructors

Content Type

Jon Meyers