Binge Watcher is a single-page application for users to optimise their binge-watching plans with shows from popular streaming services.
The app is an optimisation application modelled after a Campaign Budget Optimiser (CBO). A CBO takes in a series of inputs and a numerical constraint to output a single return. The inputs are passed through a conditional control statement algorithm at each stage. The structure of the input is best represented as a decision tree.
- React
- Material-UI
- Ajax
- A user should be able to understand intuitively what the site is about.
- A user should be able to select multiple genre checkboxes.
- A user should be able to select their availability using a JavaScript-based slider.
- A user should be able to select their medium preference from the radio buttons.
- A user should be only doing one thing at a time on a page or component render.
- A user should be able to see a viable binge-watching plan upon submission.
- For each item in the binge-watching plan, a user should see:
- Title of Show
- Short Writeup
- Poster Image of Show
- Launch Date of Show
- Show Genres
- A user should be able to add the watching plan to a watchlist.
- A user should be able to add more than one plan to their watchlist.
- A user should be able to delete plans from their watchlist.
The project was broken down to three general parts.
- API. The first part is exploring the in-built functionalities of the API, and checking if the API works according to specification upon deployment.
- Recommendations Generator. The generator is composed of three form input components, each with their conditional control statement algorithm, and one output component. These were dealt with sequentially.
- Watchplan. With the data generated from Part 1 and 2, building the watchplan is a simple shopping cart problem.
Divide and Conquer. Trite, but this is great with React: Once I've identified the most atomic components, I built them rightaway, and from there slowly collased the components to their proper functions.