A simple to use web application that allows users to create a to-do list by adding tasks that can be edited and deleted - Updates to the task list persist as objects in a nonrelational database.
Well Architected Framework - Loose Coupling
Front and backend interdependencies are limited by allowing the components to interact only through specific interfaces.
This is accomplished by Leveraging AWS Services - Lambda for serverless functions to host the API, Amplify hosts the frontend, and database management via DynamoDB.
React.js | Material UI | Node.js | Express.js | AWS Amplify | AWS Lambda | AWS DynamoDB
-
The frontend is built with React and Material UI and was deployed in seconds using AWS Amplify.
-
Requests from the React frontend are handled via a backend API constructed and deployed using Node.js, Express.js and AWS Lambda.
-
Serverless data storage is handled using DynamoDB.
-
React
Documentation: https://react.dev/reference/react -
Material UI
Installation: https://mui.com/material-ui/getting-started/installation/
Icons: https://mui.com/material-ui/material-icons/ -
Node
Documentation: https://nodejs.org/docs/latest/api/ -
Express
Getting Started: https://expressjs.com/en/starter/installing.html -
AWS Amplify
User guide: https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html -
AWS Lambda
Developer Guide: https://docs.aws.amazon.com/lambda/latest/dg/welcome.html
API Reference: https://docs.aws.amazon.com/lambda/latest/api/welcome.html
Operator Guide: https://docs.aws.amazon.com/lambda/latest/operatorguide/intro.html -
DynamoDB CRUD functions
Create: https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/example_dynamodb_PutItem_section.html
Read: https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/example_dynamodb_Scan_section.html
Update: https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/example_dynamodb_UpdateItem_section.html
Delete: https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/example_dynamodb_DeleteItem_section.html
- The frontend is deployed with AWS Amplify: https://main.d2b20auuux8ehi.amplifyapp.com/
* Backend: https://64ithvdxrzwofic4apqy7obq7m0yhppc.lambda-url.us-east-1.on.aws/task
- Build and Deploy FullStack React App on AWS: https://www.youtube.com/watch?v=FHn8c4Rk_yo
Permission to use this application is granted under the MIT license. https://opensource.org/licenses/MIT
Holler at me! rob.atalla@robatalla816.com