Film Watchlist

Inspiration

This project is a simple project inspired by my need to store all the movies I intended to watch in a central place. As a result, I decided to utilize what I learned about firebase, and frontend to put FindWatchlist together.

What it does

This website makes API calls to OMDB when the user searches for a movie on the website. The API returns the titles, ratings, plot ... and other information about the movie the user searches. There is also an option to add the movie to the watchlist for each movie. This button makes calls to Google Cloud Services (Firebase) to store the data in a real-time database. When the user goes to the Watchlist page (which is linked in the top-right corner of the home page), the site loads all the data saved in the watchlist database from Firebase and displays it to the DOM. The user is then able to see all the movies they have saved to watch later. Additionally, the user is able to delete a movie if they don't want it part of their watchlist anymore. This also deletes it from the database on Firebase.

How we built it

I originally had this idea a couple of weeks ago, while learning about APIs, but after learning about Firebase, I was able to implement the idea. As said earlier, I built this using OMDB API and Firebase.

Challenges we ran into

A slight challenge I ran into was importing Firebase into JavaScript. Because I was running it on a site, the module kept giving me errors for importing Firebase. Eventually, I figured out that I had to import it from a site rather than the module 'firebase/app'. Figuring out the styling and dynamic display was also challenging.

Accomplishments that we're proud of

I'm proud that I was able to learn and create the project in the amount of time I did. It required a lot of debugging and learning things on the fly, but I did it.

What's next for Film Watchlist

• I hope to implement some sort of chat system in the site to allow AI to recommend films to users.
• I could also include filters so users can search for films by year, rating, etc.
• I could redo the UI, such that the results from a movie search are displayed in pages rather than continuous vertical scrolling

Built With

• css
• firebase
• html
• javascript
• omdb-api