Learn Faunadb, Reactfire and Remix

Dive into the world of real-time web development with this hands-on course! You’ll learn how to build a dynamic chat application using Fauna Streams and Next.js 14, focusing on the essentials and best practices.

**What You’ll Learn:**
- **Next.js Best Practices:** Master Next.js best practices for building fast, maintainable apps.
- **Server-Side Rendering (SSR):** Learn SSR techniques and master features like server actions, server side form submission etc.
- **Database Access Patterns:** Efficiently connect and retrieve data using Fauna.
- **Real-Time Updates:** Implement real-time updates with Fauna Streams.
- **Basic Authentication:** Secure your chat app with simple authentication methods.

**Course Highlights:**
- Practical, project-based learning.
- Clear, step-by-step instructions.
- Focus on modern, real-time web development.
- Tips and tricks for optimizing performance.

By the end of this course, you’ll have a working real-time chat app and a solid grasp of the tools and techniques used to build it.


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

Build a Real-time Next.js 14 Chat App with Fauna 

FaunaDB is a global serverless database that gives you ubiquitous, low latency access to app data, without sacrificing data correctness. It eliminates layers of app code for manually handling data anomalies, security, and scale, creating a friendlier dev experience for you and better app experience for your users.

faunadb

Now that we have user information available to us, we want to connect messages created to the users that are sending them. When we add `read` privileges to the `User` model, we can call `User.identity()` to get the user data we need to set for messages. 

Update Fauna Messages Collection with Authors

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

For user signin, we'll implement a proper server action by creating a `actions.js` file where our server actions can live. In our login page, we'll set the component to be a client component to hold some state. This way we can use the new `useFormState` hook from `react-dom` and pass in our login server action.

Within the action we'll call our `UserLogin` function from Fauna and set a cookie with the secret we get back that we can use throughout our application.

Implement Fauna Signin with Next.js Server Actions and useFormState React Hook

Now it's time to actually sign users up for our appliaction.

We'll implement the `doSignup` function that we created earlier. This function will run on the server with the `'use server'` directive so we can instantiate a fauna client and call `UserRegistration` within this function.

From there we'll redirect the user to the `/signin` page which will error out because it's not implemented yet.

Implement Signup Functionality through Fauna with Next.js 14 Server Actions

To have actual users in our application we need to represent those users in our database. Fauna has quite a few ways you can do user authentication but we'll be creating our own using a few built-in Fauna helpers.

We'll start by setting up the necessary Fauna logic for users. We'll add a `User` collection as well as a `functions.fsl` file that we'll expose user sign up and log in. Here we'll see how Fauna gives us a built in `Credentials` document to handle email and password for a user. It also has a login function that it exposes to make that easy for us which will generate a token for a user on login.

After setting up our functions, we'll add an `UnAuthRole` as well as an `AuthRole` and give proper actions for each role.

Add Fauna User Authentication to a Next.js App

To stream messages, we'll implement logic very similar to how we stream the creation of rooms from earlier.

First, we need to convert `MessageList` into a client component. We'll get an interesting error saying that only plain objects can be passed to client components from server components. This happens because the response we get back from Fauna is pretty complex. To fix this error we'll create a simple messages array and pass that down to the `MessageList` component.

In the `MessageList` component we'll create a `useEffect` that will initiate a Fauna stream within a ref and push new messages into state that we are holding in the component.

Stream Chat Messages in Real-time in Next.js from Fauna

Now it's time to actually create messages and display them in rooms within our application.

We'll start by creating a `MessageForm` component that will send a `Message.create` query to Fauna on form submission.

Next, we'll display these messages by updating our room query to also get all the messages for that room. You'll see that we can still just perform one query because we pass in the room id and call `Message.where(.room == room)` to the query.

One note here is if you console log your messages in your page component, you'll notice that the logs show up in the terminal and not the browser. This is because we are using a server component.

Create and Display Messages using Fauna within a Room in Next.js

We'll take a moment to explore how Fauna handles one-to-many relationships inside the fauna shell. 

First we'll create a `Message` collection.

Then we'll connect to the cloud database by running `fauna shell`, because I'm logged and configured this connects to the database I'm working with.

In the terminal we'll see how to create multiple messages that are associated with a room and query for those messages by room.

Explore Faunas one-to-many Relationships between Collections in the Terminal

With rooms being created and displayed on the index page, it's now time to create dynamic routes for each room so that when you click on a room name, you are actually navigated to that room.

We'll do this by using Next.js dynamic route syntax `/rooms/[...id]/page.js`. This will render a page on any `/rooms/:id` passing the component we define the `:id` as params.

Here we'll take that id and fetch the room data from fauna with a `Room.byId` query.

Create Dynamic Routes in Next.js for Chat Rooms

We can add rooms but our application does not update and display rooms when a room is added. This should happen in real-time.

To fix this we'll add a useEffect that will query for all our rooms and use fauna's `client.stream` API to ensure that this happens in real-time.

List Available Chat Rooms in Real-time in Next.js from Fauna

The first step to building a chat app is to have rooms to chat in. We'll need to create a Room collection (or table) in Fauna that we'll be adding to.

In our Next Application we'll create a simple form that has a submit handler that will create those rooms in Fauna. We need to hold some state in our component so we'll turn the page into a client component with `'use client'`.

There will be a little bit more Fauna set up to get things working. We need to create a key for our application to interact with our database so we'll create a key by running `Key.create` in our `fauna shell`. Then we'll install the `fauna` client and make a `client.query` to create the room.

Create a Fauna Room Collection in Next.js with the fauna Client

The first step is to install and configure our database that will be backing our Next.js application. We'll be using Fauna so we head over to the Fauna website and create a database.

Back in our terminal we will install `fauna-shell` so we can interact and manage our database from within our project. After some initializing steps from the CLI we'll be set up to build the app out.

Initialize and Configure a Fauna Database inside a Next.js project with fauna-shell

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

Mocking authentication comes down to how it's implemented. With Mock Service Worker, you can mock the "Set-Cookie" response header to emulate a user session, but with Remix you don't even have to. Instead, in this lesson we will intercept only the authorization call to a database, leaving Remix to handle sessions, cookies, and auth state for us. 

Use MSW to Mock Authentication in 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

To mutate data in Remix, we use an Action function. In this lesson, we look at creating a Remix `<Form />` to submit the content of a message as a `post` request to our `Action` function.

Additionally, we use the server-side Supabase client from the Remix Auth Helpers package to make an authenticated request to Supabase, writing the new message to the `messages` table.

Futhermore, we run into an issue with RLS as we have not yet written a policy for the `insert` action. By setting this to the `authenticated` role and ensuring that the `user_id` column is equal to the value returned by the `auth.uid()` function - a function we get from Supabase to retrieve the ID for the user attempting to insert a new row - we ensure that users can not write a message on someone else's behalf.

Lastly, we use the `auth.uid()` function to set the default value of the `user_id` column to the ID of the user attempting to `insert` the new row in the `messages` table.

## Code Snippets

**Write data to Supabase**

```tsx
export const action = async ({ request }: ActionArgs) => {
  const response = new Response();
  const supabase = createServerSupabase({ request, response });

  const { message } = Object.fromEntries(await request.formData());

  await supabase.from("messages").insert({ content: String(message) });

  return json(null, { headers: response.headers });
};
```

**Form to submit to action**

```tsx
<Form method="post">
  <input type="text" name="message" />
  <button type="submit">Send</button>
</Form>
```

**Add policy for insert**

```sql
create policy "users can insert their own messages" on "public"."messages"
as permissive for insert
to authenticated
wuth check (user_id = auth.uid());
```

> SQL code snippets can be run against your Supabase database by heading over to your project's [SQL Editor](https://app.supabase.com/project/_/sql), pasting them into a new query, and clicking `RUN`.

## Resources

- [Supabase docs - insert](https://supabase.com/docs/reference/javascript/insert)
- [Implement Row Level Security in Supabase (video)](https://www.youtube.com/watch?v=Ow_Uzedfohk)
- [Remix docs - Writing data](https://remix.run/docs/en/v1/guides/data-writes)

Securely Mutate Supabase Data with Remix Actions

The OAuth flow is asynchronous. This means we get redirected to the landing page before GitHub and Supabase have decided that you can be trusted! 👍

Since our Loader functions get called when we first load the page they make a request to Supabase before receiving a valid access token. This causes RLS to deny the request to select data.

Once our session has been correctly set, Supabase is happy but we aren't telling Remix to fetch this data again. In this lesson, we look at combining the `onAuthStateChange` hook from Supabase with the `useRevalidator` hook in Remix to recall any active `loaders` when the state of our user changes, keeping data in sync with mutations.

Therefore, any time the user's session is updated - the auth flow has completed for either signing in or out - Remix will automatically call all loader functions that are active on the current route (this could be many with nested routing), fetching fresh data from Supabase with a valid access token.

## Code Snippets

**onAuthStateChange listener**

```tsx
useEffect(() => {
  const {
    data: { subscription },
  } = supabase.auth.onAuthStateChange((event, session) => {
    if (session?.access_token !== serverAccessToken) {
      revalidator.revalidate()
    }
  });

  return () => {
    subscription.unsubscribe();
  };
}, [supabase, serverAccessToken, revalidator]);
```

## Resources

- [Supabase docs - onAuthStateChange](https://supabase.com/docs/reference/javascript/auth-onauthstatechange)
- [Reactor Router docs - useRevalidator](https://reactrouter.com/en/main/hooks/use-revalidator)

Keep Data in Sync with Mutations Using Active Remix Loader Functions

Remix Loaders allow us to fetch data server-side, before rendering a component. This works great if you are implementing your authorization rules for data fetching in the loader function, however, Supabase allows us to use Row Level Security policies to write access policies alongside the data in the database.

By default, `supabase-js` stores session data in `localStorage`, which exists only within the user's browser. If we want this session to be available within Loader or Action functions in Remix, we need to store the session in a cookie. Cookies are automatically sent with every request to the server.

In this lesson, we look at using the Supabase Auth Helpers package for Remix to automate this process, and swap out the storage mechanism for the Supabase client, to use cookies to store session data.

Additionally, we refactor our application to use the new `createServerClient` and `createBrowserClient` functions, making cookies the single source of truth about the user's current session, across the server and client-side of our Remix app.

## Code Snippets

**Install Remix Auth Helpers**

```bash
npm i @supabase/auth-helpers-remix
```

**Create server-side Supabase client**

```tsx
import { createServerClient } from "@supabase/auth-helpers-remix";

import type { Database } from "db_types";

export default ({
  request,
  response,
}: {
  request: Request;
  response: Response;
}) =>
  createServerClient<Database>(
    process.env.SUPABASE_URL!,
    process.env.SUPABASE_ANON_KEY!,
    { request, response }
  );
```

**Create client-side Supabase client (simplified)**

```tsx
import { useState } from "react";
import { createBrowserClient } from "@supabase/auth-helpers-remix";

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

  return json({ env });
};

const { env, session } = useLoaderData<typeof loader>();

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

return <Outlet context={{ supabase }} />;
```

**Use Supabase in a loader**

```tsx
export const loader = async ({ request }: LoaderArgs) => {
  const response = new Response();
  const supabase = createServerSupabase({ request, response });

  const { data } = await supabase.from("messages").select();

  return json({ data }, { headers: response.headers });
};
```

**Use Supabase in an action**

```tsx
export const action = async ({ request }: ActionArgs) => {
  const response = new Response();
  const supabase = createServerSupabase({ request, response });

  const { data } = await supabase.from("messages").insert({ content: "hello" });

  return json({ data }, { headers: response.headers });
};
```

**Use Supabase in a component**

```tsx
import { useOutletContext } from "@remix-run/react";

import type { SupabaseOutletContext } from "~/root";

export default function Login() {
  const { supabase } = useOutletContext<SupabaseOutletContext>();

  const handleLogin = async () => {
    await supabase.auth.signInWithOAuth({
      provider: "github",
    });
  };

  return <button onClick={handleLogin}>Login</button>;
}
```

## Resources

- [Supabase docs - Remix Auth Helpers](https://supabase.com/docs/guides/auth/auth-helpers/remix)

Make Cookies the User Session Single Source of Truth with Supabase Auth Helpers

The [supabase-js](https://supabase.com/docs/reference/javascript) package allows us to connect to our Supabase project, and easily query and mutate data. In this lesson, we install `supabase-js`, set up environment variables for `SUPABASE_URL` and `SUPABASE_ANON_KEY`, and create a Supabase client to use across our application.

Additionally, we look at writing an RLS policy to enable `read` access to our `messages` table, use our Supabase client to select all messages, and display them in our Remix app on load.

## Code Snippets

**Install supabase-js**

```bash
npm i @supabase/supabase-js
```

**Use a Loader function to fetch data**

```tsx
export const loader = async () => {
  return null;
};
```

**Fetch data with Supabase Client**

```tsx
const { data } = await supabase.from("messages").select();
```

**Full component**

```tsx
import { useLoaderData } from "@remix-run/react";
import supabase from "utils/supabase";

export const loader = async ({}) => {
  const { data } = await supabase.from("messages").select();
  return { data };
};

export default function Index() {
  const { data } = useLoaderData();
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}
```

**Enable read access with RLS policy**

```sql
create policy "users can read messages" ON "public"."messages"
as permissive for select
to public
using (true);
```

> SQL code snippets can be run against your Supabase database by heading over to your project's [SQL Editor](https://app.supabase.com/project/_/sql), pasting them into a new query, and clicking `RUN`.

## Resources

- [Supabase-js docs](https://supabase.com/docs/reference/javascript)
- [Implement Row Level Security in Supabase (video)](https://www.youtube.com/watch?v=Ow_Uzedfohk)
- [Auto-generated project docs](https://app.supabase.com/project/_/api)

Query Supabase Data with Remix Loaders

[Remix](https://remix.run) is a web application framework built on top of React, that gives you sprinkles of server when you need it - fetching data on page load, mutating values in a db etc. In this lesson, we use the `create-remix` package to setup our new app. Additionally, we run the project is development mode with `npm run dev` and update the content on our `index` route.

## Code Snippets

**Create a Remix app**

```bash
npx create-remix <name-of-project>
```

## Resources

- [Remix docs](https://remix.run/docs/en/v1)

Setting Up a Remix Project

[Supabase](http://supabase.com?utm_source=egghead&utm_campaign=remix) is a collection of open-source tools that wrap around a PostgreSQL database. In this course, we look at building a realtime chat application with Remix, using Supabase for db hosting, authentication, authorization and subscribe to realtime db events - updating the UI as the database changes.

We will learn about:

- loaders and actions in Remix
- querying and mutating data with Supabase
- authentication with GitHub
- authorization with RLS
- merging client and server state with realtime events
- deploying a Remix app to Vercel

This course is 100% TypeScript, however, don't stress if you don't have any experience with TS, as Supabase does most of the heavy lifting here! 🎉

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Build a Realtime Chat App with Remix and Supabase

In your pnpm monorepo, you can easily create new applications under your apps folder. 

Here, you'll create a new Remix app by running the command `pnpx create-remix@latest`. The app you generate functions just like any other full featured Remix app!

Add a Remix App to a pnpm Workspace Monorepo

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

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.