TVCharts

TVCharts is a simple frontend / backend application with an API and multi-container deployment. It ingests raw data from IMDb datasets into a document store, then allows users to search and display results as charts of episode ratings over the entire run of a TV series.

Tech Stack

React / Redux
NodeJS / Express
MongoDB
Nginx / letsencrypt
Docker
AWS CDN (S3 + CloudFront)

See a working example at tvcharts.ianray.com

Requirements

Make sure all dependencies have been installed before moving on:

Docker
Node
Yarn (or you can use npm)

Build and Deploy

Steps to follow after cloning this repository

1. Build assets for frontend

$ cd client
$ cp .env.example .env
$ yarn install
$ yarn build

You can customize .env or use default key for testing.

2. Build and deploy server

For the server/.env you will need to get an OMDB_API key to display images. It's a free, one-click signup. The application will still work without it, but all the images will be placeholders and it won't look as cool.

$ cd server
$ cp .env.example .env
$ docker-compose build
$ docker-compose up

If you used the defaul settings in .env, then you should see the site at: http://localhost

You can start testing while data is still loading in, but all of the episode data won't be available until docker logs data shows "all done."

! Warning: the basics and episode files from IMDb include over 10 million of lines of text. So the initial load might make a laptop fan kick into high gear for a few minutes. The mongoDB indexing after initial load can also take over 5 mins depending on your CPU.

If you can use a VPS like EC2, DigitalOcean, etc. then just choose an option with 3+ vCPUs and at least 2GB memory. I used 4CPUs/2GB and it completely loads up in about 5mins.

Optional: Generate SSL Cert

Also included in the nginx container is letsencrypt and a config file (ssl.conf) for using SSL. To enable this, you need to set the .env variables BUILD=production and DOMAIN (which can be anything except localhost)

Then run the bash script:

$ docker exec -it nginx ./certbot.sh

If you have letsencrypt certs already generated, copy them to server/nginx/letsencrypt. It will check this directory before generating new ones.

Optional: CDN - AWS S3 + Cloudfront

Use AWS S3 + Cloudfront to host the static frontend assets. You will need to have an AWS account that can generate access key + secret, an S3 Bucket, and a CloudFront distribution that maps to a Bucket folder. Once you have those created, plug them into your .env variables

...
AWS_KEY=
AWS_SECRET=
S3BUCKET=
S3DIR=
CLOUDFRONT=

Then run the bash script:

$ docker exec -it nginx ./aws.sh

To un-do this, you can change the BUILD .env variable to development and re-build/deploy using docker. Or simply re-deploy the nginx container to use the latest frontend build: docker-compose up -d nginx

Updating Database

Since we rely on IMDb datasets as our source of information, we can just drop the entire database and re-create it every time.

## Re-load database from IMDb datasets
$ docker restart data

Alternatively, you can also use docker-compose up -d data

Author

I built TVCharts as a way of displaying my technical abilities to companies looking to hire a frontend or full stack developer.

Credits

An awesome Python version which inspired me was developed by thepiratex can be found here with the full code here
The original concepts come from /r/dataisbeautiful, with original done by user /u/Hbenne

Codegazers / tvcharts