add lessons

01-start-a-new-supabase-project/README.md

@@ -25,19 +25,36 @@
 
 **[📹 Video](TODO)**
 
-TODO
+[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.
+
+Additionally, we create a `tweets` table and populate it with some seed data.
 
 ## Code Snippets
 
-**TODO**
+**Create a `tweets` table**
+
+```sql
+create table if not exists tweets (
+  id uuid default gen_random_uuid() primary key,
+  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
+  title text not null
+);
+```
+
+**Insert tweets**
 
-```js
-TODO
+```sql
+insert into tweets(title)
+values
+  ('first tweet'),
+  ('second tweet'),
+  ('third tweet');
 ```
 
 ## Resources
 
-- [TODO](TODO)
+- [Supabase docs](https://supabase.com/docs)
+- [Supabase SQL Editor](https://app.supabase.com/project/_/sql)
 
 ---
 

02-create-a-next.js-app-with-the-create-next-app-cli/README.md

@@ -25,19 +25,25 @@
 
 **[📹 Video](TODO)**
 
-TODO
+[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:
+
+- [App Router](https://nextjs.org/docs)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Tailwind CSS](https://tailwindcss.com/)
 
 ## Code Snippets
 
-**TODO**
+**Create Next.js app**
 
-```js
-TODO
+```bash
+npx create-next-app blue-bird
 ```
 
 ## Resources
 
-- [TODO](TODO)
+- [Next.js App Router docs](https://nextjs.org/docs)
+- [TypeScript docs](https://www.typescriptlang.org/)
+- [Tailwind CSS docs](https://tailwindcss.com/)
 
 ---
 

03-query-supabase-data-from-next.js-server-components/README.md

@@ -25,19 +25,66 @@
 
 **[📹 Video](TODO)**
 
-TODO
+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:
+
+```
+NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
+```
+
+These values can be found in [your Supabase project's API Settings](https://app.supabase.com/project/_/settings/api).
+
+Additionally, we create a new Supabase instance using the `createServerComponentClient` function, then make our Server Component Async and suspend its rendering until our request for Supabase data resolves.
+
+Lastly, we implement a Row Level Security (RLS) policy to enable read access for the `tweets` table.
 
 ## Code Snippets
 
-**TODO**
+**Install Supabase packages**
+
+```bash
+npm i @supabase/auth-helpers-nextjs @supabase/supabase-js
+```
+
+**Import createServerComponentClient function**
+
+```tsx
+import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
+import { cookies } from "next/headers";
+```
+
+**Create Supabase client in Server Component**
+
+```tsx
+const supabase = createServerComponentClient({ cookies });
+```
+
+**Fetch data from Supabase**
+
+```tsx
+const { data: tweets } = await supabase.from("tweets").select();
+```
+
+**Pretty print data with JSON.stringify**
+
+```tsx
+<pre>{JSON.stringify(tweets, null, 2)}</pre>
+```
+
+**Enable read access with RLS policy**
 
-```js
-TODO
+```sql
+create policy "anyone can select tweets" ON "public"."tweets"
+as permissive for select
+to public
+using (true);
 ```
 
 ## Resources
 
-- [TODO](TODO)
+- [Supabase Auth Helpers for Next.js](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)
+- [Supabase.js docs](https://supabase.com/docs/reference/javascript/installing)
+- [Row Level Security](https://supabase.com/docs/guides/auth/row-level-security)
 
 ---
 

04-create-an-oauth-app-with-github/README.md

@@ -25,19 +25,11 @@
 
 **[📹 Video](TODO)**
 
-TODO
-
-## Code Snippets
-
-**TODO**
-
-```js
-TODO
-```
+[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.
 
 ## Resources
 
-- [TODO](TODO)
+- [Supabase guide to Login with GitHub](https://supabase.com/docs/guides/auth/social-login/auth-github)
 
 ---
 

05-authenticate-users-with-github-oauth-using-supabase-and-next.js-client-components/README.md

@@ -25,19 +25,38 @@
 
 **[📹 Video](TODO)**
 
-TODO
+[Supabase](https://supabase.com) includes multiple authentication strategies. In this lesson, we create a Supabase client to trigger the OAuth authentication flow with GitHub.
+
+Additionally, we discuss the differences between Client and Server Components in the [Next.js App Router](https://nextjs.org/docs/app):
+
+- Client Components: user interactivity
+- Server Components: data fetching
+
+Lastly, we create a Route Handler to exchange an authentication code from GitHub for their Supabase session.
 
 ## Code Snippets
 
-**TODO**
+**Authenticate with GitHub OAuth**
+
+```tsx
+await supabase.auth.signInWithOAuth({
+  provider: "github",
+  options: {
+    redirectTo: "http://localhost:3000/auth/callback",
+  },
+});
+```
+
+**Exchange code for Supabase session**
 
-```js
-TODO
+```tsx
+await supabase.auth.exchangeCodeForSession(code);
 ```
 
 ## Resources
 
-- [TODO](TODO)
+- [Supabase Auth Helper docs](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)
+- [Next.js App Router docs](https://nextjs.org/docs/app)
 
 ---
 

06-refresh-session-cookie-for-next.js-server-components-with-middleware/README.md

@@ -25,19 +25,23 @@
 
 **[📹 Video](TODO)**
 
-TODO
+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.
+
+[Middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware) runs immediately before the route is loaded. By using it to refresh our user's session, we ensure it is valid by the time it loads the Server Component and attempts to fetch data from Supabase.
 
 ## Code Snippets
 
-**TODO**
+**Refresh expired sessions**
 
-```js
-TODO
+```tsx
+supabase.auth.getSession();
 ```
 
 ## Resources
 
-- [TODO](TODO)
+- [Supabase Auth Helper docs](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)
+- [Next.js App Router docs](https://nextjs.org/docs/app)
+- [Next.js Middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware)
 
 ---