The scope of this assignment was pretty broad: create a website with a list of something that can be filtered, sorted, and favorited. Since I'd redesigned Project Gutenberg earlier in this class, I thought I'd continue working with books. And so Already: a super simple reading list, was born.

The competition

The first site I looked at for inspiration was of course Goodreads, the most popular reading list website. But since it's mainly focused around user-curated lists (and discovery in general, which this app doesn't try to tackle), there aren't many options for filtering. So I also took a look at Amazon and Spotify, two huge sites with list aggregation interfaces that have probably had millions of dollars in investment.

From this research, I had two main takeaways:

1. For the aggregation list, having a very small number of useful aggregated lists (e.g. "Shopping Cart" and "Save for Later") is easier for a user to understand than a ton of configurable lists.
2. Books have few parameters that are easily filtered and sorted. Search is one of the few filters that's useful on an entire dataset of books. Based on that search, though, filters like "Genre" can have dynamic values (similar to Amazon's filters which change based on your search).

The website

Considering the assignment's time constraints, a big motivator for my design was simplicity. A black and white color scheme lets the book covers pop. Limiting the book lists to the ones shown above helps streamline the user flow. I stole borrowed a lot of the 3D book cover implementation from libra.re.¹ Data is persisted with JSON.stringify()—not the most performant, but enough for the assignment.

There are 3 filters: search, subject, and ebook availability. Search isn't done in React; it's part of the Open Library API (more on that later). Subject is a dynamic filter: the 5 most frequent subjects in each set of search results are offered as filters. Ebook availability is simple: a book has an ebook or it doesn't.

For sorting, there are four criteria: Relevance, Title, Author, and Date. Relevance is the default order returned by the API, and the others are implemented in React.

The filtering UI

As mentioned above, I implemented three aggregation lists: To Read, Reading, and Already Read. Each has its own section in the Bookshelf tab, and all three are summed in the badge in the tab selector.

The bookshelf UI

The data

Already uses books pulled from Open Library as its content. Using external data wasn't part of the assignment. So why did I add all that complexity? I wish I could say I just decided to go above and beyond the specifications of the assignment. But the real reason is, having spent hours designing the interface, I realized too late that making up fake book data (including making fake covers) is a massive pain. And the OpenLibrary API was actually super easy to use, so it worked out great.

Search results from the Open Library API