Single page app that can be used to view details on movies which are currently playing in cinemas, and also search for specific titles.
Additionally, you can see more details for each movie, such as trailers, reviews and similar titles (as long as these are available). Click on each movie card to view these details.
- Written in vanilla ES6 Javascript without any frameworks or external dependencies.
- SPA functionality provided by custom hash-based router.
- CSS3 flex-box styling.
- Jest for testing.
- Webpack for module bundling.
The movie lists use infinite scrolling. If more movies are available, they are appended to the list when the user scrolls to the bottom of the page.
The expanded movie card data (trailers, reviews etc) are cached so they only need to be loaded once (when the user first clicks on the card).
For the movie data, the TMDB API was used. This project was done within 2 days.
To build the Javascript source I useyarn
.
Run
yarn
to install the dependencies.
Run
yarn build
to get a build on dist
.
Run
yarn test
to run all the unit tests.
MIT for the source code.