Create a webpage that can search OMDB for movies, and allow the user to save their favourite films they feel should be up for nomination. See details
- (Primary) Allow user to nominate five movies see movie nominations
- (Secondary) Search movies from OMDB to nominate
- Vue + TypeScript front-end development library
- Halfmoon UI design framework
- GSAP - GreenSock animation library
- fontawesome icons
- OMDB API for searching movies
- Keep UI clean and visually appealing (W3C-compliant), and only show most relevant info depending on user's intent.
- Landing page:
- Allow user to see the movie nominations as the primary objective of the application.
- Convey only 5 nominations are required using empty nomination cards.
- Searching:
- Searching (secondary objective) for movies to nominate is possible by clicking on an empty nomination card.
- Full-screen modal allows user to search and see results (movie titles, year, and poster) when user intends to search. Using full-screen allows search results to be comprehensive, allowing user to easily identify movies.
- Choosing a nominee from the results automatically closes the search modal and shows the nomination on the main screen.
- Cross (x) button on modal allows user to dismiss the search modal. Also possible with Esc key (intuitive for many users).
- Removing nomination is possible by clicking on a cross (x) icon at the top-right of the nomination card in the main screen.
- App's logo and colors should represent relation to the Shopify brand.
- Limited and meaningful animations to represent flow of information. No animation is longer than 120 milliseconds.
- User's nominations are saved locally, i.e. reloading page does not empty the list.
- Dark mode available (duh!). Button to switch between dark/light modes prominently displayed on the main page.
- Search results are cached to prevent repeated calls to API with the same query.
- Responsive design to allow use on mobile devices.
Install:
npm i
Run locally (http://localhost:8080 default):
npm run serve
Deploy to GitHub pages:
npm run deploy