 Courses from Jon Meyers

[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

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

Configure Stripe for Production and Deploy Next.js Application with Vercel

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

We can use Stripe's Customer Portal to allow our users to manage their subscription and payment information. We will configure the Customer Portal in the Stripe Dashboard and create the required pages for `/terms` and `/privacy`.

Additionally, we create an API route to initiate our customer portal session. Similarly to our API route that charges for a subscription, we need to get the token from the cookie, add it to the Supabase session and fetch the associated `profile` data. 

Since the `updated` event gets triggered for creating a new subscription, as well as updating an existing one, and we want to perform the same changes in our Supabase DB, we can replace our case statement to handle `customer.subscription.updated`.

Lastly, we implement a case for `deleted`, setting `is_subscribed` to `false` and `interval` to `null`. Since this event doesn't actually trigger until the end of the customer's billing cycle, we can manually cancel the user's subscription from the Stripe dashboard.

Allow Customer to Manage Their Subscription with Stripe Customer Portal

We can create protected client pages that require a user to be signed in with Supabase to view, by exporting a `getServerSideProps` function from our page component. This will allow us to execute some logic on the server, before Next.js renders our component.

We will create a new page for `/dashboard`. It doesn't make sense for this page to be rendered unless we have a user, therefore, we can redirect the user to the `/login` route if they are not signed in.

We can extract our user from the Supabase auth cookie by calling the `getUserByCookie` function. If we don't have a user, we can redirect the request to our login page, otherwise, we can display our dashboard page.

We want it to be easy to navigate to this page if we have a user, therefore, we add a link to our `<Navbar>` component, and conditionally render it based on whether or not we have a user signed in.

Lastly, we implement an isLoading state and only display our user's subscription information in the dashboard.

Create a Client Page that Requires Authentication in Next.js Using getServerSideProps

Stripe will call our `/stripe-hooks` API route anytime a subscription is created, updated, or deleted. By inspecting the `event.type`, we can specify what we want to do for each type of event. We will create a `switch` statement to process events from Stripe. If we are creating a subscription, we want to set `is_subscribed` to `true`.

This request to Supabase is happening on the server and does not have a session automatically attached. Since this endpoint is actually called by Stripe, we don't have a cookie that we can manually send along, so our request to update the user is being denied by RLS.

RLS can be bypassed by using Supabase's Service key. We can export a function from our `utils/supabase.js` file that returns a Supabase client - instantiated using the environment variable for the service key, rather than the anon key. Since this environment variable is only available server-side, this value will not be leaked to the client, and our database is still securely protected with RLS.

Use the Supabase Service Key to Bypass Row Level Security

Webhooks allow us to subscribe to particular events, and have Stripe let us know when they occur. From the Stripe dashboard we can specify an endpoint to call, and which events we care about. For subscriptions, we want to know when a new subscription occurs, is updated, or deleted.

In this video, we create a new API route to handle webhook events from Stripe. We can call the `stripe.webhooks.constructEvent` function which returns the event object. It also takes the `req`, `signature` and `signingSecret` to verify the request is valid and came from Stripe.

The `signature` can be extracted from the request's headers, and the signing secret is available in the Stripe dashboard, however, the Next.js `req` object is a different structure to what `constructEvent` is expecting. Therefore, we need to install the `micro` package and use its `buffer` function to get the `reqBuffer`. We also need to export a config object from our page component, setting `bodyParser` to `false`.

Subscribe to Stripe Webhooks Using Next.js API Routes

Stripe makes taking payments easy. We can use the Stripe library to create a checkout session. This takes a configuration object, which describes how we want to charge our customer, the method we would like to use, and where we want to redirect the user based on a successful transaction or cancellation.

In this video, we create a new API route to initiate a Stripe session to charge for a particular subscription option. This API route returns the session's ID, which we can use to redirect the client. In order to do this, we install the `stripe-js` library - which is used client-side to interact with Stripe - and initialize it using our `publishable` key.

Lastly, we can use the test credit card for Stripe to confirm everything is working in test mode.

Charge Customer for Stripe Subscription in Next.js

Supabase does not automatically set an auth cookie for our signed-in user. If we want to know who our user is on the server, we need to call `supabase.auth.api.setAuthCookie`.

We will create an API route to set a Supabase auth cookie. Additionally, we modify our `useUser` hook to call this endpoint anytime the state of our user changes. In order to make our HTTP requests slightly more readable, we install the `axios` library.

Now that we have a cookie being automatically sent with every request, we can use the `getUserByCookie` function to get the requesting user. If our API route requires a signed-in user, we can immediately send a `401` response if a user is not present.

We need to know our user's stripe_customer to initiate a checkout session with Stripe (next lesson), so need to enrich this user data with their profile.

While our request from the client to the API route contains our auth cookie, it is not automatically attached to server-side calls using our Supabase client. 

Search Results