Diverse Lit

As a former bookseller, customers frequently asked me for books by authors that looked like them. DiverseLit solves this problem by helping people filter through books by Asian, Black, Indigenous, and Latinx authors.

I created this project using React and two APIs by Biblioshare. (Thanks Booknet Canada!) The Biblioshare Image API is used to pull in all of the initial cover images, and an internal JS object is used to store categories, book ISBNs, author name and titles.

Home page of Diverse Lit. Shows a header, navigation and hero image of books. There is a dropdown menu which filters books underneath.

When the user clicks submit after selecting a filter, only the books with the correct key are displayed. From there, the user can select any book to get additional information. Here, React Router is used to generate different url endings, based on each book ISBN.

As the user clicks into an individual book page, a final API call is made to the API, grabbing book cover images, descriptions, and publisher information. Using regular expressions, the data is formatted correctly and appended onto the page.

A grid of books with book title and author name underneath

Next Steps

  • - Add more filters! Different sexualities, disabilities and more
  • - Change filters to a toggle option rather than dropdown
  • - Account for more data. Ie, multiple authors, illustrators
  • - Optimize amount of API calls used
  • - Be able to sort by multiple filters at once
  • - Add error handling for when data from publishers does not contain data that I use
Back to top