 Courses from Nader Dabit

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 this video we'll build out an entire GitHub OAuth authentication flow from scratch using Supabase and React. We'll first create a new Supabase project. Next, we'll configure a new OAuth application in the GitHub console, using the Supabase project URI. Finally, we'll create and wire up a React front end to handle the authentication flow, managing the local user state to show and hide UI based on the authentication state of the current user.

Full Stack Github Authentication with Supabase and React

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

In this video, you'll learn how to build a full stack app with React, Supabase, and Postgres. We'll start by creating a new Supabase project, initializing a new PostgreSQL "posts" table, and adding rows for the post title and content.

Next, we'll install the Supabase library using NPM or Yarn, and configure a client to connect with the Supabase API. Using the Supabase client, we'll create a basic app that allows users to create and read posts from the Supabase back end.

By the end of this video, you should have a good idea of how to get up and running with building full stack apps using Supabase.

Building a Full Stack App with Supabase and React

In this video, you'll learn how to query blockchain data from a subgraph in a React application. We'll first give a brief overview of a couple of GraphQL clients, and various ways in which you can query The Graph. Next, we'll create a new React application, install the necessary dependencies, and implement a basic GraphQL query that will render NFT data from the Ethereum blockchain in a React app.

To learn how to build a subgraph, check out this blog post: https://thegraph.com/blog/building-with-subgraph-studio

The code for this app is located here:
https://gist.github.com/dabit3/a4a0303a11e930465c591eec2f79167e

Querying Blockchain Data with GraphQL from a Web Application with URQL and The Graph

In this video we'll learn how to move an entire development environment to the cloud with Next.js, Gitpod, and Vercel, enabling you to develop and iterate on full stack web applications from any machine including iPads, Chromebooks, and new environments without any previous setup.

We'll start by forking an example blog repo, running it in Gitpod, and writing our first blog post. We'll then enable a Gitpod integration, deploying again to Gitpod to show that the entire process has been automated. Finally, we'll deploy to Vercel directly from the Gitpod environment. By the end of this lesson, you should have a good understanding of how to build, deploy, and automate full stack applications to the cloud with Gitpod.

https://github.com/wutali/nextjs-netlify-blog-template

Moving Your Entire Development Environment to the Cloud with Next.js, Gitpod, and Vercel

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

In this video you'll learn how to deploy a React app to AWS using AWS Amplify Hosting's drag and drop folder functionality. The app will also automatically be globally distributed on AWS's global CDN.

Deploy a React App to AWS in 24 seconds

In this video we start completely from scratch by creating a new Next.js project. We then create a GitHub repository and create and configure a GitHub actions workflow file, enabling the proper settings that we'll need to deploy the app to AWS using the Serverless Framework. We then walk through how to enable environment secrets in the GitHub dashboard and set up the serverless.yml file locally. Finally, we push the code to GitHub, deploying our app to AWS automatically by triggering the GitHub action.

How to Set Up Next.js CI / CD on AWS with GitHub Actions

In this video you'll learn how to implement end to end authentication in a Next.js app using AWS Amplify and Amazon Cognito. We'll start by creating a new Next app and installing the necessary dependencies from AWS Amplify. We'll then initialize a new Amplify project and add the authentication service. From there, we'll create a profile page to enable user authentication and add some navigation to navigate between pages. Finally, we'll implement SSR authentication on server-rendered pages as well as API routes using the Amplify client libraries.

Next.js Authentication - Client, Server, & API Route Authentication with AWS Amplify

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

In this video you'll learn how to use Amplify hosting to deploy a Nuxt site from a Git repository. We'll begin by walking through the steps of creating the deployment and configuring the correct build settings to enable a static build. Once the site is deployed, we'll view the live site hosted on AWS.

Deploying a Nuxt Site to AWS from a Git repository with Amplify hosting

In this video you'll learn how to deploy a static Nuxt site to AWS's global edge CDN in less than two minutes. We'll start from scratch, creating a new Nuxt site using npx and walk through the build configuration to set up the deployment target for Jamstack / static site hosting. From there, we'll initialize a new Amplify project using the Amplify CLI and walk through the settings to configure the proper build command for Amplify hosting. Finally, we'll deploy and view the live site. Once we're finished, we'll delete the project and the hosting service.

Deploying a Nuxt Site to AWS with the Amplify CLI

In this video you'll learn how to stand up a fully serverlesss GraphQL API on AWS from scratch using Lambda and AppSync. You'll start by creating a new Lambda function and then using the function in a GraphQL API as a data source. You'll create a schema and then map the GraphQL query in your schema to the Lambda function. You'll then learn how to view and log out the event object that includes metadata about the GraphQL operation.

Serverless GraphQL on AWS - Mapping GraphQL Operations to a Lambda Function

In this video you'll learn how to use the Serverless Framework to deploy a NextJS app to AWS complete with API routes, dynamic routes, server side rendered pages at the edge, and automatic pre-rendering using the Serverless NextJS Component.

How to Deploy a NextJS App to AWS with API Routes and Dynamic Routes

In this video you will learn how to clone an AWS Amplify back end into a React Native project and test it out using Authentication and the AWS Amplify React Native UI Component library.

We will start by walking through the steps to clone the back end into the React Native app using the Amplify CLI. Then we will go into the React Native project and add code to enable an authentication flow. From there, we will test it out by signing up and signing in as a new user.

Sharing an AWS Amplify back end project across multiple clients

AWS Amplify allows developers to create, configure, and deploy Serverless APIs and functions directly from their front-end environment.In this collection, you'll learn how to deploy various types of APIs and functions using the Amplify CLI. You'll also learn how to share code among various functions using Lambda layers and schedule functions to run at an interval to implement Serverless cron jobs.

Up and Running with AWS Amplify Functions

In this video you will learn how to create and deploy a serverless Node.js API to AWS using the Amplify CLI, Amplify Functions, and the Amplify API category. Once the API is deployed, you will test it out from the command line and see the response in your terminal using CURL.

How to Deploy a Severless Node.js API on AWS with the Amplify CLI and Amplify Functions

In this video you'll learn how to share NPM modules across multiple Serverless functions using AWS Amplify and Lambda layers. You'll create a layer that contains the uuid library, then create a Serverless API that consumes the library from another function.

How to Share Dependencies Across Serverless Functions with AWS Amplify and Lambda Layers

In this video you will learn how to use the most recent version of AWS Amplify and AWS Amplify UI React to build out an authentication flow in less than 4 minutes. You will also learn how to use the Amplify CSS theme configuration to add a custom theme to the UI components.

React Authentication with AWS Amplify UI React

In this video, we start by going to Begin.com and creating a new Deno app. We then clone the repo, inspect the code, and modify the response from HTML to JSON data. Next, we deploy the updates in an automated CI / CD process by merging the updates to our master GitHub branch.

Up and Running with Deno

In this video we walk through all of the steps needed to deploy a static Next site to AWS Amplify hosting. We start by creating a new Next project and configuring the build script to create the static build. Next, we create a new GitHub project in our account and push up the code from our Next app to this new repository. Finally, we connect the GitHub repository with to AWS Amplify Console Hosting service and deploy the app. Once the app is deployed, we learn how to integrated Git-based CI & CD by pushing changes to our app and seeing the build automatically kick off.

Using Git to deploy a Next app to AWS Amplify Hosting

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

Deploying a Next app to AWS with the AWS Amplify CLI

How to create serverless cron jobs and scheduled events with AWS Amplify and AWS Lambda

Serverless Cron Jobs with Amplify Functions and AWS Lambda

In this lesson, you'll learn how to deploy a serverless function using the Python runtime, connect it to an API endpoint, and interact with it from a React application.

Creating a full stack serverless app with Python, React hooks, and AWS Amplify Functions

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


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

In this lesson we learn that TypeScript cannot guarantee correct shapes of responses. That's due to TS performing checks in compile-time, while the response will be availbale in runtime - when TS doesn't exist anymore.

In some situations, such as HTTP requests, runtime type checks such as `zod` are essential for providing quick feedback around data-related errors.

Understand where are the possible mistakes to make while using TypeScript with HTTP calls. Use `fetch` and `axios` along with `zod` schema checks.

Also, note that similar mistakes or mistakes could happen while using web storage (e.g. `localStorage`)

Validate HTTP API Response with zod, fetch and axios

use zod as an HTTP response validation tool along with fetch and axios in order to make sure that the response has expected data structure

In this lesson we learn that the `zod` schemas become the single source of truth.

We shall not update TypeScript types manually, since they are generated automatically from the schema.

Same with validation functions.

Whenever the schema changes, all the rest will update accordingly. It's an important mind shift.

Treat zod Schemas as Single Source of Truth

Zod Schemas are the single source of truth for both typescript types, and interfaces - and runtime validation functions. Schemas should be updated first.

`zod` is powerful, but writing the schemas manually for existing JSON objects, especially big ones, can be time-consuming.

But that's what `quicktype` is for! You can get 80% work done instantly! 🥳

Depending on your need - whether you want to automate the process, or do it just one time, you can:
- use an online app
- use an IDE extension
- run a CLI script
- generate a script to be executed within CI/CD environment/tooling

And this is what we learn in this lesson! 🔥🔥🔥

Get started with zod quickly!

Generate zod Schemas Automatically using Quicktype App, Extensions and Scripts

Use quicktype app, extension or scripts to automatically generate zod schemas from existing json files. Save time and get started with zod quickly!

`zod` is a powerful library allowing to run runtime type-checks.

It's complementary to TypeScript, which does type checks in compile time.

In this lesson we create few schemas that represent primitive type values, along with `zod` utilities which make these more precise. We also create object schemas and nest one inside another.

All schemas are being validated against example values. We analyze how to interpret error messages in case of failures.

Perform Runtime Type-checks on Primitives and Objects with zod

Create zod schemas to validate primitive type and object type values in runtime. Analyze the errors to see how a value doesn't correspond to schema expectations


Using Cursor Chat, you can easily reference an entire directory of files and ask it to generate anything based on those files. This opens up the possibility of using your current code as a reference guide to create new code that follows existing patterns. With this approach, the result can be a polished prompt you can use with any AI to generate consistent and reliable output.

Focus less on crafting the perfect prompt upfront - what matters most is testing and iterating based on the AI's responses. The more results you see from the prompt, the more you can reinforce the good results and prune out the bad results until your prompt is polished enough that you can rely on the prompt to give you consistent quality results.


nader dabit

Search Results