Project: Develop and deploy a Serverless ToDo application

Project overview

This was the third project I completed while undertaking the Udacity cloud developer Nanodegree program sponsored by ALX-T. In this project, l developed and deployed a simple “TODO” application using AWS Lambda and serverless framework. The application allows users to create/remove/update/get TODO items, each user only has access to TODO items that they have created.

Prerequisites

• Auth0 account
• AWS account
• GitHub account
• NodeJS version up to 12.xx
• Serverless Account
• starter code

Project Steps:

In this project, I developed and deployed a serverless ToDo application using the following steps;

1. Business logic and Datalayer functions to generate upload URL, create todo items, delete todo items, get todo items and update todo items were implemented using Async/Await JavaScript method.
2. A single-page web application for authentication was created using Auth0 console.
3. Auth function which was already defined in the serverless file, was used to implement a custom authorizer for the API Gateway that should be added to all other functions using the JSON web key set obtained from the newly created Auth0 single-web page application.
4. In the serverless file, iamRoleStatements property for performing necessary actions on DynamoDB was specified for the GeTodos function, the GeTodos function returns all TODOs for a current user. A user id can be extracted from a JWT token that is sent by the frontend.
5. In the serverless file, iamRoleStatements property was provided to give the CreateTodo function access to specific AWS Resources. The CreateTodo function receives a new TODO item to be created in JSON format.
6. Similarly, in the serverless.yml file, iamRoleStatements property was provided to give the DeleteTodo, UpdateTodo and GenerateUploadUrl functions permission to access specific AWS resources. The GenerateUploadUrl function returns a pre-signed URL that can be used to upload an attachment file for a TODO item.
7. CORS (Cross Origin Resource Sharing) configuration were added in each of the handler functions using the async method. In addition functions in the serverless.yml file were declared with CORS property set as true.
8. AWS resources such as, DynamoDB table and S3 bucket were added to the resources section of the serverless.yml file.
9. After all necessary configurations were specified, the serverless app was deployed using the following commands in the backend directory.

• “npm i” to install project dependencies specified in the package.json file
• “Serverless” to deploy the application for the first time
• “Serveless deploy — — verbose” for subsequent deployments

10. After a successful deployment, a resource stack was created in the AWS CloudFormation console

Serverless app Successfully deployed

11. The frontend application which consumes the backed API was then configured using the Client and domain ID from the Auth0 application and the API endpoint from the newly created API gateway in AWS.

12. After necessary configurations were set, the frontend was then started using the following commands

• “npm i” to install the necessary dependencies specified in the package.json file.
• “npm run start” to start the react frontend application.

13. The frontend React development server was started at http://localhost:3000/ and was used to interact with the backend APIs.

Authorizing a new user trying to access the deployed application using Auth0 and google account

The frontend of the serverless ToDo app

Google Docs Link

Project’s GitHub Repository