Learn how to access parent route data in order to enhance the notes index and note ID pages. 

How to leverage TypeScript's type checking to generate metadata for routes dynamically, ensuring type safety and flexibility in your app.

Implementing Dynamic Meta Data for Routes in a TypeScript Application

[00:00] Let's start with the note ID route, so note ID. And we'll come down here, and we've got a meta function that Kelly, our co-worker, built for us. And we also are using this matches thing. So let's go ahead and console.log matches and see what that thing is at all. So look at our console.

[00:19] Here we have that log, and there are three parts of this matches array. So there are three routes that are currently matching on the page. We have the route that's the root route that has our data for our username down at the bottom and the environment variables, all that stuff. We have our meta export from that.

[00:38] We have the params. We have the path name. And we have this very important ID, which we're definitely going to be using. Then we also have this next route. This is our parent route. And in fact, our parent route has the data that we need. So here we're trying to display the display name of the user that we're looking at,

[00:58] the owner of the note. And so we need to get that from data.owner. And that owner has a name right there. So that's what we're trying to access here. And then, of course, we do have one last match here. And that's the route that we're currently on. That has the note data and everything. But we've already got access to that

[01:18] thanks to our type of loader and our data right here. So the match we want is the index 1, or the second match here. But we're going to find it using its ID. And part of the reason that we're doing that is, one, I think it's more clear.

[01:35] And then, two, TypeScript actually can we can inform TypeScript a little bit better by doing things this way. So the first thing that I'm going to do is we're going to add another parameter to this meta function

[01:50] generic, which is to say it's an object that is the data value or the data types from our matches. So the key is the ID. And then the value is the type of the loader for that particular match.

[02:09] This type of loader is almost there. This is the type of our own loader. We actually need the type of our parent loader. So I'm going to import the type loader as note loader. And we're doing that as note loader so we don't conflict with our own loader

[02:27] from the notes TSX file. So this is our parent route. We're importing the type of the note loader from our parent route. And then we can come down here and say the data that is available from this route with this ID has this type. That's what is going on.

[02:44] Or its loader is this type. And so from that, then, we can follow Marty the Moneybag's suggestion of finding the route there. So we can find that as our note match. And right here, if we console log that, we can take a look at that log right there. There it is.

[03:07] There's our data. And on top of that, because we've informed TypeScript of our convention here and provided that to the generic, it is able to tell us what the type is. And so this is actually really cool. And we'll explore that here in just a second. But let's finish this feature. And then we can talk about that.

[03:24] So for getting the display name, we can say note match.data. And you'll notice VS Code added the Elvis operator there. And that's because it's possible that note match is not defined. Possibly, we have the ID wrong. TypeScript will kind of help us make sure we don't.

[03:44] But it is possible that could happen. And then secondly, it's possible that the loader failed to run. But our meta will still run. And so we're going to cover ourselves for that. So if the note match exists, we'll access its data property. We'll go to owner and then name. And we'll say, if that doesn't exist,

[04:04] then we'll fall back to the params name. So now with that, I can come over here. And we get Cody with a capital K. So that's Cody's actual name. So everything is working. But I want to talk a little bit about why it's so awesome that we can provide this type and why I feel comfortable doing this.

[04:23] If we were writing this just in JavaScript, I would be a little bit uneasy doing this because there's a pretty severe level of indirection here. I mean, we are importing the loader and stuff. But the loader, and actually, that's all TypeScript. So we wouldn't be importing the loader if it was just JavaScript.

[04:41] So this is severe level of indirection going on here that if I'm working in the notes route right here, and I'm making changes to this, and I say, you know what? The owner doesn't need to have all this stuff. Let's have the owner have a name. And that'll be our owner.name.

[05:00] And an owner or the username, owner.username. And that's great. So what if we decided, you know what? In this meta, we're going to say, we're going to put their email instead. That probably wouldn't be a good idea from a product decision standpoint. But yeah, definitely could be a thing you could do.

[05:20] So before, that works just fine. No problem, because we've got all that data. But then if I'm in here and I'm like, you know what? We don't need all that extra stuff. Let's just filter down to the stuff that we're actually using. Now, because we have all this type stuff put together, I get a type warning right here. Without JavaScript, that would not be possible.

[05:39] Or without TypeScript, that would not be possible. If we were just using JavaScript, I would feel way uneasy about doing this. So TypeScript, it's great. I highly recommend it. OK, so with that, let's go ahead and go to the index route. And we'll do the same thing here. It'll be a little bit different.

[05:58] So let's go Notes, Index. And remember, we don't have a loader. So our meta function isn't even using the generic, because we're not going to access the data, because there is no data. But we want to have some data so that we can have the display name include the user's actual name.

[06:17] And also, we need to determine the number of notes that they've got. So right now, we're just saying Cody's zero notes. But Cody clearly has many more notes. So the same thing applies here. The difference is, because we don't have a loader, we're just going to pass null as the first argument to this generic. The second thing we're going to do

[06:35] is similar to what we did before, type of note loader. And I'm going to go grab that import and stick it right here. So we get that note loader here as well. Now, of course, that's not type of note loader. It's actually an object that has the key being the ID of the route, and then the type being the value. OK, great.

[06:55] So now, we can follow Marty the Moneybag's suggestion again, get our notes match. And now, that's all going to be nice and type safe and everything else that I had talked about before. And so we can use that to determine the user's name. So we can say notes match.data, again,

[07:14] with the Elvis operator here so that we don't have to worry about the notes match not being defined. Then we'd say owner.name. Otherwise, fall back to the username. And then same thing here. It will be notes match.data.notes.length,

[07:33] or fall back to 0. And that takes care of that. So now, it's Cody's Notes with a capital K. And check out Cody's 12 notes on Epic Notes. So just a quick review, the primary learning outcome here is that the second argument of the generic meta function

[07:52] here is the data types or the type of the loaders of all of the matches that are relevant to what you are doing. And so you provide the ID of the match, and then its loader type. And then your matches is all of the routes that are matched, whether or not those are included in here.

[08:11] At runtime, this is just going to be all the matches. You can find things or filter them by their ID. And then all of this will be type safe, which is pretty stellar, I must say. So with that established, we have accomplished the goal. And now our users will have a much better metadata experience.

[08:30] And they'll be more likely to share their stuff on social media, which is good for our app. So I hope that was interesting and fun for you. And yeah, well done.

Optimizing Metadata for User Info 

[00:00] All right, so Kelly, the coworker, did a little bit of nice work for us. And that is she added a little bit of metadata to our notes index page, as well as our notes specific note ID page. On the notes index page, the best that she could do

[00:17] was add the username from the params, because that note index page doesn't even have a loader. So there's no way to get that data to know which user it is. We'd have to create a loader for that, which seems kind of wasteful, because we actually already have the user's name available somewhere. So it would be cool if we could just somehow get

[00:36] that information. So that is part of what you're going to be doing. Also, she has defaulted it to just be zero notes in the anticipation that you are going to calculate the number of notes based on the data that we have on the page already. So you're going to be doing that. And then also on the note ID page,

[00:53] she's added the username here, as well. And she's also added the contents of the note, the first 100 characters with the dot, dot, dot. And so that has already been done for you. But you need to enhance this so that we're getting the actual user's name, rather than just their username.

[01:10] So on both of those routes, you need to access some parent route data. So because the index route doesn't have a loader, but its parent does have a loader that has the data that we need. So you need to access that. And same thing on the note ID route, as well, to get the owner of the note to get their name,

[01:29] you're going to access the parent route data. So go ahead and do that. This one's a little bit more involved than the other ones. But the emoji are there to guide you. And I think that you will have a good time with it. So I'll see you when you're done.

Developers working on modern web applications today face a myriad of challenges.

The apps we build are expected to be good looking, fast, and secure. They need to be interactive, responsive, and accessible. They need to be SEO-friendly, and they need to be resilient to errors.

In order to be successful, you need to ensure you have a solid foundation to build on.

Full Stack Foundations is a comprehensive, in-depth workshop that sets the stage for the rest of the Epic Web series. It's designed to equip you with the current best practices for handling CSS, routing, data loading, and more.

This isn't some basic "intro" workshop! Even if you're an experienced developer, you'll learn new skills and techniques that will help you build better apps.

<Testimonial author={{name: "Gwen Shapira"}}>

It was 🤯. A lot of fun, and I learned so much in one day. Even with 23 years as a software engineer, I have a much clearer understanding of how the web actually works. Now, months after this workshop, I’m working on a web project and this gave me the mental framework I needed to quickly ramp up and feel competent. I’m not even using the same tools Kent uses in the workshops! 13/10.

</Testimonial>

## Styling

In recent years, CSS has seen a lot of evolution in its usage and tooling. There are new best practices for importing stylesheets, managing assets, and optimizing styles. Failing to follow them can lead to slow-loading pages and a maintenance nightmare.

Here, you'll learn how to handle styling right:

- Loading external stylesheets & other resources
- Managing assets with fingerprinting and caching
- Compilation with PostCSS and Tailwind CSS
- Bundling CSS for libraries and components

## Routing

The URL is critical for the web, and is closely tied to your application's routing. Making suboptimal decisions affects loading performance, navigation, and overall experience.

This section is a deep dive into routing, from the basic filesystem structure through nested routes and dynamic parameters:

- Conventions for signifying routes
- Layout and URL nesting
- Navigation and linking
- Dynamic route params
- Resource routes

## Data Loading

The web is all about data, and nothing frustrates users more than when loading is slow or broken. This section introduces you to AJAX/fetch and Remix loading features, giving you the tools to build stable, fast-loading applications:

- Working with `Request` and `Response` objects
- Fetching data for initial and subsequent loads
- Accessing environment variables
- Connecting routes to loaders

## Mutations

Interactivity makes apps engaging, but also introduces complexity. You need to ensure that the thing that happens when a form is submitted is what the user expects. Here you will use form methods and actions to mutate existing data in a mock database:

- Creating forms with `method` and `action`
- Storing and extracting form data
- Handling invalid submissions
- Form state management
- Specifying intent

*This module sets the stage for the complete Professional Web Forms workshop.*

## Scripting

The browser is capable of quite a lot on its own. Up until this point of the workshop, the Epic Notes application will work without any JavaScript. However, scripting allows us to enhance the user experience in ways that would otherwise be impossible.

In this section, you'll incrementally add in features like client-side pending UI, prefetching, and optimistic updates:

- Scroll position restoration
- Considerations when overriding default browser functionality
- Server and client bundles & entry files
- Preloading data & code for anticipated actions
- Transitions with the `useNavigation` hook

## Search Engine Optimization

Ignoring SEO is like building a store without a sign— people simply won't find you. If you want to be successful, your site needs to be discoverable and optimized for presentation on those platforms.

SEO is a very broad topic, but this section will get you set up on the technical side of the equation:

- Essential tags and attributes
- Overriding default metadata for specific pages
- Dynamically set metadata for social sharing
- Reusing parent data for nested routes

## Error Handling

Even the best apps can break, but what separates the good from the great is how they recover. Lack of proper error handling can lead to frustrated users and lost business.

This section will teach you how to anticipate, handle, and recover from errors, making your application resilient and user-friendly.

- HTTP status codes
- Using `ErrorBoundary` components to contain errors
- Handle thrown errors when fetching data
- Error bubbling from child routes to parent routes
- Implement useful 404 pages

The Full Stack Foundations workshop covers modern web development best practices including Styling, Routing, Data Loading, Forms, SEO, Error Handling, and more!

Full Stack Foundations

Kent C. Dodds

Forms are the primary mechanism for interactivity on the web.

But for all of their importance, forms can be incredibly frustrating for developers and users alike.

There are a lot of moving parts to consider: 

You need to validate user input and handle complex data structures, while being secure from bots and data-stealing attacks. The UI should inform users of any issues as quickly as possible, and be accessible for all.

The Professional Web Forms Workshop will equip you with the tools to handle all of these challenges and more.

## Form Validation

HTML has several attributes built-in that help with form element validation. Unfortunately, they're not enough on their own. On the client-side, bad actors can bypass checks by manually adding the `novalidate` attribute or making requests directly. On the server side, there's no standard way to respond to validation errors other than a generic 400 status code.

In this section, you'll implement a base level of form validation:

- Essential HTML attributes for validation
- Server-side validation with JSON responses
- Displaying errors with the `useActionData` hook
- Disabling default browser validation messages with `useHydrated`

## Accessibility

Accessibility is often an afterthought, but should be a priority. While forms are just one part of the accessibility equation, they're a big one. In this section, you'll learn how to make sure your forms accessible and usable by all of your application's users:

- Properly associating labels with input fields
- Adding appropriate ARIA attributes when necessary
- Manage keyboard focus in response to errors and user interactions
- Creating and using a `useFocus` hook to direct the user’s focus
- Considerations for accessibility testing

## Schema-Based Validation

Manually writing conditional checks for every field in every form is tedious and error-prone: *Is there content in the field? Is it the right type? Is it within the acceptable range? There must be a better way!*

Fortunately, the combination of the Zod and Conform libraries makes it easy to define reusable declarative schemas to validate form data on the client and server:

- Safely replace HTML validation attributes with schemas
- Zod error handling & message customization
- Progressively enhanced validation with Conform
- Share type-safe validation logic between client and server

## File Uploads

Forms need to support more than just text. Images, videos, audio files, and other documents need a different type of input. Depending on the size of the file, you'll have considerations for how and where it is uploaded. In this section, you'll learn how to handle file uploads in a secure and efficient way:

- Uploading images from an `ImageChooser` component
- Handling file uploads on the server
- Schema validation for file uploads with Zod

## Complex Data Structures

The `FormData` API does not support representing objects or arrays– only key/value pairs. It also won't allow you to nest forms within each other. This makes representing complex data structures difficult without jumping through some hoops. Luckily for us, Conform has a great solution when your forms get complex. Here you'll practice:

- Infer field types with Zod
- Nesting objects as a form
- Represent arrays of fields with the `useFieldList` utility
- Add and remove items with Conform's `intent` buttons

## Spam Prevention with Honeypots

Spam bots are constantly crawling the web, looking for forms to submit junk data to boost their client’s search engine rankings and find holes in your security. This can strain server resources, contaminate databases, and cause other unforeseen consequences. One way to combat this is by using a "honeypot", which will prevent a form from being submitted by a bot. This section will teach you how to:

- Create a simple hidden-field validation
- Add a configurable honeypot instance to an action
- Prevent form submissions that are too fast
- Use environment variables for encryption seeds

## CSRF Protection

Cross-Site Request Forgery (CSRF) attacks are a type of malicious exploit where a user is tricked into performing an action they did not intend to. This is usually done by embedding a link or form in a page that the user is already authenticated to. Think of a user logged into their bank account clicking a link that transfers money from their bank account to the attacker's. To prevent this type of attack, you'll want to:

- Create a signed cookie in the user's browser
- Include unique user tokens in forms
- Validate tokens on the server via request headers

## Rate Limiting

You definitely want to prevent bad actors from making tons of requests to try to brute-force their way into your app or cause general chaos. However, malicious intent and spam aren't the only reasons you need to protect your site. Even too many legitimate requests can cause problems. Rate limiting is a way to prevent users from overloading your server with requests. Here you'll learn:

- Considerations for different limits for `GET` vs. `POST` requests
- Implementing basic rate limiting with Express middleware
- Tiered rate limiting depending on which form is being submitted

Professional Web Forms

Data modeling is as a critical skill for the full stack developer. After all, data is the foundation of your application.

If you don't do it right, you'll find yourself stuck before you even get started. A poorly designed database schema can lead to a lot of headaches down the road when you need to make changes or add new features. Inefficient queries can slow down your application, leading to a poor user experience. Analyzing root causes to issues like these can be a time-consuming and frustrating process.

Web developers spend a ton of time into making their UI handle a slow backend well which is great and you should do that too (you don’t control network latency after all). But *****great***** web developers put effort into making it so their users hardly ever experience that great pending UI by making the backend as fast as possible. Your UI can’t be any faster than your slowest database query.

The Data Modeling Deep Dive Workshop will help you develop a keen understanding of databases and how to manage them. You'll learn the same tools and techniques used at the top tech companies to design robust database architectures and optimize query performance.

We'll be using production grade tools like Prisma and SQLite, but the concepts you learn in this workshop will be applicable to other database systems as well.

## Database Schema

A well-designed database schema is the foundation of your application. It's critical to get it right from the start, as it can be difficult to make changes down the road. This section provides a background on SQL before introducing Prisma's suite of tools. You'll learn:

- SQLite database initialization with Prisma
- Prisma's Object Relational Mapper (ORM)
- Defining a schema with Prisma's declarative schema language
- Converting a schema to SQL with the Prisma CLI
- Viewing and editing your database in Prisma Studio

## Relationships

Poorly planned relationships between database models can lead to data inconsistencies and increased query complexities and performance problems. To avoid these issues, you need to understand the different types of relationships and how to implement them. This section provides you with practical experience in recognizing relationships:

- One-to-many relationships (User has many Notes)
- One-to-one relationships (User has one UserImage)
- Updating the database with Prisma
- Planning models for the future
- Generate an Entity Relationship Diagram (ERD) for visualization

## Migrations

As your application evolves, so will your database schema. It's not uncommon for there to be "breaking changes" that affects one or more of your database models. This is where migrations come in.

Migrations allow you to track and synchronize schema changes across environments. Traditionally migrations have been tricky to manage, but this section will teach you how to use migrations to ensure your development, staging, and production environments are always in sync:

- Generating SQL migration code with Prisma
- Best practices for documenting & tracking migrations
- The "widen then narrow" approach for eliminating downtime
- Experimenting with migrations before permanently applying them

## Seeding Data

Manually adding data to a database is not only time-consuming but also prone to errors. Scripting to the rescue!

Here you'll learn how to populate your databases with consistent data for development and testing purposes:

- Initializing a SQLite database
- Idempotent scripting
- Resetting the database with Prisma
- Nesting SQL queries to simplify foreign key connections

## Generating Seed Data

Using hardcoded seed data works great for small applications, but it won't provide the best idea of how your application will perform at scale. You also shouldn't use real user data during development for plenty of obvious reasons.

A better approach is to use a library like Faker.js. This section will teach you how to use Faker.js to generate seed data for your database:

- Balancing realism with practicality when generating data
- Creating realistic user information
- Varying data quantities and randomness
- Validating against the schema
- Enforce data uniqueness

## Querying Data

In SQL, queries are written with the `SELECT` statement. This is one of the most powerful statements available, but it can also be one of the most complex. This is where tools like Object Relational Mappers (ORMs) come in, helping developers write SQL in a more intuitive way. Although it isn't a traditional ORM, the Prisma Client is an indispensable tool for modern web development. In this section, you'll learn how to get the most out of it:

- Understanding how Prisma's API maps to SQL
- Handling Hot Module Replacement (HMR)
- Logging slow queries
- Pre-connecting the client to the database

## Updating Data

Data mutation is a common task, but doing it incorrectly can lead to data corruption or loss. Especially when a single user action results in multiple database changes (for example, transferring money between user’s bank accounts). Getting mutations wrong can be a serious problem for your app’s success. This section will walk you through techniques for working safely:

- Deleting and updating data
- Conditional upserts
- Combining multiple queries into a transaction
- Rolling back to a previous transaction

## SQL

No matter how great an ORM is, sometimes you have to write raw SQL. In this section, you'll learn how to write raw SQL queries and execute them with Prisma. You'll also practice with:

- Wildcard queries
- Runtime schema validation with Zod
- Using joins to enable more complex queries
- Specifying query result ordering for more efficient searching

## Query Optimization

Nobody likes a slow application.

There are many stories of companies spending millions of dollars on scaling hardware, adding multiple levels of caching, and even rewriting their entire application in pursuit of a faster performance– only to find out later that the solution was optimizing their database indexes and queries.

In this final section, you'll learn how to optimize your queries for maximum performance:

- Identifying the index
- Analyzing raw SQL queries
- Multi-column indexing
- Balancing premature optimization with practicality

Data Modeling Deep Dive

Most web applications feature user accounts in one form or another.

To the user, having a login form seems simple enough. But behind the scenes, there's a lot going on. You need to securely store and manage user sessions, handle authentication and authorization, and protect against malicious attacks.

Without knowledge of the underlying concepts, it's easy to make mistakes (even if you decide to use a third party service or library to do all the hard work for you). Weak authentication systems, misconfigured route protection, and flawed session management all lead to vulnerabilities and negative user experiences.

The Authentication Strategies & Implementation workshop is your guide to implementing industry standard user account flows in a modern web application.

Securely managing passwords, enabling two-factor authentication, and integrating with third-party providers are just some of the processes you will practice. You'll also learn how to handle user preferences, session data, and send emails to users. This will take you all the way to the point where you could easily add Single-Sign On (SSO) support–a must if you’re building a business-to-business application.

There are a lot of moving parts to consider, but this workshop will give you the confidence to tackle them all.

## Cookies

The workshop begins by diving into cookies. This fundamental part of web browsing is often misunderstood, but important to understand. We keep it simple to ramp you up slowly on the web’s original state management solution. This also introduces us to important UI patterns you’ll want to use in other areas of web development as well. It’s surprisingly deep! Topics include:

- Storing user theme preferences in a cookie
- Server-side cookie handling
- Using fetchers for non-navigation mutations
- Optimistic UI updating to apply changes immediately

## Session Storage

Storing user preferences in cookies is fine, but you need to be more careful when it comes to session data. It's vital that users with devtools or malicious client-side JavaScript can't access or modify the data inside of cookies. In this section, you'll learn:

- Cookie-based session data persistence
- Properly getting, setting, and updating session data
- Deleting data after reading
- The flash pattern for short-lived messages

## User Sessions

Depending on the amount of data you need to store, it may make sense to use a different storage mechanism for session data. For this workshop we will continue to use cookies, however we will switch to using a dedicated session cookie. This section will teach you:

- Create a session storage object for storing user data
- Transform form submissions into user objects for storage
- Retrieving user information from cookies then the database

## Passwords

Passwords are the most common way to authenticate that a user is who they say they are. Obviously, storing them in plain text is a bad idea, but even encryption isn't enough. You need to properly prepare to securely handle passwords:

- Create a Password model in the database
- Generate secure password hashes with the battle-tested bcrypt algorithm
- Protection against password attacks
- Update signup route to securely create records

## Login & Logout

At this point, you have the ability to create users and store their passwords. But how do you actually log them in? And how do you log them out? In this one we’re also going to learn about imperative mutations which you’ll definitely want to know for other app features. This section will teach you:

- Verify a user's password hash with bcrypt
- Handling optional vs. required user data
- Guard against timing attacks
- Clearing session data on logout
- Handle edge cases like deleted accounts
- Set expiration dates for session cookies
- Implement automatic logout after a set idle time

## Protecting Routes & Role-Based Access

Most web application have routes that you need to be logged in to access. It's one thing to prevent this in the UI, but the real thing you need to do is protect the data that powers those pages. There are also considerations for different user roles and permissions. This section will teach you how to:

- Ensure users only access data they own
- Restrict private pages to logged in users
- Implement smart redirects for login and logout
- Specify and enforce permissions with Role-Based Access Control (RBAC)

## Managed Sessions

Imagine a user logging in on a public computer, who then forgets to log out. This security risk can be mitigated by implementing a session management feature:

- Add a session model to the database
- Update auth utils, login, and logout routes to query sessions
- Refactor for session expiration support
- Create a page for displaying & managing active sessions

## Email Verification & Password Resets

Email is one of the most common ways to verify a user's identity. If a user loses access to their account, needs to reset their password, or wants to change their email address, you'll need to send them an email. While the actual sending of the email is best handled by a third-party service, the process flow behind the scenes is what you'll need to implement:

- Integrate a third-party email API
- Share session data between routes for multi-step flows
- Style HTML emails
- Generate time-based one time passwords (TOTP) for password resets
- Force verification of email address change

## Two-Factor Authentication

Two-factor authentication (2FA) is a great way to add an extra layer of security to your application. It requires the user to enter a code from a second device along with their username and password. Even if an attacker determines a password, they won't be able to access the account without the second factor. In this section, you'll add 2FA to the Epic Notes application:

- Handle the 2FA enable flow
- Provide the user with a QR code
- Implement a 2FA code input form
- Verify the code and log the user in
- Require re-verification
- Provide option to disable 2FA

## Third-Party Authentication

There are several reasons to use third-party authentication providers. It can be a great way to reduce friction for users, or allow easier access to other data. The most common way to do this is with OAuth 2. Once you’re finished with this section, you’ll be geared up to implement third party auth with any provider. Including Single-Sign On (SSO) flows. We’ll be following these steps:

- Add an authentication strategy to enable GitHub login
- Create a connections model to associate users with providers
- Prevent duplicate account connections & hijack attempts
- Pre-fill user account data based on third-party login
- Mocking third party APIs for testing
- Gracefully handle login errors
- Implement smart redirection to return to original page after login

Authentication Strategies & Implementation

We all know the drill. The code works on your machine but you didn’t realize the impact of the change you made and it breaks in production. This problem grows exponentially as your application’s size and usefulness grows. Unpredictability can be a developer's worst nightmare.

However, many developers find it difficult to effectively test their code. Manual testing gets tedious fast. Complex logic and async code can be tricky to test effectively.

The Full Stack Testing Workshop will equip you with the tools you need to ensure your app works now and in the future. You'll learn how to write modular, maintainable tests that cover all of your code, from the backend to the frontend.

As the author of the de-facto standard testing library for web development (called eh… Testing Library), I have some solid opinions that have led many teams to much more confidence shipping their code. Let’s get you some of that confidence.

## End-to-End Testing with Playwright

With end-to-end (E2E) testing, you can validate a web app from the user's perspective. This is the closest you can get to a real user interacting with your app. In this section, you'll learn the ins and outs of writing a test with Playwright:

- Best practices for setup before running tests
- Simulating user actions like interacting with the UI to perform a search
- Creating a new user in the database
- Cleaning up after tests have run
- Using playwright fixtures for reliable setup/teardown

## Mocking & Authentication for E2E Tests

When your application relies on external services, you need to have a way to test them without actually using them. Similarly, you don't want to fully onboard a new account every time you test an authenticated user flow. In this section, you'll learn how to re-use the same mocks we’ve been using for development to mock third-party services and simulate logging in:

- Use Mock Service Worker to intercept network requests
- Replace email verification with a local file solution
- Attach cookies to Playwright
- Reusing 2FA logic for local testing
- Testing behavior with different HTTP responses

## Unit Testing

Sometimes you’ve got some really complicated business logic in your app. Business logic that is critical to your application. For this stuff, it’s nice to package it up in its own function or module to keep all that logic in one place. This is the perfect situation where lower level unit testing comes in handy. Here, we'll dive into unit testing with the Vitest framework to ensure that each function and module behaves as expected:

- Organizational best practices
- Asserting outcomes with `expect`
- Recording function calls with spies
- Specifying test behavior with Vitest hooks
- Keeping test output clean to avoid cluttering up the terminal

## Component and Hook Testing

When building React components, you should focus on two users: the user who interacts with a component, and the developer who renders it. By using Testing Library, we can avoid mocking React and its hooks and instead test components as they would be used in a real app:

- Render components with Testing Library
- Simulate the DOM environment on a per-test basis
- Querying for missing elements
- Testing hooks in isolation from React
- Stubbing React context
- Cleanup after testing

## Authenticated Integration

Similar to higher-level E2E tests, it is often necessary to simulate an authenticated user. However, we don't want to test the entire user flow every time we make a change. In this section, you'll learn how to test authenticated operations without the overhead of a full E2E test:

- Generating random session IDs
- Associating sessions with users
- Testing authenticated routes
- Asserting user state in responses

## Custom Assertions

Writing tests is good; writing readable and maintainable tests is better. Custom assertions can make your test code easier to understand and modify. Here you'll learn to encapsulate complex checks into simple, understandable assertions:

- Create matchers for specific states
- Share assertions across tests
- Add custom assertions to TypeScript definitions
- Format test output with colors for readability

## Test Database

There are some decisions to make when writing tests that interact with the database. Testing with the development database has benefits, but requires us to remember to delete data after each test. By using a test database, we can avoid accidents while still being able to run our test suites:

- Set up a test-specific database instance
- Seeding a minimal amount of data
- Defining a global setup for Vitest
- Understanding the importance of module import order

Web Application Testing

Kent C. Dodds is joined by expert developers, library creators, and tech industry leaders who share their insights and experience working within the ever-evolving world of web development.

These conversations cover a wide range of topics ranging from the intricacies of database efficiency, the future of authorization, the role of leadership in tech, and everything in between.

No matter your level of experience in web development, these conversations offer a wealth of knowledge and ideas that will inspire you to refine your craft, push boundaries, and become an Epic Web dev!

## Content Management Systems with Alexandra Spalato

Alexandra Spalato, a Developer Relations Engineer at Storyblok, discusses the future of content management systems. She emphasizes the significance of a CMS in simplifying complex processes into user-friendly interfaces and making content creation more accessible to non-developers.

## Leadership in Tech with Ankita Kulkarni

Developer and leadership educator Ankita Kulkarni discusses the intersection of leadership and development. The conversation explores the acquisition of leadership skills, and how to find the balance between coding and leadership roles. Ankita provides strategies for advancing into leadership positions, emphasizing the importance of proactive career management.

## API Mocking with Artem Zakharchenko

Artem Zakharchenko, the creator of Mock Service Worker (MSW), joins Kent to discuss the evolution of MSW from a weekend project into to a powerful open-source tool for API mocking and debugging.

## Enhancing SQLite with Ben Johnson

Ben Johnson is a developer with a 20-year coding career spanning roles from Oracle to creating BoltDB. In this conversation, Ben discusses LiteFS and Litestream, both tools aimed at expanding SQLite's utility. Topics include a dive into SQLite's architectural elements, and how LiteFS enhances scalability on a single node.

## The Evolution of Type Safety with Colin McDonnell

Colin McDonnell, a Developer Relations representative at Bun and the creator of Zod, discusses how Zod has grown from its original usage in medical software into a prominent tool in the TypeScript ecosystem. Colin also touches on TRPC, an end-to-end type safety library, and the challenges it addresses.

## Navigating the Testing Terrain with Debbie O'Brien

Debbie O'Brien, a community advocate for Playwright at Microsoft, discusses the adaptability and versatility of Playwright as a testing tool. She emphasizes its value in various testing scenarios and its role in Microsoft's application testing, including VSCode, Bing, and Teams.

## Simplifying Web Form Management with Edmund Hung

Edmund Hung, web developer at Delivery Hero, discusses how Conform has become a crucial component of the Epic Stack. He highlights Conform's unique approach to form management, which bypasses native browser validation in favor of its own system.

## Scalable Databases and Authentication with Iheanyi Ekechukwu

Iheanyi Ekechukwu, a software engineer at PlanetScale, explore database and hosting options, highlights PlanetScale's scalability and the role of Vitess in the technology. The conversation also covers authentication solutions, and cautions against over-reliance on external services.

## Understanding Web Development with Jacob Paris

Jacob Paris joins Kent to discuss his work on Remix. He highlights some of the challenges of server rendering, including handling user preferences and time zones. One the client side, Jacob emphasizes the importance of server output for correct client rendering, especially when users disable JavaScript.

## The Depth of Software Testing with Jessica Sachs

Jessica Sachs, software engineer at Ionic and a testing & QA expert, joins Kent in a conversation about various testing paradigms. They discuss topics ranging from Test-Driven Development to End-to-End testing, emphasizing the importance of a balanced approach.

## Platform Engineering with Jocelyn Harper

Jocelyn "Josie" Harper, tech lead at The New York Times, discusses her tech journey into roles including platform engineering and system design. Additional topics include backend optimization and the significance of documentation.

## Exploring the Front-End Ecosystem with Mark Dalgleish

Mark Dalgleish, co-creator of CSS Modules and contributor at Shopify, discusses the evolution of CSS, React, and design systems. Touching on CSS Modules and CSS-in-JS, the conversation also goes into the challenges of managing design systems, particularly when it comes to balancing flexibility with standardization.

## Navigating Changing Web Technologies with Mark Thompson

Mark Thompson from Google's Angular team joins Kent to share his career journey, the web's evolution, and AI's role in software development. Additional topics include the transformational role of APIs and Angular's transition from the View Engine to Ivy.

## The Magic of TypeScript with Matt Pocock

Matt Pocock, internet-renowned as the "TypeScript guy", discusses the merits and challenges of the TypeScript ecosystem. Highlighting its benefits in IDE capabilities and bug reduction, Matt also touches upon complexities in managing types and creating libraries.

## Building Deep Skills with Michael Chan

Educator and enthusiast Michael Chan shares his thoughts on the changing React landscape, emphasizing the significance of TypeScript and libraries like React Query. He advocates for building a deep understanding over surface-level knowledge. Both Michael and Kent stress the joy of creating meaningful projects and the importance of a comprehensive web development understanding.

## Examining MDX with Monica Powell

Monica Powell, a senior software engineer at Newsela, dives into MDX, which allows for developers to combine JSX with Markdown for creating rich content. She highlights MDX's role in the Unify ecosystem, as well as its challenges when getting started with CMS integration.

## Efficient Form Management with Sandrina Pereira

Sandrina Pereira, a staff front-end engineer at remote.com, emphasizes the significance of web accessibility using the POUR principles. Additional topics include the complexities of managing large-scale forms dynamically for users across the world. 

## Transitioning from Rails to Remix with Sergio Xalambrí

Sergio Xalambrí shares his experience transitioning from a Rails and Next.js setup to Remix at fintech startup Duffy. Some of the challenges include highlighting challenges in internationalization and adding middleware. The conversation also into remix-auth's authentication strategies and contrasting Remix's modular approach with Rails' cohesive framework.

## The Capabilities and Ecosystem of Tailwind CSS with Simon Vrachliotis

Simon Vrachliotis, a Tailwind expert at Thinkmill, praises the benefits and adaptability of Tailwind CSS, emphasizing its alignment with React's component-level concerns. Simon discusses solving for type safety in addition to recommending tools for enhancing the Tailwind workflow.

## The Crucial Role of Database Optimization with Tyler Benfield

Tyler Benfield, a software engineer at Prisma, dives into the intricacies of database efficiency, emphasizing backend optimization for enhanced frontend performance. Tyler also explores the advantages and limitations of ORM tools like Prisma, the potential of SQLite in production, and the universal importance of SQL knowledge across platforms.

## Product Management with Nevi Shah

Nevi Shah, a product manager at Cloudflare, combined her technical and business skills to  transition from academia and consulting into product management. She highlights the role of a product manager in understanding user needs and introduces Cloudflare Pages as a solution for serverless architecture, while also discussing alternative hosting options like Fly.io.

## Remix Behind the Scenes with Ryan Florence

Ryan Florence, co-founder of Remix and React Training, discusses the innovations behind Remix and its transition from React Router. The framework's compatibility with the web's fetch API broadens its server architecture reach, and its recent acquisition by Shopify promises a bright future for Remix.

## From Tech Sales to Engineering with Shaundai Person

Shaundai Person, a senior software engineer at Netflix, joins Kent to discuss transitioning from tech sales to software engineering. She highlights the importance of recognizing and building individual strengths, especially communication, in large corporate settings.

## Art, Code, and Data Visualization with Shirley Wu

Shirley Wu, an award-winning creator specializing in data-driven art, transitioned from the business sector to web development. She shares how her work offers artistic fulfillment and financial stability, but she emphasizes the importance of ethical considerations.

## Understanding the Future of Authentication with Will Johnson

Will Johnson from Auth0 highlights the limitations of password-based authentication and discusses the potential of alternatives like the Web Authentication API (WebAuthn). Will shares his anticipation for a future where biometrics or digital verification replace traditional passwords, as well as a need for more nuanced access controls in growing organizations.


Interviews with Experts

Full Stack Vol 1

Intro to Full Stack Foundations Workshop

Introduction

Intro to Styling 

Learn how to add favicons and other link elements to your Remix application, ensuring proper rendering across nested routes.

Remix includes a Links component that enables us to add links to the head of our application.

Using Remix's Links Component

Manage Asset Links in a Remix Application

Learn how to handle caching and automatically update static assets, like favicons, without waiting for the cache to expire.

By importing the favicon as a module, we can leverage caching and immutable URLs to ensure that it is always up-to-date.

Caching the Favicon

Asset Import Caching Issue

Learn how to link a CSS file globally in your application to apply styles across all pages, including specific font configurations.

Using the links function, we can add global styles to our Remix app.

Adding Global Styles to a Remix App

Add Custom Fonts to the Global CSS

Remix has built-in support for PostCSS and Remix, but there needs to be a little bit of configuration.

When PostCSS and Tailwind CSS are properly configured, Remix will properly compile the CSS and apply it to your application.

PostCSS and Tailwind CSS Configuration

Using PostCSS and Tailwind CSS in Remix

Remix allows you to bundle CSS files together to reduce the number of link tags on the page.

Create a bundled CSS link with help from the cssBundleHref function from Remix's css-bundle package.

Configure CSS Bundling

Bundling CSS in Remix

To mark the end of this section, take a quick break for a Dad Joke.

Dad Joke Break

Styling

An overview of routing in web development and how it works in Remix.

Intro to Routing

The Flat Routes convention provides a simple way to create nested routes in a Remix app.

Learn how to configure routes and create nested pages in Remix, a versatile framework for building web applications.

Creating User Profile and Notes Pages with Remix Routes

Routing in Remix

Learn how to create links in your web application to enable seamless navigation between different pages, including home, profile, notes, and specific note IDs.

Remix offers Link and NavLink components to create absolute or relative links with configurable behavior.

Adding Absolute and Relative Links

Adding Navigation Links

By adding dynamic parameter support to our routes, we won't have to have everything hardcoded.

Remix's useParams hook allows you to access route parameters in your components.

Access Params with useParams

Adding Dynamic Parameter Support

A loader route is useful for handling network requests for fetch requests or document requests.

Anything you can do with HTTP, you can do with resource routes. In this example, we use one to serve CSS.

Example Resource Route Usage

Adding a Resource Route

Take a quick break from the Routing section.

Routing

Intro to Loading

Learn how to use a mock database implementation to load and display user notes in your web application. 

Discover how to fetch and filter data from databases, minimize data sent over the network, and ensure type safety, resulting in improved performance.

Efficient Data Loading in a Remix App

Loading Data to Your Database 

Learn how to handle error messages and status codes effectively in your web development projects, making TypeScript happy and improving your experience.

Learn to handle nulls and throw custom errors in Remix with "invariant response" for status codes and error messages.






Handling Error Responses with Remix

Handling Error Messages

Dad Joke Break Loading

Loading

Intro to Mutations

Learn how to create a form to edit data, following a provided design, and prepare it for future functionality. 

Explore the importance of the post method, encoding form values, setting default values, and utilizing common browser behaviors like reset and submit buttons.

Creating Form Components with Remix 

Building Forms 

Discover the importance of setting the method to GET or POST, and the potential issues that arise from using unsupported HTTP methods.

Learn how to handle form submissions in Remix, update the database, and automatically revalidate and update data on the page without a full page refresh. 

Handling Form Submissions and Mutations

Handling POST Requests for Form Submission

Learn how to handle error cases in form submissions and anticipate potential mistakes made by users. 

Leverage the formdata.get function, we can ensure that only valid string values are accepted, avoiding potential errors and providing a better user experience.

Form Data Types and Validation 

Handling Form Errors and User Mistakes 

Learn how to enhance a button's functionality by wrapping it in a form and handling the deletion of data through a network request. 

Learn how to handle various scenarios and considerations when performing form submissions and mutations using web platform primitives. 

Form Submissions and Mutations 

Button Forms Data

Improve form submissions for multiple actions with additional data, enabling efficient handling within a single action function.






Discover how to use the name and value attributes in buttons to differentiate between different types of form submissions. 

Leveraging Name and Value in Buttons for Multiple Form Submissions

Handling Multiple Actions in a Single Action Function

Dad Joke Break Mutations

Mutations

Intro to Scripting

Remix operates effectively without JavaScript for basic functionality, but JavaScript becomes essential for advanced features and an optimal user experience.

Optimize Your Web App: Add Client-Side JavaScript, Implement Code Splitting, and Enhance Connectivity.  

Improving User Experience with Client-Side JavaScript

JavaScript in Remix: From Optional to Essential

Mastering Scroll Behavior in Remix with JavaScript: When to Auto-Scroll and When to Enhance User Experience.

Learn how to implement scroll restoration in your web app using the scroll restoration component from Remix Run React. 

Enhancing Scroll Restoration 

Page Navigation with Scroll Behavior

Dive into the implementation details and constraints of the Remix framework, and discover how to use environment variables to import DevTools dynamically.

Learn how to securely expose environment variables in a web application, allowing access to vital information on both the client and server side.

Exposing Environment Variables in a Web Application

Environment Variables for Client-Side and Server-Side 

Learn how to leverage JavaScript prefetching to anticipate user actions and preload required resources, improving page load times and user experience.

Understand how prefetching works, observe the automatic caching of resources, and discover the potential of future intelligent intent detection.

Enhancing User Experience with Prefetching

Optimizing Resource Loading with JavaScript Prefetching

Learn how to provide visual feedback to users during slow or bad network connections by implementing a pending status with a spinner using status buttons.

Learn how to add a pending state to form submissions in your Remix application, providing users with visual feedback and preventing multiple submissions. 

Adding Pending State to Form Submissions with Remix

Improve the UX with Pending UI

Dad Joke Break Scripting

Scripting

Intro to Search Engine Optimization (SEO)

Enhance web appearance with meta tags: set title and route-specific meta tags in your page's head.

Boost SEO and UX with title, description, charset, and viewport meta tags in your HTML.

Meta Tags for Better SEO and UX

Configuring Meta Tags 

Optimize user experience and SEO by making sure each page has relevant and distinct metadata.

Master dynamic meta tags in RemixRunReact for custom SEO on specific routes with parent route fallbacks.  

Managing Meta Tags and Descriptions in RemixRunReact

Dynamic Metadata for Different Routes

Customize meta information based on user profiles, note titles, contents, and more. Expand your knowledge in the next section with additional challenges.

Ensure type-safe, flexible dynamic data handling in Remix's meta function with TypeScript, plus explore fallbacks and error strategies for UX

Handling Dynamic Data with Remix's Meta Function

Customizing Meta Tags with Dynamic Data

Dad Joke Break - SEO

Search Engine Optimization

Intro to Error Handling

Refine error handling and beautify error pages with Remix's utilities for user-friendly experiences. 

Learn how Remix enhances error handling in server-rendered React applications.

Error Handling and Error Boundaries

Improving Error Handling and UI on User Profile Page

Use React error boundaries for user-friendly handling of expected errors, like 'user not found,' with customized messages and status codes. 

Improve UX with customized user not found error messages based on usernames, while managing diverse error responses effectively. 

Improving Error Messages for User 

Handling Expected Errors with Error Boundaries

Implement reusable error boundary with status handlers, custom messages for common errors (403, 404, etc.) across routes, boosting error handling. 

Handle nested route errors (e.g., resource not found, invalid IDs) with local error boundaries, preventing app-wide issues.

Error Boundaries and Handling in Nested Routes

Streamlining Error Handling in Routes with a General Error Boundary

Efficiently handle route and component errors with a dedicated fallback document component for meta, links, scripts, improving error handling. 

Enhance error handling and UX by refactoring app components: isolate app logic, implement error boundaries, and preserve loader data. 

Refactoring App Components for Better Error Handling

Improving Error Handling with a Document Component

Handle 404 errors in React Router with a splat route for proper header/footer rendering and optimal error handling practices.

Craft dynamic 404 pages via Remix splat routes. Leverage error boundaries for efficient not-found route handling. Explore setup and advantages.

Full Stack Foundations

Full Stack Foundations

Transcript

Optimizing Metadata for User Info

Transcript