diff --git a/01-start-a-new-supabase-project/README.md b/01-start-a-new-supabase-project/README.md index 271b07c..a770314 100644 --- a/01-start-a-new-supabase-project/README.md +++ b/01-start-a-new-supabase-project/README.md @@ -23,7 +23,7 @@ # Start a new Supabase project -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/postgresql-create-a-new-supabase-project-and-basic-postgresql-schema)** [Supabase](https://supabase.com/) is a collection of open source tools that wrap around a PostgreSQL database - Hosting, Auth, Realtime, File Storage, Edge Functions etc. In this lesson, we go to [database.new](https://database.new) to create a free Supabase project. diff --git a/02-create-a-next.js-app-with-the-create-next-app-cli/README.md b/02-create-a-next.js-app-with-the-create-next-app-cli/README.md index 8ea457d..7415e0a 100644 --- a/02-create-a-next.js-app-with-the-create-next-app-cli/README.md +++ b/02-create-a-next.js-app-with-the-create-next-app-cli/README.md @@ -23,7 +23,7 @@ # Create a Next.js app with the create-next-app CLI -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/next-js-create-a-next-js-app-with-the-create-next-app-cli)** [Next.js](https://nextjs.org/) is a full-stack React framework that provides the client and server building blocks to create powerful web applications. In this lesson we run the `create-next-app` CLI command to create a new Next.js application, configured with: diff --git a/03-query-supabase-data-from-next.js-server-components/README.md b/03-query-supabase-data-from-next.js-server-components/README.md index 5580408..b00bd39 100644 --- a/03-query-supabase-data-from-next.js-server-components/README.md +++ b/03-query-supabase-data-from-next.js-server-components/README.md @@ -23,7 +23,7 @@ # Query Supabase data from Next.js Server Components -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/next-js-query-supabase-data-from-next-js-server-components)** Our [Supabase](https://supabase.com) project is a hosted PostgreSQL database. In this lesson, we install the [Supabase Auth Helpers](https://www.npmjs.com/package/@supabase/auth-helpers-nextjs) and [Supabase.js](https://www.npmjs.com/package/@supabase/supabase-js) npm packages, and configure environment variables to query data from Supabase: diff --git a/04-create-an-oauth-app-with-github/README.md b/04-create-an-oauth-app-with-github/README.md index 250c64b..2c8b11c 100644 --- a/04-create-an-oauth-app-with-github/README.md +++ b/04-create-an-oauth-app-with-github/README.md @@ -23,7 +23,7 @@ # Create an OAuth app with GitHub -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/supabase-create-an-oauth-app-with-github)** [Supabase](https://supabase.com/) includes many ways to authenticate users - Email and password, magic link, mobile OTP etc. In this lesson we implement social login with GitHub by registering a new OAuth Application and providing Supabase with the Client ID and Secret. diff --git a/05-authenticate-users-with-github-oauth-using-supabase-and-next.js-client-components/README.md b/05-authenticate-users-with-github-oauth-using-supabase-and-next.js-client-components/README.md index ccc437b..6a04985 100644 --- a/05-authenticate-users-with-github-oauth-using-supabase-and-next.js-client-components/README.md +++ b/05-authenticate-users-with-github-oauth-using-supabase-and-next.js-client-components/README.md @@ -23,7 +23,7 @@ # Authenticate users with GitHub OAuth using Supabase and Next.js Client Components -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/supabase-authenticate-users-with-github-oauth-using-supabase-and-next-js-client-components)** [Supabase](https://supabase.com) includes multiple authentication strategies. In this lesson, we create a Supabase client to trigger the OAuth authentication flow with GitHub. diff --git a/06-refresh-session-cookie-for-next.js-server-components-with-middleware/README.md b/06-refresh-session-cookie-for-next.js-server-components-with-middleware/README.md index 7dccfd5..a07fc08 100644 --- a/06-refresh-session-cookie-for-next.js-server-components-with-middleware/README.md +++ b/06-refresh-session-cookie-for-next.js-server-components-with-middleware/README.md @@ -23,7 +23,7 @@ # Refresh session cookie for Next.js Server Components with Middleware -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/supabase-refresh-session-cookie-for-next-js-server-components-with-middleware)** Server Components cannot set cookies in the [Next.js App Router](https://nextjs.org/docs/app). In this lesson, we implement middleware to refresh expired [Supabase](https://supabase.com/) sessions. diff --git a/07-restrict-access-to-authenticated-users-with-rls-policies/README.md b/07-restrict-access-to-authenticated-users-with-rls-policies/README.md index c6db64b..8919983 100644 --- a/07-restrict-access-to-authenticated-users-with-rls-policies/README.md +++ b/07-restrict-access-to-authenticated-users-with-rls-policies/README.md @@ -23,7 +23,7 @@ # Restrict access to authenticated users with RLS policies -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/next-js-restrict-access-to-authenticated-users-with-supabase-rls-policies)** Since we're using [Supabase](https://supabase.com/) to authenticate our users, it knows who our user is throughout the rest of the Supabase environment. diff --git a/08-dynamically-render-ui-based-on-user-session-with-ssr-in-next.js-client-components/README.md b/08-dynamically-render-ui-based-on-user-session-with-ssr-in-next.js-client-components/README.md index ca0fe0a..dad632e 100644 --- a/08-dynamically-render-ui-based-on-user-session-with-ssr-in-next.js-client-components/README.md +++ b/08-dynamically-render-ui-based-on-user-session-with-ssr-in-next.js-client-components/README.md @@ -23,7 +23,7 @@ # Dynamically render UI based on user session with SSR in Next.js Client Components -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/supabase-dynamically-render-ui-based-on-user-session-with-ssr-in-next-js-client-components)** The first render of a Client Component happens on the server. This is called Server-side rendering (SSR). However, Client Components are synchronous, so they cannot suspend rendering while fetching data - such as the user's session. This means we either need to display a loading spinner or render the logged out state, while fetching that async data, causing a flash of incorrect state for the user. diff --git a/09-implement-protected-routes-for-authenticated-users-with-supabase-auth/README.md b/09-implement-protected-routes-for-authenticated-users-with-supabase-auth/README.md index 278fd39..bc7fb2d 100644 --- a/09-implement-protected-routes-for-authenticated-users-with-supabase-auth/README.md +++ b/09-implement-protected-routes-for-authenticated-users-with-supabase-auth/README.md @@ -23,7 +23,7 @@ # Implement Protected Routes for authenticated users with Supabase Auth -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/supabase-implement-protected-routes-for-authenticated-users-with-supabase-auth)** Since [Supabase](https://supabase.com/) requires our user to be authenticated to fetch tweets, it doesn't make sense for an unauthenticated user to visit the landing page. In this lesson, we implement protected routes that are only accessible to authenticated users. diff --git a/10-generate-typescript-definitions-from-postgresql-schema-with-supabase-cli/README.md b/10-generate-typescript-definitions-from-postgresql-schema-with-supabase-cli/README.md index 99d21fc..3ec3f04 100644 --- a/10-generate-typescript-definitions-from-postgresql-schema-with-supabase-cli/README.md +++ b/10-generate-typescript-definitions-from-postgresql-schema-with-supabase-cli/README.md @@ -23,7 +23,7 @@ # Generate TypeScript definitions from PostgreSQL schema with Supabase CLI -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/supabase-generate-typescript-definitions-from-postgresql-schema-with-supabase-cli)** [Typescript](https://www.typescriptlang.org/) reduces runtime errors and makes our code more maintainable. [Supabase](https://supabase.com/) allows us to introspect our PostgreSQL schema and generate TypeScript definitions. diff --git a/11-setup-a-foreign-key-relationship-between-postgresql-tables/README.md b/11-setup-a-foreign-key-relationship-between-postgresql-tables/README.md index b329227..f3cf044 100644 --- a/11-setup-a-foreign-key-relationship-between-postgresql-tables/README.md +++ b/11-setup-a-foreign-key-relationship-between-postgresql-tables/README.md @@ -23,7 +23,7 @@ # Setup a Foreign Key relationship between PostgreSQL tables -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/postgresql-setup-a-foreign-key-relationship-between-postgresql-tables)** [Supabase](https://supabase.com/) uses the `auth.users` table to store information about our users and their sessions. In this lesson, we add a column to the `tweets` table to associate each tweet with one of our users. diff --git a/12-automatically-generate-a-profile-for-every-user-with-postgresql-function-triggers/README.md b/12-automatically-generate-a-profile-for-every-user-with-postgresql-function-triggers/README.md index 3dfb868..aa8f998 100644 --- a/12-automatically-generate-a-profile-for-every-user-with-postgresql-function-triggers/README.md +++ b/12-automatically-generate-a-profile-for-every-user-with-postgresql-function-triggers/README.md @@ -23,7 +23,7 @@ # Automatically generate a profile for every user with PostgreSQL Function Triggers -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/postgresql-automatically-generate-a-profile-for-every-user-with-postgresql-function-triggers)** [Supabase](https://supabase.com/) has an `auth.users` table that contains information about our user and their session. We want to display the user's name, username and avatar alongside their tweets, but the `auth.users` table cannot be publicly accessible, as it contains sensitive information. diff --git a/13-run-authenticated-server-side-mutations-with-next.js-server-actions/README.md b/13-run-authenticated-server-side-mutations-with-next.js-server-actions/README.md index d122e86..1a94961 100644 --- a/13-run-authenticated-server-side-mutations-with-next.js-server-actions/README.md +++ b/13-run-authenticated-server-side-mutations-with-next.js-server-actions/README.md @@ -23,7 +23,7 @@ # Run authenticated Server-side mutations with Next.js Server Actions -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/supabase-run-authenticated-server-side-mutations-with-next-js-server-actions)** [Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions) are a way to perform server-side mutations in the [Next.js App Router](https://nextjs.org/docs/app). In this lesson, we create a `` component that renders a form for the user to enter a new tweet. This form is submitted to a Server Action, which writes this data to [Supabase](https://supabase.com/). diff --git a/14-create-a-postgresql-join-table-in-supabase-studio/README.md b/14-create-a-postgresql-join-table-in-supabase-studio/README.md index 1e69f12..a08750a 100644 --- a/14-create-a-postgresql-join-table-in-supabase-studio/README.md +++ b/14-create-a-postgresql-join-table-in-supabase-studio/README.md @@ -23,7 +23,7 @@ # Create a PostgreSQL join table in Supabase Studio -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/postgresql-create-a-postgresql-join-table-in-supabase-studio)** In this lesson, we create a PostgreSQL join table for `likes` in the [Supabase](https://supabase.com) dashboard. This has a many-to-many relationship between the `profiles` and `tweets` table, allowing us to store each instance of a like between a user and a tweet. diff --git a/15-implement-dynamic-buttons-with-next.js-client-components/README.md b/15-implement-dynamic-buttons-with-next.js-client-components/README.md index 410eb64..94063e7 100644 --- a/15-implement-dynamic-buttons-with-next.js-client-components/README.md +++ b/15-implement-dynamic-buttons-with-next.js-client-components/README.md @@ -23,7 +23,7 @@ # Implement dynamic buttons with Next.js Client Components -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/supabase-implement-dynamic-buttons-with-next-js-client-components)** In this lesson, we create a new component to display the likes from [Supabase](https://supabase.com/). This component will be interactive so it needs to be a Client Component. diff --git a/16-declare-global-union-types-with-typescript/README.md b/16-declare-global-union-types-with-typescript/README.md index 49b6b4f..b954b65 100644 --- a/16-declare-global-union-types-with-typescript/README.md +++ b/16-declare-global-union-types-with-typescript/README.md @@ -23,7 +23,7 @@ # Declare global union types with Typescript -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/supabase-declare-global-union-types-for-transformed-supabase-data-with-typescript)** [TypeScript](https://www.typescriptlang.org/) reduces runtime errors and makes code more maintainable. In this lesson, we use the [Supabase](https://supabase.com/) CLI to introspect our PostgreSQL schema and generate TypeScript definitions. diff --git a/17-implement-optimistic-ui-with-the-next.js-usetransition-hook/README.md b/17-implement-optimistic-ui-with-the-next.js-usetransition-hook/README.md index 5a37ebe..b3969c9 100644 --- a/17-implement-optimistic-ui-with-the-next.js-usetransition-hook/README.md +++ b/17-implement-optimistic-ui-with-the-next.js-usetransition-hook/README.md @@ -23,7 +23,7 @@ # Implement Optimistic UI with the Next.js useTransition hook -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/next-js-implement-optimistic-ui-with-the-react-useoptimistic-hook-in-next-js)** "Optimistic UI" is a pattern for updating the page immediately with the data you have available, rather than waiting for the database query to resolve. In this lesson, we use React's `useOptimistic` hook to create an array of tweets that we can instantly update with our new state, when the user clicks the like button. diff --git a/18-dynamically-update-ui-with-database-changes-using-supabase-realtime/README.md b/18-dynamically-update-ui-with-database-changes-using-supabase-realtime/README.md index 98dadce..d5e9a20 100644 --- a/18-dynamically-update-ui-with-database-changes-using-supabase-realtime/README.md +++ b/18-dynamically-update-ui-with-database-changes-using-supabase-realtime/README.md @@ -23,7 +23,7 @@ # Dynamically update UI with Database changes using Supabase Realtime -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/next-js-dynamically-update-ui-with-database-changes-using-supabase-realtime)** [Supabase](https://supabase.com/) allows us to subscribe to changes in the database, and update our UI, without the user needing to refresh the page. In this lesson, we create a subscription for `postgres_changes`, listening for any change events - insert, update or delete - on our tweets table. diff --git a/19-style-a-twitter-clone-with-tailwind-css/README.md b/19-style-a-twitter-clone-with-tailwind-css/README.md index 9b9acf1..32adc59 100644 --- a/19-style-a-twitter-clone-with-tailwind-css/README.md +++ b/19-style-a-twitter-clone-with-tailwind-css/README.md @@ -23,7 +23,7 @@ # Style a Twitter clone with Tailwind CSS -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/tailwind-style-a-twitter-clone-with-tailwind-css)** [Tailwind](https://tailwindcss.com/) is an atomic CSS framework that makes styling an application more consistent and maintainable. In this lesson, we look at building out a similar UI to Twitter using only Tailwind classes. diff --git a/20-deploy-next.js-app-router-project-to-production-with-vercel/README.md b/20-deploy-next.js-app-router-project-to-production-with-vercel/README.md index 85c7570..855ca1d 100644 --- a/20-deploy-next.js-app-router-project-to-production-with-vercel/README.md +++ b/20-deploy-next.js-app-router-project-to-production-with-vercel/README.md @@ -23,7 +23,7 @@ # Deploy Next.js App Router project to production with Vercel -**[📹 Video](TODO)** +**[📹 Video](https://egghead.io/lessons/deploy-next-js-app-router-project-to-production-with-vercel)** [Vercel](https://vercel.com) is a hosting platform that works very well with [Next.js](https://nextjs.org) - because it's their framework! In this lesson, we prepare our project to be deployed to production by: