Live URL of Movie Recommendation Application
Introduction
This is our movie trailer platform.
This is where you can be the next potential movie critic and enthusiast.
Our users get to view more movie trailers they can possibly comprehend to find the next perfect movie
for them. Using and integrating Youtube API and OMDB API, you get access from blockbuster films
to hidden gems to movies 20 years old and beyond.
What makes us unique and different from other sources is that you’re not just a viewer but you’re
also a creator. By choosing and saving your favorite movies you get to create a trailer environment
that is just specifically enhanced and handpicked for you.
Easily save your favorite trailers, creating a personalized collection that perfectly reflects your
unique taste. It's a personalized library that you’ve hand chosen to be your own movie sanctuary.
Our platform is more than just watching trailers and discovering your next favorite trailer, its a
community, allowing you to go out into the world and engage with fellow movie enthusiasts and
watch new trailers together.
Allow our website to help you uncover hidden gems and cinematic treasures to find new movies and new
recommendations with the latest data and movies . This is just a beginning, we are constantly
working to improve and enhance user engagement.
It’s like a free show where you can access as many captivating and user engaging trailers
you may possibly desire.
Motivation for development
We created this project because of the increase in the current movie market and to create a user
friendly environment to help individuals to browse trailers and choose specific movies they would prefer.
The rising popularity of streaming services in todays time increases the demand to not only websites
that show movies but also sites that offer specific space to be able to view and discover new movie
trailers that match their taste.
Adding and partnering with movie streamers or potentially starting our own with a subscription would
be a great way to further enhance this project. Movie trailers are also a great way to engage and
captivate user audiences pulling them into their own movie world. Our website and our motivation also
lies in the great diversity within our site.
Allowing discover films they might have otherwise never known existed, or a genre they might like which
they had not thought about. With today’s consumer behavior of preferring bite size and visually
appealing content, our website is ideal as it allows users to watch trailers and decide on their own
weather they’d like to go view this movie.
Another reason for this project is by adding these external API’s, alongside with meeting project
requirements, we’ve been able to integrate high quality content for users and allows them to find exactly
what they are looking for.
User Story
Being the movie enthusiasts that we are, we were aiming to create a website that makes it easier for
us to view and easily navigate through an extensive collection of movies to pick and chose.
We also wanted a way to save possible movies into local storage to be able to revisit them at our
own convenience, for when we obtain a chance to view and watch a movie.This website allows me curated
section for my chosen trailers, allowing me to save and revisit at my own discretion.
It enables me to easily explore endless movies, many unheard of, all while keeping the website engaging.
Project Requirements
You and your group will use everything you’ve learned over the past six modules to create a real-world
front-end application that you’ll be able to showcase to potential employers.
The user story and acceptance criteria will depend on the project that you create, but your project must
fulfil the following requirements:
- Use a CSS framework other than Bootstrap.
- Be deployed to GitHub Pages.
- Be interactive (i.e., accept and respond to user input).
- Use at least two [server-side APIs] https://coding-boot-camp.github.io/full-stack/apis/api-resources
- Does not use alerts, confirms, or prompts (use modals).
- Use client-side storage to store persistent data.
- Be responsive.
- Have a polished UI.
- Have a clean repository that meets quality coding standards (file structure, naming, follows class/id naming, indentation, quality comments, etc.).
- Have a quality README (unique name, description, technologies, screenshot, and deployed application).
Presentation of the Project
Group 2 Presentation of Project: [Movie Recommendation Website] https://docs.google.com/presentation/d/10QaO9KH8HtUXj__81ve0SZcpO5DbMbqqQr4iPpbwKks/edit?usp=sharing
to address the following:
- Elevator pitch: a one minute description of your application
- Concept: What is your user story? What was your motivation for development?
- Process: What were the technologies used? How were tasks and roles broken down and assigned?
What challenges did you encounter? What were your successes? - Demo: Show your stuff!
- Directions for Future Development
- Links to the deployed application and the GitHub repository
Technologies & Sources used for the project
(1) The structure of the document is defined using HTML5 elements
(2) Iframes: the source pointing to embed YouTube videos for movie trailers.
(1) Flexbox: to create flexible box layouts for class elements & aside
(2) Flex Direction: to control the direction of the flex container's main axis.
(3) Hover Effects: to add transitions and style changes on hover
(4) Scrollbar Styling: to custom styles applied to scrollbar elements by using:
(a) webkit-scrollbar, webkit-scrollbar-thumb, and webkit-scrollbar-track pseudo-elements.
(5) Transition Effects: applied for smooth animation effects in certain interactions.
(6) Positioning: to use positioning elements, and z-index to control the stacking order of elements.
(7) Cursor Styles: to change the cursor style on buttons.
(8) Object Fit: to control how an image or video should be resized to fit its container.
(9) Opacity: to control the transparency of certain elements.
The Bootstrap framework is included via a CDN link
https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css
https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
(1) The code extensively uses jQuery for DOM manipulation, AJAX requests, and event handling.
(a) Promises: used for handling asynchronous operations, such as AJAX requests.
(b) Scroll Animation: using jQuery to smoothly scroll to a specific element.
(c) Event listeners: to handle various user interactions, such as button clicks/search bar actions.
https://code.jquery.com/jquery-3.4.1.min.js
https://code.jquery.com/jquery-3.6.0.min.js
https://code.jquery.com/jquery-3.7.1.min.js
via a CDN link:
https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js
https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js
The code interacts with the Open Movie Database (OMDb) API to fetch movie data.
https://www.googleapis.com/youtube/v3/search?part=snippet&q=${encodeURIComponent(query)}
https://www.googleapis.com/youtube/v3/videos?id=${videoId}&part=contentDetails&key=${apiKey}
https://www.youtube.com/embed/${videoId}?start=${startTime}&autoplay=1
The code uses the YouTube API to search for movie trailers and fetch details.
https://www.omdbapi.com/?apikey=${omdbApiKey}&s=${searchTerm}
https://www.omdbapi.com/?i=${movie.dataset.id}&apikey=7b82484f
https://omdbapi.com/?s=${searchTerm}&page=1&apikey=7b82484f
Local Storage.Stringfy: browser's localStorage to store and retrieve favorite movies.
Directions for Future Development
An aspect for future development is to add watch history to allow users to be able to find a possible
movie that they may have “lost”.
This website can also be enhanced by adding additional API’s to fetch live user reviews and ratings
based on certain movies. We intend to continuously enhance our website possibly creating a mobile
application, so users will be able to watch trailers for potential movies on the go and save for later
preference.
We can also go ahead and potentially create partnerships so our website is redirected to a possible movie
website such as Netflix or Disney+. Another possibility for future development is to add a downloading
feature to allow users to download their favourite trailers for offline viewing to allow them to access
on possible travels so they know which movie is next on their watch list.
For other possibilities is adding a real time virtual watch parties to allow users to be able to to watch
and chat in real time. If possible they may be allowed to rate movies in real time.
If this website is a success we can proceed to add an additional website to present the actual movies
people would like to watch, and possibly adding a cheap user friendly website that allows individuals
to save and present movies to their peers. This would mean an addition of being able to share trailers and
websites on multiple social platform.
Overall there’s potential for this website to grow in multiple directions that will have to be tackled
one at a time.