Learn Chai, Faunadb and Javascript

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

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

The new [cause](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause) data property that you can add to a thrown `Error` can be used to retain access to the original error caught in a promise rejection. 

Improve Application-wide Error Handling rethrowing JavaScript Error with the Error Cause

You can finally make your numbers more readable in JavaScript. Add underscores in all types of numbers including BigInt, floats, hexes, octals, and binary to improve their readability. 

Just don't add the underscores to the beginning or end!

Make JavaScript Numbers more readable using Numeric Separators

[Promise.any](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/any) takes an iterable of promises and returns a promise that fulfills with the first promise that fulfills, and rejects when ALL of the promises in the iterable reject. 

[Promise.allSettled](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) takes an iterable of promises, and returns an array of objects. The objects have a `status` property which is a string that is either `"fulfilled"` or `"rejected"`. If the `status` is `"fulfilled"` the object will contain a `value` property with the resolved value of the promise, and if the `status` is `"rejected"` the object will have a `reason` property with the reason for the promise's rejection. 

Manage Asynchronous JavaScript code with any, allSettled new Promise Methods

If we want to be able to modify the state of a promise from outside the constructor, we can use the [Promise.withResolvers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/withResolvers) method to get access to the promise, and its `resolve` and `reject ` functions. 



Manually settle a promise using Promise.withResolvers

The [Logical Assignment Operators](https://github.com/tc39/proposal-logical-assignment) bring syntactic sugar over verbose syntax which enforced us to write explicit `if` statements. Thanks to the new operators `||=`, `&&=` and `??=` we can express the conditional logic in a more concise way.

Simplify JavaScript code with Logical, Assignment and Optional Operators

The new [Array.with](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/with) method gives you an immutable syntax for changing values of an array at a specified index. 

Sometimes `.map` will be more efficient. So, in this lesson we'll compare both methods while replacing an object at a specific index.


Simplify array immutable changes with the new array.with method

You no longer need to write generator functions to create basic lazy iterator functions.

Now, ECMAScript supports iterator helpers that you can call on `Array.values()`. With these helpers, the values of an array will be operated on lazily, and will only run when the values are needed.



Make JavaScript computations lazy using Iterator Helpers

The ["Set Methods"](https://github.com/tc39/proposal-set-methods) proposal introduces 7 new methods to JavaScript/ECMAScript:
- `union`
- `intersection`,
- `difference`,
- `symmetricDifference`,
- `isSubsetOf`
- `isSupersetOf`
- `isDisjointFrom`

Thanks to them, complex operations using JavaScript sets will become much easier.

Perform Set Operations using JavaScript Set Methods

Finding elements starting from the end of an array has gotten a lot easier with the introduction of the `at`, `findLast`, and `findLastIndex` methods!

With `at` you no longer need to remember to access the end of the array like `array[array.length - 1]` trick. You can just call `.at[-1]` to get the last element!

`findLast` and `findLastIndex` work the same as their `find` and `findIndex` counterparts. But, they work backwards from the end of the array. This is useful if you know what you're accessing is going to be closer to the end.

Find Items from the end of the JavaScript Array using at, findLast and findLastIndex

I've been using Cursor as my primary editor for over a year now, but recently I've heard wonderful things about Windsurf AI Agent features. I decided to record myself building out something I've always wanted to make, but never made the time for.

In this lesson, I demonstrate how to leverage Windsurf's powerful agent process to create a fun word-guessing game inspired by Heads Up. Watch as I build an interactive application featuring category selection and word navigation, complete with data hosting on GitHub Gists and deployment to GitHub Pages - all in under 30 minutes (before editing the lesson down to 12 minutes)!

What makes this project particularly exciting is how Windsurf eliminates the typical friction points of development. While this game was always on my project wishlist, the overhead of setup, configuration, and deployment made it hard to justify the time investment. Windsurf's agent process handles all these pain points seamlessly, from managing URLs to orchestrating deployment.

This lesson perfectly showcases how AI agents can help developers bring their backlog of project ideas to life, transforming what would typically be time-consuming tasks into efficient, enjoyable development experiences.

Build a Word Game with Windsurf's Cascade AI Agent



Discover how to harness the power of Cursor IDE's Composer Agent feature to optimize your code. In this lesson, you'll witness an AI agent doing all the work to generate test suites, implement performance benchmarks, and create optimized function variations - all without writing a single line of code. You'll learn how to validate performance improvements through data-driven benchmarking, ensuring that optimizations are backed by concrete metrics rather than speculation. This hands-on demonstration showcases a groundbreaking approach to automated function development that combines the precision of test-driven development with the efficiency of AI-powered optimization.


Agent-Driven Development in Cursor: Testing, Benchmarking, and Optimizing Functions

This course is aimed for using `zod` effectively in projects based on TypeScript (both browser and node.js). The benefits you gain with this course is not just simply coding, but also understanding when/why/how should you perform runtime validation.

`zod` is the missing piece to TypeScript's capabilities, which can guarantee type-safety only in compile-time.

`zod` can be used whenever the compiler cannot guarantee what happens in runtime. And... it's a very frequent usecase, such as HTTP calls, websockets, etc.

In this course you get quickly up and running by:
1. using `zod` with primitives and objects
2. adapting `zod` quickly to existing projects thanks to automatic generators
3. changing the strategy frm type-first to schema-first
4. using error-throwing `parse` or non-error-throwing `safeParse` basing on your needs
5. applying `zod` to the most common usecase - validating API responses
6. handling errors the most convenient way (out of many!)

Take advantage of runtime validation with `zod`. Take advantage of the detailed lessons in this course 🔥

Effective Runtime Type Checks with Zod


Cursor can now automatically run commands in the terminal and walk step-by-step towards building out your entire project. You give it a goal, then it will suggest the commands you need to run and the files that you need to create and you can work with it to achieve what you're building. This lesson does a quick walkthough of using a Cursor Agent to build a project from scratch and guide it along the way. Cursor Agents definitely feel like a sneak peek at the future of programming!

Cursor Agents Initial Impressions - Allow an AI to Build Your Entire Project

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.



Mocking WebSocket APIs with Mock Service Worker


While using anonymous functions might seem convenient, they can create difficulties when trying to identify performance bottlenecks during profiling. This lesson will demonstrate how named functions make it easier to pinpoint and address performance issues, ultimately leading to more efficient and debuggable code. Learning this practice will greatly improve your ability to locate and fix performance issues in complex projects.

Always Name Functions in JavaScript


When attempting to load the same module twice in JavaScript you'll hit a cache and code won't re-run. In scenarios where you actually do want to have state in your modules, you'll have to use a cache-busting technique by passing a query parameter to a dynamic import. This lesson walks through how to add a query parameter, how to add the appropriate types for loading dynamic modules in TypeScript, and when these techniques are valuable.

Import the Same JavaScript Module Multiple Times with Cache Busting



The include keyword in GitHub Actions empowers you to add custom variables to your matrix strategy, providing flexibility beyond standard configurations. In this video, we'll explore how include allows you to define specific combinations of variables, enhancing control over your workflow runs. You'll see how this feature enables you to tailor jobs for unique environments or scenarios not covered by the default matrix options. By leveraging include, you can efficiently manage complex build processes with greater precision. This technique helps you streamline your CI/CD pipeline, making it more adaptable to your project's evolving needs.

Use GitHub Actions Matrix Include for Complex Job Configurations

While running `zod` schema validation agains domain-rich objects, the error message saying that _a string is not a number_ might not be really useful.

Especially, when you need to provide a meaningful feeback to the user, e.g. after they have submitted a form with lots of data.

`zod` allows to customize messages on a very granular level. We can also extract repeatable customization to `zod` error maps.

Finally, in order to process an error message further (e.g. display it to the user), we need to handle the `zod` validation errors effectively. Especially, when a big object validation has failed and we could receive a handful of errors.

That's what we learn in this lesson. 🔥

Customize zod Error Messages and Handle zod Errors Effectively

customize zod validation messages, customize zod schema property messages, reuse error maps across different schemas, navigate through zod error objects

You might want to run `zod` schema checks in different styles.

Sometimes you prefer to conditionally throw the error - that's what `parse` does. But another time you'd prefer to receive a `boolean` property that determines whether the validation was successful or not - and perform further actions accordingly.

Additionally, the error-throwing API of `parse` works extremely well with [TypeScript assertion functions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions). Their combination is just... perfect! 👌

That's what we learn in this lesson.

Use parse and safeParse Runtime Type-checks with zod

use zod parse function to conditionally throw ZodError, use zod safeParse to get a boolean value and run typescript type guard over success property

Search

Search Results