Shopify front-end internship challenge 2021

^{PS. The idea was to create an icon which clearly shows that the application is a part of the Shopify brand. Please don’t sue me 🙇‍♂️.}

↗ See demo

🎯 Objective

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

Breakdown:

• (Primary) Allow user to nominate five movies see movie nominations


• (Secondary) Search movies from OMDB to nominate

⚙ Tech stack and tools

• Vue + TypeScript front-end development library


• Halfmoon UI design framework


• GSAP - GreenSock animation library


• fontawesome icons


• OMDB API for searching movies

🎨 UI/UX goals

1. Keep UI clean and visually appealing (W3C-compliant), and only show most relevant info depending on user’s intent.
2. 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.
3. 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).
4. Removing nomination is possible by clicking on a cross (x) icon at the top-right of the nomination card in the main screen.

   Extras

5. App’s logo and colors should represent relation to the Shopify brand.
6. Limited and meaningful animations to represent flow of information. No animation is longer than 120 milliseconds.
7. User’s nominations are saved locally, i.e. reloading page does not empty the list.
8. Dark mode available (duh!). Button to switch between dark/light modes prominently displayed on the main page.
9. Search results are cached to prevent repeated calls to API with the same query.
10. Responsive design to allow use on mobile devices.

Using code locally

Install:
npm i

Run locally (http://localhost:8080 default):
npm run serve

Deploy to GitHub pages:
npm run deploy