 Resources from Nader Dabit in 2024

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.

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

Up and Running with AWS Amplify Functions

This playlist will get you going with the Amplify Console, including showing you how to host your website, integrate continuous integration and continuous delivery, set up a custom domain, and enable pull request previews.

Up and Running with Amplify Static Site Hosting

React makes it intuitive to build real-world web application. But in reality, you need to use a host of other services to get the app in front of real users. 

This course walks you through setup and implementation to get your cloud-based application up and running. 

You’ll learn to set up:
* a new project in AWS Amplify configured to your React app
* user authentication with Amazon Cognito 
* managed GraphQL with AWS AppSync
* image storage and retrieval with Amazon S3
* text translation via Lambda functions
* and finally, deployment of your application on AWS using Amazon S3

You’ll finish the course ready to quickly and easily deploy your serverless React application, so users can start using and enjoying it right away.

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

Building Serverless Web Applications with React & AWS Amplify

With GraphQL, you can define the shape of your data in a schema, and GraphQL will fulfill the request with the precise data you need. When you need it. This doesn't come without a cost. GraphQL adds a lot of complexity to your application by requiring you to define your schemas through types, mutations, and resolvers.

AppSync is a fully managed serverless GraphQL service that fast-tracks your API development. You can define a single type, and AppSync auto-generates a schema, queries, mutators, and subscriptions for you.

In this course, Nader Dabit will show you how to:

- build a production-ready GraphQL API through AWS AppSync
- create and modify data through the AWS AppSync console
- connect a React application to the GraphQL API
- execute queries, mutations, and subscriptions for data through the API in React

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

Scalable Offline-Ready GraphQL Applications with AWS AppSync & React

Amazon Web Services (AWS) is a powerful expansive cloud infrastructure platform for building modern web applications.

AWS provides services for data, presentation, authentication, security, video encoding, and much more. Offering over 175 fully-featured services from data centers globally, AWS powers a large percentage of the internet.

In this lesson, we’ll use the AWS AppSync console to create a new AWS AppSync API. We’ll then implement our first GraphQL Schema & data source in the new API.

We'll see that when using GraphQL with AWS AppSync, many of our Queries, Mutations, and Subscriptions are autogenerated for us.

Create your first AWS AppSync GraphQL API

In this lesson, we’ll execute mutations against the new AWS AppSyncGraphQL API, which we created in the last video, and view the data in our database.

You will see how to create, update, and delete “todos” within the AWS AppSync console

Execute Mutations within the AWS AppSync Console

In this lesson, we’ll execute queries against the new AWS AppSyncGraphQL API, showing how to query for both a single item and a list of items.

Execute Queries within the AWS AppSync Console

GraphQL resolvers are the glue between your GraphQL schema & your data source. In this lesson we’ll take a look at how resolvers work in AWS AppSync. We’ll also update a resolver to autogenerate an ID field so we no longer have to hard code it ourselves.


Autogenerate an ID Field in GraphQL with AppSync Resolvers

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 lesson, we’ll create a new React web application and connect to our new AWS AppSync GraphQL API, using the AWS AppSync GraphQLclient.

We will install packages from ​`react-apollo​`, ​`aws-appsync​`, and `aws-appsync-react`,​ and download an AppSync config file from our existing AWS AppSync project to wire up a `create-react-app` application to AppSync

Connect to AWS AppSync from a React Application

In this lesson we’ll execute GraphQL queries using our AWS AppSync API and show how to display the returned data inside of our React application using the AWS AppSync GraphQL client.

We'll create a query string using `gql` (`graphql-tag`) and pass that query into a `graphql` Higher-order component where we will pass the resulting data in our exisiting app.


Execute Queries to an AWS AppSync GraphQL API from a React Application

In this lesson, we’ll execute GraphQL mutations using our AWS AppSync API and show how to add data to the database from a React web application using the AWS AppSync GraphQL client.

We'll create a `mutation` query string that will call `createTodo` that is defined in our WAS AppSync GraphQL client. This query will be passed in as props from a Higher-order component and we'll wire up input in React to feed values into this query.

Execute Mutations to an AWS AppSync GraphQL API from a React Application

Apollo provides a universal GraphQL API on top of your existing services, so you can build new application features fast without waiting on backend changes.

apollo

In this lesson, we’ll show how you can have your mutations work when the user is offline. We’ll handle the offline mutation with an optimistic response, then when the user comes back online the data will be sent to the dashboard for a seamless user experience.



Implement an Optimistic Response to a React UI & Showcasing Offline Functionality

In this lesson we’ll show how to use GraphQL subscriptions coming from our AWS AppSync API to listen to real time data changes in a React application and render the new data as it comes in.

Subscribe to New Data in a React Application with AWS AppSync GraphQL Subscriptions

Building a real world, scalable & production-ready GraphQL API is hard. In this course, we’ll learn how to create a production-ready GraphQL API that can handle everything from queries to mutations & subscriptions. We’ll also connect to our API from a React application and execute queries, mutations & subscriptions using the new API.



Course Overview: Scalable Offline-Ready GraphQL Applications with AWS AppSync & React

In this lesson we’ll create a new React application, create a new AWS Amplify project, & configure the React application to begin working with Amplify & AWS services.

Create & Configure an AWS Amplify Project with a React Application

In this lesson we’ll enable user authentication (Amazon Cognito) in the existing AWS Amplify project, then use the withAuthenticator higher order component from AWS Amplify to quickly add a preconfigured sign up and sign in flow.


Use the AWS Amplify withAuthenticator HOC to Implement a React User Authorization Flow

In this lesson we’ll look at how we can use the Auth class directly create a custom user sign in & sign up flow.

Manually Sign Up New Users in React with AWS Amplify Auth Class 

In this lesson we’ll create a new GraphQL API using the Amplify CLI and use the Amplify GraphQL API to query data from the new API & render it in our app. We’ll also look at how to perform mutations from the client

Create & Interact with an AWS AppSync GraphQL API with AWS Amplify

In this lesson we’ll learn how to create a Lambda function and use AWS Amplify to interact with the Lambda function from a React app. Lambda functions allow us to easily create one off functionality or interact with microservices. We’ll use the Lambda function to translate text from english to spanish.

Create & Interact with a Serverless REST API with AWS Lambda from React

Amazon S3 offers a way to store & retrieve items in the cloud. In this lesson we’ll see how we can easily store images in an S3 bucket using the AWS Amplify Storage API. S3 is object storage built to store and retrieve any amount of data from anywhere on the Internet.

Store Data in Amazon S3 with React 

In addition to using the AWS AppSync console, we can also use the AWS Amplify CLI to create GraphQL APIs & the AWS Amplify to interact with the API. In this video, we'll look at an alternate way to create & manage your AppSync GraphQL API.

Topics

Instructors

Content Type

nader dabit