This is a small demo app created for the Disney Streaming team as part of a take-home coding assessment. The app pulls collection information from a BAM which it then uses to populate a "home page" media scroller, similar to Disney+, or other such streaming apps.
- Create a page that consumes the home page API and renders the pre-populated data onto the screen.
- The focused tile must be scaled up.
- The app should support navigation similar to a remote control, e.g. up/down/left/right/enter/back/etc. Avoid mouse input.
- Minimum layout should be multiple rows of data, but please feel free to add in your own design ideas as well!
ALERT: There is a 15% chance of magic in the forecast today. Be on the lookout for a hidden mickey on the page headers. You might have to refresh the page to find him!
Locally, the app can be run with:
yarn install
yarn start
To build the app for distribution, run:
yarn run build
The app is Dockerized and deployed on Heroku at https://disney-takehome.herokuapp.com/
- There are currently no unit tests. I made the decision not to include unit tests for this because I knew that the project would already consume a large portion of my nights and weekends, and I wanted to limit the scope of time. If given more time, I consider unit tests to be part of the Definition of Done, and would employ TDD to develop a project/feature/bug.
- Some of the models I created, like the different title classes under
src/models/title
, could be reworked to take more advantage of inheritance or polymorphism. It seems that they share some fields up until a certain point where they differ (program
,series
,set
,collection
).
- The
webpack.config.js
file currently houses all the build configurations and is geared towards a dev workflow. A separatewebpack.prod.config.js
should be created which would optimize the build for production. Awebpack.dev.config.js
would do the same for dev.webpack.common.config.js
would have the shared build configs.
- App configuration values like API URLs should be stored in an environment-specific configuration file.
- Currently, the set renders set refs, but it populates them all on page load. Support still needs to be added for dynamically loading them as they scroll into view.
- Currently, we just see a friendly Mickey when an image 404's, but it would be much more helpful to the user if we also display the item's title so they know what movie/series/collection it's supposed to be.
- The classes in this project currently know how to instantiate dependencies
such as
CollectionService
. It is best practice to follow inversion of control. A dependency injection framework would achieve this. Dependency injection is also critical to isolating classes when unit testing them.
- The app is currently served up by
webpack-dev-server
which is not a sustainable or secure option for serving the app in a real production scenario.