Watch a virtual tour of the app here
Try out the Shoppies App here!
Description:
This app was created for the shopify frontend intern coding challenge. The app allows you to search the OMDB API and nominate your top 5 movies for the illustrious "Shoppies" award.
- App was depoyed and hosted on Netlify
- This app was built with React using Styled Components
Favourite Features:
- This app is fully responsive and works on mobile.
- Cards use a "parrallax" hover effect adapted from Daniel Sinclair's Repo
- The custom Shoppies logo designed by me!
How I Failed Forward:
- I initially had a lot of challenges getting the website to be fully responsive. The containers were resizing in all kinds of funny ways! I had to do a lot of googling, and experimenting until I finally figured it out!
- The parallax effect did not work right away. I had to do a little bit of tweaking (remove some of the layering effect), and design changes (add onClick to the div) to get it to work properly.
What I Learned:
- I learned how to use media queries in React components to implement the responsive movie cards.
- I learned how to deploy a website using netlify.
- I learned how to work with an API and best practices for storing my API Key when uploading to a public repository.