The Shoppies

Is a challenge project by Shopify and attempted by Felix Rioux Sabourin.

Prompt & Requirements

Shopify has branched out into movie award shows and we need your help. Please build us an app to help manage our movie nominations for the upcoming Shoppies.

The Challenge

We need a webpage that can search OMDB for movies, and allow the user to save their favourite films they feel should be up for nomination. When they've selected 5 nominees they should be notified they're finished. We'd like a simple to use interface that makes it easy to:

• Search OMDB and display the results (movies only)
• Add a movie from the search results to our nomination list
• View the list of films already nominated
• Remove a nominee from the nomination list

Click here to view full challenge

Extra features

• The nomination list is saved and retrieved from local storage using the custom hook useLocalNominations
• A "Clear Search" button is provided to quickly reset the search terms and clear the search results
• API is called 200ms after the user has finished typing to prevent from hammering the endpoint
• API and helper functions are tested in the src/__tests__/ directory
• The app is responsive and functional on any device size

Instructions

Setup

1. Fork and/or clone project
2. Get a free API key for the OMDb API
3. Copy .env.example to root of project and rename to .env
4. Assign your API key to the variable REACT_APP_OMDB in your .env file

To start the project in developmnent mode:

yarn && yarn start

To run tests:

yarn test

To see the project in production mode:

https://felix-shoppies.netlify.app/

Used in this project

Stack

• React.js
• Scss
• Bootstrap/Reactstrap
• styled-components
• Axios
• Prettier
• Eslint

Testing

• React Testing Library
• Jest
• Faker
• MSW

Icons

• ionicons

API

• OMDb