Search and filter shows and movies on Netflix using the ReelGood API
Made with:
This app is currently broken - ReelGood migrated to using V3 API on their site and the V2 API no longer works. If you want to figure out how the new API endpoints can be used and contribute a PR, please do.
See issue #5.
So far this project just represents a single page of API results as text and images, using templating.
There is no fancy reporting or filtering.
Also I might rebuild this in Vue, instead of Mustache.
ReelGood is a service which provides listing of TV shows and movies across many online services, including Netflix.
ReelGood has a great GUI on their website which is easy to navigate for searching and filtering. They also use an API as part of this. I wanted to build my own show guide reports and recommendations list, so I pull data from their API with client-side JS and render it on a website.
View the site:
If you are new to Netlify / Lambda Functions, see my Cookbook.
Test the JSON API endpoint directly:
Clone the repo:
$ git clone [email protected]:MichaelCurrin/netflix-assistant.git
$ cd netflix-assistant
There are no build or install steps!
Continue below.
Using Serverless to API requests
This app cannot do browser requests directly ReelGood API (locally this is okay but on the deployed site you get an error). The API change dso there are CORS errors.
So this app redesigned to use Netlify's free Functions feature (built on AWS Lambda).
A Function is defined using a short JS script and this is hosted on Netlify. When a request is done to this Function's endpoint, a request is done to the ReelGood API and the result is returned as a cached JSON response.
This is much simpler than saying building a Python or Node API, as that needs a lot more code and cannot be hosted on Netlify.
The downside is that the Function only works in the cloud and not on a local server.
There are some ways around this:
http
library maybe and just add an extra line to call the JS script on a certain endpoint - this means you only need one server and one port.Note the local usage is limited - see the the section above.
Start a web server in the root directory.
See approaches in this gist or use an approach below.
$ python3 -m http.server
Open in the browser. e.g.
There is a basic shell script in this project which uses Bash and cURL to get data from the ReelGood API.
Rather than using an on-demand Function as covered above, this approach is to scrape data from the API and store it as JSON data, which could be left in the deployed app or committed to version control if you care about that. Then the frontend can use that data - which will be much faster because all the paging is already handled. At the cost of slightly stale data and querying a large static JSON file. Some clean-up could be done so that the JSON file only contains fields of interest.
This script gets the first two pages of shows from the API, where the IMDB and ReelGood scores are above 50%. More advanced handling with Python or similar is recommended if you want to page smartly - i.e. substitute in a higher skip
value, until there are no more pages.
Run as:
$ cd scrape
$ ./get_shows.sh
Then view the JSON files created in the out
subdirectory
Remote setup
This repo can be deployed on Netlify for free - as a static website plus Netlify Functions for the serverless backend calls to the external API.
The CORS header must be set for API requests and this is not possible to be set on Github Pages. Also, this uses Function on Netlify, which GitHub Pages does not support.
On ReelGood's website there is a view of TV shows and movies available to stream on Netflix.
The page supports filter parameters, ordering options and display format options.
The show data is retrieved from the ReelGood API.
This is done upon initial page load, when you apply filtering/sorting and also when you click Load More at the bottom of the page.
The API is free to use and on their FAQ page they provide details for requesting API access. I found that without having to e-mail them that the API is easy to access. I have not found documentation for it yet, so I compare GUI choice I make with the API requests which are made and infer how the fields on the API requests work and what the response fields mean.
$.getJSON
(frontend) and axios
(Function) to simplify the project.To avoid CORS errors, this project uses a Function aka Lambda on Netlify to request data on the server side and then make the data available on the same domain as the browser request.
See Netlify Function.
See also blog post.
A local setup could use a Netlify library or just a fallback to using the original URL (which doesn't give CORS errors on localhost fortunately even though it does on Netlify) based on an flag like ENV=dev
or local/remote.
Released under MIT by @MichaelCurrin.