/six-degrees-of-kevin-bacon

Web application for visualizing relationships between actors and movies.

Primary LanguageTypeScript

Six Degrees of Kevin Bacon

This was created during my time as a student at Code Chrysalis.

You can see this app in action at http://six-degrees-of-kevin-bacon.beaunus.com/.

Motivation

Wouldn't it be cool if you could visualize how performers and movies are connected?

You could see a collection of movies that have the same actors and actors who have been in the same movies.

Goal

MVP

  1. The user inputs two actors' names.
  2. The backend calculates the connections between the two actors and sends a response.
  3. The "connection" is displayed as a graph on a white page.

Data

Data model

The data is represented in a graph. There are two kinds of nodes:

  • person (actors, directors, etc.)
  • work (movie, tv show)

An edge between nodes implies that the person appeared in the movie.

screenshot of simple graph

Data Source

Data comes from The Movie Database API. We use three main queries:

How to use it

# Install dependencies

yarn install
# or
npm install
# Create .env file

cp .env.default .env

In order to interface with The Movie Database API, you will need an API key.

# Start the application

yarn start
# or
npm start

Once the server is running on your machine, you should be able to navigate to localhost:8080 and see the app in action. Enter the actor names, press submit and enjoy the magic. Have fun!

Contributing

If you are interested in contributing to this project, feel free to add an issue or submit a pull request. I look forward to working with you.

Ideas for features can be tracked as issues in this repository.

Thank you for your interest in this project.