The Final Hour

Picture this moment; you’ve gone through a rigorous training, working 60 hours a week on coding for five months straight. You’ve built full stack applications using a Rails backend, and a React/Redux frontend. You’ve conquered the hills and valleys of learning to code, the frustration and the reward for it all to come down to this one moment…….the live coding.

My application for my final project was a watchlist app. A user, once signed in, can access their own personalized watchlist where they can keep track of all the movies they would like to see. Once they’ve seen a particular movie they can add that movie to their “watched” list, which was a separate tab. For this app I pulled from two different endpoints off of the TMBD API. An endpoint to get the top 20 streaming movies of the day, which I featured on my homepage and a search option where a user can search through the TMDB’s extensive database of over 750,000 titles.

Now, for the live coding challenge(cue dramatic orchestral music). My instructor gave me 15 minutes to implement a like feature on every movie off the homepage(where the top 20 streaming movies were featured).

After much debate, I decided to create a separate component called Likes. This would be class component since I would need to have a localized state that I could manipulate. From there I created a state with a key of likes and a value of 0. In my return statement for the Likes component I returned the current state, and then added an onClick event listener to the state. The onClick called on an increment function. Now, I had to build my increment function. This function basically added one to the current state, and woila! I was almost there.

In this particular app, I had a container component that was fetching from the api and then mapping over that data and passing it to a presentational component as a prop called Movie. Since I wanted each movie to have this “like” feature I imported the Likes component in my Movie Component and then just placed it right next to the movie title, and that’s it! I successfully mounted a like feature in 15 minutes. Here’s the code!

Also, link to my project on git: https://github.com/Dmg5th/Watchlist_Frontend