Learn Mocha, React and Screen-reader

There are two major categories that you'll encounter when you start to build Full Stack applications.

You have:
💽 Database Management 
👥 Authentication

Both of these contain their unique set of challenges and layer on top of each other as you build out your application.

You want to be able to Create, Read, Update, and Delete data from your database and also make sure that only the right users are performing these actions that you specify.

That is why this course is set up around these two categories.

You'll learn everything you need to about managing data using a service called Appwrite within your React application. Using Appwrite, you'll be able to create a database, upload files, and manage users. 

You'll start out by building out the database while purposefully ignoring authentication/authorization through out the application. 

The second part of the course will have you layer on auth so that you can enable users to log in and scope specific actions to roles that you'll create.

This course is focused on the full stack nature of web development so we will start with almost all of our UI built out for us. You can explore the course repository to get familiar with what components are available. 

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

typescript

Full Stack with React and Appwrite

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

On the surface, starting a project sounds easy. First you make some directories, install some dependencies, then you write some code.

But there's a bit more to it than just those three steps.

The type of project you're working on impacts the decisions you make. It gets more complicated when you're working on multiple projects that are related. For example, maybe you have a customer-facing frontend app, an admin dashboard app, and a single backend used for both.

How does this change your directory structures? How should you share code between projects? What happens when you add a Design System into the mix?

It can get hard to keep things straight in your head.

Nx is a tool that aims to solve these problems for you, whether you're working solo on a small full-stack app or on a dev team of thousands.

It's not just an opinionated folder structure. When you create an app with Nx, it generates unit and e2e test setups as well as preparing bundling and code-splitting with Webpack, and stubbing out common features like routing.

One of the coolest features of Nx is its Dependency Graph. The graph can visually show you the relationship between the parts of your application, and is optimized to ensure that compiling, testing, and linting only happens in the affected areas of your project.

In this course, Juri Strumpflohner demonstrates these features and more through the iterative creation of a React + Storybook + Express app. Don't worry if this isn't your preferred stack! Nx supports the most popular frameworks & libraries on the web.

More importantly, the focus of this course is more on the workflow than the implementation.

Watch Juri's course, and see if the Nx tooling & workflow is right for you and your team!

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

Scale React Development with Nx

In this course, you'll create a blog that runs without a database. You'll be able to edit your content from your local file system or from GitHub.

You'll deploy your blog to Vercel and set up real-time previews with Next.js' draft mode!



Create a GitHub-Powered Blog With Keystatic and Next.js

Jotai's state management is primitive and flexible. This gives you room to build, compose, and share state throughout your application exactly how you need it.

This flexibility can become hard to manage when you have complex requirements that span across a number of states your application can be in.

Jotai lets you leverage other state management solutions through integrations so that you can solve the problem you're facing exactly how you need to.

One of those integrations is XState. XState gives you a safe abstraction to enumerate and handle the complex states your application can be in.

With Jotai + XState, you get the flexibility and ease of use of Jotai with the power of XState.

XState is a sophisticated library to provide a better and safer abstraction for state management. 

Complex State Management in React with Jotai and XState

Managing state in a UI is challenging. It's genuinely difficult and the solutions require a depth of knowledge and experience to understand. Everything is a balance of tradeoffs in complexity, performance, and user experience.


This is a series of interviews with experts, open-source maintainers, and UI developers that have combined decades of experience building stateful UI applications for millions of users. 

Part interview, part screen share, these videos should benefit you if you're building web applications.

They focus on React, but the underlying principles are valid for UI work in general (and beyond).

React State Management Expert Interviews

A large number of people are unable to use the web effectively due to an impairment or disability.

As developers there are several tools and techniques we can use to make our web applications accessible, ensuring a great user experience that includes everyone.

We all agree that Accessibility is important. However, it’s a broad landscape and can be overwhelming figuring out where to start!

Erin Doyle is an expert in creating accessible React applications and has developed a course that will give you a concrete process for testing, refactoring, and building your applications with accessibility in mind.

After this course, you'll have a jump start on auditing and fixing accessibility issues in your applications and gain a better understanding of your target users and how to approach your web app design from their perspectives.


Develop Accessible Web Apps with React

jotai is a primitive and flexible state management solution for React. 

jotai gives you a minimalistic API that you can use that separates your state management from your UI. You get the benefits of well manages state AND you don't have to set up any boilerplate like defining actions, reducers, dispatchers, or stores. 

You create an atom and you're off to the races managing your application state.

In this course, you'll build an SVG drawing application. You'll see how you can represent the canvas as state through atoms and add svg path, change the path colors, delete, and even undo actions. You'll sum up your learning by learning how jotai can isolate state in your applications by using and composing Providers.

You'll be able to use the concepts you learn here to manage any state in your own application.

Manage Application State with Jotai Atoms

In the course, we will learn how to use the `styled-components` library to style our React applications. We will start from the basics and dwell in more advanced cases.

With this course, you can get the necessary knowledge to use the `styled-components` library to style your React applications in the future.



Styling React Applications with Styled Components

In this collection, we'll go through each of the standard hooks offered by the React library, learn how they work and build small applications that leverage them internally.

React Hooks: Revisited

In this course, we'll build a video course platform using the AWS Amplify Admin UI. 

The Admin UI provides simple yet powerful tools to model database tables, add authentication and authorization, and manage app content, users, and groups. It also offers the ability to manage the application users and content. 

The AWS Amplify Admin UI focuses on data types rather than backend infrastructure. 

All the backend resources generate infrastructure as code (IaC) templates that can be committed in the team repository and integrated with AWS Amplify continuous deployment workflow to manage the different environments.

Before taking this course, you should have a basic understanding of React Hooks.

Get Started with the AWS Amplify Admin UI

### Accept payments & sell products powered by Stripe and the best of the JAMStack

There are as many ways to build an e-commerce store on the internet as there are products to sell. One thing is for certain, e-commerce is here to stay and as professional developers we need to understand how to build fully custom stores for our clients using the best modern tools available.

- React: flexible and customizable while following modern best practices
- Next.js: lightening fast with guide rails to help your project perform as consumers expect
- Stripe Checkout: lets you offload reams of complicated business logic to a trusted third party that maintains regulatory compliance, global payments, and a standard UX.

Your store will have well managed local component state using React Hooks and you'll also have clear and cohesive shared (global) state with React Context.

Finally you'll deploy your custom store to Vercel (the platform behind Next.js) as well as how to make your Next.js e-commerce store portable to deploy to other platforms.

Create an eCommerce Store with Next.js and Stripe Checkout

Add Conversation Intelligence to your video or voice application without training Machine Learning models. Integrate speech to text and all of the below capabilities, out of the box:

- Speaker Diarization
- Sentiment Analysis
- Contextual Insights
- Conversational Analytics
- Topics of Discussion
- Entity and Intent Recognition
- Pre-built UI and Symbl JS Elements

In this course we will use [Symbl.ai](https://symbl.ai/) to get transcripts for the video we will upload as well as more meaningful insights. 

Additionally, you will pick up NextJS for the main stack and will use Symbl's RESTful APIs for processing a conversation from a video and rendering transcripts to screen. Get your Symbl account [here](https://platform.symbl.ai/) and start building.

Create Contextual Video Analysis App with NextJS and Symbl.ai

[Recoil](https://recoiljs.org/) is a brand new state management library for React, developed by Facebook.

Recoil works and thinks like React. Add some to your app and get fast and flexible shared state.

This quick collection will get you up and running with Recoil, you're going to learn how to:

* add Recoil to your React project
* create a Recoil atom and use it to store a piece of state
* use `useRecoilState` hook to update an atom
* use `useRecoilValue` to access value stored in an atom in a read-only fashion
* use 🔥`selectors`🔥 in order to calculate derived data based on state stored within atoms (this is *really* powerful!) 

Sync State Across Components with Recoil in React

Get started with React! (with Hooks)

This course gets you up and running with react in **under a minute** by using codesandbox.io to skip the painful process of setting up your dev environment. 

You'll learn:

- How to write React code with JSX
- How to "think in React"
- How to use local state to store changing data
- How to pass data from parent components to children components using props

So get started now!  You need some javascript and HTML experience, but no prior React experience is needed.

React Crash Course with Hooks

If you've ever worked on a website for a business, there's a good chance you've included a map.

A Google Map embed is sufficient for showing a location, but doesn't leave you many customization options.

React Leaflet to the rescue!

In this course, Colby Fayock will guide you through a series of lessons and challenges that will build your map making skills as you build out a web app for a fictional restaurant.

You'll get practice with handling API keys and using React Hooks to implement a custom interactive map complete with metadata and additional overlays.

This course has built-in challenges that you are encouraged to pause and work through, but feel free to just watch.

Build Maps with React Leaflet

It's time to introduce a "View" to our codebase so that we can present the values in the DOM. Since React is the most popular View library, we'll convert our basic JavaScript project to a React project to demonstrate how this pattern fits.

We'll create several hooks (`useCallback`, `useListener`, `useBroadcaster`) in this section to see how you could implement the pattern in react terms.

By the end of the section, you'll know how user input is handled and how to fetch resources in React with this pattern

**You're in Section 06 of [Composing Closures and Callbacks in JavaScript](https://egghead.io/playlists/composing-closures-and-callbacks-in-javascript-1223)**

Bringing the Pattern into React

Like in section [04 Implement the Pattern in Common Async Scenarios](https://egghead.io/playlists/implement-the-pattern-in-common-async-scenarios-c059), it's time to implement the pattern in common scenarios!

Now that you're familiar with the pattern we'll build a search box that handles a few different async scenarios.

You'll filter values based on user input, debounce text while a user is typing, and send a request once they are finished. Finally, we'll see how to implement a cache to save on network requests

**You're in Section 07 of [Composing Closures and Callbacks in JavaScript](https://egghead.io/playlists/composing-closures-and-callbacks-in-javascript-1223)**

Building Live Search Box

OpenGraph images are the images you see when you paste a link into a social platform and it "unfurls" into an image, title, and description. This happens on Twitter, Discord, Slack, and many other platforms. This collection goes over everything from designing OpenGraph images in Figma, to implementing them in CodeSandbox, to returning headless browser screenshots from Netlify Functions, and finally using Cloudinary as a write-through cache. 

You will come away from this collection with the ability to ship an API that you can use on any of your sites, and also on-demand, that can generate images for not only OpenGraph unfurls, but also for Instagram, GitHub, and more. Using headless browsers with playwright to generate our images means we get full access to all the responsive power of CSS and all the logical power of JS to handle layout, importing assets like pngs, choosing different fonts, and more.

The image below is generated via the project you'll build and deploy in this course

![An example opengraph image](https://relaxed-payne-d1bfbe.netlify.com/opengraph?title=Building%20an%20OpenGraph%20image%20generation%20API%20with%20Cloudinary%20Netlify%20Functions%20and%20React&tags=figma,netlify%20functions,playwright&author=chrisbiscardi)

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

🚧 **SUSPENSE IS EXPERIMENTAL**

One of the biggest challenges to writing software for the web is dealing with asynchrony, but we have to deal with it all the time.

This leads to a bunch of boilerplate code for handling loading and error states just to get the data we need to show the user-- whether the data comes from a remote endpoint or from browser APIs like geolocation and Bluetooth.

The end result is countless spinners and the dreaded FOLC (flash of loading content).

React Suspense is the answer to these problems.

React Suspense is a primitive built-into React that drastically simplifies asynchronous state management in our applications, and helps you avoid FOLC out of the box.

It's a bit of a different approach to managing these problems and understanding how it works is key to taking advantage of what it has to offer.

In this workshop, you'll learn how Suspense works under the hood, preparing you for the future of asynchronous state management.

Use Suspense to Simplify Your Async UI

Using immutable data structures provides many benefits, including making your code easier to reason about and less prone to bugs.

However, since JavaScript doesn't include support for immutable data structures out of the box, you need to use a third party library. But which one to choose?

In this self-paced workshop, Immer's creator Michel Westrate will guide you through the creation of a multi-user Gift Tracking app.

You'll learn the basics of using Immer to handle immutable state updates, then go further into change distribution and implementing an undo/redo.

After this workshop, you'll be ready to leverage immutable data structures in your own applications!

Search

Search Results