The Shoppies

This project is designed as part of Shopify's Web Developer Intern Challenge - Fall 2021.

The Challenge

Design a webpage that can search OMDB for movies, and allow the user to save their favourite films they feel should be up for nomination. When they've selected 5 nominees they should be notified they're finished. The parameters include:

• Search OMDB API and display the results (movies only)
• Add a movie from the search results to our nomination list
• View the list of films already nominated
• Remove a nominee from the nomination list

Project

Live Link

Cally's Shoppies

Tech Used

• Focus: Mobile First
• Prototyping: Figma
• Libraries: React, Redux
• Compilers: SCSS
• API: OMDB API
• Database: Firebase

Prototype

Prototype
The application was designed in Figma as a mobile-first experience. I created a copy of components and interactions to get feedback regarding the UI/UX.

Walkthrough

1. Use the search bar above to find a movie that you like.
2. Click on the poster images to see more information about the selected title.
3. Select the star icon to add up to 5 movies to your favourites page.
4. Select the play icon to play the movie trailer.
5. Select the three dots icon to learn more about the movie on IMBD.
6. Use the navbar to see your favourites (heart icon), your past search (rewind icon) or to see Cally's picks (movie icon).

Comments

I had a ton of fun building this application. I wanted to use a mixture of React class and function components to see how they would interact with redux. After using a mixture of both, I would have to say I prefer using hooks with redux than with class components. However, I do feel they are both beneficial. I decided to store my favourite movies in a firebase database that people could see and also add to their list.

I decided to name the nominations as "favourites", because while they are nominations, it is more of a collection of our favourite movies.

I'm pretty happy with the error handling in the project. It took awhile but glad that it catches most issues.

Happy Shoppies!

Future

• I'd probably change the App class component to a function to use useEffect for the search results.
• Set-up a database for the user's favourites or have tally of all the users submissions.
• There is always more time for some styling.