DEV Community

Cover image for Build a Serverless Web App for a Theme Park
Sully
Sully

Posted on • Edited on

Build a Serverless Web App for a Theme Park

Are you ready to take your theme park to the next level with a serverless web app? Look no further! In this blog post, I'll be sharing my experience from a recent AWS workshop that taught me how to build a serverless web app for a theme park using AWS services. Whether you're a beginner or an experienced developer, this workshop is designed to teach you everything you need to know in just five hours! With step-by-step instructions and engaging video tutorials, you'll be able to follow along with ease. But be warned - some modules in the video tutorials may be a bit outdated, so I recommend referring to both the written instructions and videos to get the most out of the workshop. After completing the project, make sure to follow the "cleanup" section carefully. It's important to note that you won't be able to delete the "rules" until you delete the "targets" first. To help you out, I've included a link to a StackOverflow article explaining the command lines you need to run to delete the targets before proceeding with the instructions command. So, get ready to learn and take your theme park to new heights with a serverless web app. Let's dive into my summary of the workshop!

Workshop Description: The theme park is rolling out a mobile app that provides thousands of visitors with wait times, photo opportunities, notification alerts, and language translation for visitors who need it.
Session level: 200 - Intermediate
Targeted Job Role: Developer / Engineer, IT Professional or Technical Manager, Solution or Systems Architect
GitHub Repo: Link
Recommendation: Yes

Module 1: Connecting the frontend → backend repo & pushing it to CodeCommit

Module # 1: Serverless Frontend Architecture Diagram

Module # 1: Serverless Backend Architecture Diagram

In the first module, we focused on connecting the frontend and backend repo and pushing it to CodeCommit. You'll create a web application that showcases details of rides and attractions in a theme park to park guests. You'll create a code repository in AWS CodeCommit, download the existing frontend code into your Cloud9 IDE, and configure Amplify Console to connect to your repository and publish the web app. Finally, you'll deploy the backend infrastructure for the theme park and application, populate a DynamoDB table with ride and attraction information, and test the deployment.

Module 2: Real-Time Ride Wait Time

The second module focused on creating a real-time ride time flow and traffic controller's SNS topic. The controller published updates every minute to an Amazon SNS topic, and we created a Lambda function that was invoked whenever notifications arrived on this topic. This function stored the message in DynamoDB and forwarded the message to IoT Core. We updated the front-end application configuration to listen to this IoT endpoint and republished the frontend.

Module # 3: The Real-Time Serverless Backend Architecture Diagram

Module 3: Park guests love taking photos on the rides and attractions

My favorite module was the third, which allowed guests to take a selfie and see a composited picture in the application. We learned about the Chroma Key Lambda function, which removes the green background from the image taken by the guest. This is done using the technique of chroma keying, where a specific color (in this case green) is replaced with a transparent background. After the green background is removed, the guest's photo can be composited with a pre-defined theme park adventure background image, giving the appearance of the guest taking a picture in a scenic location within the park.

Module # 3: Serveless Backend Diagram, Generate signed URL, Upload, Chroma Key Processing, Processing, Image Compositing, Final, Front-end Notification

Module # 3: Picture with Green Background Image

Module # 3: Picture with removing removed green background

Module # 3: Picture with New Theme-Park Picture

Module 4: Translation

In the fourth module, we learned about translation. The front-end application used a local languages resource file to substitute language strings when the locale was changed. We downloaded this file and used a Node function that used Amazon Translate to create a new file with a range of translations. After the new language file was created, we copied it into the frontend code and republished it through Amplify Console.

Module 5: Kinesis Firehose → streaming & analyzing data

In the fifth module, we set up Kinesis Firehose to ingest data from park visitors and store it in a dedicated S3 bucket. We launched the simulator to generate test data for analysis, streaming data to Firehose. We configured Amazon QuickSight to perform business intelligence analytics on the sample data.

Module 6: Event-Based Architecture → connecting SNS topic with EventBridge

Module # 6: EventBridge Diagram, SNS topic -> Lambda function -> Events -> Amazon EventBridge event bus -> Rule -> Consumer

Finally, in the last module, we built new functionality that allows the park's maintenance teams to get alerts from the ride systems. We connected the SNS topic with the ride data to Amazon EventBridge, a serverless event bus service. A Lambda function pushed data from the SNS topic to EventBridge, decoupling the producers and consumers of events and making it easy to address new requirements without impacting existing systems.

Overall, the workshop provided a comprehensive and hands-on experience in using AWS services to build a serverless web app for a theme park. It taught me how to use different AWS services effectively to build a serverless web app for a theme park, and I recommend it to anyone interested in learning about AWS serverless app and how frontend and backend services could be built up in AWS.

So, what are you waiting for? Give it a try and let me know what you think of the workshop!

Top comments (0)