Movie Store — Building a modern web application on AWS — Part (1)
In this series of articles, we will take you through a step by step approach on how to build an example modern web application on AWS cloud.
Authors: Sriram Sundararajan and Ramanan Kannan
Disclaimer: This is our personal learning project and not an official AWS post. This project is for learning purpose only and the code here might not confirm to any production ready standards
Introduction
What is the intent of the article?
As a part of our learning initiative, we decided to build a modern web application on AWS fully using AWS cloud-native model and to demonstrate that, we decided to use the movie-store app as an example. Now that we have built that solution, our intent is to share the process of how we built it and the AWS service building blocks we used to the large audience through this article series.
What is a modern web application application development?
Modern web application development helps companies innovate faster, invent products rapidly and promotes a culture of innovation.There is a very detailed whitepaper document from AWS on this topic:
https://d1.awsstatic.com/whitepapers/modern-application-development-on-aws.pdf
What are the features of a modern web application?
Some of the main features of modern applications are:
- Secure
- Resilient
- Elastic
- Modular
- Interoperable &
- Automated
AWS accelerates the easy building of applications with all the above said features by enabling developers with technologies such as serverless computing and taking away most of the heavy-lifting of managing infrastructure components by offering full managed, highly scalable secure web services to build on top of them.
What are we building?
In our example, we will build a Movie Store app (check out the live demo here), an online service where customers can browse through the movies, get recommendations, bookmark movies and also add them to a shopping cart and checkout.
In this example, we only used fully managed AWS services such as:
- Amazon Elasticsearch as the product data store to be used for searching and querying product info
- Amazon Personalize as the recommendation engine to generate real time movie recommendations
- AWS serverless services such as API Gateway and Lambda to host and run the APIs
- Amazon DynamoDB to maintain bookmark and shopping cart info
- Amazon Cognito to manage the application authentication and finally
- AWS Amplify to host the front-end web application
Architecture
Below is the architecture of the Movie Store app that we will build.
Solution Components
Now, lets look at the components that make up the solution.
This service will be used in the web-app for:
a) searching a movie based on the title, genre or cast (a product search from a catalog)
b) given a movie, get a detailed description about the particular movie selection
The movie data (the product catalog) will be maintained on Amazon Elasticsearch service and the search APIs will be built using API Gateway + Lambda to query Elasticsearch.
In the detailed section later, we will also show how to populate the Elasticsearch database with the movies
2. Recommendation Service
This service will:
a) given a user’s profile, recommend a list of movies
b) selected a particular movie, give a list of movie recommendations (similar to ‘people who liked this also liked this’)
We will use the Amazon Personalize service to build this recommendation engine which will be integrated with the front end. Also, the user ratings data will be fed back from the front end to the Personalize service to fine tune the recommendation engine
3. Bookmarks and Shopping Cart Services
These are two different services but have similar functionality.
a) the Bookmark service will let the user Bookmark his favorite movies and the user will be able to query all his bookmarked movies
b) the Shopping Cart service will let the user to add a particular movie to a shopping cart and can checkout the cart . The user will also be able to move out individual items from the cart
For these two services, we have built the API using API Gateway + Lambda for querying the data which is stored in the DynamoDB table
4. Front-end Service
The web user interface is built using the Vue.js framework with AWS Amplify to provide integrations with Cognito for registration/authentication and event streaming to Pinpoint and Personalize (Event Tracker).
5. Authentication Service
This service will be responsible for user sign-up and user authentication functionality. This service will be powered by Amazon Cognito service and natively integrated with the front end using AWS Amplify
6. Analytics Service
This service will be responsible for collecting usage attributes and metrics to help identify trends in how customers are interacting with your applications. This can then be used to to dynamically send welcome messages, abandoned cart messages, and messages with personalized product recommendations to the customers of the Movie Store.
In the following articles, we will dive deep into each of these steps.Click on the below link to go to the next article in the series: