My borther and I wanted some way we could "see each other's cards" as we played Magic: The Gathering virtually over Zoom. So the premise for this app was pretty basic: provide some way to place cards on a virtual table so that we could share the screen and see what all the players had on the table.

Since I had been mostly doing work on the infrastructure side of things for the past 5 years or so, I took this as an opportunity to get up to speed with some of the new front-end web application technologies. The front-end of the application is built with Vue.js, and uses the Vuetify.js component library. I was really impressed with how easy it is these days to build incredibly rich, interactive front-end interfaces these days with the modern javascript frameworks.

I also wanted to provide a way to share control of the table between players, allowing any player to update the table. This required some back-end infrastructure, which is a serverless API using websockets and AWS services.

One player starts things off by hosting a game. This creates a websocket connection to an AWS API Gateway, which handles both the websocket connections, and interactions with AWS Lambda for the logic. The lambda function generates a game ID, receives the game data from the player, and stores the game information in AWS Dynamo DB. As new players join, the lambda function adds the player's websocket connection info to the game, and notifies all connected websockets of game data updates as they happen.

These AWS serverless technologies facilitate a very low cost way to provide centralized back-end resources for a basic app like this where the traffic will be very low, and always-on resources would be prohibitavely expensive.

Of course all the AWS resources are deployed via an AWS CloudFormation template, and the serverless framework, because infrastructure as code is awesome.