Shopify Frontend Summer Internship Challenge 2021

• Challenge app
• Challenge specification

Features

The user may:

• Search movies (10 results max) by title
• Save their list of movies to local storage
• Learn more about each movie by clicking on its title and opening a modal displaying:
  • Movie poster
  • Release year
  • Director
  • Cast
  • Plot
  • Awards
• Go to each movie's respective iMDB page which is provided on the movie modal
• The application will automatically save the list on closing
• Animations have been added to show the user when certain actions are done such as
  • Trying to add 5+ movies
  • Saving list
  • More actions

Design

I designed this app on Figma using an extremely basic design system to follow consistancy.

• Figma file
• Desktop ptototype
• Mobile prototype

Development

• React
• TypeScript

Libraries used

• Styled components
• Polaris components (search bar & modal)

General notes

All components except for the search bar and modal were developed from scratch and implemented based on the design system that was made as part of this challenge.

The application is fully responsive on mobile devices and it has an accessible score of 97 as tested by Google lighthouse. This was achieved by using semantic elements as well as proper aria labels for actions.