Streamables is a project I built that users can use to find any show or movie and see what streaming service they can watch it on in Canada as well as view the trailer. For example if a show or movie is available on Netflix, it will take the user directly to that show or movie on Netflix's website/app. Users must have an account with the selected streaming service for the show or movie to be played.
Stack used: React, CSS, Netlify.
The purpose of this project was mainly because I wanted to practice my React knowledge of props, state, and React hooks as well as making API calls in React. I've always wanted to build an app that I can personally use to tell me where I can watch a specific show or movie in Canada.
The biggest challenge I faced for this project was how to hide my API keys. At first I thought it would be enough to just hide them in an .env file but I learned that isn't good practice. To solve this, I did some research and learned that it's best to have a backend server to hide that information however, I didn't have any backend knowledge yet. I watched some Youtube videos and set up my own backend server using Node.js and Express however, I couldn't get my API calls to work the way I wanted with my limited backend knowledge. I discovered that Netlify has serverless functions which work as API endpoints that run automatically when called and used that to hide my API keys and fetch data from the APIs I used.
Another challenge I faced was with the original API I planned to use. I knew at the base of my project, I wanted to display what streaming services the shows and movies were on in Canada and take the user directly there. The API I used for that was Utelly however they didn't have the details I wanted to display to the user when they clicked on the show or movie they were looking for. To solve this, I had to use 2 more APIs, OMDb to display the show or movie details and IMDb to get the trailer for the user's selected choice.
The last challenge I ran into was when poster images were not available from the OMDb API for the searched show or movie. To solve this, I added my own placeholder "Poster not available" image if the poster from the API didn't exist.
I really enjoyed building this project as I learned a lot and it forced me to challenge myself to build something I didn't entirely know how to build at first. It taught me to find and come up with solutions to some of the challenges I faced detailed above and to have an attitude of perseverance and resilience.
This project helped me solidify my React knowledge/skill and it taught me how to manipulate props, states and hooks in unique ways to display information to users the way I wanted.
It also taught me a valuable lesson about why and when it is important to have and use a backend. Through this, I got the opportunity to discover serverless and Netlify functions and how they handle the server-side code.
Lastly, I learned about debouncing and why it's important for projects like this because you don't want to be making an API call for every letter a user types into a search bar.