egghead.io PRO member lessons

Creating powerful and context-aware tools for Cursor IDE becomes straightforward when leveraging information directly from your current project. In this lesson, you'll learn how to build a custom MCP (Machine Command Protocol) tool that intelligently requests essential details—such as the current project path and conversation summaries—from your Cursor project. Workflow demons

Setting up custom MCP (Machine Command Protocol) servers in Cursor can involve tedious steps, such as configuring node paths or referencing additional commands. This lesson shows how to streamline this process by bundling your MCP server directly into a standalone executable. Workflow demonstrated in this lesson: - Use a simple MCP server project starter. - Run a single bundling

Learn how to set up Vitest Browser Mode with React Router to test React applications. I'll show you how to configure Vitest Browser Mode using the `vitest init browser` command in an existing React Router application, update TypeScript settings, and Vite config. We'll write a simple test using the Browser Mode API to verify the behavior of a simple Search component.

In this lesson, we explore how TanStack Router integrates with the [native browser history API](https://developer.mozilla.org/en-US/docs/Web/API/History) to manage navigation. As we navigate through different routes, the URL changes are stored in the browser's history, allowing users to use the forward and backward buttons to traverse their navigation history. This functionality

In this lesson, we explore how to hook into TanStack Router's lifecycle hooks to execute custom logic during route changes. The hooks we'll look into are: `onEnter`, `onStay`, and `onLeave`, which are triggered when entering, staying within, or leaving a route, respectively. All hooks receive a detailed match parameter, providing information about the route's path, ID, and tons o

In this lesson, we learn how to handle not found errors in TanStack Router by using the `notFoundComponent` at both nested and global levels. To trigger the display of a `notFoundComponent`, we must throw a specific error using the `notFound` function within a loader or other lifecycle method of a route. This approach allows us to provide custom error messages for specific routes

In this lesson, we learn how to access dynamic route parameters using the `useParams` hook in TanStack Router. When used with a specific `Route` object, `useParams` provides type-safe access to route parameters, ensuring that TypeScript knows the exact types of these parameters. This approach eliminates the possibility of undefined/optional values, making it safer for accessing p

In this lesson, we learn how to reorganize file-based routes in TanStack Router to accommodate nested routing structures. We explore how to create additional nested routes by converting files into directories, allowing for further nesting. For example, to create a nested route like `/employees/$employeeId/edit`, we can create a **directory** (!) named `$employeeId` and place an `

In this lesson, we learn how to parametrize the loader for a nested route in TanStack Router. We focus on a nested route like `/employees/$employeeId`, where the `$employeeId` is a **dynamic parameter**. To fetch data for this route, we use a `loader` function that accesses the `$employeeId` parameter. This is achieved by using the params object available in the `loader` function

In this lesson, we learn how to create nested routes and outlets in TanStack Router using file-based routing. We start by creating a new `employees` directory and files to represent nested routes, such as `/employees/$employeeId`. The `$` symbol is used to denote dynamic parameters. We then use the `` component from TanStack Router to create links to these nested routes, passing