operation-orange-test

- A minimum of Node v6 is required. - `npm install` to install dependencies. - `npm start` to run the app. - `npm test` to run unit tests and coverage report.

Usage no npm install needed!

<script type="module">
  import operationOrangeTest from 'https://cdn.skypack.dev/operation-orange-test';
</script>

README

Running the App

  • A minimum of Node v6 is required.
  • npm install to install dependencies.
  • npm start to run the app.
  • npm test to run unit tests and coverage report.

Notes

  • Given the role being applied for, this is a React based implementation.
  • The basis of this project was created from create-react-app as it comes with community driven industry standard tooling and configuration out-of-the-box, allowing me to spend most of my time on the actual Devlopment task at hand and less so on setup.
  • All code is heavily unit tested using Jest and some of its unique, useful features such as snapshot testing and its method of module mocking.
  • All code is written using the Airbnb coding standard and enforced with their ESLint config packages.
  • The minimum technical requirements I deduced for this are:
    • A 'movie' service for querying movie titles from TMDb. As far as I could see, the TMDb services don't support a single field full-text-search across multiple fields of data, so I stuck with just title search given time limitations.
    • A MovieSearch React component which is a search field and I decided to take a throttled search-as-you-type approach.
    • A MovieListing component to display results.
    • A Pagination component to traverse the paged data returned from the movie service.
    • Traditional React component state management in the main App component for the above.
  • Because the brief was open-ended with "the user should be able to search and browse results", I had to read the API docs fairly extensively to understand my options. I didn't feel learning and implementing the mentioned JS library and its own API much more helpful over creating a simple service abstraction for the bit of the TMDb service I needed, given I'd already learned it - https://github.com/damon-kreft/dazn-test/blob/master/src/services/movies.js. I was also keen to show my own raw JS examples.
  • All-in-all, to meet the above technical requirements, learning the TMDb API, using an industry standard React application setup and implementing it using heavily unit tested, best practice code, took more like 7 hours in total. I would have had to compromise on features or quality, failing the brief or not demonstrating my abilities, respectively.

TODO

  • I need to spend 30 mins or so on basic styling to sexy up the UI.