BooksxMovies

Home/Title Page
Add movies and books you love to the list
Book Recommendations For "Top Gun"
Movie Recommendations For "Top Gun"

Inspiration

“There's a hundred and four days of summer vacation Then school comes along just to end it So the annual problem for our generation Is finding a good way to spend it…” -Dan Povenmire, Phineas and Ferb Theme Song

With school out, many students have finally received their long-deserved summer break. However, now there is the predicament of how to spend this time. With the COVID-19 pandemic still posing a substantial threat to public health, cautious citizens must take into account the dangers of spending a lot of time in crowded areas, and instead consider activities to enjoy at home. And even for others who spend a good block of the time outside at the beach or hanging out with friends, there is an inevitable need for some alone time once a while—curling up in bed, reading an intriguing book, and/or watching your favorite movie. There are endless book and movie options within grasp, but how do we know which entertainment items will meet our satisfaction?

With so many choices available, many kids and adults waste time trying to figure out what to read or watch, or even give up on reading or watching anything altogether in frustration. Thus, we were determined to develop a website that takes a user’s personal preferences and gives them back a list of books and movies that they will love! Keeping us safe, saving time, and having fun is our mission.

What it does

Every book or movie can be reduced to a few variables: genre, plot synopsis, length, and review score. Due to the time constraints, we were forced to eliminate comparing genre and length, instead opting for using a transformer to convert plot summary into an array and getting the iMDB score for movies and a different rating for books. When inputting the book or movie into the search, these variables are scraped and found using APIs, then the website uses K-Nearest Neighbors, a similarity-measuring algorithm, on these variables to find similar books or movies the user might like based on their search.

How we built it

For the front end, we started by coming up with a domain name, a general color theme, a favicon, and a logo. Then we moved on to sketch out the format of our website on paper and transferred our ideas to code using HTML, CSS, and JavaScript. Using HTML, we classified the layout into different divisions and laid down the text, images, and buttons. We then proceeded to use CSS to alter the color, position, margin, font, display, etc in order to make our website look more visually appealing. Lastly, we used JavaScript to make the interactive elements of the website such as buttons and text boxes work. For the backend, we used API calls to get sets of books and movies, saved them to the file, and parsed them for the variables of encoded sentences and review coordinates. The books came from the New York Times books, while the movies came from OMDb.

We then used K-Nearest Neighbors, an algorithm comparing a point in a multidimensional plane of variable numerical values to other such points, using a calculation of the closest ones to find how they should be classified or how similar they are. The closest points to the input to our site would be books and movies related to it, giving smart recommendations for what to consume next.

For a more in-depth explanation of how we built the backend, read our GitHub's README.

Challenges we ran into

As novice web developers that only took a crash course in HTML and CSS, our frontend team was met with many difficulties. We were perplexed by the naming conventions of relative and absolute placement of images and objects. Similarly, the constant need for us to adjust CSS elements in order for them to not overlap and display in an aesthetic manner required lots of patience and practice. We also had trouble using the JavaScript element visibility to make certain items hidden and only appear when a button is pressed; we debugged issues using the alarm function to tell us when we “should see” the item appears. For the add books and add movies table there was a problem in making the user-inputted movie appear under the add movies table as it could not determine if the input was a book or movie.

For our backend, we encountered our first problem regarding API rate limits. We grabbed data from a webpage (New York Times) and put it into a file. However, because of the rate limit, we could only request once every 6 seconds, hence a lot of run time. We solved this by letting this run overnight so all of the data is collected by the morning. Further, we originally planned to use a sentence encoder that was based in Tensorflow but when we tried to install it, something went wrong with an optimization module. In the end, we abandoned Tensorflow and used a different AI model called sentence_transformer.

The greatest challenges, however, came while integrating our web development with the recommendation algorithm, where suddenly incompatibility became evident in our JSON file containing our data and our javascript file, and we suddenly realized we could neither reverse search through our current data without arduous effort nor encode the query into a tensor without downloading a multitude of large package and module frameworks with heavy learning curves. Basically, we could not access our crucial data in Javascript due to time and knowledge constraints, as well as conflicting opinions/documentation online.

Accomplishments that we're proud of

Despite our frequent gnarly problems and the pressing time constraint, we made an aesthetic, interactive website where you can add your books and movies, and a knn program that takes a book or movie and outputs more recommendations, learning many new things along the way.

Furthermore, we generated over four thousand movies and two thousand seven hundred books in our database. This ensures that our users would have high-quality recommendations that would be custom tailored to their taste.

What we learned

With not much experience in developing functioning websites, we learned the new language of JavaScript. We also learned how to structure a website with HTML and make colors, images, and text look appealing to the eye using CSS. We learned how to use the visibility element in JavaScript to make items hidden and only appear when a user completes a certain action such as pushing a button. We adapted to changes in language, new structures, and new modules to integrate, and found useful manipulation and obtaining of data from APIs.

Some further difficulties we encountered when developing the backend came when working around API rate limits from the New York Times API. To mitigate its effects, we ran the program concurrently with others. We also took some time to find sentence encoders to make tensors for our model. We moved away from using Tensorflow and to Python’s sentence_transformer module. For dealing with the resulting data, we could not use Javascript without spending valuable time trying to make packages work, and instead, we used Python to read the JSON better, in our alternative showcase of what the website could do.

What's next for BooksxMovies

Looking into the future, we have plans to cover more corner cases to make the website more user-friendly. For example, improving our recommendation model to be more accurate by including more variables in genre, length, and readability (Lexile). We also plan on adding a login feature so users can save their information more easily. We could also implement a preview system for the books on the website. To make our website more comprehensive, we are also considering our recommendation algorithm to consider other entertainment methods such as music and online games. Furthermore, we also plan to publish our website on its own domain name so it can be accessed by the public.

Our website should be friendly to people of all ages, so we would love to put our hackathon project to use for the social good by sharing it with friends and family.