/critics-versus-people

See the difference between critic and audience opinion for your favourite movies! Built using React, Bootstrap and Sass.

Primary LanguageJavaScriptMIT LicenseMIT

MIT License


Critics vs. The People Logo

Critics vs. The People

Compare critic and audience reviews for all your favourite movies!
Try it Out! · Report Bug or Request a Feature

About The Project

A web application that compares the aggregate score given by viewers and reviewers for a particular movie on the Open Movie Database.

The application delivers a memorable user experience on top of a simple concept, with the application aiming to maximise time spent on site. It's designed to be immersive, with neon colours presented against a pitch-black background. It also has a sense of humour, with load spinners and the initial page view accompanied by randomly generated phrases. The functionality is kept to a minimum to provide an excellent experience on smaller screens.

Aside from using the project to learn React, this was also the first project I developed using TDD, using Jest as well as React Testing Library.

Built With

JavaScript React Bootstrap npm Jest React Testing Library Sass

(back to top)

Getting Started

To get a local copy of Critics vs. The People up and running, follow these simple steps.

Prerequisites

Install npm on your machine.

npm install npm@latest -g

Installation

  1. Clone the repo 
    git clone https://github.com/jackmulligan-ire/critics-versus-people.git
  2. Install NPM packages 
    npm install
  3. Launch the development server 
    npm start

Your local version of Critics vs. The People should now be available at localhost:3000

(back to top)

Usage

Movie Ratings

The following information is provided for each movie: its Metacritic (“Critics”) and IMDB rating (“The People”), as well as a short description and its poster (if available). An IMDB link is also provided, with this opening up a new tab to not break the user’s visit on the site.

Initial Screen

Critics vs. The People Initial Screen

An initial screen hints at the concept of the website, with a motto pitting critic and viewer opinion against one another. Many of these phrases are available, with a random number generator determining which one is shown each time.

Responsiveness

Critics vs. The People Mobile View

The application is made responsive through a mixture of Bootstrap’s default declaration and Sass files that set custom breakpoints for very small and very large screen sizes.

Load Spinner

Critics vs. The People Load Spinner

All movie data is sourced from the Open Movie Database API, so it was necessary to include some form of load spinner. To prevent the immersion in the app from becoming broken, a phrase is also placed under the spinner. Multiple of these phrases are available, with one being selected at random on each call to the API. A timeout of 1 second is included on the get request to the API, so that the load phrase remains visible just long enough to be read by the user.

Error Handling

Critics vs. The People Connection Error

Two sources of error are accounted for: connection errors and incorrect search terms. An error screen is in-place for both scenarios, with a search bar in the site’s navbar allowing the user’s experience on the site to continue.

(back to top)

Roadmap

  • Convert codebase from JavaScript to TypeScript.
  • Increase testing coverage to mock the OMDb API.
  • Second page showing data on movies with biggest differences in critical and audience reviews.
  • Convert codebase to from React Class Components to Functional Components (Hooks).

(back to top)

Contributing

If you have a suggestion to improve Critics vs. The People, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

You can also feel free to log bugs under Issues.

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Jack Mulligan - LinkedIn - Email

(back to top)

Acknowledgements

(back to top)