Shoppies is a mobile-friendly web application that allows users to search for and nominate movies.
View live application: Shoppies
(Note: may be a slight delay for the app to load)
Front-End: HTML, SASS, JavaScript, React, Semantic UI
Back-End: Nodejs
API: OMDb API
Required
- 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
Additional
- Animated buttons for nominate and remove buttons
- Nomination list is saved to user's local storage
- Debounce on search functionality to improve app performance
- Users can click on 'Start Nominating' button and it will automatically focus on search bar input field
- Submit button is displayed once user has 5 nominations
- Modal popup confirming submission success
Homepage
Nominations
Nominations Complete
This project requires the OMDb API key to use, please see: http://www.omdbapi.com/apikey.aspx
-
Fork this repository, and clone your fork of the repository
-
Install the dependencies with
npm install
-
Create the
.env
file by using.env.example
as a reference:cp .env.example .env
-
Once the dependencies are installed, run
npm start
-
In your browser, go to
localhost:3000
-
Start nominating!
- Classnames
- Dotenv
- Node-sass
- React
- React-dom
- React-scripts
- Semantic-ui-css
- Semantic-ui-react
- Web-vitals