Learn 11ty, Elasticsearch and Supabase

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

In common workflows we do not want to push directly to the remote database from our machine. We will setup a github action that will run whenever we push to our main branch of our github repo. 



Deploy Local Database Changes to Supabase Remote Through Github Actions

It is common, when working on a team, for changes to have been applied to a remote database and for your local instance to be out of sync.

By running `npx supabase db pull` we can pull any changes to our remote database schema to keep our local database in sync.

Pull Remote Database Changes with Supabase

When `npx supabase init`, `npx supabase start`, or `npx supabase db reset` is run, supabase will look for our `seed.sql` file and seed our local database.

Since we have already created the project and we want to add seed data, we can run `npx supabase db reset`. 

Add Seed Data to Local Database with Supabase

With Supabase Link we can link our local project to a remote database. Then we can use the command `npx supabase db diff -f <fileName>` to create a local migration file. 

Then we use `npx supabase db push` to apply our local changes to the remote database.

Link Local Database to Remote and Run a Migration with Supabase

With the project setup, we can now start our local instance of supabase. This gives us a local running version of the supabase studio that we can interact with. 

We will create a table in called todos in the studio

Start Supabase Locally and Create a Table

With our project setup we will use our supabase dev dependency to run the supabase cli. We will login to our supabase account and then init the project locally. 

To run supabase locally you need to have Docker installed and running on your computer. To install Docker and get it setup visit this link - https://docs.docker.com/desktop/

Use Supabase CLI to Login and Init Project

Create an application and install packages 

Generate a New NextJS with Supabase App

Create a Supabase account and database quickly by going to https://database.new

Create a Supabase Account and Database

Get started with Supabase on your machine

Getting Started with Supabase Local Dev

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

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

Additionally, we call the `router.refresh()` function to re-run our Server Components, fetching fresh data from Supabase.

## Code Snippets

**Subscribe to database changes**

```tsx
const channel = supabase
  .channel("realtime tweets")
  .on(
    "postgres_changes",
    {
      event: "*",
      schema: "public",
      table: "tweets",
    },
    (payload) => {
      router.refresh();
    }
  )
  .subscribe();
```

## Resources

- [Supabase Realtime docs](https://supabase.com/docs/guides/realtime)
- [useRouter hook docs](https://nextjs.org/docs/app/api-reference/functions/use-router)

Dynamically Update UI with Database Changes using Supabase Realtime

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

Additionally, we resolve a collection of TypeScript errors and create a custom union type for our transformed tweets - making it globally available throughout our Next.js application.

## Code Snippets

**Custom type for TweetWithAuthor**

```tsx
type TweetWithAuthor = Tweet & {
  author: Profile;
  likes: number;
  user_has_liked_tweet: boolean;
};
```

**Generate TypeScript definitions**

```bash
npx supabase gen types typescript --project-id your-project-id > lib/database.types.ts
```

## Resources

- [TypeScript docs](https://www.typescriptlang.org/)
- [Supabase CLI](https://supabase.com/docs/guides/cli)
- [Generating TypeScript definitions](https://supabase.com/docs/guides/api/rest/generating-types)

Declare Global Intersection Types for Transformed Supabase Data with Typescript

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.

Additionally, we extend our Supabase query for `tweets`, and join the columns from our `likes` table.

Lastly, we make this button dynamic by checking whether the user has previously liked this tweet. If they have not, we increment the likes by 1, otherwise, we decrement them by 1.

## Code Snippets

**Querying data across tables**

```tsx
const { data } = await supabase
  .from("tweets")
  .select("*, profiles(*), likes(*)");
```

## Resources

- [Client Component docs](https://nextjs.org/docs/getting-started/react-essentials#client-components)
- [Querying across tables with supabase-js](https://supabase.com/docs/reference/javascript/select)

Implement Dynamic Buttons with Next.js Client Components

PostgreSQL is a powerful, open source object-relational database system.

postgres

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.

Additionally, we create Row Level Security (RLS) polices to enable `select`, `insert` and `delete`.

## Code Snippets

**Create likes table**

```sql
create table public.likes (
  id uuid default gen_random_uuid() primary key,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
  user_id uuid references public.profiles on delete cascade not null,
  tweet_id uuid references public.tweets on delete cascade not null
);
```

**Enable Row Level Security**

```sql
alter table public.likes enable row level security;
```

**Enable insert action with RLS policy**

```sql
create policy "authenticated users can insert their own likes" ON "public"."likes"
as permissive for select
to authenticated
using (user_id = auth.uid());
```

**Enable delete action with RLS policy**

```sql
create policy "authenticated users can delete their own likes" ON "public"."likes"
as permissive for delete
to authenticated
using (user_id = auth.uid());
```

**Enable select action with RLS policy**

```sql
create policy "authenticated users can select likes" ON "public"."likes"
as permissive for select
to authenticated
using (true);
```

## Resources

- [Managing user data docs](https://supabase.com/docs/guides/auth/managing-user-data)
- [Row Level Security docs](https://supabase.com/docs/guides/auth/row-level-security)

Create a PostgreSQL Join Table in Supabase Studio

[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 `<NewTweet />` 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/).

Additionally, we create a Server Action Supabase client and call the `getUser` function to fetch the currently signed in user.

Lastly, we write a Row Level Security (RLS) policy to enable the `insert` action for `authenticated` users.

## Code Snippets

**Posting form to Server Action**

```tsx
export default function NewTweet() {
  const addTweet = async () => {
    "use server";
  };

  return <form action={addTweet}>...</form>;
}
```

**Create Supabase client in Server Action**

```tsx
const supabase = createServerActionClient<Database>({ cookies });
```

**Get user from Supabase client**

```tsx
const {
  data: { user },
} = await supabase.auth.getUser();
```

**Insert tweet with Supabase**

```tsx
await supabase.from("tweets").insert({...});
```

## Resources

- [Server Action docs](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions)
- [Supabase Auth Helpers for Next.js](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)
- [Inserting data with supabase-js](https://supabase.com/docs/reference/javascript/insert)

Run Authenticated Server-side Mutations with Next.js Server Actions

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

In this lesson, we create a new table called `profiles` and populate it with the data we want to display from the `auth.users` table. Additionally, we set up a PostgreSQL Function and Trigger to create a new profile for any user added to the `auth.users` table.

Lastly, we create an RLS policy for the `profiles` table to enable read access, and re-generate our TypeScript definitions file to contain our new table.

## Code Snippets

**Create profiles table**

```sql
create table public.profiles (
  id uuid not null references auth.users on delete cascade primary key,
  name text not null,
  username text not null,
  avatar_url text not null
);
```

**Enable Row Level Security**

```sql
alter table public.profiles enable row level security;
```

**Enable read access with RLS policy**

```sql
create policy "anyone can select profiles" ON "public"."profiles"
as permissive for select
to public
using (true);
```

**Create PostgreSQL Function to create profile**

```sql
create function public.create_profile_for_user()
returns trigger
language plpgsql
security definer set search_path = public
as $$
begin
  insert into public.profiles (id, name, username, avatar_url)
  values (
    new.id,
    new.raw_user_meta_data->'name',
    new.raw_user_meta_data->'user_name',
    new.raw_user_meta_data->'avatar_url'
  );
  return new;
end;
$$;
```

**Create PostgreSQL Trigger to create profile**

```sql
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.create_profile_for_user();
```

## Resources

- [Managing user data docs](https://supabase.com/docs/guides/auth/managing-user-data)
- [Row Level Security docs](https://supabase.com/docs/guides/auth/row-level-security)

Automatically Generate a Profile for Every User with PostgreSQL Function Triggers

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

Additionally, we set up cascading deletes, so when a user is deleted from the `auth.users` table, their tweets are also deleted.

Lastly, because our database schema has changed, our TypeScript definitions are now incorrect. Therefore, we use the Supabase CLI to introspect our PostgreSQL schema and create a new `database.types.ts` file.

## Code Snippets

**Add foreign key relationship to auth.users**

```sql
alter table public.tweets
add user_id uuid references auth.users on delete cascade not null;
```

**Generate TypeScript definitions**

```bash
npx supabase gen types typescript --project-id your-project-id > lib/database.types.ts
```

## Resources

- [Supabase Auth docs](https://supabase.com/docs/guides/auth)
- [Supabase CLI](https://supabase.com/docs/guides/cli)
- [Generating TypeScript definitions](https://supabase.com/docs/guides/api/rest/generating-types)

Setup a Foreign Key relationship between PostgreSQL tables

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

In this lesson we generate an access token to use the [Supabase CLI](https://supabase.com/docs/guides/cli) and generate TypeScript definitions. Additionally, we write our types to a file, which can be passed to our Supabase client, giving our application full type-safety across client, server and database.

Lastly, we make our Database types globally available so we don't need to import them every time we create a Supabase client.

## Code Snippets

**Login to Supabase CLI**

```bash
npx supabase login
```

**Generate TS definitions file**

```bash
npx supabase gen types typescript --project-id your-project-id > lib/database.types.ts
```

## Resources

- [Generate Supabase access token](https://app.supabase.com/account/tokens)
- [TypeScript docs](https://www.typescriptlang.org/)
- [Supabase CLI](https://supabase.com/docs/guides/cli)
- [Generating TypeScript definitions](https://supabase.com/docs/guides/api/rest/generating-types)

Generate TypeScript Definitions from PostgreSQL Schema with Supabase CLI

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.

Additionally, we create a `/login` route to redirect unauthenticated users, which allows them to sign in with GitHub.

## Code Snippets

**Redirect unauthenticated users**

```tsx
const {
  data: { session },
} = await supabase.auth.getSession();

if (!session) {
  redirect("/login");
}
```

## Resources

- [Supabase Auth Helpers for Next.js docs](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)

Implement Protected Routes for Authenticated Users with Supabase Auth

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.

In this lesson, we look at rendering a Client Component from a Server Component that can asynchronously fetch the user's [Supabase](https://supabase.com/) session, and pass it as a prop to the Client Component, making the user's session available on its first SSR render.

## Code Snippets

**Render Client Component from Server Component**

```tsx
const {
  data: { session },
} = await supabase.auth.getSession();

return <ClientComponent session={session} />;
```

## Resources

- [Client and Server Components docs](https://nextjs.org/docs/getting-started/react-essentials)
- [Supabase Auth Helpers for Next.js docs](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)

Dynamically Render UI Based on User Session with SSR in Next.js Client Components

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.

In this lesson, we modify our Row Level Security (RLS) policy to only apply to the `authenticated` role to ensure that only authenticated users can select tweets.

Additionally, we use the `useRouter` hook and `router.refresh()` to run our Server Component again and fetch fresh data from Supabase, after the user signs in or out.

## Code Snippets

**Enable authenticated read access with RLS policy**

```sql
create policy "anyone can select tweets" ON "public"."tweets"
as permissive for select
to authenticated
using (true);
```

## Resources

- [Row Level Security docs](https://supabase.com/docs/guides/auth/row-level-security)
- [useRouter hook](https://nextjs.org/docs/app/api-reference/functions/use-router#userouter)

Restrict Access to Authenticated Users with Supabase RLS Policies

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

**Refresh expired sessions**

```tsx
supabase.auth.getSession();
```

## Resources

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

Refresh Session Cookie for Next.js Server Components with Middleware



Discover how to harness the power of Cursor IDE's Composer Agent feature to optimize your code. In this lesson, you'll witness an AI agent doing all the work to generate test suites, implement performance benchmarks, and create optimized function variations - all without writing a single line of code. You'll learn how to validate performance improvements through data-driven benchmarking, ensuring that optimizations are backed by concrete metrics rather than speculation. This hands-on demonstration showcases a groundbreaking approach to automated function development that combines the precision of test-driven development with the efficiency of AI-powered optimization.


Agent-Driven Development in Cursor: Testing, Benchmarking, and Optimizing Functions

This course is aimed for using `zod` effectively in projects based on TypeScript (both browser and node.js). The benefits you gain with this course is not just simply coding, but also understanding when/why/how should you perform runtime validation.

`zod` is the missing piece to TypeScript's capabilities, which can guarantee type-safety only in compile-time.

`zod` can be used whenever the compiler cannot guarantee what happens in runtime. And... it's a very frequent usecase, such as HTTP calls, websockets, etc.

In this course you get quickly up and running by:
1. using `zod` with primitives and objects
2. adapting `zod` quickly to existing projects thanks to automatic generators
3. changing the strategy frm type-first to schema-first
4. using error-throwing `parse` or non-error-throwing `safeParse` basing on your needs
5. applying `zod` to the most common usecase - validating API responses
6. handling errors the most convenient way (out of many!)

Take advantage of runtime validation with `zod`. Take advantage of the detailed lessons in this course 🔥

Effective Runtime Type Checks with Zod


Cursor can now automatically run commands in the terminal and walk step-by-step towards building out your entire project. You give it a goal, then it will suggest the commands you need to run and the files that you need to create and you can work with it to achieve what you're building. This lesson does a quick walkthough of using a Cursor Agent to build a project from scratch and guide it along the way. Cursor Agents definitely feel like a sneak peek at the future of programming!

Cursor Agents Initial Impressions - Allow an AI to Build Your Entire Project

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.



Mocking WebSocket APIs with Mock Service Worker


While using anonymous functions might seem convenient, they can create difficulties when trying to identify performance bottlenecks during profiling. This lesson will demonstrate how named functions make it easier to pinpoint and address performance issues, ultimately leading to more efficient and debuggable code. Learning this practice will greatly improve your ability to locate and fix performance issues in complex projects.

Always Name Functions in JavaScript


When attempting to load the same module twice in JavaScript you'll hit a cache and code won't re-run. In scenarios where you actually do want to have state in your modules, you'll have to use a cache-busting technique by passing a query parameter to a dynamic import. This lesson walks through how to add a query parameter, how to add the appropriate types for loading dynamic modules in TypeScript, and when these techniques are valuable.

Import the Same JavaScript Module Multiple Times with Cache Busting



The include keyword in GitHub Actions empowers you to add custom variables to your matrix strategy, providing flexibility beyond standard configurations. In this video, we'll explore how include allows you to define specific combinations of variables, enhancing control over your workflow runs. You'll see how this feature enables you to tailor jobs for unique environments or scenarios not covered by the default matrix options. By leveraging include, you can efficiently manage complex build processes with greater precision. This technique helps you streamline your CI/CD pipeline, making it more adaptable to your project's evolving needs.

Use GitHub Actions Matrix Include for Complex Job Configurations

While running `zod` schema validation agains domain-rich objects, the error message saying that _a string is not a number_ might not be really useful.

Especially, when you need to provide a meaningful feeback to the user, e.g. after they have submitted a form with lots of data.

`zod` allows to customize messages on a very granular level. We can also extract repeatable customization to `zod` error maps.

Finally, in order to process an error message further (e.g. display it to the user), we need to handle the `zod` validation errors effectively. Especially, when a big object validation has failed and we could receive a handful of errors.

That's what we learn in this lesson. 🔥

Customize zod Error Messages and Handle zod Errors Effectively

customize zod validation messages, customize zod schema property messages, reuse error maps across different schemas, navigate through zod error objects

You might want to run `zod` schema checks in different styles.

Sometimes you prefer to conditionally throw the error - that's what `parse` does. But another time you'd prefer to receive a `boolean` property that determines whether the validation was successful or not - and perform further actions accordingly.

Additionally, the error-throwing API of `parse` works extremely well with [TypeScript assertion functions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions). Their combination is just... perfect! 👌

That's what we learn in this lesson.

Use parse and safeParse Runtime Type-checks with zod

use zod parse function to conditionally throw ZodError, use zod safeParse to get a boolean value and run typescript type guard over success property

In this lesson we learn that TypeScript cannot guarantee correct shapes of responses. That's due to TS performing checks in compile-time, while the response will be availbale in runtime - when TS doesn't exist anymore.

In some situations, such as HTTP requests, runtime type checks such as `zod` are essential for providing quick feedback around data-related errors.

Understand where are the possible mistakes to make while using TypeScript with HTTP calls. Use `fetch` and `axios` along with `zod` schema checks.

Also, note that similar mistakes or mistakes could happen while using web storage (e.g. `localStorage`)

Validate HTTP API Response with zod, fetch and axios

use zod as an HTTP response validation tool along with fetch and axios in order to make sure that the response has expected data structure

Search

Search Results