Work
HTML,
JavaScript,
CSS,
Google APIs,
.csv sorting,
and String Similarity API.
Bookworm
A web application in which you can keep track of your books and get algorithmically selected recommendations for new books.
Bookworm
I love reading. I've read countless books, in all genres and spread across many authors. However, I realized I had exhausted my reading list and wasn't sure what I wanted to read next. I went through a process of using books I'd already read and enjoyed to find a new book, and realized I could automate it and make it publicly available.
The Process
To begin, I looked through Kaggle and found a dataset of seven thousand books, which included data on the name, author, page numbers, reviews, Google Books API link for a thumbnail, descriptions, ISBN numbers, and more. I then set up the basic UI structure of the page, incorporating animations and auto-scrolling. The main interest here is certainly the back-end, so I'll go in depth.
The program uses JavaScript's built in function of localStorage very heavily. The dataset of books, along with all their attributes, is temporarily stored on the user's browser. This allowed me to use completely build-in resources (excluding the APIs), rather than setting up an external dataset. The only downside to using this method is that some browsers refuse the website to store that much data (hundreds of thousands of lines!), and the website fails. However, this is not an issue for any browser I have tested on, including Chrome, Safari, Opera, Firefox, and on mobile browsers as well. It's simply an issue that will likely not be problematic for anybody, but it's good to know about.
Quick Note: localStorage is only able to store strings, and I was trying to store objects (books). Therefore, I utilized JSON.stringify, which turns an object into a string. Then, I utilized JSON.parse when accessing these stringified objects from localStorage, which converted them back into objects.
Second Quick Note: localStorage saves your data, even when you close the tab, close the browser, and even restart your computer. Therefore, you will never lose your list! However, you will be unable to access your reading list on another browser or device, and you will have to re-enter it.
The "Add Your Books" page works by storing the name of the book you typed in, and then scavenging the dataset for that specific book. If that book is found, it is added to a variable called "userBooks", along with all of its attributes. This variable is then uploaded to localStorage, and then accessed later in other pages.
The "Home" page has a few functions; it shows an estimate of how long the user has read and it acts as a connector to all other pages. The time estimate is calculated by using the time it takes an average reader to read the amount of pages the user has read. The algorithm knows how many pages the user has read by accessing the userBooks variable and summing the number of pagers of each book object.
The "Your Reading" page is the most simple: it accesses the userBooks variable from localStorage, parses it back into an array of objects, and then edits the HTML code to display the name of the book, the author, and the thumbnail.
The "Get a Book" page is the most complex. It uses an algorithm to give a score to each book of likelihood of user enjoyment. For each category the book has in common with any of the user's books, that book will get one point added to it's score. If the name is similar enough to any of the user's books, that book will get one + however similar the names were (between 0 and 1) added the it's score. If the author is the same as any of the user's books, it will get a point. Lastly, the average review of the book will be added to it's score (between 0 and 5). The book with the highest score will be displayed to the user at the top of the list, and the program will show three books. Each of the books it displays will have a name, author, and thumbnail. The name and author will be a link, and when clicked, will automatically scroll down to the bottom of the page where the description of the book can be found.
The Result
I think that the web application came out quite well. It's aesthetically pleasing, moves smoothly, and works efficiently. There are only two main drawbacks of the website - the first of which is that it only can use those seven thousand books. You cannot input books that are not on the list, and it cannot recommend books that are not on the list. The other is that it does not work perfectly with mobile. The UI I designed cannot scale to that small of a size, and the name, author, and thumbnails that are displayed get partly cut off. Therefore, it's highly recommended to use the website on a laptop, tablet, monitor, or any device bigger than a phone.
