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

[00:00] To get started on this profile route, we're going to import our DB file from apputils.dbserver. So that's the file that's right here, apputils.dbserver. With that, then we can add our loader export. So let's export a function called loader, and this is going to take our data function args.

[00:19] So we're going to use the params from data function args, and that's coming from RemixRunNode, and that is a type. We'll just stick that up there. And then we're going to take MartyTheMoneyBag's suggestion to get our user. So again, you're not really here to learn about how to use this DB abstraction,

[00:39] so that's why we gave you all this code. But we need the username from somewhere, so let's get the username from our params. So this is very similar to use params, it's just an object that has all the parameters for this route, and the dollar username is how we get that username from the params. All right, awesome.

[00:58] And then we're going to return some JSON. So we could return new response and JSON stringify user, and then we'd have our headers, and the content type is application JSON. That is perfectly fine. The default status for response is 200,

[01:17] so we could do that also. The problem with doing that is once we get into the UI, our typings don't really know what to do with this new response because this response, really the body for the response could be just about anything. And so for two reasons, we're going to use a utility. One, I don't want to have to do this JSON stringify

[01:36] all the time, that's kind of like super annoying, and I don't want to have to specify these values either. And two, the typings will be able to infer things better if, or period, if we use the JSON utility. But I want to show you that because the utility

[01:53] is really just creating a new response for us, and there's not a whole lot going on there. Another thing I'm going to do is stick this as an object, just a property on an object. I just like doing that because I feel like it's easier to extend in the future and not have to worry

[02:10] about adding more properties onto that user object or anything. So with that, let's update our UI now to access that data that we are returning for this user. So we're going to say, here's our data from useLoaderData that's coming from RemixRunReact.

[02:29] We're going to use the generic and pass the type of our loader so that it can infer the return type of this JSON to give us a typed data, which is pretty spiffy, if I, yeah, must say. So coming down here, we're going to swap

[02:46] the param's username with data.user. Actually, we want to give the user's name, data.user.name. And then if that doesn't exist for some reason because the name is not required, we're going to say data.user.username. And here you'll notice we have that question mark there.

[03:05] That's because the user actually could be null. We could not have a user by that username in the database. We're going to deal with that later. And so I'm just going to ignore the TypeScript errors for now and we'll deal with that in the future. So let's save this and refresh and boom,

[03:24] we've got Cody with the uppercase K. So we are in fact getting Cody from the database. So nice job. One thing that we are doing here though, that is maybe not the best. And I'm going to demonstrate that here is if I refresh right here, we'll close this out. And then I go over to Cody's notes,

[03:43] you'll see that all the data is loaded for us automatically. So we don't have to worry about this. But one thing to keep in mind is this loader is running on the server. And so that's why we're able to talk to this database directly. We could make an API call downstream, just do like a regular fetch. You can literally just do return fetch,

[04:02] you know, myapi.com or whatever, right? Like you can do whatever you want to in here. It's all running on the server. But we're sending the entire user object over here as part of our return value. And so when we do these client side navigations, we're going to take that entire user object and send it over the wire.

[04:21] And so that's what's showing up right here. And if we look at the preview, we see the user has created at an email and ID and name and notes and username. That's a lot of stuff that we don't need. We literally just need their name right now, maybe and their username. Maybe in the future, we'll add some other things on here. But yeah, right now we're sending way too much data.

[04:42] And so what we can do really easily is just say, name, user.name and username, user.username. And let's, we'll get rid of that. We'll take care of the TypeScript stuff later. So what's, our page still works no problem if we go to the notes page and then navigate back.

[05:02] That's a client side navigation. And so we're getting those data requests happening. So let's actually take a look at the network tab when we do that. So right here, now we're literally just sending the data that we need. And this was actually one of the main reasons that people got really excited about GraphQL was because it was really difficult to do what we just did,

[05:21] to not load more data than you wanted to. But now we don't have to set up a special endpoint for this or anything like that. We literally just update the loader to send the data that we want, just filter out the stuff we don't want. And then we're off to the races. Now, of course, it would be even better if our database gave us an API

[05:40] to not even select more than we needed. And in the future, when we do that, it will, but it is really nice that we have that ability. If we end up getting too much data from the API or something that we can filter it down to just the stuff that our UI needs.

[05:57] On top of that, if one of these properties gets changed, so what if we capitalize this, now we're gonna get type safety right here. It's gonna say, hey, listen, you said you had a username property, you don't anymore. And so I'm gonna warn you about that. To me, that's super cool that we get type safety over the network like this.

[06:16] So let's move on to our notes page. So right here, we have just a hard-coded note. We want to have like actual notes that are in the database. So we're gonna bring in our database. We're gonna do kind of similar what we've done already. So we're export a function called loader,

[06:33] and this is gonna accept our params and we'll have our data function args right here. And then we'll use Marty the money bag suggestions right there and get our username from the params. And then we can return the owner.

[06:51] This is JSON, that utility that makes our lives so much better. And yeah, so we'll return the owner and the notes. And then in our UI, we'll get rid of use params and we'll use data from use loader data,

[07:10] which will come from your Remix Run React. And we'll say type of loader. And then our owner display name will be data.owner.name or fall back to the data owner username. And again, this could be null. We'll deal with that in a later part of this exercise.

[07:32] And then down here, this will be data.owner.username. And then right here, instead of hard coding this nav link, we're going to wrap this inside of a data.notes.map. We'll map those notes and stick all of these inside of there.

[07:50] We'll give it a key of note.id. And then we'll fix our parentheses there. There we go. Okay, great. And so now we're getting a bunch of some notes. So we don't want it to say some note. We wanna take the note.title and boom, there we go.

[08:09] So we've got Cody's notes. So the proper owner display, that's the capital K. And then we've got all of the notes here. Now, if I select this, we're still, yeah, we're in a bit of trouble here. So let's fix our two here to be note.id. That should fix that.

[08:26] And so now we can go between each of these notes. So the last step is just to load the note ID. But of course, one thing that we're kind of overlooking here is reducing the amount of data that we're sending over the wire. So let's take care of that first and then we'll move on to that note page. So this will be notes.map.

[08:46] Okay, great. So prettier is formatting. So we know that we're syntax worthy here. And then of course, the owner only needs the name and username as well. So we can say name, owner.name and username, owner.username. And there we go. We are still in a good place.

[09:07] Everything is working properly. So last step here should be very familiar. We're gonna say export a function called loader and that gets us our params and we'll say data function args, data function args right here. And then we'll grab this from Marty the money bag.

[09:26] We'll return JSON from remix run node. And here's our note. And we get our note ID from the params, const. There we go. And then right here, we get rid of our params and we get our data from the loader.

[09:44] So const data, use loader data, type of loader. And then we'll replace this with the title. So data.note.title. And this is the content, data.note.content, boom. There we go. And now we've got all of this data loading automatically. It's awesome.

[10:06] And what's cool is we haven't done anything with use state or use effect or anything like that. This is all just working because Remix is emulating the browser. So the browser by default will, as you're navigating between pages, it will do full page refreshes and Remix kind of makes it feel like

[10:25] that's what's happening for us because we don't have to worry about managing that state. And that's kind of the objective here with the way Remix is doing this. So to kind of review things, you literally just add a loader to any of your routes. You can do whatever server side things you need to do, talk to a downstream API with private keys,

[10:45] whatever you need to do. And then you return the JSON helper and then you can use that JSON value, the serialized JSON in your UI. And you can, like we're doing in here, make a couple of database calls. Now, of course, this isn't super efficient.

[11:03] We'll improve this when we actually do data stuff, but you can talk to multiple APIs if you need to. And then you can filter down to just the pieces that are relevant for the UI you're displaying. So you don't have to worry about sending too much data and ends up making a much better user experience because it'll be much faster.

[11:21] Now, we do have a couple of TypeScript errors we'll take care of next, but hopefully that gives you an idea of how to load data in a Remix app.

Loading Data to Your Database 

[00:00] So Kelly, the coworker, has been at work again. And now we have a nicer designed page here, which is nice. But we have some work to do. We want to actually load the data right here for all of the user's notes and load the actual note content itself. And the final version looks something like this.

[00:19] So that is a much nicer look. And it is doing exactly what we want it to do. Where this data comes from is a mock database implementation we'll get to database stuff in another workshop. If you want to, you can look at db.server, which is in the utils.

[00:36] And all of the data is just hard-coded in here using a really cool utility from MSW data. It's pretty great. But again, we're going to be using a real database in the future. So this, you don't need to worry too much about it. If your database ever gets out of whack, you just stop the server, start it up again,

[00:56] and you should have a fresh database. So your job is using this DB to actually load the data that you need. Now, because this isn't actually something that I care for you to learn specifically about how this database works, we're

[01:13] going to give you a lot of code that you can just use and move on with your life. Because I want you focused on the loader and how to get the data from the loader into our UI. So your job will be working with the loader primarily. And ultimately, you'll get this UI looking the way that we want it to.

[01:33] So take a look at this exercise, and we'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

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

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

Optimizing Metadata for User Info 

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

Loading Data to Your Database

Transcript