Learn Express, Reactfire and Zag

Learn how to build a pin-input component with state machines, Zag.js and React.

We’ll look at modeling a UI component with state machines, implementing those in a framework agnostic way using Zag.js, and connect the logic to the UI component.

This course is a must-watch if you’re unfamiliar with State machines, and want to learn how to use them to build UI components with ease.

In this course, you will:

- Learn fundamental concept of state machine, event and transition
- Model a UI component with state machine
- Connect state machine logic to UI
- Manage DOM events in state machines
- Create custom React hooks with state machines

A collection of framework-agnostic UI component patterns like accordion, menu, and dialog that can be used to build design systems for React, Vue and Solid.js

Statechart Driven UI Components with Zag.js

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

In many projects, it is useful to separate the logic that you right with the view that you create so that you can easily share that logic throughout your application. In React we do this with custom React hooks.

We'll improve on the reusability of the pin input component by refactoring it to a custom React hook. To do this we will utilize the prop getter pattern 

This Headless Component pattern is a very useful pattern when building reusable components. It allows you separate functionality from presentation, making it easy to style them as needed.


Refactor Zag.js State Machine Powered Pin Component Functionality to a Custom React Hook

In some cases you'll want to actually have your pin input in a form to handle submitting the values. What's awesome about our implementation is that it doesn't get in the way of adding functionality like this.

First we'll extend our state machine to focus the first input when we click on the input label. Then we'll wrap our Pin Input component in a form element and implement an onSubmit. We can submit values of the form by creating a hidden input and set it's values to the joined values of the other inputs.


Submit Pin Input Values in a Form with a Hidden Input

When the pin input values are full we will want to do something with those values such as sending an HTTP request.

To do this we'll implement a callback in context that will get invoked when all the values are computed. We'll do this by creating a computed property that returns true when all values in context are full. From there we will watch that computed property to invoke our callback.

Trigger Side Effects using Zag.js computed and watch Properties

We have a bug in our pin input. Only 1 value should be allowed per input but if we focus an input that already has a value we can still input another value. 

Let's fix that.

We'll need to implement a function `getNextValue` that will take in the focused value of the current input and the event input that is coming in. After a set of conditionals we will select the value that wasn't the current focused value to update the field.


Implement Conditional Logic in a Zag.js Action to Enforce a Single Character Per Input

The paste event is a unique input event that we need to handle. When we paste a value in from the clipboard, we need to split that value and input single characters to the individual inputs in our Pin Input.

To do this we will need to `preventDefault` in the `onPaste` event so that we can implement our custom logic here. Next we'll implement `setPastedValue` that splits and iterates over the input value we receive and sets it into context. 

Finally we'll implement `focusLastEmptyInput` that looks up the index of the first empty value with `findIndex` and focuses that index.


Spread Values Across a Pin Input Field in a Zag.js State Machine 

We'll be implementing the backspace event which triggers two actions: `clearFocusedValue`, and `focusPreviousInput`. 

These implementations you'll be familiar with at this point but what you'll notice when we actually try to hit backspace that the focus value will get cleared but we won't be setting focus to the previous input. This is because there are several DOM mutations happening at the same time. We'll fix this by scheduling the focus of inputs to the next animation frame with `requestAnimationFrame`


Schedule Input Focus with requestAnimationFrame to Handle Multiple DOM Mutations in Zag.js

Let's actually implement inputting values into our Pin input. We have 3 functions that need implemented. They are `setFocusedValue`, `focusNextInput`, and `executeFocus`. The first two will be pretty straight forward in grabbing values from context and our events and setting new values to our context. 

When we finish implementing `setFocusedValue` and `setFocusedInput` we'll need a way to actually trigger our focus to be set in the DOM. This is where the watch property in a Zag.js State Machine comes into play. We will watch the `focusedIndex` context value and run `executeFocus` any time the focus index changes in our machine (e.g. when `focusNextInput` is triggered after an input event).


Trigger Side Effects in a Zag.js State Machine with the watch Property

Now that we have a machine and our UI is sending it events, we need to actually do something with events that are sent. This is where actions come into play.

We'll implement focus and blur events for the input by setting the context `focusedIndex` to the index that is coming in from the UI. We can mutate context directly in Zag.js because it handles mutations through proxies to stay reactive.


Implement a State Machine Action for Setting Input Focus in Zag.js

Now that we have a machine defined we need to send it events with the relevant data from the UI. To do this we'll need to install the useMachine hook from `@zag-js/react`. From there we'll wire up the actions that we need to send on the input element (e.g. onChange, onFocus, onBlur, and onKeyDown).

Connect Zag.js Machine Logic to React UI through the useMachine Hook

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

typescript

We've mapped out what a Pin input state machine should look like so now it's time to start implementing that in code. 

We'll be using Zag.js to model the machine for us. Zag.js works well with TypeScript so the first thing to do is create types for the machine context and state. Then we'll stub out the states, transitions, and actions for the machine. 

While we aren't implementing the actions in this lesson you'll quickly see how a state machine makes complex interactions easier to understand by the events that occur and the actions that are triggered by those events.

Lastly, we'll paste our machine in the stately machine visualizer and you'll see a visual representation of the machine that was created.


Create and Visualize a Pin Input State Machine with TypeScript and Zag.js

We’ll spin up a Vite project for React and install the required Zag.js dependency to model the pin input component logic.

Set up a React + Zag.js Project with Vite

A pin input is a common UI pattern that has more state than you might initially think. We have a handful of use-cases to think through when modeling a state machine that will power a pin input. It should: 

- Automatically focus the next field on typing and focuses the previous field on deletion.
- Support numeric and alphanumeric values.
- Support for copy/paste to autofill all fields.

We’ll break down the interactions and logic of a pin input component, detailing its state and transitions as well as talk through the actions that will be emitted when certain events are fired.


Model the Basic Events, Actions, and Transitions of a Pin Input Component

A state machine is a method of modeling a finite number of states and events. When an event is sent, actions and transitions are triggered within the machine to update it's state.

Here we model a a state machine for a check box. There are `unchecked` and `checked` states with a `click` event that transitions the machine between these two states.


Model Finite Number of State and Events with State Machines

Thanks for taking a look at my course on how to build statechart driven UI components with Zag.js.

Logic in a UI component can get tricky with the states and actions that you are juggling as a user interacts with your interface. This is why I believe statecharts are a game changer in building out logic that is bug-free and maintainable. 

In this course you will learn how to: 
- Breakdown components into a set of finite states
- Capture logic in a state machine that is readable and understandable
- Share logic visually with your team
- Interact with state machines from a UI component

Introduction: Statechart Driven UI Components with Zag.js

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

Learn about security headers by adding them to an Express app in a step-by-step guide.

We're going to cover:
- default request headers
- what are security headers
- why security headers are important
- how to add security headers using Helmet
- how to configure the newly added security headers

Add Security Headers to an Express app

We'll create our client-server using the `express` and `cors` packages

Express will be used to create our HTTP application. We'll need it to post to our endpoints and listen to our port.

We need the `cors` package to make cross-origin requests since the front-end will be a different origin than the server.

Create an OAuth Client-Server for code/token exchange

 Every developer who has attempted to demystify OAuth 2.0 must be presented with mind-bugging complicated flow diagrams. It becomes worse when you try to understand all the terminologies of OAuth 2.0 and Open ID protocols.

There is no getting around the OAuth 2.0 flow being complicated with back and forth between your browser, the service you are authenticating with, and the application you want to access. 

This course gets straight to the point without any application code distracting you from the core takeaway -- You will learn how to authenticate and authorize yourself using GitHub as your Auth Server.

We'll first cover the OAuth 2.0 flow for authentication and then integrate the Open ID protocol for authorization.

[**LIVE EVENT**: Register here for a live webinar with Christian on OAuth.](https://egghead.zoom.us/webinar/register/WN_Sxy1FEcoTea8UA6F7EDzLw) Bring any questions you have from taking this course!

JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.

Add Github Login to Your Web App with OAuth 2.0

Role-Based Access Control (RBAC) is the idea of grouping permissions together by a role. Users are assigned a role through the Auth0 dashboard the corresponding permissions are placed on the user's access token (JWT) after authenticating. That access token can be extracted by an Auth0 SDK (this video uses JavaScipt/ ReactJS) and sent to a custom server. 

Server Side logic (this video is based on NodeJS and ExpressJS), can then check for specific permissions and then allow or reject certain resources. 

-------------

Starting point- https://github.com/twclark0/roles-scopes-node-auth0/tree/roles-beginning

Ending point- https://github.com/twclark0/roles-scopes-node-auth0/tree/roles-final

Role Based Auth in NodeJS with ExpressJS and Auth0

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

Nx is not only capable of scaffolding frontend projects, but it also supports a lot of backend setups. In this specific lesson, we're going to explore the setup we previously generated, specifically inspecting how passing `--frontentProject` to the Express.js schematic automatically sets up a [Webpack dev proxy](https://webpack.js.org/configuration/dev-server/#devserverproxy) to make it easy to call the backend API.

Connect to an Express.js API from a React app in an Nx Workspace

When we talk about monorepos, we don't talk about the frontend specifically. Quite contrary: an Nx workspace can also host our backend apps. This opens up completely new possibilities in terms of exchanging code between the frontend and corresponding backend API. But before diving deeper into this topic, let's first learn about how we can use the `@nrwl/express` package to generate a [Express](https://expressjs.com/) based API application.

Create an Express Backend API in an Nx Workspace

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.