Learn Github, Json-server and Redux

GitHub fosters a fast, flexible, and collaborative development process that lets you work on your own or with others.

github

Now that we are on Fly.io we'll want to replicate the functionality that Vercel was automatically doing for us by creating and configuring a GitHub Action to deploy our site whenever new commits hit the main branch.

Luckily for us there are a number of pre-defined GitHub actions that we can utilize like `actions/checkout@v3`, `actions/setup-node@v3`, and `superfly/flyctl-actions/setup-flyctl@master`. You'll notice that the first two actions are maintained by GitHub where the last is maintained by Fly.io. 

During this process you will also need to generate a token to verify your deployment to Fly.io and store that in the repository Action secrets.

Create a GitHub Action Configuration to Automatic Deploy an Astro Blog

Download and GitHub

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

First thing we'll do is navigate to [Github's Developer Settings](https://github.com/settings/applications/new) to register a new OAuth application.

Here we will set the app name, url, and callback url both for the development environment.

We will copy the Client ID and generate secrets and set them in our `.env`.

Finally we'll generate a `NEXTAUTH_SECRET` with the `openssl` cli tool to generate a random, secure string.

Set up GitHub OAuth for a Next.js 13 Application

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

supabase

[Supabase](https://supabase.com) includes multiple authentication strategies. In this lesson, we create a Supabase client to trigger the OAuth authentication flow with GitHub.

Additionally, we discuss the differences between Client and Server Components in the [Next.js App Router](https://nextjs.org/docs/app):

- Client Components: user interactivity
- Server Components: data fetching

Lastly, we create a Route Handler to exchange an authentication code from GitHub for their Supabase session.

## Code Snippets

**Authenticate with GitHub OAuth**

```tsx
await supabase.auth.signInWithOAuth({
  provider: "github",
  options: {
    redirectTo: "http://localhost:3000/auth/callback",
  },
});
```

**Exchange code for Supabase session**

```tsx
await supabase.auth.exchangeCodeForSession(code);
```

## Resources

- [Supabase Auth Helper docs](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)
- [Next.js App Router docs](https://nextjs.org/docs/app)

Authenticate Users with GitHub OAuth using Supabase and Next.js Client Components

[Supabase](https://supabase.com/) includes many ways to authenticate users - Email and password, magic link, mobile OTP etc. In this lesson we implement social login with GitHub by registering a new OAuth Application and providing Supabase with the Client ID and Secret.

## Resources

- [Supabase guide to Login with GitHub](https://supabase.com/docs/guides/auth/social-login/auth-github)

Create an OAuth App with GitHub

Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

redux


With our migration complete, you notice that there is A TON of Redux code we can simply delete. We no longer have to manually handle all the server interactions that our application requires to function. Redux can handle the client-side state that it was meant to handle and RTK Query can take care of fetching and caching our network data.

Not only is our code base cleaner and easier to understand but it also provides a significant boost in the user experience of our application by making features like prefetching, optimistic updates, loading and error states easier to include.

If you're running a redux application in production I suggest taking a serious look at RTK Query. After this course you should have all the tools you need to make that happen.


Delete Unused Redux Code After Migrating to RTK Query

RTK Query is built on top of Redux which has the huge benefit of utlizing the [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en). Every RTK Query operation is represented with the actions and state modifications that happen in the DevTools. 

There's also RTK Query tab in Redux DevTools so that you can take a detailed look at the various queries and mutations you have going at any given time.

In this lesson you'll get a basic overview of the Redux DevTools and how it works with RTK Query.

Debug RTK Query Applications with the Redux DevTools Chrome Extension

The previous prefetching that we did with the `initiate` method is most useful for data that will existing on your initial page load. For other data throughout your application pre-loading can still come in handy, but you need to be thoughtful about what gets loaded, and when.

RTK Query gives you a `usePrefetch` hook that you can sprinkle throughout your application depending on what your user is doing. In this lesson, we prefetch dog data when the user hovers over the dog and services links, indicating their intent to load those page. With this approach to pre-fetching it's unlikely your users will ever see a loading spinner.

The documentation for RTK Query's `usePrefetch` hook can be found here:
https://redux-toolkit.js.org/rtk-query/usage/prefetching#prefetching-with-react-hooks


Prefetch Data in Response to User Interactivity with RTK Query's usePrefetch hook


RTK Query can start fetching data in your application before React is even available. This can be handy when your application relies heavily on data that you need to fetch. This data is cached so your users won't be refetching this data when they navigate through out the application.

Prefetching relies on the powerful `api.endpoints.<queryName>.initiate()` method that underlies much RTK Query's internals. For RTK Query to process and store initiate() calls properly they have to be sent into the redux store with `store.dispatch()`.

An advanced variation of this splits your main app file into the data pre-fetching (done first) and then your react application (lazy-loaded with `import()`). The idea being that you want to start your data calls before JS has to even start process what's likely to be a large bundle file.

For more information about prefetching with RTK Qyery see: https://redux-toolkit.js.org/rtk-query/usage/prefetching#prefetching-without-hooks.


Prefetch Data in RTK Query using an Endpoint's initiate() Method

In this lesson we look at the options for modifying headers on your queries. We start with adding a `headers` object to an individual query. That requires moving our query from returning a url string, to returning an object with the URL and the new `headers` property. We also add `headers` to our `baseQuery`, but replace that with the more flexible [prepareHeaders](https://redux-toolkit.js.org/rtk-query/api/fetchBaseQuery#prepareheaders).

`prepareHeaders` relies on the [Headers object](https://developer.mozilla.org/en-US/docs/Web/API/Headers) that is part of the Fetch API. As a second argument you also can access the current redux state. Accessing the redux state is helpful if you want to access saved data such as an authentication token.

Here's an example of using `prepareHeaders` for setting an `authorization` header:
https://redux-toolkit.js.org/rtk-query/api/fetchBaseQuery#setting-default-headers-on-requests


Customize Query and Mutation Headers in RTK Query with prepareHeaders


The thing about optimistic updates is that sometimes the worst case happens: your server fails. RTK Query makes handling this case incredibly easy.

In your `onQueryStarted` handler you have access to the original promise (similar to the results of `unwrap()`) in a value called `queryFulfilled`. With this value you can add a `.catch()` which will be ready to handle any non-200 response and in there you can call `.undo()` on the results of dispatching `api.util.updateQueryData`.

Doing that will revert your redux and rtk query state to where it was before your made the change. It's honestly kind of magical.

The document for optimistic updates and undo can be found here: https://redux-toolkit.js.org/rtk-query/usage/manual-cache-updates#optimistic-updates


Undo an Optimistic Update in RTK Query with queryFulfilled


Optimistic updates are great for user experience. In this lesson we purposefully setup the remove dogs handler to wait several seconds to return. That meant for an awkward experience for users while waiting for the dog deletion to go through. It's going to go through 99% of the time right? Why not just respond like it worked? That's what optimistic updates allow you to do.

In every query or mutation you define, you have the option of including an `onQueryStarted` listener, which will be executed just as the query is fired off. In there you receive the arguments passed into the query or mutation as the first, and then a number of utilities including `dispatch` passed as the second argument.

This will let you `dispatch(api.util.updateQueryData(<queryName>, <queryArgument>, <modificationFn>))` and modify the cached data stored for that particular query.

If you're using `invalidateTags` with your mutation as well as manually modifying the cache, your cache will be updated immediately and then refetched after the mutation was successful.

Two example of optimistic updates with RTK Query can be found here:

- https://redux-toolkit.js.org/rtk-query/usage/manual-cache-updates#optimistic-updates
- https://redux-toolkit.js.org/rtk-query/usage/examples#react-optimistic-updates


Perform Optimistic Updates in RTK Query by Dispatching the updateQueryData Action


This is a small lesson that covers a tiny feature of RTK Query that enables two additional refetch options: `refetchOnMount` and `refetchOnReconnect`.

In order to support them you need to include `setupListeners()` in your redux store. And then you'll have the ability to automatically refetch data when your page comes into focus or reconnects to the network. The main idea is if you're outside of the page on a different app and come back it will make sure your users are seeing the most up-to-date information.

More information about these options can be found here:

- https://redux-toolkit.js.org/rtk-query/overview#configure-the-store
- https://redux-toolkit.js.org/rtk-query/api/createApi#refetchonfocus
- https://redux-toolkit.js.org/rtk-query/api/createApi#refetchonreconnect


Refetch Data on Focus And Reconnect with RTK Query's setupListeners


The tags feature shown in this lesson is arguably RTK Query's best feature. It's conceptually simple, but incredibly powerful. If you can know ahead of time which operations will invalidate your data, then you should always refresh the data after you perform those operations.

The basic premise is that you specify which tags queries rely on with `providesTags` and then which tags a mutation will invalidate with `invalidatesTags`.

One of the advanced things you can do with tags, which we don't cover here is configuring mutations to invalidate tags with a specific ID. So imagine if you edit an entry, you don't want it to invalidate every other entry, just that one AND the list. This is covered in the [automated refreshing](https://redux-toolkit.js.org/rtk-query/usage/automated-refetching) section of the RTK Query Docs. There's also information in the docs about [how to handle pagination with tags](https://redux-toolkit.js.org/rtk-query/usage/pagination#automated-re-fetching-of-paginated-queries).


Invalidate RTK Query Cache Entries Automatically using providesTags and invalidateTags


This lesson demonstrates how to use the [keepUnusedDataFor](https://redux-toolkit.js.org/rtk-query/api/createApi#keepunuseddatafor) of APIs and queries to modify the default timeout of cached items when they're not being used. "Used" here refers to components subscribing to them via query hooks. If you're actively relying on the data on the page you're in, RTK Query won't just go and pull data fresh, but if you move away for long enough and then come back, it will make sure your data is up-to-date.

This is actually a brilliant feature, but the specific number for how long the timeout should be is going to depend on the usage patterns of your users and how frequently the data changes on the server. If your data changes infrequently there may not be any reason to have this enabled at all, you could set it to `3600s` (1 hr) for example.


Invalidate the RTK Query Cache using keepUnusedDataFor


This lesson is about a powerful combo, refetch and unwrap.

The first and simplest concept is [refetch](https://redux-toolkit.js.org/rtk-query/usage/queries#frequently-used-query-hook-return-values), which forces whatever query you're subscribed to, to pull the latest data from the server. Refetch takes no arguments and doesn't let you change the query in any way. It just forces it to be called again. Another way to manually call refetch is to use `initiate` on your query's endpoint. For example, `api.endpoints.getDogs.initiate(undefined, { forceRefetch: true })` would do the same thing as our `refetch` call here, but `refetch` is a lot cleaner.

The second part is around [unwrap](https://redux-toolkit.js.org/api/createAsyncThunk#unwrapping-result-actions), which lets you access the original promise result from a mutation, which you can then use to immediately trigger some action, such as refresh. Or, you can use it to display an error message when the mutation fails.

Manually Refetch Data After an RTK Query Mutation with unwrap() and refetch()


Here we use `builder.mutation()` to define a mutation in our API. What is a mutation? Well it's basically a POST request or anything that would modify something on the server. You'll notice `builder.mutation()` and `builder.query()` look very similar except here we are passing the URL in an options object and that's only because we want to pass `method` and `body` as well. The query here could potentially also be a string just like in `builder.query`.

You probably noticed that we removed the refetch that was happening with `dispatch(getDogs())`. That will be replaced in the next lesson with the `refetch` method.

More information about the options you can pass into `builder.mutation` can be found here:
https://redux-toolkit.js.org/rtk-query/usage/mutations


Migrate a Thunk in a Redux Application to an RTK Query Mutation


This lesson covers two important principles. The first is memoized selectors with [createSelector](https://redux-toolkit.js.org/api/createSelector) and RTK Query's built-in [endpoint selectors](https://redux-toolkit.js.org/rtk-query/api/created-api/endpoints#select).

RTK Query doesn't give you an easy way to access its cache manually but it does give you these enpoint selector helpers that allow you to reach into the cache when you need it.

Using these memoized endpoint selectors are recommended because they only calculate a new value any time the data arguments change while the previous selectors we had would be re-run on every re-render.

While not mentioned in the lesson you don't need to use endpoint selectors with createSelector. This would work perfectly fine:

```js
export const getServicesForLuckyDog = (state) => {
  const { data: dogs } = api.endpoints.getDogs.select()(state);
  const { data: services } = api.endpoints.getServices.select()(state);

  // if you don't have a lucky dog, show all of the services
  const dog = dogs?.[state.dogs.luckyDog];
  if (!dog) {
    return services;
  }
  // ...
};
```


Access the RTK Query Cache in a Memoized Selector Using an Endpoint's select() Method

We're currently modifying the data we get from RTK Query at the component level with `useMemo`. This works great when you have a single component that needs to have access to the data in a unique way. However, when you need to access that modified data in multiple components, it's better to use `transformResponse`.

Using [transformResponse](https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#customizing-query-responses-with-transformresponse) moves the data transformation into your cache, so any component subscribed to a given query will receive data in the updated format.


Transforming RTK Query Data before Caching with transformResponse


In this lesson we rely on `useMemo` to to give additional properties to data returned from our query hook. This is **not the recommended approach** to modifying a server response. That would be the `transformResponse` property shown in the next lesson, but I wanted to demonstrate how easy it was to combine typical react features like `useMemo` with RTK Query results. This approach can work well if you need to modify data in a single component and no where else. It can also be combined with a custom hook that encapsulates both the query and the `useMemo` call to be made more reusable. In the sample code I've provided an example of what that hook might look like.

Transform Cached RTK Query Data before Rendering with useMemo

This our longest lesson. It covers territory that we've already covered, but in a more advanced way. Here are some of the main points.

1. When you migrate redux state into RTK Query, by mindful that you may have had initial state, which should usually be replaced with an `isLoading` check
2. Like everywhere else we rely on [destructuring asignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring) to give meaningful names to the generic `data` property returned from our query hook.
3. We're also using [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) to deal with  `data` before we receive a server response
4. We're continuing to update our `getServicesForLuckyDog` selector here and pass in additional data, this time for our dogs


Migrate a Redux Thunk to RTK Query

 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.

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

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.

Search 100s of Issues with GitHub CLI as Context for AI Studio

I often find myself wondering how to use certain APIs in certain situations, and I have a couple of keywords that I try and search up on Google. 

What you can do in this situation is turn to GitHub and see how other people have actually used this code on public projects. The GitHub CLI enables us to run searches like this, and we can take the results and work on them programmatically.

Inside of Cursor with their Composer AI agent, we can search for the files we want, tell the agent to download them, and inspect them for better understanding of how those things work together.

Search All of GitHub's Code and Pass the Results to AI Agents in Cursor

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.

The most difficult tasks will require the strongest AI models. And those models simply aren't available as AI agents inside of your tooling. So the best workflows are to drag and drop the files you need to be changed and analyzed inside of a reasoning model such as OpenAI's O1 Pro, then letting it create a giant plan for your dumber AI agents to work on. The key here is that instead of just copying and pasting the entire plan into Cursors Composer or your AI agent, it's to create a file inside of your project and ask your agent to tackle the plan one step at a time. This allows you ample opportunity between each step to test and verify the micro steps along the way. Otherwise, as I've experienced many times, a session can go way off track and you burn a lot of time and burn a lot of AI requests Cursors Composer and it starts churning through a plan Cursors Composer and making lots of unwanted changes. Cursors Composer and it's to guide an AI agent to hold its hand along the way, especially through the most complex tasks. Cursors Composer and the most complex tasks Cursors Composer and the most complex tasks require a step-by-step plan.

Planning AI Agent Sessions with Reasoning Models

AI agents will inevitably make mistakes—it's just a matter of when. A key tool in your toolbox, once they do make mistakes after working on a problem for a while, is to use **git diff** to capture all of the changes they've made. 

Once you have those changes in a text file, you have a portable document that you can test against other AI models. This allows you to move the problem into smarter reasoning models with smaller context windows, helping you isolate and focus on the issue at hand.

**git diff** has been invaluable when working with AI agents because they'll often make many good changes but also slip in one tiny error. Finding that one small mistake is **git diff**’s superpower.

Search

Search Results