The Shoppies Awards is a challenge project completed for the Fall 2021 Shopify UX & Web Development Internship. It is a single-page responsive web application that allows users to search for movies and nominate them to Shopify's new movie award show: The Shoppies.
View live application here: The Shoppies Awards
Front-End: TypeScript, React, HTML, SASS, Axios, Material UI
Back-End: Node.js
API: OMDb - The Open Movie Database
- Search results should come from OMDB's API.
- Each search result should list at least its title, year of release and a button to nominate that film.
- Updates to the search terms should update the result list
- Movies in search results can be added and removed from the nomination list.
- If a search result has already been nominated, disable its nominate button.
- Display a banner when the user has 5 nominations.
- Responsive web design for desktop, tablet, and mobile view.
- Nomination card badge showing number of nominees currently in users' list.
- Disable all nomination buttons with prompt to submit or remove nominees when user has 5 films.
- Auto-search functionality with debounced input to optimize event handler and app performance.
- Result card call-to-actions clear result list and/or auto-focus to search bar input field for new search.
- User confirmation dialog when submitting or clearing nomination list.
- Disable submit button if nomination list has not changed from previous submission.
- Axios
- Classnames
- Material UI
- Node-sass
- React
- React-dom
- React-scripts
- Typescript
- Web-vitals
Note: This project requires an OMDb API key. Please visit http://www.omdbapi.com/apikey.aspx for more information.
-
Fork this repository, and clone your fork of the repository.
-
Install dependencies with command:
npm install -
Create a
.envfile using.env.exampleas a reference:cp .env.example .env -
Insert OMDb API key into
.envfile -
Once all dependencies are installed, run
npm startto start the server -
In your browser, go to
localhost:3000 -
Nominate away!