The user may:
- Search movies (10 results max) by title
- Save their list of movies to localStorage
- Learn more about each movie by clicking on its title
- 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
I designed this app on Figma using an extremely basic design system to follow consistancy.
- React
- TypeScript
- Styled components
- Polaris components (search bar & modal)
All components except for the serach 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.