This project is designed as part of Shopify's Web Developer Intern Challenge - Fall 2021.
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
- Focus: Mobile First
- Prototyping: Figma
- Libraries: React, Redux
- Compilers: SCSS
- API: OMDB API
- Database: Firebase
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.
- Use the search bar above to find a movie that you like.
- Click on the poster images to see more information about the selected title.
- Select the star icon to add up to 5 movies to your favourites page.
- Select the play icon to play the movie trailer.
- Select the three dots icon to learn more about the movie on IMBD.
- Use the navbar to see your favourites (heart icon), your past search (rewind icon) or to see Cally's picks (movie icon).
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!
- 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.