DEV Community

Cover image for Building an AWS Power Calculator Web Application
Sujal Dua
Sujal Dua

Posted on

Building an AWS Power Calculator Web Application

Building an AWS Power Calculator Web Application

Project Overview

This report details the technical implementation of a serverless web application hosted on AWS that calculates the power of a given base number The application employs key AWS services, including Amplify, Lambda, DynamoDB, and API Gateway.

Technologies Used

AWS Amplify: For streamlined frontend hosting and deployment.
AWS Lambda: Serverless compute to execute the power calculation logic.
Python: Programming language used within the Lambda function.
AWS DynamoDB: NoSQL database for optional storage of calculation results.
AWS API Gateway: Secure interface between the frontend and backend services.

High-Level Architecture

Image description

Implementation Steps

1. Frontend Development (AWS Amplify)

Create a new Amplify project:

     Navigate to the AWS Amplify console.
     Click "New app" and select "Host web app."
     Provide a name for your app and choose your preferred Git provider.
     Connect your repository and configure build settings.
Enter fullscreen mode Exit fullscreen mode

Image description

2. Backend Development (AWS Lambda & API Gateway)

Create a new Lambda function:

    Go to the AWS Lambda console.
    Click "Create function" and choose "Author from scratch."
    Provide a function name, select Python as the runtime, and choose an appropriate execution role.
Enter fullscreen mode Exit fullscreen mode

For source code of lambda function (refer to my github) -

(https://github.com/0Sujal/AWS-End-to-End-Architechture/tree/main)

Image description

Configure API Gateway:

 Navigate to the AWS API Gateway console.
 Create a new API and choose the REST API type.
 Create a resource and method (e.g., POST) for your API.
 Integrate the Lambda function as the backend for the API method.
 Deploy the API to make it accessible.
Enter fullscreen mode Exit fullscreen mode

Image description

3.Database Integration (AWS DynamoDB - Optional)

1)Create a new DynamoDB table:

  Go to the AWS DynamoDB console. 
  Click "Create table" and provide a table name.
  Define primary key attributes (e.g., base and power).
  Configure other table settings as needed.
Enter fullscreen mode Exit fullscreen mode

Image description

2)Modify the Lambda function:

  Import the necessary DynamoDB SDK library.
  Add code to insert calculation results into the DynamoDB table after the calculation. (The Execution Policy Role)
  For execution policy role source code refer to my github -
Enter fullscreen mode Exit fullscreen mode

(https://github.com/0Sujal/AWS-End-to-End-Architechture/tree/main)

Image description

4.Deployment & Testing

1)Deploy the frontend:

  Use Amplify's hosting capabilities to deploy the front-end application.
  Amplify will provide a URL where you can access your deployed app.
Enter fullscreen mode Exit fullscreen mode

Image description

2) Test the application:

  Open the deployed application in your web browser. 
  Enter different base and power values.
  Click the calculate button and verify that the results are displayed correctly.
  If using DynamoDB, check the table to ensure results are being stored.
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

Cost Management Reminder

To avoid unnecessary charges, it is crucial to terminate all the AWS resources used in this project once you're done. The services to be terminated include:

AWS Amplify: Remove the Amplify app and related resources.
AWS Lambda: Delete the Lambda functions.
AWS DynamoDB: Delete DynamoDB tables.
AWS API Gateway: Remove the API Gateway resources.

By terminating these services, you can ensure that your AWS account does not incur any unexpected charges.

Top comments (0)