Read on Twitter
How to create a Full Stack application using React and Amazon Web Services 
This is a summary of the areas you will need to be familiar with and a collection of resources to get you started.
This is a summary of the areas you will need to be familiar with and a collection of resources to get you started.
First of all - there are many different ways to compose a Tech Stack for a Full Stack application.
With that said, let's start.
Tech Stack:
DynamoDB
GraphQL
AWS Lambda (serverless)
React
Static hosting in AWS S3
Tools:
AWS Amplify
Serverless
With that said, let's start.
Tech Stack:
DynamoDB GraphQL AWS Lambda (serverless)ReactStatic hosting in AWS S3Tools:
AWS Amplify Serverless
DynamoDB (1/3)A managed database provided by AWS.
It supports both key-value entries and documents.
That means that a field can contain a single value, such as a string or a number, but can also contain a document, i.e. a JSON-object.
DynamoDB (2/3)It's schemaless, so besides a key, it doesn't rely on a predefined schema.
You can think of this as a combination of relational and document-based databases such as MongoDB.
DynamoDB (3/3)It's fully managed by AWS, so you don't need a server running to host the database.
This enables extremely high flexibility when it comes to up- and down-scaling your solution.
Get started with DynamoDB on AWS website. https://aws.amazon.com/dynamodb
GraphQL (1/3)GraphQL is a query language and an alternative to SQL and MySQL.
With GraphQL we can specify exactly what we need and the relation between the data coming from the backend, all in a single request.
https://graphql.org
GraphQL (2/3)AWS has a solution called AppSync which enables you to create a managed GraphqQL layer to securely access, write, and combine data from one or more data sources.
You can link a DynamoDB table as a data source directly, without having to write custom resolvers.
GraphQL (3/3)AWS AppSync is again fully managed, so you don't need a server running your GraphQL API.
Additionally, you can easily configure authentication based on an API-Token or OAuth 2.
Get started with AppSync on AWS website. https://aws.amazon.com/appsync
AWS Lambda (1/2)AWS Lambda functions enable you to write the entire Back-End using individual functions that run in the Cloud.
This is an extremely powerful alternative to managing and provisioning servers for your Back-End.
AWS Lambda (2/2)Even though you can link a DynamoDB table as a data source directly using AppSync, you typically need a bit more custom resolver-logic.
Fortunately, you can use Lambda as a data source as well.
This allows us to write custom resolvers when needed.
React (1/2)React is a JavaScript library for building user interfaces.
It's especially powerful for writing Single Page Applications.
It's very little likely that you haven't heard of it already, but if not, I'll drop a link to their website here.
React (2/2)By far the easiest way to get started with a new React App, is not use create-react-app.
It comes with a comprehensive toolchain for both developing, bundling, and shipping your React App. https://reactjs.org/docs/create-a-new-react-app.html
Static hosting in AWS S3 (1/2)S3 is a storage service in AWS.
We will host our application using AWS S3.
After we have used create-react-app to build our React App, we will simply upload it to an S3 bucket where the static files can be accessed.
Static hosting in AWS S3 (2/2)AWS CloudFront is a blazing fast Content Delivery Network, and we will use this to direct traffic from our domain to the S3 Bucket.
This offers additional capabilities in regards to caching, load balancing, and more.
AWS Amplify (1/2)AWS Amplify is a framework that enables us to integrate a lot of the things we have covered so far.
With AWS Amplify we can quickly create a stack, add authentication, add a GraphQL API using AppSync, and host the app using S3 and CloudFront.
AWS Amplify (2/2)AWS Amplify is CLI-based and will get you started with a cloud-powered app in minutes (literally).
It will make our lives SO much easier!
https://docs.amplify.aws
Serverless (1/2)The Serverless Framework is a tool that enables us to develop, manage, and deploy Lambda Functions with absolute ease!
It allows us to use infrastructure-as-code for the entire cloud infrastructure.
Serverless (2/2)We can set up both DynamoDB, AppSync, GraphQL Schema, and all our Lambdas in a single yml-file.
It's an incredible tool! https://www.serverless.com
Additionally, it can be of great importance to understand where to use caching effectively.
How and where to cache very much depends on the application you're building.
See more in this thread I published recently. https://twitter.com/SimonHoiberg/status/1345993211785961472
How and where to cache very much depends on the application you're building.
See more in this thread I published recently. https://twitter.com/SimonHoiberg/status/1345993211785961472
The biggest takeaway from this stack is that it's serverless!
No need to manage servers.
Pay-per-use instead of paying for uptime.
Serverless is inherently scalable.
Reducing cost.
Energy-efficient, ultimately better for the climate.
I hope you enjoyed reading.
No need to manage servers. Pay-per-use instead of paying for uptime. Serverless is inherently scalable. Reducing cost. Energy-efficient, ultimately better for the climate.I hope you enjoyed reading.
