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.
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.
About
The Shoppies - Movie Award Nomination App - Shopify Internship Challenge 2021. Built with React, Axios, Sass and utilizes the OMDB api.