 Courses from Ian Jones

 We map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the table. This allows us to add more columns to our pokemon table.

Fetch and display row details with Promise.all in Tanstack Table

map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the tanstack table

Create a custom hook to fetch remote data by passing a promise to the React 19 `use` hook. Then render this data in Tanstack Table by memoizing the results and passing them to `useReactTable`.

Render remote data in a Tanstack Table with React 19's use hook and a promise

Create a custom hook using React 19’s use to fetch data with a promise. Render it in a Tanstack Table by memoizing and using useReactTable.

Implement virtual scrolling to handle large datasets in an HTML table. Start with a basic table that renders 10,000 rows of data. The browser can struggle with this amount of DOM nodes to render at one time, especially on low end devices. 

We implement tanstack react virtual to render only the necessary amount of rows the user is viewing. The implementation includes proper column sizing, accessibility considerations, and convenient scroll controls, resulting in a smooth and performant table experience regardless of the dataset size.

Create a row virtualized HTML table with Tanstack Virtual

Learn how to implement virtual scrolling in React tables using TanStack Table and Tanstack Virtual with the useWindowVirtualizer React hook.

Manage column visibility in tables using [Tanstack Table](https://tanstack.com/table/v8/docs/guide/columns). Toggle each column's visibility with checkboxes, set some as non-hideable, or hide them by default. Adjust properties in the table code to control displayed columns. 

Install [Shadcn's Switch](https://ui.shadcn.com/docs/components/switch) component to render nice looking switches instead of plain html check boxes.


Hide and Show Columns with Tanstack Table

Learn to hide and show columns in an HTML table with Tanstack Table. Render switch components with shadcn. 

Make an HTML table more readable on mobile devices by using the ::before pseudo-element. We add labels to each cell, so they appear like cards when the table is viewed on smaller screens. The ::before content is set using a data-label attribute for each cell to enhance mobile viewability without horizontal scrolling.



Create a mobile friendly table with the before pseudo-element

Learn to use CSS ::before pseudo-element for mobile-friendly HTML tables. Add labels to cells for enhanced readability on mobile, avoiding horizontal scroll.

Learn how to display custom components in a [Tanstack Table cell](https://tanstack.com/table/latest/docs/guide/cells), including how to render capitalized text, apply conditional styling with class helper functions, and format dates using the `Intl` API for readable display. 

`flexRender` allows you to utilize the `cell` callback method in your column definitions. Tanstack table will call this function to render the custom component you defined.

Render Custom JSX in a Tanstack Table cell

Use tanstack table flexRender method to render custom components in a table component. Capitalize letters, apply conditional styling, and render dates with Intl


[Shadcn](https://ui.shadcn.com/docs) is a popular component library that allows you to install components into your codebase.

Learn how to install the [Table component](https://ui.shadcn.com/docs/components/table) and use that presentational component with [Tanstack table](https://tanstack.com/table/latest).


Display Tabular Data in React with Tanstack Table

Build a dynamic table component in React using shadcn component library and tanstack react table.

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

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

Our application has achieved MVP status — Minimum Viable Product that is. This means it’s time to deploy.

For this application, you will use Vercel to deploy to as it’s just a few clicks away. Vercel integrates with GitHub so once you give it access you can connect your GitHub Project. Similarly, Vercel has a PlanetScale integration that will pull in all the necessary environment variables you will need to connect your production database to your deployed application. After setting your env variables you’ll have deployed a full fledged, working application with a production database.

From there, we will test out a feature to deployment workflow for you to get a feel for how deployments on Vercel work.

Deploy a Remix Application with Production Database to the Internet Through Vercel

You are at a place where you have an app that will persist data through a sqlite database. Sqlite is great for getting started but as you build out your application, you’ll want a database that can scale with your project. 

PlanetScale is the database that you are looking for. PlanetScale is a database as a service that powers a mysql database called Vitess. Vitess is what YouTube is ran on so safe to say it will scale to all your needs. 

Because you used Prisma to set up your database, switching to PlanetScale will be easy. You will create a PlanetScale project, sign in to the CLI, follow the Prisma Quickstart guide and learn about Database workflows with PlanetScale. Who would have thought it would be so easy to migrate your database service.

Connect a Remix Application to PlanetScale Through Prisma

At this point, your form will accept any type of input that users desire. This isn't good, you need to add form validation. 

Form validation is another area that there are many ways to accomplish what you need. One great way to get easy form validation is through a library called Zod. Zod allows you to create a schema to parse your form input against. It will return form and field errors when input doesn’t match the rules that you supply.

With Zod in place, you’ll check form input in the action previously defined. If an error is found, you’ll return an object passing in the errors you find as well as the input that users submitted. This will be used to render error messages in the form and reset form state to what was submitted. This is easy to accomplish with Remix json helper that will also set the error message for you.

Along the way you will also see how easy it is to type this data.

Validate Form Data Through a Remix Action using Zod

This is where things start to get fun, you’re adding data to your database!

 To do this, you’ll learn about Remix actions. A Remix action utilizes HTML elements to accept input from the user. When creating data, you’ll set the form to a method of `post`. The form needs a route to post to so you will need to set the `action` to the route that will handle the request. In our case it is the index route the form is in.

The Remix action itself accepts a request that you can pull the form field data you need off of it. From here you can update your database directly, because you’re on the server! In this case, you’ll create a function createPost that will utilize Prisma to create a record. Once this happens, we will redirect users back to the index page that they were on.

Add Data to your Database through Remix Actions and Prisma create

There are many ways to style an application. While styling isn’t a focus for this course, we don’t want the application to be unbearable to look at. 


TailwindCSS is how you will style this application. With it’s utility classes, Tailwind stays out of the way once you get it set up. The [Tailwind docs have a great tutorial](https://tailwindcss.com/docs/guides/remix) which you can follow to get to styling your application. You can also follow along in this tutorial.

Set up Tailwind and Create a Presentational Component in Remix

Now that you have a database running, you need a way to connect to it in your application. This is where Prisma client joins the fray and really shines. 

With Remix, there is a little bit of set up that we have to do to ensure that we won’t be opening extra connections to the database through Prisma. Through this set up you’ll learn about another important pattern in Remix which are services. 
You’ll create a db.server.ts service that will manage setting up the Prisma client. The folks at Remix have us covered with this code snippet that safely sets the client up for you. 

After creating the client, we will create another service `post.server.ts` that will expose all of the functions that you can use throughout your application to retrieve data from the db. One great benefit of this pattern is that when consuming these services you don’t need to know about the implementation that is powering them. Just the api that is exposed, in this case a `Post` type and `getPosts` function.

FINALLY you’ll consume that function in the data loader at the root of your application to display posts from the database.

This sounds like a lot but you get this all done in under 5 minutes.

Retrieve and Display Data from the Database through Prisma and Remix Loaders

Most applications need data persisted to a database. A really great way to manage data is through an (Object-relational mapping) ORM so you aren’t stuck writing SQL queries when you want to be building websites. 

Prisma is a modern ORM that lets you get started with a database in just a couple steps. It supports TypeScript to which you will take advantage of.

In this lesson you will initialize Prisma in your application and model out what a `Post` will look like. You’ll set a few properties that Prisma will manage (e.g. id, createdAt) and a few that you will manage. Prisma also comes with a studio that you can run to create and manage data super easily when you don’t have other means to CRUD that data (we don’t yet!).

Install and Model Data with Prisma

In this lesson, you'll learn how to enhance the accuracy of components generated by Cursor Composer by aligning your project's package.json with Cursor's rules. We'll guide you through extracting the list of installed packages from your package.json and incorporating them into your .cursorrules file, along with brief descriptions of their functionalities. By providing Cursor with this contextual information, you'll enable it to generate components that are more precise and functional on the first attempt. The lesson includes demonstrations of component generation both with and without these enhancements, highlighting the improvements in accuracy and efficiency.

Boost Cursor Composer Accuracy: Integrating package.json with Cursor Rules

Speed up your bug-fixing process dramatically with Cursors Composer. Take a warning from your logs, search for relevant terms, then seamlessly import both the warning and search results into Composer. Add documentation and apply fixes to all search results in one go. This streamlined workflow resolves multiple issues rapidly, saving valuable development time.

Batch Fix Every File in Search Results with Cursor's Composer

You know when you're deep in the code trenches and need someone to challenge your assumptions? That's exactly what this is about.

Instead of waiting for someone to poke holes in your master plan, you can paste that strategy straight into AI Studio and let it pressure test your ideas. We're talking about using this tool to validate everything from your feature proposals to your ambitious refactoring strategies.

The real magic happens when you hit that microphone button. Now you're in a real-time verbal sparring match. It's like rubber duck debugging but the duck actually pushes back and makes you defend every architectural decision you've made.

Here's the workflow:
1. Drop your master plan into the system instructions
2. Tell the AI to challenge every assumption
3. Hit that mic and defend your choices like you mean it
4. Watch your plan either emerge stronger or get rightfully dismantled

This approach is perfect when you're:
- Stuck in your own head with a complex problem
- Need to validate if your approach holds water
- Want to catch edge cases before they catch you
- Looking for opportunities you might have missed because you're too close to the code

It's like having a senior dev on call 24/7, ready to challenge your ideas and push you to think deeper about your solutions.

Now go forth and get your ideas challenged. Your projects will thank you for it.


An Uncomfortable and Challenging Conversation with AI Studio

In this lesson, you'll learn how to effectively brainstorm your project ideas before working with AI agents. We'll cover:

1. The importance of having a clear plan before starting work with AI agents
2. Using traditional brainstorming techniques to gather your thoughts
3. Leveraging video recording to capture your brainstorming session
4. How to review and analyze websites for inspiration
5. Documenting likes, dislikes, and potential features for your project
6. Using AI tools (like AI Studio) to organize and process your recorded brainstorming session

The lesson emphasizes a modern approach to brainstorming that combines traditional techniques with video recording, making it easier to later process your ideas through AI tools. This method helps ensure that no ideas are lost and that your thoughts can be effectively organized by AI for future reference.

How to Brainstorm Your Project Features to Prepare for AI Agents

fast-check allows us to create composite generators that suit our testing needs. We'll generate two numbers to create a point simulating an X and Y and assert that the distance should always be greater than or equal to 0.

Generate composite objects with fast-check fc.record

Just using fast-check by itself can make you tests verbose and tough to read. Lucky for us there are many integrations with fast-check such as the `@fast-check/jest` package that will help remove some boilerplate from our test.

Tidy up your test with @fast-check/jest

Many people share .cursorrules files, but trying to craft your own from scratch is a huge pain. Instead, this lesson shows you how to grab ALL community-created .cursorrules files to build a custom rule set for your projects. We'll use Gitingest and Google AI Studio to gather these examples and generate an awesome starting point customized to your specific project.

Generate Custom .cursorrules for Your Project Based on Community Examples

The GitHub CLI allows you to search issues and filter on different criteria like amount of comments. This allows you to search for real-world situations and pains/solutions people have using different technology. 

With the GitHub CLI in hand we'll drop 100s of issues as context in Googles AI Studio and have Gemini determine the 10 most frequently asked questions. This will give us a sense of how people use a library and where people get hung up.