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.
HERE
Check out the deployed versionFeatures
-
Built using React, Axios, Storybook CSS, and HTML
-
OMDB Open Movie Database API to search for movie titles.
Utilizes The -
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.