 Courses from Jon Meyers

zeit-now

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

- Pushing code to [GitHub](https://github.com/)
- Deploying repo to [Vercel](https://vercel.com)
- Updating [GitHub OAuth app](https://github.com/settings/developers) to use production URL
- Updating [Supabase](https://supabase.com/) project to use production URL

## Resources

- [Deploy Next.js to Vercel guide](https://nextjs.org/learn/basics/deploying-nextjs-app/deploy)
- [GitHub OAuth App settings](https://github.com/settings/developers)
- [Vercel](https://vercel.com)
- [Supabase URL configuration](https://app.supabase.com/project/_/auth/url-configuration)

Deploy Next.js App Router project to production with Vercel

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

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

Additionally, we use a heart icon from Feather Icons for our like button, and create a new `<GitHubButton />` component that displays a nicely styled GitHub logo to trigger the user authentication flow.

## Resources

- [Tailwind docs](https://tailwindcss.com/)
- [Feather Icons](https://feathericons.com/)
- [GitHub Logo](http://github.com/logos)

Style a Twitter clone with Tailwind CSS

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

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

## Code Snippets

**Call useOptimistic hook**

```tsx
const [optimisticState, addOptimisticState] = useOptimistic(
  initialState,
  (currentState, newState) => {
    // merge state
    // return new state
  }
);
```

**Add optimistic tweet**

```tsx
addOptimisticTweet({
  ...tweet,
  likes: tweet.likes - 1,
  user_has_liked_tweet: !tweet.user_has_liked_tweet,
});
```

## Resources

- [useOptimistic hook](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#enhancements)

Implement Optimistic UI with the React useOptimistic hook in Next.js

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

[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

[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

**Authenticate with GitHub OAuth**

```tsx
await supabase.auth.signInWithOAuth({
  provider: "github",
  options: {
    redirectTo: "http://localhost:3000/auth/callback",
  },
});
```

**Exchange code for Supabase session**

```tsx
await supabase.auth.exchangeCodeForSession(code);
```

## Resources

- [Supabase Auth Helper docs](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)
- [Next.js App Router docs](https://nextjs.org/docs/app)

Authenticate Users with GitHub OAuth using Supabase and Next.js Client Components

[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

- [Supabase guide to Login with GitHub](https://supabase.com/docs/guides/auth/social-login/auth-github)

Create an OAuth App with GitHub

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

**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**

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

## Resources

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

Query Supabase Data from Next.js Server Components

[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

**Create Next.js app**

```bash
npx create-next-app blue-bird
```

## Resources

- [Next.js App Router docs](https://nextjs.org/docs)
- [TypeScript docs](https://www.typescriptlang.org/)
- [Tailwind CSS docs](https://tailwindcss.com/)

Create a Next.js App with the create-next-app CLI

[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

**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**

```sql
insert into tweets(title)
values
  ('first tweet'),
  ('second tweet'),
  ('third tweet');
```

## Resources

- [Supabase docs](https://supabase.com/docs)
- [Supabase SQL Editor](https://app.supabase.com/project/_/sql)

Create a New Supabase Project and Basic PostgreSQL Schema

Remix is a full stack web framework that focuses on web standards and the server/client model so that you can develop the features your users want and need without being bogged down in over-abstractions. When you get good with Remix, you actually get good at the foundations of web development.

remix

Using a GitHub repo to deploy our application to Vercel, keeps our code and live production site in sync. In this lesson we look at using the [GitHub CLI](https://cli.github.com/) tool to create a public repo, and adding it as a remote origin for our project.

Additionally, we create a new Vercel project from this GitHub repo, add our Supabase environment variables, and deploy. Lastly, we update the Homepage URL in our GitHub OAuth app to be our new Vercel URL, and set our Supabase project's [Authentication Site URL](https://app.supabase.com/project/_/auth/url-configuration) to our new live application URL.

## Extension ideas

- Style the app using Tailwind CSS (or another method of choice)
- Implement the ability for a user to `update` and `delete` their own messages
- Add the option to set a username and display this alongside messages
- Add separate message threads/chat rooms
- Implement private messages/chat rooms

## Resources

- [GitHub CLI](https://cli.github.com/)
- [Vercel docs](https://vercel.com/docs)
- [Deploying Remix app to Vercel](https://vercel.com/guides/deploying-remix-with-vercel)

Deploy a Remix Application to Vercel from a GitHub Repository

Finding the *perfect* code editor theme is a myth.  There are always small visual tweaks you'd like to make, but forking and maintaining an entire theme is overkill.  This lesson shows you how to quickly and easily customize *any* theme directly within Cursor (or VS Code) using the `workbench.colorCustomizations` setting in your `settings.json` file.

**The Problem:**

*   No single theme perfectly matches everyone's preferences.
*   Minor visual annoyances (like search highlight colors) can impact focus and productivity.
*   Forking and publishing a theme for small changes is excessive.

**The Solution: `workbench.colorCustomizations`**

This setting allows you to override specific color values of your current theme *without* creating a new theme.  You get fine-grained control over the editor's appearance.

**How it Works:**

1.  **Open Settings (JSON):** Use the command palette (`Cmd/Ctrl + Shift + P`) and search for "Preferences: Open User Settings (JSON)". It is best to create a new editor group to the right, and then open the json settings, so that you can visualize your changes.
2.  **Add `workbench.colorCustomizations`:**  Within your `settings.json`, add a `"workbench.colorCustomizations"` object.
3.  **Use Autocomplete:** Inside this object, start typing "editor." and use Cursor's/VS Code's autocomplete to explore the available customization options.  Examples include:
    *   `editor.findMatchBackground`: Background color of search matches.
    *   `editor.findMatchHighlightBackground`: Background color of the *current* search match.
    *   `editor.findMatchBorder`: Border color of search matches.
    *   `editor.findMatchHighlightBorder`: Border color of the *current* search match.
    *   `editor.background`: Overall editor background color.
    *   ...and many more!
4.  **Set Color Values:** Assign valid color values (hex codes, named colors, etc.) to the properties you want to change.  You can even use transparency (alpha channel) with hex codes (e.g., `#FF000022` for a semi-transparent red).
5.  **Save and See the Changes:**  As soon as you save `settings.json`, the changes are applied *live* to your editor.  Experiment with different colors until you find what works best.

**Benefits:**

*   **Precise Control:**  Tweak individual elements of your theme without affecting others.
*   **No Forking Needed:**  Make personal adjustments without the overhead of creating and managing a separate theme.
*   **Live Updates:**  See your changes instantly as you edit the JSON.
*   **Easy Experimentation:**  Try out different colors and settings quickly.

This lesson demonstrates a simple yet powerful way to personalize your coding environment, improving focus and making your editor truly your own. No need for extensive theme development – just targeted tweaks to make things *just right*.


John Lindquist

Personalize Your Cursor/VS Code Theme with workbench.colorCustomizations

You will learn how to create and manage complex, nested schemas using a real world example (room bookings with guest details) used throughout all lessons. All created schemas are tested against potential bugs and we verify error messages.

The course covers topics such as:

- Utilizing Zod's shape and unwrap features to perform partial validations without losing the overall schema structure.
- Managing optional, nullable and nullish properties.
- Implementing unions and intersections to handle different types of data.
- Ensuring type safety with sets and maps, including custom validation logic for primitive values.
- Creating custom error messages for improved user feedback.

Get a solid understanding of how to leverage Zod to enhance runtime data validation in JavaScript/TypeScript applications 🔥

Tomasz Ducin

Advanced Type Checks with Zod

Get a solid understanding of how to leverage Zod to enhance runtime data validation in JavaScript or TypeScript applications

AI coding assistants (like Cursor's Composer) are powerful, but running a single instance can become a bottleneck, especially for larger tasks or when experimenting with different approaches.  This lesson shows you how to break free from that limitation by leveraging Git worktrees to enable *parallel* AI development.

**The Problem:**

*   Single Composer instances can be slow for complex tasks.
*   Multiple agents modifying the same files simultaneously lead to conflicts.
*   Traditional branching can be cumbersome for rapid experimentation.

**The Solution: Git Worktrees**

Git worktrees allow you to create multiple, *independent* working directories linked to the *same* Git repository. Each worktree can be associated with a different branch, providing isolated environments for development.

**Workflow:**

1.  **Create Worktrees:** Use `git worktree add -b <branch-name> ../<project-name>-<branch-name>` to create a new worktree and associated branch.  The `-b` flag creates the branch. The path (`../<project-name>-<branch-name>`) places the worktree in a sibling directory (cleaner organization). Repeat for each variation you want to explore.
2.  **Launch Multiple Cursor Instances:** Open Cursor in each worktree directory (e.g., `cursor ../my-project-variant1`). Each instance is now isolated and can work on its assigned branch.
3.  **Assign Tasks to Composer:**  Within each Cursor instance, use Composer (Chat or Agent mode) to work on specific tasks or implement different approaches to the same problem. Use `@` to provide context (files, directories, docs).
4.  **Monitor and Iterate:** Check in on each Composer instance's progress. Because they're in separate worktrees, there are no conflicts.
5.  **Merge the Best Solution:**  Once a branch has a successful solution, merge it back into your main branch using `git merge <branch-name>`.
6.  **Clean Up:** Remove the worktrees with `git worktree remove ../<project-name>-<branch-name>`.

**ZSH Functions (Optional but Powerful):**

The lesson introduces two ZSH functions (provided as code snippets) to automate this process:

*   `wtree()`:  Takes branch names as arguments, creates corresponding worktrees, installs dependencies (with `-p` flag for PNPM), and optionally launches Cursor in each.  This streamlines setup.
*   `wtmerge()`:  Takes a single branch name as an argument, merges that branch into `main`, and then *cleans up all* worktrees created by `wtree()`. This simplifies merging and cleanup.

**Benefits:**

*   **Parallel Development:**  Run multiple Composer instances simultaneously, drastically speeding up development.
*   **Conflict-Free Experimentation:**  Isolate different approaches in separate branches/worktrees, eliminating merge conflicts.
*   **Rapid Iteration:**  Quickly create, test, and merge (or discard) variations of your code.
*   **Clean Workspace:**  Worktrees keep your main project directory uncluttered.

This lesson empowers you to unlock the full potential of AI coding assistants by running them in parallel, fostering faster experimentation and more efficient development. You'll learn a practical technique that significantly boosts your productivity when working with AI-generated code.

```bash
# wtree: Create a new worktree for each given branch.
# Usage: wtree [ -p|--pnpm ] branch1 branch2 ...
#
# This function does the following:
#   1. Parses command-line arguments; if -p/--pnpm is provided, it will later run "pnpm install".
#   2. Determines the current branch and repository root.
#   3. Uses a fixed parent directory (~/dev) to house all worktree directories.
#   4. For each branch passed:
#        - If the branch does not exist, it is created from the current branch.
#        - It checks that a worktree for that branch does not already exist.
#        - It then creates a worktree in ~/dev using a naming convention: <repoName>-<branch>.
#        - If the install-deps flag is true, it runs "pnpm install" inside the new worktree.
#        - Finally, it either opens the new worktree via the custom "cursor" command (if defined)
#          or prints its path.
wtree() {
  # Flag to determine whether to run "pnpm install"
  local install_deps=false
  local branches=()

  # Parse command-line arguments
  while [[ $# -gt 0 ]]; do
    case "$1" in
      -p|--pnpm)
        install_deps=true
        shift
        ;;
      *)
        branches+=("$1")
        shift
        ;;
    esac
  done

  # Ensure at least one branch name is provided.
  if [[ ${#branches[@]} -eq 0 ]]; then
    echo "Usage: wtree [ -p|--pnpm ] branch1 branch2 ..."
    return 1
  fi

  # Determine the current branch; exit if not in a git repository.
  local current_branch
  current_branch=$(git rev-parse --abbrev-ref HEAD) || {
    echo "Error: Not a git repository."
    return 1
  }

  # Determine repository root and name.
  local repo_root repo_name
  repo_root=$(git rev-parse --show-toplevel) || {
    echo "Error: Cannot determine repository root."
    return 1
  }
  repo_name=$(basename "$repo_root")

  # Set fixed parent directory for worktrees.
  local worktree_parent="$HOME/dev"
  # Ensure the worktree parent directory exists.
  if [[ ! -d "$worktree_parent" ]]; then
    if ! mkdir -p "$worktree_parent"; then
      echo "Error: Failed to create worktree parent directory: $worktree_parent"
      return 1
    fi
  fi

  # Loop over each branch provided as argument.
  for branch in "${branches[@]}"; do
    # Define the target path using a naming convention: <repoName>-<branch>
    local target_path="$worktree_parent/${repo_name}-${branch}"
    
    echo "Processing branch: ${branch}"

    # Check if a worktree already exists at the target path.
    if git worktree list | grep -q "^${target_path}[[:space:]]"; then
      echo "Error: Worktree already exists at ${target_path}. Skipping branch '${branch}'."
      continue
    fi

    # If the branch does not exist, create it from the current branch.
    if ! git show-ref --verify --quiet "refs/heads/${branch}"; then
      echo "Branch '${branch}' does not exist. Creating it from '${current_branch}'..."
      if ! git branch "${branch}"; then
        echo "Error: Failed to create branch '${branch}'. Skipping."
        continue
      fi
    fi

    # Create the new worktree for the branch.
    echo "Creating worktree for branch '${branch}' at ${target_path}..."
    if ! git worktree add "$target_path" "${branch}"; then
      echo "Error: Failed to create worktree for branch '${branch}'. Skipping."
      continue
    fi

    # If the install flag is set, run "pnpm install" in the new worktree.
    if $install_deps; then
      echo "Installing dependencies in worktree for branch '${branch}'..."
      if ! ( cd "$target_path" && pnpm install ); then
        echo "Warning: Failed to install dependencies in '${target_path}'."
      fi
    fi

    # Optionally, open the worktree directory via a custom "cursor" command if available.
    if type cursor >/dev/null 2>&1; then
      cursor "$target_path"
    else
      echo "Worktree created at: ${target_path}"
    fi

    echo "Worktree for branch '${branch}' created successfully."
    echo "-----------------------------------------------------"
  done
}


# wtmerge: Merge changes from a specified worktree branch into main,
# then clean up all worktrees and delete their branches.
#
# Usage: wtmerge <branch-to-keep>
#
# This function does the following:
#   1. Verifies that the branch to merge (branch-to-keep) exists as an active worktree.
#   2. Checks for uncommitted changes in that worktree:
#        - If changes exist, it attempts to stage and commit them.
#        - It gracefully handles the situation where there are no changes.
#   3. Switches the current (main) worktree to the "main" branch.
#   4. Merges the specified branch into main, with proper error checking.
#   5. Uses "git worktree list" to retrieve all active worktrees (under ~/dev
#      and matching the naming pattern) and removes them.
#   6. Deletes each branch that was created for a worktree (skipping "main").
wtmerge() {
  # Ensure exactly one argument is passed: the branch to merge.
  if [ $# -ne 1 ]; then
    echo "Usage: wtmerge <branch-to-keep>"
    return 1
  fi

  local branch_to_keep="$1"

  # Determine the repository root and its name.
  local repo_root repo_name
  repo_root=$(git rev-parse --show-toplevel) || {
    echo "Error: Not a git repository."
    return 1
  }
  repo_name=$(basename "$repo_root")

  # Fixed parent directory where worktrees are located.
  local worktree_parent="$HOME/dev"

  # Retrieve all active worktrees (from git worktree list) that match our naming convention.
  local worktrees=()
  while IFS= read -r line; do
    # Extract the worktree path (first field)
    local wt_path
    wt_path=$(echo "$line" | awk '{print $1}')
    # Only consider worktrees under our fixed parent directory that match "<repo_name>-*"
    if [[ "$wt_path" == "$worktree_parent/${repo_name}-"* ]]; then
      worktrees+=("$wt_path")
    fi
  done < <(git worktree list)

  # Check that the target branch worktree exists.
  local target_worktree=""
  for wt in "${worktrees[@]}"; do
    if [[ "$wt" == "$worktree_parent/${repo_name}-${branch_to_keep}" ]]; then
      target_worktree="$wt"
      break
    fi
  done

  if [[ -z "$target_worktree" ]]; then
    echo "Error: No active worktree found for branch '${branch_to_keep}' under ${worktree_parent}."
    return 1
  fi

  # Step 1: In the target worktree, check for uncommitted changes.
  echo "Checking for uncommitted changes in worktree for branch '${branch_to_keep}'..."
  if ! ( cd "$target_worktree" && git diff --quiet && git diff --cached --quiet ); then
    echo "Changes detected in branch '${branch_to_keep}'. Attempting auto-commit..."
    if ! ( cd "$target_worktree" &&
            git add . &&
            git commit -m "chore: auto-commit changes in '${branch_to_keep}' before merge" ); then
      echo "Error: Auto-commit failed in branch '${branch_to_keep}'. Aborting merge."
      return 1
    else
      echo "Auto-commit successful in branch '${branch_to_keep}'."
    fi
  else
    echo "No uncommitted changes found in branch '${branch_to_keep}'."
  fi

  # Step 2: Switch to the main worktree (assumed to be the current directory) and check out main.
  echo "Switching to 'main' branch in the main worktree..."
  if ! git checkout main; then
    echo "Error: Failed to switch to 'main' branch."
    return 1
  fi

  # Step 3: Merge the target branch into main.
  echo "Merging branch '${branch_to_keep}' into 'main'..."
  if ! git merge "${branch_to_keep}" -m "feat: merge changes from '${branch_to_keep}'"; then
    echo "Error: Merge failed. Please resolve conflicts and try again."
    return 1
  fi

  # Step 4: Remove all worktrees that were created via wtree().
  echo "Cleaning up worktrees and deleting temporary branches..."
  for wt in "${worktrees[@]}"; do
    # Extract branch name from worktree path.
    local wt_branch
    wt_branch=$(basename "$wt")
    wt_branch=${wt_branch#${repo_name}-}  # Remove the repo name prefix

    echo "Processing worktree for branch '${wt_branch}' at ${wt}..."
    # Remove the worktree using --force to ensure removal.
    if git worktree remove "$wt" --force; then
      echo "Worktree at ${wt} removed."
    else
      echo "Warning: Failed to remove worktree at ${wt}."
    fi

    # Do not delete the 'main' branch.
    if [[ "$wt_branch" != "main" ]]; then
      if git branch -D "$wt_branch"; then
        echo "Branch '${wt_branch}' deleted."
      else
        echo "Warning: Failed to delete branch '${wt_branch}'."
      fi
    fi
  done

  echo "Merge complete: Branch '${branch_to_keep}' merged into 'main', and all worktrees cleaned up."
}
```


Launch Multiple Cursor Composer AI Agents to Work in Parallel

AI-generated code often comes riddled with errors, especially TypeScript errors.  Trying to fix these *one by one* with in-editor AI tools (like Cursor's "Fix with AI") can be slow, frustrating, and sometimes even *introduce* new problems.  The fixes can be too localized, missing the bigger picture.

This lesson demonstrates a more efficient workflow: leveraging the power of **reasoning models** (like those found in AI Studio or advanced ChatGPT models) to fix errors *in bulk*.

Here's the process:

1.  **Identify All Errors:** Use the "Problems" panel in your editor to get a comprehensive list of all errors in the file.  Don't try to fix them individually yet! (Use `Cmd/Ctrl + Shift + P`, then type "problems".)
2.  **Gather Context:**
    *   Copy the *entire file's code*.
    *   Copy the *entire list of errors* from the Problems panel.
3.  **Prompt the Reasoning Model:** Paste *both* the code and the error list into a reasoning model.  Your prompt should be something like:  "Please fix all of these errors and rewrite the entire file with the corrections."  The key is to give the AI the *full context*. Wrap your code with XML tags to help the AI recognize it.
4.  **Iterate (if needed):**  Copy the corrected code back into your editor.  If a few errors remain, *now* it's time to use in-editor AI tools (like Cursor's Composer or "Fix with AI") for the final cleanup. These tools are better suited for small, isolated issues.
5.  **Provide Additional Context (for Stubborn Errors):** If a specific error persists (e.g., related to a library like `yargs`), provide *even more* context to the AI:
    *   Include links to the library's documentation (NPM page, official docs).
    *   Use Cursor's `@` feature to add specific files or documentation to the context.
6. Make sure to test! Run `npm test` or whichever testing command you're using for this project.

**Why this works:**

*   **Holistic Understanding:** Reasoning models excel at understanding the *relationships* between different parts of the code. They can see how a change in one place affects others, leading to more consistent and correct fixes.
*   **Efficiency:** Fixing multiple errors in a single pass is *much* faster than addressing them individually.
*   **Reduced "Whack-a-Mole":**  Fixing one error often reveals another.  Bulk fixing with a reasoning model minimizes this frustrating cycle.

This lesson teaches you a practical, powerful technique to tame AI-generated code and get it working quickly, even when it arrives full of errors. By combining the strengths of reasoning models and in-editor AI, you'll become a more efficient and confident developer.


Bulk Fixing AI-Generated Code Errors with Reasoning Models and Cursor Composer

In this lesson, we learn that when querying MongoDB collections, we can control which properties are returned by using projections with the `findOne` method.

We demonstrate how to include or exclude fields by setting them to 1 or 0, respectively. For example, we can choose to include the name and position while excluding the `_id` field.

We also cover how to access nested properties and project specific elements from arrays using the `$slice` operator, allowing for more precise data retrieval based on our needs.

Return a subset of properties of a MongoDB Document (projections, $slice)

Return specific properties from MongoDB documents using projections in the findOne method, including nested fields and array slicing, $slice

In this lesson, we learn that counting documents that meet certain criteria in MongoDB can be done with the countDocuments() method.

We demonstrate how to retrieve the total number of documents when no query is specified and how to filter results using regular expressions.

For example, we can count employees with names containing a lowercase "a" or those with specific skills, using `$regex`.

Additionally, we show how to count documents where age is not equal to a given value, illustrating the versatility of the `countDocuments()` method in various scenarios.


Count documents satisfying a query in MongoDB Collection (countDocuments, $regex, $in)

Count documents in MongoDB collections using countDocuments() with query filters, including regex and specific conditions, using $regex, $in

In this lesson, we learn that searching for a MongoDB document by its ID can be a little tricky in the beginning.

We demonstrate how to use the `_id` field to search for specific documents and emphasize the necessity of wrapping the ID with the `ObjectId` constructor. This step is crucial because failing to do so can result in empty results, underscoring the importance of proper syntax when querying by document ID.


Find Document by id in MongoDB Collections

Find MongoDB documents by their unique _id using the ObjectId constructor without mistakes.

In this lesson, we learn that we can perform advanced filtering in MongoDB by using expressions within our queries. All thanks to `$expr`.

We demonstrate how to compare multiple document properties, such as ensuring age is less than salary using comparison operators (`$lt`, `$lte`, `$gt`, `$in`, `$nin`, etc).

Additionally, we explore filtering based on the length of an array (`$size`) to check for specific skills.


Filtering Documents using Expressions in MongoDB Collections ($expr, $size, $in, $and, etc)

Filter MongoDB documents using expressions $expr with comparison operators $lt, $gt, $eq and array length checks $size

In this lesson, we learn that combining multiple criteria in MongoDB queries can be done using logical operators such as `$and` and `$or`.

We demonstrate how to create queries that filter documents based on various conditions, such as _age_ and _skills_.

Additionally, we explore the use of the `$in` operator for matching any values in an array and the `$all` operator for ensuring all specified values are present.

This lesson provides essential skills for effective use of operators such as: `$in`, `$nin`, `$lt`, `$lte`, `$gt`, `$gte`, `$eq`, `$ne` (and many others) in querying MongoDB collections.



Combine Filtering Documents in MongoDB Collections ($and, $or, $in, $eq, etc)

Combine filtering criteria in MongoDB with logical operators like $and, $or; use $in and $all for array filtering in this lesson on document queries.

In this lesson, we learn that filtering documents from MongoDB collections can be achieved through the `find` and `findOne` methods.

We demonstrate how to use these methods to retrieve documents based on specific criteria, such as names or emails, and how to apply regular expressions for more general searches.

Additionally, we explore filtering by array values and using conditions like less than or greater than for numerical properties.


Filtering Documents in MongoDB Collections (find, findOne)

Learn to filter MongoDB documents using find and findOne methods with query criteria, regex, and array filtering in this lesson on document retrieval.

Jon Meyers

Search Results