The Shoppies - Movie Award Nomination App

2021 Shopify Internship Challenge

• A Movie Nomination App For The 'Shoppies' Awards. Searches the OMDB API for movie titles. Users then nominate their favourite 5 titles from the search results lists.

• Built for the 2021 Shopify UX/Web Developer Internship Challenge.

Check out the deployed version HERE

Features

• Built using React, Axios, Storybook CSS, and HTML

• Utilizes The OMDB Open Movie Database API to search for movie titles.

• Live Search Bar Feature - Movie search results update on the page as characters are typed.

• Fully Responsive for optimal viewing on large and small devices.

• Subtle animations on a number of events help to draw subtle user attention to important items and events.

• When there are no nominations - Instructions are displayed in nominee panel.

• Top 5 searches are displayed. Click on the Nominate button to add to the nomination list.

• Once a movie is nominated - The button is disabled to prevent duplicate nominations.

• Nominations can also be removed by the user.

• A counter displays how many nominations currently exist out of the required 5.

• When 5 movies have been nominated -> The submission button becomes active and allows for user submission.

  Final Product

  Home (No search Items or Nominees)

  

  Home (With Search Items and 5 Nominees)

  

  Submission Animation Page

  

  Design and Development

• My goal with this project was to create both a modern and simple UI that reflects the elegance and prestige of a movie award event like the Academy Awards. I wanted it to grab the attention of the user while remaining highly accessible.

• The colors, fonts, text/border shadow, and animations all add to the award nomination experience.

• I wanted the app to be highly functional and fully responsive and placed a large focus on making that happen. The applications makes sure that users can not add more than 5 movie nominations, and also checks all search items agains the nominee list to disable buttons if the title and the year are a match.

  Some Future Goals and Improvements

• There are a lot more features that I would like to eventually add to the project. Here are a few of them.

• 1. Email Form to send users their nominee lists and implement back end to persist data in a server side DB.

• 2. A popup on page load which explains the awards, nomination process and how the site works.

• 3. Show Movie Posters and additional information than the title and year. The API offers alot of info and it would be nice to utilize more of it.

• 4. Show more than 5 search items at a time. Again, this means a layout change to handle the larger amount of content.

Getting Things Running

• Fork and Clone the Repository
• Run npm install

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.