Chain Reaction

Introduction

Hello, I am Caitlin Turnidge, a final-year Maths student at the University of Warwick. This is our entry for the AWS Data Exchange for APIs challenge. This was worked on by myself and Mohamed Boudjillouli, a final-year Computer Science student at the University of Warwick.

Inspiration

I often find myself searching on IMDb to find certain actors in films or to find out other films that certain actors play in. This inspired us to create a game that allows users to explore the links between actors and films and discover new entertainment content that they haven't seen before.

What it does

We built Chain Reaction: a movie-actor linking game. To play the game you start by being given a top 1000 movie on IMDb. You need to name an actor in this film, and then on that actor, you must guess another film that they are in. The aim of the game is to get the longest move-actor chain! you can then visualize these links on a Graph explorer.

The game incorporates:

  • A daily movie challenge, the same for everyone across the world.
  • A 30-second time limit per guess.
  • Three chances to get a correct connection.
  • A search bar where you can choose any film to start your game on.
  • A randomize button to let you start guessing from a top 1000 movie on IMDb.
  • A points system that you can use to compete with your friends.
  • A previous guesses section.
  • A title/credits info panel.
    • For each film, you can see the rating, the movie plot, the genres, the year it was made, the poster and a link to the IMDb page.
    • For each actor, the info panel shows awards they have won, characters played and the IMDb page link.
    • All of this data comes from the IMDb GraphQL API to provide users with plenty of data.
  • Once the game is over, you can use the graph as a visualization tool by continuing to click on nodes to expand more edges!

How we built it

The application is built with TypeScript, NextJS, React, TailWindCSS and Apollo Client. NextJS has an API route that proxies data to Amazon Data Exchange. The application is deployed to an AWS lambda@edge (128MB of memory to save on money) which provides the static assets in CloudFront for super fast loading. The app is deployed to AWS using CDK and the serverless NextJS construct.

Challenges and Feedback

  • Time
    • We've known about this hackathon for a while, but haven't had time to get involved due to uni work, but last Thursday we decided to go for it this weekend, so we only had 3 days to get everything ready for the deadline. Despite this, we managed to complete the majority of our initial scope.
    • The code is super messy because of this, but we hope to improve on this later.
  • Not enough data provided through the IMDb API, we'd like more Actor data in particular.
  • Maximum query depth of 12 seems arbitrary.
  • No GraphQL playground in ADX, we had to set up our own proxy to use the GraphQL playground.

Accomplishments that we're proud of:

  • We have a deployed app that anyone can go play!
  • The visualization looks awesome.
  • Users can explore the graph to find films that they may not have heard of before, providing entertainment value to them.
  • Users can compete with each other on the daily chain.
  • In our opinion, a perfect use case for the IMDb API by leveraging the easy traversal of the APIs graph-based nature.

What we learned:

  • Deploying to AWS with the serverless construct and CDK was a breeze.
  • Calling GraphQL from the front end was totally new, so that was awesome to play around with.
  • We were relatively new to Tailwind, so that was a ramp-up, but we found it was super fast for styling components.

What's next for Chain Reaction:

  • A Domain!
  • Mobile responsiveness.
  • Clean up the code base.
  • Labels for the links between films and actors which specify the character that the actor played in the film.

Built With

Share this project:

Updates