Learn Github, Jest and Most

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

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

Using a GitHub repo to deploy our application to Vercel, keeps our code and live production site in sync. In this lesson we look at using the [GitHub CLI](https://cli.github.com/) tool to create a public repo, and adding it as a remote origin for our project.

Additionally, we create a new Vercel project from this GitHub repo, add our Supabase environment variables, and deploy. Lastly, we update the Homepage URL in our GitHub OAuth app to be our new Vercel URL, and set our Supabase project's [Authentication Site URL](https://app.supabase.com/project/_/auth/url-configuration) to our new live application URL.

## Extension ideas

- Style the app using Tailwind CSS (or another method of choice)
- Implement the ability for a user to `update` and `delete` their own messages
- Add the option to set a username and display this alongside messages
- Add separate message threads/chat rooms
- Implement private messages/chat rooms

## Resources

- [GitHub CLI](https://cli.github.com/)
- [Vercel docs](https://vercel.com/docs)
- [Deploying Remix app to Vercel](https://vercel.com/guides/deploying-remix-with-vercel)

Deploy a Remix Application to Vercel from a GitHub Repository

Supabase supports [a collection of auth strategies](https://supabase.com/docs/guides/auth) - Email and password, passwordless and OAuth. In this lesson, we look at implementing OAuth with GitHub.

In order to do this, we [create a new GitHub OAuth app](https://github.com/settings/applications/new), and configure Supabase to use its Client ID and Secret. Additionally, we create a `<Login />` component that uses the Supabase client to sign users in and out.

This identifies a problem that we don't have access to the environment variables required to create a Supabase client outside of loaders or actions. Therefore, we pipe through our `SUPABASE_URL` and `SUPABASE_ANON_KEY` from the Loader function, and create a singleton Supabase client, to use across our components.

Lastly, we look at sharing this single instance of Supabase through the Outlet Context and declare types to ensure we have TypeScript helping us out throughout the application.

## Code Snippets

**Expose environment variables from the server**

```tsx
export const loader = async ({}: LoaderArgs) => {
  const env = {
    SUPABASE_URL: process.env.SUPABASE_URL!,
    SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY!,
  };

  return json({ env });
};
```

**Access `env` in component**

```tsx
const { env } = useLoaderData<typeof loader>();
```

**Create a singleton Supabase client**

```tsx
const [supabase] = useState(() =>
  createClient<Database>(env.SUPABASE_URL, env.SUPABASE_ANON_KEY)
);
```

**Share global variables with Outlet Context**

```tsx
<Outlet context={{ supabase }} />
```

**Consuming Outlet Context**

```tsx
const { supabase } = useOutletContext<SupabaseOutletContext>();
```

**Logging in with GitHub**

```tsx
await supabase.auth.signInWithOAuth({
  provider: "github",
});
```

**Logging out**

```tsx
await supabase.auth.signOut();
```

**Entire root component**

```tsx
import { json, LoaderArgs, MetaFunction } from "@remix-run/node";
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLoaderData,
} from "@remix-run/react";
import { createClient, SupabaseClient } from "@supabase/supabase-js";
import { useState } from "react";

import type { Database } from "db_types";

type TypedSupabaseClient = SupabaseClient<Database>;

export type SupabaseOutletContext = {
  supabase: TypedSupabaseClient;
};

export const meta: MetaFunction = () => ({
  charset: "utf-8",
  title: "New Remix App",
  viewport: "width=device-width,initial-scale=1",
});

export const loader = async ({}: LoaderArgs) => {
  const env = {
    SUPABASE_URL: process.env.SUPABASE_URL!,
    SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY!,
  };

  return json({ env });
};

export default function App() {
  const { env } = useLoaderData<typeof loader>();

  const [supabase] = useState(() =>
    createClient<Database>(env.SUPABASE_URL, env.SUPABASE_ANON_KEY)
  );
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet context={{ supabase }} />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}
```

## Resources

- [Supabase docs - login with GitHub](https://supabase.com/docs/guides/auth/auth-github)
- [Remix docs - Outlet Context](https://remix.run/docs/en/v1/api/remix#useoutletcontext)

Implement Authentication for Supabase with OAuth and Github

In this lesson we look at why you would need to generate snapshots on your CI server. We follow this up by creating a simple Github Action that will generate new snapshots against a pull request once you leave a specially formatted "slash command" style comment.

Generate Playwright Snapshots on your CI Server

jest

Jest is a fast and safe testing framework with a focus on simplicity. 
This lesson will walk you through how to add jest to your application by running `yarn add --dev jest` followed by updating your `package.json` to be able to run your tests on the console by using the `yarn test` script.
This lesson covers how to create your first test by creating your first block that groups several related tests with `describe` and then adding your first test method using either the `it` or `test` keyword.

Add Jest to Your Application and Create Your First Test

“a11y” stands for “accessibility.” It is a numeronym, with 11 representing the count of letters between the letter a and the letter y.

Accessibility is broken down into 4 categories of disability: visual, cognitive, auditory, motor. 

Regardless of the category of disability, accessibilities aim in web development is to make applications and websites usable for everyone.

a11y

To automate running Lighthouse audits on our application we can add the use of the Lighthouse CI tool to our Continuous Integration suite using GitHub Actions.  By making use of the Lighthouse CI GitHub App we can add to the checks in every Pull Request a report with the score from the audit run on each URL we configure for Lighthouse to audit.

## Resources
* https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/getting-started.md
* https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/configuration.md
* https://github.com/apps/lighthouse-ci

Automate Lighthouse Audits with GitHub Actions

The pluggable linting utility for JavaScript and JSX.

eslint

We can leverage GitHub Actions to automate the running of all of our accessibility auditing tools as part of a Continuous Integration (CI) workflow. 

Auditing tools will only catch a percentage of potential accessibility issues, it is no replacement for manual testing.  But being able to automate the auditing will add efficiencies to our testing and provide an early warning system that can be run much more frequently than it’s practical to perform manual testing.  Additionally, we can use our CI suite as a safety net to prevent code changes that break accessibility from being able to be merged.

## Resources
* https://app.egghead.io/lessons/react-set-up-eslint-to-audit-accessibility-issues-in-react
* https://docs.cypress.io/guides/continuous-integration/github-actions#Basic-Setup
* https://github.com/cypress-io/github-action

Automate Accessibility Audits with GitHub Actions

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

We can add accessibility testing to our `jest` unit tests with `jest-axe` which gives us:

* An easy way to automate accessibility auditing
* the flexibility to audit at any level of our code, as low as an element and as high as a component representing an entire page of our app
* A safety net for any accessibility regressions

Here we'll see how to use `jest-axe` with `react-testing-library` to render the components for `jest-axe` to audit for accessibility.

The React Testing Library is a very light-weight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices.

## Resources
* jest-axe: https://github.com/nickcolley/jest-axe
* react-testing-library: https://testing-library.com/docs/react-testing-library/intro/

Write Better Unit Tests with react-testing-library and jest-axe

We can add accessibility testing to our `jest` unit tests with `jest-axe` which gives us:

* An easy way to automate accessibility auditing.
* The flexibility to audit at any level of our code, as low as an element and as high as a component representing an entire page of our app.
* A safety net for any accessibility regressions.

Here we'll see how to use `jest-axe` with `enzyme` to render the components for `jest-axe` to audit for accessibility.

Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.

## Resources
* jest-axe: https://github.com/nickcolley/jest-axe
* enzyme: https://enzymejs.github.io/enzyme

Write Unit Tests for Accessibility Using jest-axe and enzyme

We can add accessibility testing to our `jest` unit tests with `jest-axe` which gives us:

* An easy way to automate accessibility auditing.
* The flexibility to audit at any level of our code, as low as an element and as high as a component representing an entire page of our app.
* A safety net for any accessibility regressions.

Here we'll see how to use `jest-axe` with `ReactDOM` to render components for `jest-axe` to audit for accessibility.

## Resources
* https://github.com/nickcolley/jest-axe

Render Components with ReactDOM to Write Tests with Jest and jest-axe

Best practices for building & testing redux applications have changed dramatically over time. This course aims to be a comprehensive yet understandable resource for those seeking to improve the testing of their redux applications.

This course is broken up into three parts.

The intro is look at how to add jest to an existing react redux application that was built on top of [vite](https://vitejs.dev/). We cover basic functionality like [watch mode](https://jestjs.io/docs/cli#--watch) and generating and using [code coverage](https://jestjs.io/docs/cli#--coverageboolean) to inform our testing strategy.

The first section covers the specifics of unit testing the redux code in our application. We'll go over how to test reducers, selectors and thunks. As part of this we'll touch on mocking APIs and using [Redux Mock Store](https://github.com/reduxjs/redux-mock-store) as well as running actions through our applications' actual reducers to broaden our test coverage.

Finally we'll look at how we can test our redux connected react components using the various utilities that come with the [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/). We'll cover simulating various kinds of user input with the [user-event module](https://testing-library.com/docs/ecosystem-user-event), populating our redux store with test data, using [jest spy](https://jestjs.io/docs/jest-object#jestspyonobject-methodname), how to wait for asynchronous tasks to complete, and several approaches for finding & asserting that visual elements exist on the page.

This course is built on top of content that was created for the [Modern Redux with RTK and TypeScript](https://app.egghead.io/playlists/modern-redux-with-redux-toolkit-rtk-and-typescript-64f243c8) course and I highly recommend you start there if you haven't completed it already. 

I'm confident you will level up your redux testing abilities if  watch these lessons and practice coding each of them as you go.

Intro to Confidently Testing Redux Applications with Jest & TypeScript

Intermission Pep Talk - Testing Redux Applications

The [reselect module](https://github.com/reduxjs/reselect) popularized a pattern of memoized redux selectors. Now that pattern is baked into Redux Toolkit with its [createSelector](https://redux-toolkit.js.org/api/createSelector) method, which is used by the `getMemoizedNumItems` selector we're testing here.

Any selectors created with `createSelector` come with these two additional methods `recomputations()` and `resetRecomputations()`. These methods keep track of how many teams your data was recomputed and are essential for testing these selectors.

Some additional examples on testing memoized selectors can be found here:
https://github.com/reduxjs/reselect#q-how-do-i-test-a-selector



----

The createSelector method first takes any number of "input selectors" which gather data from your redux store and then for its final arguments takes an additional selector which has for its inputs the result of those input selectors.

The memoization is broken if either the initial state is unchanged OR if the any of the  results of the input selectors are unchanged. It uses `===` equality and not any sort of nested equality checking so `state` and `{ ...state }` would not be considered the same and always would recompute. On the flip side passing in `state` and then running `state.count++` would not trigger a recompute automatically, because the `state` object reference has not changed and `===` would pass. It definitely tripped me up a few times, so keep an eye out for issues with this.




Unit Testing a Memoized Redux Selector Built with Reselect/RTK

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

There are several ways to mock APIs for our tests.

Here we're using [jest.mock](https://jestjs.io/docs/es6-class-mocks#calling-jestmock-with-the-module-factory-parameter) with the module factory parameter to a new mocked module to replace our original. This helps us avoid problems like servers taking a long time and node.js not having fetch built-in.

When using mocks this way it's important to note that this mocked module is only going to show up for the tests executed in this file. Other test suites will continue to receive the original implementation of app/api. 

Other approaches to mock APIs include mocking out `window.fetch` or using [Mock Service Worker](https://mswjs.io/docs/getting-started/integrate/node) to provide a more robust API implementation. However, the approach we took here makes sense for our use case. We have a simple API surface, it lives in a single file, we never call `fetch` directly and we don't need a lot of bells and whistles (like responding to different routes or query parameters). So for that reason this approach and the [spyOn](https://jestjs.io/docs/jest-object#jestspyonobject-methodname) approach used in some of the later lessons actually works really well.

If you're using [Apollo](https://www.apollographql.com/) or [ReactQuery](https://react-query.tanstack.com/) or [SWR](https://swr.vercel.app/) to handle your data, then you almost certainly should use [Mock Service Worker](https://mswjs.io/docs/getting-started/integrate/node) instead of the jest.mock approach.

Mocking out our API Helper with jest.mock

Code coverage is an important part of any test setup. One of the jest framework's innovations is built-in test coverage support. In this lesson I demonstrate using the [collectCoverageFrom](https://jestjs.io/docs/configuration#collectcoveragefrom-array) configuration option to improve jest's coverage support for TypeScript files and then demonstrate using `npx jest --coverage` to run code coverage as well as `npm test -- --coverage`, which does the same thing.

At the end I briefly mention the [collectCoverage](https://jestjs.io/docs/configuration#collectcoverage-boolean) flag which seems like you'd want to always just have on, but in practice is annoying. That's because coverage takes several extra to process and I rarely need my code coverage run, so it just makes the testing feedback loop a lot slower. For a build-only config it might make sense to leave on.

----

There's a [pretty good question on stackoverflow](https://stackoverflow.com/questions/43046885/what-does-do-when-running-an-npm-command) that covers using `--` with `npm test` that you might want to check out.

Here's an explanation of [how npx differs from npm](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).


Configuring Code Coverage for TypeScript Files in Jest

Jest has a [watch mode](https://jestjs.io/docs/cli) that can really speed up test development. It will automatically run your tests as you save your test files. And it has a built-in pattern option to allow you to only focus on tests for a particular file. This approach works well in combination with [test.todo](https://jestjs.io/blog/2019/01/25/jest-24-refreshing-polished-typescript-friendly#testtodo) where you can stub out a number of tests and then code on them until they all pass.

Most of what is being done in these tests we've already seen before and it's important to note that I'm doing only the most basic of testing here. For each of these actions it wouldn't be uncommon in production to have 3-6 tests instead of just one.

It's important to note that `it` and `test` are aliases of one another so `it.todo` and `test.todo` both work seamlessly and are just a matter of preference. *Usually* when I'm doing unit testing I'll stick with `describe` and `it`, which commonly go together and I use `test` without `describe` when I'm testing react components with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro).

Using Jest in Watch Mode with test.todo to Test a Redux Reducer

The app is built on top of [vite](https://vitejs.dev/) instead of the more popular [create react app](https://reactjs.org/docs/create-a-new-react-app.html). The benefit of vite is that it installs and builds extremely quickly. One of the downsides of vite is that it doesn't come with any out-of-the-box testing support. It also has its own [esbuild-based compiler](https://vitejs.dev/guide/features.html#typescript), which is not currently compatible with jest, so we have to configure JSX & TypeScript support for jest even though `vite` handles that already for our app.

This lesson requires installing a handful of modules:
```
npm install -D jest
npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event
npm install -D @babel/preset-react @babel/preset-typescript @babel/preset-env
npm install -D identity-obj-proxy
```

Each of them serves an important purpose:

- [jest](https://jestjs.io/) _runs our tests_
- [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro) adds the ability to render react components inside of our test environment
- [@testing-library/jest-dom](https://github.com/testing-library/jest-dom) _allows us to assert that components are in the DOM and contains certain text and classes_
- [@testing-library/user-event](https://testing-library.com/docs/ecosystem-user-event) _allows us to interact with rendered components programmatically_
- [@babel/preset-react](https://babeljs.io/docs/en/babel-preset-react), [@babel/preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript), and [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) allow us to use ES6 Modules, JSX, and TypeScript in our tests
- [identity-obj-proxy](https://github.com/keyz/identity-obj-proxy#identity-obj-proxy---) is helpful when rendering CSS modules so that we can see the original class names instead of obfuscated ones

We also have to add numerous config files such as `babel.config.js` and `jest-setup.ts` which are required to enable all of this functionality.

We put our `jest` config in our `package.json` file which works well, but you can also put it in a file named `jest.config.ts` or `jest.config.js`. See the [Jest Configuration Documentation](https://jestjs.io/docs/configuration) for more details about configuring jest.



Adding Jest with TypeScript Support to a Vite Application

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

 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

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.