Project Based Article on AWS Use-case

VinayGupta
5 min readApr 18, 2022

In this article I am going to create one project with integration of multiple AWS Services & everything will do step by step !! To integrate service, we will use serverless framework & finally will solve use-case.

Lets understand the Scenario !!

So, the scenario is, I want to have one WebApp in which I can see Different Quote every time I refresh the page. Now, this quote will come through AWS Storage(S3) where I have quotes.json file containing tons of quotes💢.

Second thing, Let’s say one Client comes to my WebApp (He liked quotes😃) & He wants to subscribe for Daily Quotes, so he writes his EmailId in input box given in web-page. Then, He presses subscribe button. Now, As an Admin of this WebApp, I want somebody send me Notification(Email) that client has subscribed for daily quotes.

So, ☝This is the scenario & We will use AWS to implement this use-case :)

What AWS’s services will be used ??🤔

  • API Gateway
  • Lambda
  • Simple Storage Service (S3)
  • DynamoDB
  • Simple Notification Service (SNS)

How we will implement this ??🤔

So, there are major two ways to implement this use-case, First is by using AWS Console (click - click & click..!!) Second way is by using Serverless Framework (one click & all set!!) So, we will use Serverless Framework for this project !!

Before moving forward, there is one basic requirement that should be satisfied: 1) Serverless framework should be installed in your machine with configured credentials (Believe me it’s simple😅)

Step by Step flow

First Step

Select first option & then give the name to your project !!

Do you want to login/register to Serverless Dashboard? n

Do you want to deploy now? Y

Finally you will have this files in your project directory.

Second Step

Now, from here will move to create actual infrastructure on AWS using serverless.yml file.

Let do the First part of WebApp which is getting quote on webpage.

Below I have made one webpage using ReactJS (this is pure web development part).

Now I want to show my clients one Quote as they come to my website. For this, first you should have file with multiple quotes! To make your life easy😁, I am putting url to download that.(https://gist.github.com/nasrulhazim/54b659e43b1035215cd0ba1d4577ee80)

Now, as we are going to use AWS Storage service, let first put this file on S3>Bucket. (Below is how it will look like…)

Next Step

Now, we will fetch single quote from this bucket (quotes.json) and will show into our website. To implement this we will create one Lambda function in which there will be one function which will fetch single quote and give it to website. Also for GET request will use API Gateway resource of AWS. We will do this thing by serverless.yml file.

Creating IAM Role Lambda to S3
Function definition & API Gateway creation

The Lambda function will look like… (It is fetching data from S3)

Final View

Second Part of WebApp

Now, Lets say Client has pressed the subscribe button after putting his email. So we will create one Lambda function which will accept that data and will send it to DynamoDB for storing.

Function definition & API Gateway creation
Creating IAM Role Lambda to DynamoDB
Creating DynamoDB Table

The Lambda function will look like… (It is putting data to DynamoDB)

dynamoDb.put( … )

Third Part of WebApp

Now, As soon as any record is inserted into dynamoDB, we will create one trigger the Lambda function and that Lambda function will publish a message with the help of SNS service of AWS. Finally that message will be sent to me As an Admin of website..!!

Creating IAM Role for Lambda to SNS
Creating SNS resource & Subscription

The Lambda function will look like…Don’t forget to replace the TopicArn with your own ARN (It is publishing message to SNS Topic)

fetches record & sns.publish(…)

Result checking

Now, after doing all this process & steps, let’s test this project.

Initially, my webpage…

After pressing button…

Notification Email Received

So, It’s working right !!

Happy Ending !!😉

Thank you readers, for reading this article. Will meet you in my next blog with another topic & concept.

Keep learning, keep sharing !!🙂

--

--

VinayGupta

Hey..! I'm Vinay Gupta, on the way of learning new technologies.