Capital One Software Engineering Summit Movie App Submission

What is this?

This is my application to the Capital One Software Engineering Summit.

I was tasked with completing a coding challenge which involved implemeting the OMDb API to retrieve movie details like release date, director, awards, etc. I had to create a webapp that can surface movie information using the OMDb open database API.

It allows the user to search for movie titles and view different statistics including Runtime, Director Name and Year Released. The user can filter by year the movie came out and view multiple pages of results by pressing the "Show More" button at the bottom of the page.

View the project: https://fperalta-ses-movie-app.netlify.app/

Walkthrough

SES.Movie.App.-.Google.Chrome.2021-06-20.15-21-49.mp4

SES.Movie.App.-.Google.Chrome.2021-06-20.15-23-01.mp4

SES.Movie.App.-.Google.Chrome.2021-06-20.15-24-02.mp4

SES.Movie.App.-.Google.Chrome.2021-06-20.15-24-59.mp4

SES.Movie.App.-.Google.Chrome.2021-06-20.15-50-09.mp4

Mobile Screenshots

Technologies Used

OMDb API to return movie values and details

React for building the webapp user interface

Challenges I Faced

1. Initally I tried created the movie app using HTML, CSS and Vanilla Javascript. I got stuck when trying to fetch multiple API pages so I thought to switch to React. I haven't developed an application that was being published before this app so it was interesting using React to develop this Movie Web App.

2. I struggled to effectively resize the Poster for the movie details due to the varying sizes of the Movie Posters. The mobile version does a good job at rendering these posters effectively, but the web app does have some issues resizing the images when the brwoser is resized.

3. After switching to React, I found a way to loop the API calls with the pagination aspect of the app and allow the user to view more than 10 movie titles at once. The OMDb API only allows 10 titles to be rendered at once so this feature was a necessary part of the app. I did this by connecting the API call loop to the pagination aspect of the app.

4. I continued to work towards allowing the app to accept multiple API calls and allowed the app to accept empty values by returning a message that says "Movie Not Found" and accepting empty posters by returning an image that states "Poster Not Available". Inside of the Movie Details, it also accepts empty values for the details such as the Runtime and Genre. If these data fields are not available for a specific movie, it will return a text like this.

Genre: N/A

Runtime: N/A

5. I couldn't figure out how to implement search suggestions or allow the user to go back to a previously searched page because of the API calling.

6. I only learned how to commit to Github 2 days before this app was due but I eventually learned how to commit from VS Code and how to create an interactive ReadMe file with videos and hyperlinks (Yay to success!!).

Accomplishments

I tried to bring forth a quality user experience in hopes of helping to keep the users intrigued when searching for different movies and accept all empty values to prevent a bad user expereince or an error screen.

I struggled using React to build this application but I found that building a web application from ground up and making it work efficiently is a very rewarding feeling. This was also my first time using an API, so it was a very interesting experience as well.

I also was exposed to React JavaScript and learned about API calls and information rendering.

Learned how to use Github effectively for version control.