EuroSquares: An AWS Amplify-Powered Game for Eurovision 2023

#aws #amplify #react

Introduction

The Eurovision Song Contest is one of the most watched events on television, with millions of viewers tuning in from around the world to watch the performances of various countries' musical acts.

For Eurovision 2023, I decided to create EuroSquares, a game that allows a group of friends to be assigned random countries to see who will have the most points at the end of the contest. In this post, I'll explain how AWS Amplify was used to power the EuroSquares application, the code is available on GitHub.

Tech Stack

AWS Amplify is a platform that allows developers to quickly and easily build full-stack applications using popular web frameworks and integrate them with AWS services.

EuroSquares was built using React JS and was NodeJS. The application consists of a front-end React application, a REST API, AWS Lambdas, and DynamoDB tables for storing data.

Front End

The front-end of the application was built using React and was designed to be simple, especially with a time crunch on the project. The user interface was designed using the Bootstrap library, which provides a set of pre-built UI components that can be easily customized to fit the needs of the application.

React allowed me to control the content of the calls between the Front End/Mid Tier/Back End, the actions that would trigger the calls, etc.

Mid Tier

The React application communicates with the back-end of the application through a REST API.

With any REST API, it is always good to build out the Postman Workspace to allow easy testing.

There are only 3 resources defined for the project:

Squares
Bands
Score

Amplify gives an option of using a template and linking the API Endpoint with the Lambda and a connected DynamoDB table. I selected the template, Serverless Espress, which provided a lot of code in the template, though the majority of it felt overly bloated for what was effectively CRUD functionality.

Amplify has a strict way of building all the components, and this was the time I ran into some issues where I wanted to go back and grant a function access to multiple DynamoDB Tables. I struggled trying to find the proper way to implement this, and eventually succumbed to granting an over-broad set of permissions:

[
  {
    "Action": [
      "dynamodb:*"
    ],
    "Resource": [
      "*"
    ]
  }
]

Back End

The DynamoDB database was used to store the state of the game, including the current state of the grid, the selected squares, and the points each player had accumulated. The benefit of the database was how highly scalable and resilient it was, with automatic scaling and failover capabilities built in.

There was nothing very complex about this setup, as the project was not data intensive.

Future work, for the next contest, would be to try and hook this into a data source vs manually entering in the data. Furthermore, rather than manually calling the scores endpoint, it would have been better to have a trigger that would automatically recalculate every player's score as a country's points were announced.

Conclusion

In summary, EuroSquares was built very quickly using the AWS Amplify platform, allowing a serverless project to be released in a matter of hours. Managing a lot of the components and hosting helped with the basics.