 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

If you ever want to see data represented in a certain way, such as a chart or a graph, to better understand what's going on in the world, you can use AI's to grab the most recent data and then convert it into any visual format you want. This is enabled in AI studio with Gemini through what's called grounding from web search, structured output formatting data, and code execution, which can run Python and generate charts. This lesson is going to walk you through the challenges of using grounding, especially when working with numbers which need to be accurate. How you can use image recognition and convert that to structured output. And then the challenges of using code execution. Especially when AI's are confident that the code ran even though the code failed. At the end, we still get to generating a chart through the online editor and then we take it also to set up in Cursor in a local environment where we can run all the way through YOLO mode and just click around some buttons and get our chart.

Generate Charts from Current Events with Gemini's Structured Output and Code Execution

Warning: AI's make mistakes. Some of them can be _very_ costly. Terminal have access to your most private information, especially if you're using a "work computer". Please proceed with extreme caution!

Cursor's new "YOLO" feature It allows you to enter an AI prompt and then just sit back and watch as an AI will run terminal commands automatically. The AI will automatically install packages, automatically start and stop dev servers, and even check the output of the terminal commands to run subsequent terminal commands and attempt to fix them.

Traditionally, this is some of the most critical, but also some of the most boring work that a developer has to do, especially when it comes to memorizing all of the various syntax and all of their various commands that you need to know. In larger projects, it's even really easy to forget which commands are even available. So handing all this work over to an AI is a natural step in the evolution of development. But again, please be extremely cautious with these features as there are a million ways that everything could go terribly, horribly wrong.

AI YOLO - Sit Back and Watch Cursor Automatically Run Terminal Commands

GitIngest (https://gitingest.com/) is an awesome tool that allows you to batch together files from a GitHub repo in order to use them with AI tools. This lesson walks through use Git Ingest against a repository that's too large for an AI, so it configures options to narrow down to only the files that you need for your task. Then we'll use Gemini's latest Flash 2.0 model to generate a new project based on the examples we grabbed from the GitHub repo.

Use Gemini to Analyze a GitHub Repo with GitIngest

Manage column visibility in tables using [Tanstack Table](https://tanstack.com/table/v8/docs/guide/columns). Toggle each column's visibility with checkboxes, set some as non-hideable, or hide them by default. Adjust properties in the table code to control displayed columns. 

Install [Shadcn's Switch](https://ui.shadcn.com/docs/components/switch) component to render nice looking switches instead of plain html check boxes.


Hide and Show Columns with Tanstack Table

Learn to hide and show columns in an HTML table with Tanstack Table. Render switch components with shadcn. 

When comparing two visually similar websites, it can often be challenging to precisely identify the subtle differences between them. To facilitate a rapid analysis of these discrepancies, a practical technique involves leveraging Chrome's integrated developer tools to capture full-page screenshots of each site. Subsequently, these screenshots can be uploaded to a platform like AI Studio. There, the AI can analyze the images and generate a report detailing the variations. This entire process, leveraging a few quick shortcuts, can be completed in under a minute, delivering a comprehensive breakdown of the differences for efficient comparison and analysis.

Quickly Compare Two Sites Using AI Studio with Chrome Full Page Screenshots

It's fairly trivial to create a React project, but there's always a big hurdle between creating it locally and making it shareable so that someone else can run it. This lesson walks you through the process of automating creating a React project locally, creating the repository where it's going to be hosted, and creating shareable links where it can be run so that you can quickly and easily create single one-off demos and shoot them over to your friends and coworkers for sharing your code ideas in a working environment.


```bash
share-react-project() {
  if [[ -z "$1" ]]; then
    echo "Usage: share-react-project <project_name>"
    return 1
  fi

  local project_name="$1"
  local github_username=$(gh api /user --jq '.login')

  echo "Creating Vite project: $project_name"
  pnpm create vite "$project_name" --template react

  cd "$project_name"

  echo "Initializing Git repository"
  git init

  echo "Adding all files to Git"
  git add .

  echo "Creating initial commit"
  git commit -m "Initial commit"

  local codesandbox_link="https://codesandbox.io/p/github/${github_username}/${project_name}"

  echo "Adding CodeSandbox link to README.md"
  echo "" >> README.md
  echo "## CodeSandbox" >> README.md
  echo "[![Open in CodeSandbox](https://assets.codesandbox.io/github/button-edit-blue.svg)](${codesandbox_link})" >> README.md

  echo "Adding README.md to Git"
  git add README.md

  echo "Committing README.md changes"
  git commit -m "Add CodeSandbox link"

  echo "Creating GitHub repository: $github_username/$project_name"
  gh repo create "$github_username/$project_name" --public

  echo "Pushing to remote 'origin'"
  git push -u origin main

  echo "Project '$project_name' created successfully!"
  echo "GitHub repository: https://github.com/$github_username/$project_name"
  echo "CodeSandbox link: $codesandbox_link"
}
```

Automate Creating a Local React Project, GitHub Repository, and Live Hosted Demo in a Single Command

[Verdaccio](https://verdaccio.org/) is a fully featured NPM registry that you can run locally on your machine. It’s a great tool for testing your release process, running end-to-end tests, and simulating real-world scenarios like deploying packages, installing them, and verifying functionality as an end user would.

Nx includes a [generator](https://nx.dev/features/generate-code) that simplifies setting up Verdaccio. To configure it, run:

```shell
npx nx g @nx/js:setup-verdaccio   
```

This command installs the necessary NPM packages and creates a `project.json` file with a `local-registry` target. To start the local registry, open a new terminal window and run:

```shell
npx nx local-registry
```

This will:
- Launch the Verdaccio registry.
- Configure NPM to point to the local Verdaccio server at `http://localhost:4873`.

> **Note:** A `project.json` file provides an advanced way to define scripts, offering more flexibility than a traditional `package.json` for managing complex targets.

Setup local Verdaccio server to release NPM packages

Learn how to spin up a local NPM registry powered by Verdaccio to test deploy your NPM packages.

In TypeScript, developers often begin by defining the structure of their data using type definitions or interfaces, which is a powerful way to ensure type safety. However, as applications grow and become more complex, simply defining the shape of an object might not be enough to guarantee its consistent creation and behavior throughout the codebase. This often leads to situations where objects that are intended to be of a certain "type" might be missing crucial properties or have incorrect data, which can be difficult to track down and debug.

This lesson tackles the question of when and why to move beyond basic type definitions and embrace classes in TypeScript. It demonstrates how classes provide a more robust mechanism for defining object structure, enforcing type constraints, and ensuring consistent object creation. By establishing a clear blueprint for objects, classes not only improve compile-time type safety but also offer runtime benefits and better code organization, ultimately helping developers avoid common pitfalls associated with loosely structured objects in larger TypeScript projects.

Stop Avoiding Classes in TypeScript

Karabiner isn't only for your keyboard. It can also hijack your mouse buttons and enable them to be similar to layers on your keyboard, where holding down a mouse button can allow you to tap keys on your keyboard to trigger commands and macros that can completely revolutionize your workflows. For example, you can hold down the right mouse button and tap on R to go to references in VS Code. Or hold down the right mouse button and tap the left mouse button to chop up videos and Screenflow.

This completely unlocks a whole new world of possibilities and use cases for your mouse as you can hover your mouse over anywhere on the page. And just tapping keys on your keyboard allows you to trigger mouse actions, to trigger keyboard actions, or to trigger macros and applications and terminal commands. and anything that your imagination can come up with. 

Karabiner: Rethinking Right-Click as a Macro Command Center

Make an HTML table more readable on mobile devices by using the ::before pseudo-element. We add labels to each cell, so they appear like cards when the table is viewed on smaller screens. The ::before content is set using a data-label attribute for each cell to enhance mobile viewability without horizontal scrolling.



Create a mobile friendly table with the before pseudo-element

Learn to use CSS ::before pseudo-element for mobile-friendly HTML tables. Add labels to cells for enhanced readability on mobile, avoiding horizontal scroll.

nader dabit

Search Results