Learn Postgres, Remix and Rxjs

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

Mocking authentication comes down to how it's implemented. With Mock Service Worker, you can mock the "Set-Cookie" response header to emulate a user session, but with Remix you don't even have to. Instead, in this lesson we will intercept only the authorization call to a database, leaving Remix to handle sessions, cookies, and auth state for us. 

Use MSW to Mock Authentication in Remix

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

[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

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

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

[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

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

To mutate data in Remix, we use an Action function. In this lesson, we look at creating a Remix `<Form />` to submit the content of a message as a `post` request to our `Action` function.

Additionally, we use the server-side Supabase client from the Remix Auth Helpers package to make an authenticated request to Supabase, writing the new message to the `messages` table.

Futhermore, we run into an issue with RLS as we have not yet written a policy for the `insert` action. By setting this to the `authenticated` role and ensuring that the `user_id` column is equal to the value returned by the `auth.uid()` function - a function we get from Supabase to retrieve the ID for the user attempting to insert a new row - we ensure that users can not write a message on someone else's behalf.

Lastly, we use the `auth.uid()` function to set the default value of the `user_id` column to the ID of the user attempting to `insert` the new row in the `messages` table.

## Code Snippets

**Write data to Supabase**

```tsx
export const action = async ({ request }: ActionArgs) => {
  const response = new Response();
  const supabase = createServerSupabase({ request, response });

  const { message } = Object.fromEntries(await request.formData());

  await supabase.from("messages").insert({ content: String(message) });

  return json(null, { headers: response.headers });
};
```

**Form to submit to action**

```tsx
<Form method="post">
  <input type="text" name="message" />
  <button type="submit">Send</button>
</Form>
```

**Add policy for insert**

```sql
create policy "users can insert their own messages" on "public"."messages"
as permissive for insert
to authenticated
wuth check (user_id = auth.uid());
```

> SQL code snippets can be run against your Supabase database by heading over to your project's [SQL Editor](https://app.supabase.com/project/_/sql), pasting them into a new query, and clicking `RUN`.

## Resources

- [Supabase docs - insert](https://supabase.com/docs/reference/javascript/insert)
- [Implement Row Level Security in Supabase (video)](https://www.youtube.com/watch?v=Ow_Uzedfohk)
- [Remix docs - Writing data](https://remix.run/docs/en/v1/guides/data-writes)

Securely Mutate Supabase Data with Remix Actions

The OAuth flow is asynchronous. This means we get redirected to the landing page before GitHub and Supabase have decided that you can be trusted! 👍

Since our Loader functions get called when we first load the page they make a request to Supabase before receiving a valid access token. This causes RLS to deny the request to select data.

Once our session has been correctly set, Supabase is happy but we aren't telling Remix to fetch this data again. In this lesson, we look at combining the `onAuthStateChange` hook from Supabase with the `useRevalidator` hook in Remix to recall any active `loaders` when the state of our user changes, keeping data in sync with mutations.

Therefore, any time the user's session is updated - the auth flow has completed for either signing in or out - Remix will automatically call all loader functions that are active on the current route (this could be many with nested routing), fetching fresh data from Supabase with a valid access token.

## Code Snippets

**onAuthStateChange listener**

```tsx
useEffect(() => {
  const {
    data: { subscription },
  } = supabase.auth.onAuthStateChange((event, session) => {
    if (session?.access_token !== serverAccessToken) {
      revalidator.revalidate()
    }
  });

  return () => {
    subscription.unsubscribe();
  };
}, [supabase, serverAccessToken, revalidator]);
```

## Resources

- [Supabase docs - onAuthStateChange](https://supabase.com/docs/reference/javascript/auth-onauthstatechange)
- [Reactor Router docs - useRevalidator](https://reactrouter.com/en/main/hooks/use-revalidator)

Keep Data in Sync with Mutations Using Active Remix Loader Functions

Remix Loaders allow us to fetch data server-side, before rendering a component. This works great if you are implementing your authorization rules for data fetching in the loader function, however, Supabase allows us to use Row Level Security policies to write access policies alongside the data in the database.

By default, `supabase-js` stores session data in `localStorage`, which exists only within the user's browser. If we want this session to be available within Loader or Action functions in Remix, we need to store the session in a cookie. Cookies are automatically sent with every request to the server.

In this lesson, we look at using the Supabase Auth Helpers package for Remix to automate this process, and swap out the storage mechanism for the Supabase client, to use cookies to store session data.

Additionally, we refactor our application to use the new `createServerClient` and `createBrowserClient` functions, making cookies the single source of truth about the user's current session, across the server and client-side of our Remix app.

## Code Snippets

**Install Remix Auth Helpers**

```bash
npm i @supabase/auth-helpers-remix
```

**Create server-side Supabase client**

```tsx
import { createServerClient } from "@supabase/auth-helpers-remix";

import type { Database } from "db_types";

export default ({
  request,
  response,
}: {
  request: Request;
  response: Response;
}) =>
  createServerClient<Database>(
    process.env.SUPABASE_URL!,
    process.env.SUPABASE_ANON_KEY!,
    { request, response }
  );
```

**Create client-side Supabase client (simplified)**

```tsx
import { useState } from "react";
import { createBrowserClient } from "@supabase/auth-helpers-remix";

export const loader = async ({ request }: LoaderArgs) => {
  const env = {
    SUPABASE_URL: process.env.SUPABASE_URL!,
    SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY!,
  };

  return json({ env });
};

const { env, session } = useLoaderData<typeof loader>();

const [supabase] = useState(() =>
  createBrowserClient<Database>(env.SUPABASE_URL, env.SUPABASE_ANON_KEY)
);

return <Outlet context={{ supabase }} />;
```

**Use Supabase in a loader**

```tsx
export const loader = async ({ request }: LoaderArgs) => {
  const response = new Response();
  const supabase = createServerSupabase({ request, response });

  const { data } = await supabase.from("messages").select();

  return json({ data }, { headers: response.headers });
};
```

**Use Supabase in an action**

```tsx
export const action = async ({ request }: ActionArgs) => {
  const response = new Response();
  const supabase = createServerSupabase({ request, response });

  const { data } = await supabase.from("messages").insert({ content: "hello" });

  return json({ data }, { headers: response.headers });
};
```

**Use Supabase in a component**

```tsx
import { useOutletContext } from "@remix-run/react";

import type { SupabaseOutletContext } from "~/root";

export default function Login() {
  const { supabase } = useOutletContext<SupabaseOutletContext>();

  const handleLogin = async () => {
    await supabase.auth.signInWithOAuth({
      provider: "github",
    });
  };

  return <button onClick={handleLogin}>Login</button>;
}
```

## Resources

- [Supabase docs - Remix Auth Helpers](https://supabase.com/docs/guides/auth/auth-helpers/remix)

Make Cookies the User Session Single Source of Truth with Supabase Auth Helpers

The [supabase-js](https://supabase.com/docs/reference/javascript) package allows us to connect to our Supabase project, and easily query and mutate data. In this lesson, we install `supabase-js`, set up environment variables for `SUPABASE_URL` and `SUPABASE_ANON_KEY`, and create a Supabase client to use across our application.

Additionally, we look at writing an RLS policy to enable `read` access to our `messages` table, use our Supabase client to select all messages, and display them in our Remix app on load.

## Code Snippets

**Install supabase-js**

```bash
npm i @supabase/supabase-js
```

**Use a Loader function to fetch data**

```tsx
export const loader = async () => {
  return null;
};
```

**Fetch data with Supabase Client**

```tsx
const { data } = await supabase.from("messages").select();
```

**Full component**

```tsx
import { useLoaderData } from "@remix-run/react";
import supabase from "utils/supabase";

export const loader = async ({}) => {
  const { data } = await supabase.from("messages").select();
  return { data };
};

export default function Index() {
  const { data } = useLoaderData();
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}
```

**Enable read access with RLS policy**

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

> SQL code snippets can be run against your Supabase database by heading over to your project's [SQL Editor](https://app.supabase.com/project/_/sql), pasting them into a new query, and clicking `RUN`.

## Resources

- [Supabase-js docs](https://supabase.com/docs/reference/javascript)
- [Implement Row Level Security in Supabase (video)](https://www.youtube.com/watch?v=Ow_Uzedfohk)
- [Auto-generated project docs](https://app.supabase.com/project/_/api)

Query Supabase Data with Remix Loaders

[Remix](https://remix.run) is a web application framework built on top of React, that gives you sprinkles of server when you need it - fetching data on page load, mutating values in a db etc. In this lesson, we use the `create-remix` package to setup our new app. Additionally, we run the project is development mode with `npm run dev` and update the content on our `index` route.

## Code Snippets

**Create a Remix app**

```bash
npx create-remix <name-of-project>
```

## Resources

- [Remix docs](https://remix.run/docs/en/v1)

Setting Up a Remix Project

[Supabase](http://supabase.com?utm_source=egghead&utm_campaign=remix) is a collection of open-source tools that wrap around a PostgreSQL database. In this course, we look at building a realtime chat application with Remix, using Supabase for db hosting, authentication, authorization and subscribe to realtime db events - updating the UI as the database changes.

We will learn about:

- loaders and actions in Remix
- querying and mutating data with Supabase
- authentication with GitHub
- authorization with RLS
- merging client and server state with realtime events
- deploying a Remix app to Vercel

This course is 100% TypeScript, however, don't stress if you don't have any experience with TS, as Supabase does most of the heavy lifting here! 🎉

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Build a Realtime Chat App with Remix and Supabase

In your pnpm monorepo, you can easily create new applications under your apps folder. 

Here, you'll create a new Remix app by running the command `pnpx create-remix@latest`. The app you generate functions just like any other full featured Remix app!

Add a Remix App to a pnpm Workspace Monorepo

Learn Remix by Building a Social Media Platform with TypeScript and Prisma

In lesson 08, [Deploy a Remix Application](https://egghead.io/lessons/egghead-deploy-a-remix-application-with-production-database-to-the-internet-through-vercel), we said that the app was MVP status. This isn’t quite true for many applications. You will inevitably need users on your site to make it useful for your customers (or even for yourself).

To get started adding users, you will update Prisma with a user model and associate it to Posts. From there you’ll update your posts to display user information. You’ll see how to migrate a Prisma schema in PlanetScale as you deploy these changes.

One nice tid bit you will pick up along the way is a TypeScript 4.5 feature, Awaited. Awaited will unwrap a promise type for you so that you don’t have to do it yourself which is a big relief.

Create and Utilize a User Model with Prisma in Remix

Finally, you want to associate users to the posts that they make. To do this you will grab the user data from authenticator.isAuthenticated API to pass to the post creation. This data does not need to be validated because it’s coming from the session storage which has already been validated.

Add User Data to a Post Creation in Remix

Currently the only way to know if you are logged in is if you check the cookie that is set in the browser. This isn’t super user friendly. You want to add a visual cue as well as a log out button to the nav.   To accomplish this, you can check if a user exists with the isAuthenticated function that was created in the auth service. If there is a user you will display their email, loaded up from the isAuthenticated check, as well as a log out button.

The log out button will post to a resource route. This route will log out the user and redirect them to the log in page. 

Finally, you will lock up the index page so only logged in users can see and add posts.

Implement Log out Functionality and Only Allow Logged in Users to See Posts

Here comes the bulk of complexity when dealing with authentication. You need to handle verifying that a user account exists in the database and when it passes somehow referencing it throughout your application.

A great way to do this is through Session Storage. You can implement session storage with HTTP cookies (which is what you will do here) or with a database. You’ll implement functions `commitSession`, `destroySession`, and `getSession` but luckily the Remix docs will give you a head start here.

Along with session storage, you will need to implement an authentication strategy. Again there are a few ways you can do this whether that’s magic email, 3rd party auth like GitHub or Twitter, or email / password. Because you are already accepting email / password, that is what you will do!

Implement User Login in Remix with a Form Strategy and Session Storage

You need to accept input from a user to sign them up to your application. Creating a user in the database is a straightforward Prisma.create function call. 

The tricky part here is that we want to ensure bad data is not inputed into the form. We’ve done form validation before but this lesson will show you a more complex version of it.   Among the validation that is applied, you will hash the password that’s given to us before saving it to the database as well as check the database for existing users when a sign up is attempted.

Validate User Sign Up Data in Remix and Hash a Password

To further prep for implementing user sign up and log in, you will create a sign up and log in page. To do this, there are a few development workflows that you’ll be introduced to. You will create a reusable button component from the previous button that was created to use inside the Nav header. 

To actually reuse the buttons, you’ll need to create a nav. One thing that you shouldn’t do is apply a nav to every page you create. This is why Remix has layout routes and in this case because it’s an application layout, you will want a pathless — pathless meaning it won’t show up in the url — layout route. This is denoted with two underscores in the layout file, for an app that is `__app`.

Along the way you will be introduced to an awesome component pattern that implements an `as` prop. What this will do is let you define your button AS a link so that you can use actual HTML links instead of buttons for accessibility reasons.

Create and Use a Layout with Remix Pathless Layout Routes

This lesson demonstrates how to give Cursor direct access to your terminal output using the [Nx MCP extension](https://nx.dev/getting-started/ai-integration?utm_source=youtube&utm_medium=videos&utm_campaign=Nx-AI&utm_id=Nx-AI), enabling automatic error detection and fixing in monorepo projects.

**Workflow demonstrated in this lesson:**

- Encounter a runtime error when serving a Vite application in an Nx monorepo
- Install and configure the Nx Console extension with MCP integration
- Ask Cursor to check your terminal for errors and fix the underlying issues
- Watch as the AI accesses running task details and terminal output through Nx MCP tools
- Observe how it analyzes workspace relationships to identify incorrect imports and missing dependencies

**Key benefits:**

- Seamless Error Handling: AI gains direct access to terminal output and running task information
- Automatic Diagnosis: Accurately identify the root cause of errors without manual copying
- Context-Aware Fixes: Leverage workspace knowledge to implement proper solutions
- Reduced Context Switching: Eliminate the need to manually relay information between terminal and AI



Juri Strumpflohner

Enable Cursor to directly access the terminal to read the output and fix issues

See how Nx MCP gives AI coding assistants direct access to terminal output and running tasks, enabling automatic error detection and fixing.

This lesson demonstrates how to solve the predictability problem when using AI to generate code in monorepos by combining Cursor with Nx generators.

**Workflow demonstrated in this lesson:**

- Explore how Nx generators provide predictable scaffolding for new libraries
- Set up [Nx Console with MCP](https://nx.dev/features/enhance-AI?utm_source=egghead&utm_medium=videos&utm_campaign=Nx-AI&utm_id=Nx-AI) integration to expose generator capabilities to Cursor
- Use the AI assistant to brainstorm a new feature with the help of the Nx MCP tools
- Have Cursor leverage the Nx MCP tools to trigger the appropriate Nx generator for creating a React-based feature library
- Observe how the AI assistant takes the generated library and further integrates it into the codebase

**Key benefits:**

- **Predictable Code Structure**: Ensure generated libraries follow your project's and organization's conventions
- **Consistent Setup**: Maintain uniform configuration across TypeScript projects and package.json files
- **Guided Implementation**: Combine AI instructions with structured, predictable code generation

Enable Cursor to generate predictable project setups

Learn how to combine Cursor AI with Nx generators for predictable library creation in monorepos, ensuring consistent structure across your codebase.

This lesson demonstrates how AI assistants struggle with complex monorepo structures and how to dramatically improve their understanding using the [Nx MCP extension](https://nx.dev/features/enhance-AI?utm_source=egghead&utm_medium=videos&utm_campaign=Nx-AI&utm_id=Nx-AI) in Cursor.

**Workflow demonstrated in this lesson:**

- Observe how AI initially attempts to understand monorepo structure by scanning package.json files and analyzing folder hierarchies
- Install the Nx Console extension and configure the Nx MCP server in your project
- Enable the Nx MCP integration in Cursor's settings to access 15 powerful workspace tools
- Ask the AI assistant questions about your workspace structure and dependencies
- Watch as the AI leverages Nx's knowledge to accurately identify project relationships
- Visualize dependencies through an interactive graph generated by the Nx tools

**Key benefits:**

- Enhanced Workspace Understanding: AI assistants gain direct access to Nx's comprehensive workspace knowledge
- Accurate Dependency Mapping: Precisely identify connections between libraries and applications
- More efficient parsing of your workspace structure for your AI assistant

Give Cursor monorepo awareness with the Nx MCP

Learn how to enhance AI capabilities in monorepo setups using Nx MCP integration with Cursor, providing better project insights and dependency visualization.

TypeScript can sometimes feel like bunch of nonsense. But once you internalize a few key patterns, the type system starts to feel like a powerful tool instead of an obstacle.

Here are a few tricks that I’ve personally found valuable, especially if you’re working on a large codebase or building libraries.

---

## 1. Optional Keys vs Optional Values

There’s a big difference between marking a property as optional and allowing `undefined` as a value. These look similar:

```ts
type OptionalKey = {
  foo?: string;
}

type OptionalValue = {
  foo: string | undefined;
}
```

But they behave differently:

* `foo?: string` means the key `foo` might not be present at all.
* `foo: string | undefined` means `foo` is always present, but its value might be `undefined`.

Why this matters? The difference between them affects the way you use it:

* How you check if a property exists
* Function argument inference
* Serializing/deserializing data from external sources

### Example

```ts
function logFoo(obj: OptionalKey) {
  if ('foo' in obj) {
    console.log(obj.foo?.toUpperCase());
  }
}

function logBar(obj: OptionalValue) {
  console.log(obj.foo?.toUpperCase()); // May log undefined
}
```

As a rule of thumb, use `foo?: Type` (Optional Key) when the property might not be present, and `foo: Type | undefined` (Optional Value) when the key is always expected.

---

## 2. Pick and Omit for Object Key Manipulation

When you need to reshape object types by including or excluding specific keys, `Pick` and `Omit` are your go-to tools.

This type utilities are part of the language and are always available for your use, they are particulary useful when you need to derive types.

> Don't forget, Pick and Omit works over Object shapes

### Pick

```ts
type User = {
  id: number;
  name: string;
  email: string;
};

type PublicUser = Pick<User, 'id' | 'name'>;
// { id: number; name: string }
```

`Pick` is useful when exposing a public-facing API without leaking sensitive fields, it lets you choose what properties will be included

### Omit

```ts
type PrivateUser = Omit<User, 'email'>;
// { id: number; name: string }
```

Use `Omit` when you want to reuse a base type but remove some fields for specific scenarios, like forms or UI display logic.

These utilities keep your types DRY and consistent. Instead of redefining structures, you can derive them from existing ones, reducing duplication and potential errors.

---

## 3. Extract and Exclude for Union Filtering

Unlike `Pick` and `Omit`, which work on object keys, `Extract` and `Exclude` operate on union types, they are pretty similar in how the work.

### Extract

```ts
type Status = 'draft' | 'published' | 'archived';

type ArchivedOnly = Extract<Status, 'archived'>;
// 'archived'
```

Use `Extract` when you want to narrow down a union to only include specific members.

### Exclude

```ts
type VisibleStatus = Exclude<Status, 'archived'>;
// 'draft' | 'published'
```

Use `Exclude` when you want to remove one or more members from a union.


These are essential tools when refining API responses, filtering variants, or creating conditional logic that needs to type-check specific string literal options.

---

## 4. Loose Autocomplete

This is a different kind of trick, this one affects how your editor understand your types.

Sometimes you want to offer a set of suggestions to the user without forcing them to pick from a fixed list.

### The trick

```ts
type Variant = 'success' | 'warning' | 'info'

function setVariant(variant: Variant | (string & {})) {
  // ...
}
```

Now TypeScript will offer autocompletion for the variants defined in the `Variant` union, but will also allow  allow any other string.


`string & {}` is essentially still a string, but TypeScript treats it as a branded version, preserving autocomplete while keeping it assignable to `string`.

> [Here](https://egghead.io/blog/using-branded-types-in-typescript) you can found another article related to [Branded Types](https://egghead.io/blog/using-branded-types-in-typescript)

### Use cases

* Props with suggested values
* Config objects
* Third-party data with flexible inputs

---

## 5. Mapped Types for Smart Rewrites

Mapped types let you create new types from existing ones by transforming each property. This concept is a cornerstone of TypeScript’s type system and is covered more deeply in my article: [Learn the Key Concepts of TypeScript’s Powerful Generic and Mapped Types](https://egghead.io/blog/learn-the-key-concepts-of-typescript-s-powerful-generic-and-mapped-types).

You can consider Mapped types as some kind of function that transform a type in another by using all of the utilities and features of Typescript, like the above utilities and tricks, but also string literals, and more.

### Example: feature flags

```ts
type Config = {
  debug: string;
  logging: string;
};

type FeatureFlags = {
  [K in keyof Config]: boolean;
};
// This will create the following type
// { debug: boolean; logging: boolean }
```

### General Utility Type

```ts
type Booleanize<T> = {
  [K in keyof T]: boolean;
};
```

Mapped types are perfect for:

* Adapting backend responses
* Creating flexible utility types
* Rewriting shapes while preserving keys
* Enforcing contracts between layers

They’re also essential in combination with generics to create reusable type logic across your app or library.

> Found more about Generics in the following article [An Introduction to Typescript Generics](https://egghead.io/blog/an-introduction-to-typescript-generics)

---

## 6. The IIMT Pattern (Infer Inside Mapped Type)

This pattern unlocks the power of `infer` within mapped types, allowing you to extract and reuse internal type information from complex structures.

It dynamically inspects each property of a type (by using `infer`), and if that property matches a specific shape (e.g., a function), it extracts part of it.

This means you can build new types that are entirely based on the structure of other types without manually copying anything.

### The pattern

```ts
type API = {
  getUser: () => Promise<{ name: string }>;
  logout: () => void;
};

type ReturnTypes<T> = {
  [K in keyof T]: T[K] extends (...args: any) => infer R ? R : never;
};

// Result:
// {
//   getUser: Promise<{ name: string }>;
//   logout: void;
// }
```

Here, ReturnTypes iterates over each key in the API object and uses conditional types to check if the value is a function. If it is, it uses infer R to grab the return type of that function.

### How it works
- `keyof T` iterates over each key of the input type.
- `T[K]` accesses the value type at each key.
- `T[K] extends (...args: any) => infer R` checks if that value is a function. (consider this as a conditional block)
-  `infer R` captures the return type of the function.
- If the value is not a function, the fallback is never.

This pattern is composable—you can use it to build return type maps, argument type maps, or anything else you need.

```ts
type ArgumentTypes<T> = {
  [K in keyof T]: T[K] extends (...args: infer A) => any ? A : never;
};
```

This will give you a type with the argument list of each function in a mapped type.

You can use this in different situations like:

- Generating automatic schemas
- Building strongly-typed service clients
- Rewriting function maps
- Validating types without duplicating logic

If you’re building libraries or dynamic APIs, this pattern is a must-have in your TypeScript toolbox.

Once it clicks, it opens the door to expressive, scalable, and maintainable type logic.




Matías Hernández

Advanced TypeScript Tricks for Cleaner, Safer Code

Improve your TypeScript skills with advanced patterns like Pick, Exclude, mapped types, and the infer-inside-mapped-type trick.

John Lindquist

AI Dev Essentials #8: Claude's Costly Lessons, Google's AI Flood & Workshop Alert 🚀

Claude Max Mode in Cursor is powerful but pricey—one vague task can rack up costs fast. Learn how to control it and explore the latest AI dev tools.

Debugging complex web forms can be a grind. You manually input data, check console logs, and painstakingly try to reproduce bugs. This lesson unveils a powerful, largely automated workflow using Cursor's AI agent in conjunction with the Playwright MCP to thoroughly test a web form, identify issues, and even fix the underlying code.

First, you'll see how to instruct the AI to instrument your form's code with exhaustive console logging. Then, by providing only the URL of the live form, you'll delegate the testing process to the AI, which uses Playwright to interact with the form in multiple ways, attempting to break it and discover edge cases. The AI then analyzes the generated console logs to produce a detailed report of its findings. Finally, armed with this report and the original code, the AI can attempt to fix the identified bugs and re-verify its changes, all while you "go get a sandwich."

**Workflow demonstrated in this lesson:**

*   Instruct Cursor's AI agent to add comprehensive `console.log` statements to your form's TypeScript (.tsx) file.
*   Provide the live URL of the web form (running on `localhost`) to the AI, without giving it direct access to the updated code file.
*   Direct the AI to use the Playwright MCP to open the URL in a browser.
*   Task the AI with devising and executing multiple test scenarios (e.g., empty submission, invalid inputs, mismatched passwords) to fill out and submit the form.
*   Have the AI retrieve and analyze the browser's console logs after each test attempt.
*   Generate a consolidated report detailing the form's behavior, observed errors, and potential bugs based on the logs.
*   Instruct the AI to use this report and the original form code (now brought back into context) to fix the identified issues.
*   Optionally, have the AI re-run the tests to verify the fixes.

**Key benefits:**

*   **Automated Test Execution:** Leverage Playwright through Cursor to automatically interact with your live form.
*   **AI-Driven Test Case Generation:** The AI devises different input strategies to uncover bugs.
*   **Log-Based Bug Reporting:** Automatically capture and analyze console output to pinpoint issues.
*   **Hands-Off Debugging:** Delegate the testing and initial bug reporting to the AI.
*   **Efficient Bug Fixing Cycle:** Use AI-generated reports to quickly guide AI-assisted code corrections.
*   **Focus on High-Level Direction:** Instead of manual testing, you guide the AI's testing strategy and bug-fixing process.

By the end of this lesson, you'll have a robust method for delegating the tedious aspects of form testing and debugging to Cursor's AI, allowing for more efficient development and a more reliable end product.

---

**Phase 1: Instrumenting Code with Exhaustive Logging**

**Context:**
*   `{@filePath}` (e.g., `App.tsx`) is in Cursor's context.

**Prompt:**
"In `{@filePath}`, add exhaustive console logging for all form events, state changes, and validation logic. Focus on capturing input values, current errors, and the outcome of validation checks. The goal is to have detailed logs for later analysis. Do *not* fix any existing code errors; only add logging. Stop after modifying the file."

---

**Phase 2: AI-Driven Form Testing with Playwright and Log Analysis**

**Context:**
*   `{@formURL}` (e.g., `http://localhost:5173`) is in Cursor's context.
*   The live form at `{@formURL}` should be running the version of the code that *includes the exhaustive logging* added in Phase 1.
*   Playwright MCP is available.

**Prompt:**
"Using the Playwright MCP and the live form at `{@formURL}`:
1.  Devise [N, e.g., 3-5] distinct test scenarios to fill out and submit the form. Include scenarios designed to trigger validation errors and edge cases (e.g., empty submission, invalid data types, boundary values, mismatched passwords).
2.  For each scenario:
    *   Execute the form interaction using Playwright.
    *   Retrieve all browser console logs generated during that interaction.
3.  Compile a consolidated 'Form Behavior Report' detailing:
    *   Each test scenario and the inputs used.
    *   Observed behavior/UI state (e.g., error messages displayed).
    *   Key console log outputs relevant to errors or unexpected behavior.
    *   Any discrepancies or potential bugs identified.

---

**Phase 3: Fixing Bugs Based on AI Report and Re-Verification**

**Context:**
*   The 'Form Behavior Report' from Phase 2 is in the chat history.
*   `{@filePath}` (e.g., `App.tsx` – the original file, *not* the one Playwright interacted with, unless it's the same deploy) is in Cursor's context.
*   The live form at `{@formURL}` can be updated/re-deployed with fixes.
*   Playwright MCP is available.

**Prompt:**
"Based on the 'Form Behavior Report' (from our previous conversation) and the code in `{@filePath}`:
1.  Analyze the reported issues and implement the necessary code changes in `{@filePath}` to fix them.
2.  After applying the fixes and assuming the live form at `{@formURL}` is updated with these changes:
    *   Re-run *all previously defined test scenarios* using the Playwright MCP.
    *   Retrieve and analyze the console logs for each.
3.  Provide a verification summary: confirm if the original bugs are fixed and if any new regressions were introduced."

Capture Browser Logs with Playwright MCP in Cursor to Generate Reports

Fixing runtime errors in web applications, especially those that require browser interaction or appear in stages, can be a tedious back-and-forth. This lesson demonstrates how to create a powerful, automated debugging loop using Playwright MCP integrated into Cursor IDE via custom Rules, allowing the AI to interact with your live application, identify errors, and iteratively fix them.

**Workflow demonstrated in this lesson:**

*   Install and configure the Playwright MCP server in Cursor settings.
*   Create a custom Cursor Rule (e.g., "autofix") instructing the AI to:
    *   Use Playwright MCP to open a specified URL in a browser.
    *   Check for any errors displayed on the page.
    *   Automatically attempt to fix those errors in your codebase.
    *   Iterate this process until all errors are resolved.
*   Invoke the custom rule within Cursor's AI Agent, providing the application's URL.
*   Observe the AI agent launch Playwright, navigate the browser, identify errors, and apply code changes.
*   For errors hidden behind UI elements (like an error button), provide a screenshot to the AI, instructing it to interact with the UI to reveal and then fix subsequent errors.

**Key benefits:**

*   **Automated Debugging Cycle:** Let the AI handle the repetitive task of launching, testing, and fixing common web application errors.
*   **Iterative Problem Solving:** The AI can tackle multiple errors sequentially, making changes and re-testing.
*   **Browser Interaction:** Leverages Playwright to understand the application's state directly from the browser.
*   **Visual AI Assistance:** Use screenshots to guide the AI in interacting with UI elements to uncover and fix deeper issues.
*   **Reduced Manual Effort:** Spend less time manually debugging and more time on feature development.

By combining Playwright MCP with Cursor's AI Agent and custom Rules, you can significantly streamline your web development workflow, turning a frustrating debugging process into an automated one.

---

```json
    "playwright": {
      "command": "pnpm",
      "args": ["dlx", "@playwright/mcp@latest"]
    }
```

```
Please use the Playwright MCP to open a browser to the URL I provide, check for any errors, and then automatically fix those errors in my codebase, then continue to iterate until all the errors are gone.
```

Autofix Browser Errors with the Playwright MCP in Cursor

Automate browser-based debugging in web apps using Playwright MCP and Cursor IDE Rules—AI detects and fixes errors in real-time with minimal dev effort.

AI Dev Essentials #7: Microsoft's AI Blitz, Google's NotebookLM Shines & New Coding Agents

AI agents are reshaping coding in GitHub and VS Code, while NotebookLM’s mobile app quietly revolutionizes how developers collect and recall research on the go.

After a long AI-driven coding session in Cursor, getting a "second pair of eyes" on the generated code is crucial. Manually reviewing everything can be time-consuming. This lesson demonstrates how to use the CodeRabbit VS Code extension for an initial AI-powered code review, and then leverage Cursor's Agent to intelligently address the identified issues, even integrating test runs into the AI conversation.

**Workflow demonstrated in this lesson:**

*   Install and use the CodeRabbit extension to initiate an AI code review on your recent changes.
*   Examine potential issues and suggestions surfaced by CodeRabbit within the VS Code sidebar.
*   Apply CodeRabbit's direct code suggestions or use its "Fix with AI" feature.
*   Copy CodeRabbit's "Fix with AI" instructions into Cursor's Agent for more interactive and context-aware fixes.
*   Provide additional context to Agent, such as specific test commands (e.g., from Atuin command history), to guide the AI in fixing code and ensuring tests pass.
*   Iteratively work with Agent and CodeRabbit to refine code, apply fixes, and verify changes.
*   Stage changes with Git to easily revert or compare AI-suggested modifications.

**Key benefits:**

*   **Automated First-Pass Review:** Quickly get AI-driven feedback on your code changes.
*   **Integrated AI Fixing:** Seamlessly transition from CodeRabbit's suggestions to Cursor's Agent for more nuanced problem-solving.
*   **Contextual Debugging with AI:** Provide specific test commands and error messages to Agent for targeted fixes.
*   **Iterative Refinement:** Use the AI tools in a loop to address issues, test, and improve code quality.
*   **Improved Confidence:** Validate AI-generated and AI-assisted changes by running tests as part of the workflow.

By combining CodeRabbit's review capabilities with Cursor's Agent, you can create a more efficient and reliable workflow for reviewing, fixing, and testing code generated or modified with AI assistance.

Local AI Code Reviews with the CodeRabbit Extension in Cursor

Learn how to create a simple MCP Server to search GitHub Issues.

I'll show you how to set up an MCP server tool, receive parameters, add the server to Cursor, and run it. We'll see how we can return a simple text response from the MCP server, as well as a markdown-formatted text containing clickable links.

Ákos Kőműves

Create a Simple GitHub Issue Search MCP Server using Cursor

Learn to build a simple MCP server to search GitHub issues and use it from Cursor.

Search

Search Results