A front-end application for book lovers.
View Demo
Paperbound is a web application built using Vue.js that allows users to search for their favourite book titles and browse their various book cover editions.
Being an ardent reader, I was always looking out for ways to enhance the user experience of book readers like me who wish to browse their favourite books online without taking away the joy of picking them up physically from their shelves. Thus, this is a front-end application that is meant to be a user experience design case study of challenging myself to explore the ways to improve the user experience for online book browsers.
- VueJS Framework
- Font Awesome icons
- Vanilla CSS for styling
- Open Library's suite of Web APIs (Books API, Search API & Covers API)
- Jest for unit testing
Clone the repository using Git.
$ git clone git@github.com:faithtanlh/paperbound.git
Once downloaded, open the terminal in the project directory and install project dependencies:
npm install
npm run serve
npm run build
npm run test:unit
The Home page is designed by implementing a stack of ShelfRow custom components (see ShelfRow.js). Using Vue's <slot> elements, each ShelfRow component contains three slots into which three template elements can be conditionally rendered. These slots are placed as inline-block elements, under which a Shelf custom styled component (which appears as a 2D shelf representation on the webpage) is rendered. Thus, ShelfRow components mimic the behaviour of bookshelves, whereby slots can be used to "place objects".
These ShelfRow components are used to conditionally render new Book components (which represent books and appear as book covers on the shelves) upon fetching data from the API endpoint (see HomeView.js).
Whilst the data is being fetched from the Covers API, a loading spinner is displayed underneath the search bar, which provides users visibility of system status. This was implemented using a listener fetched that returns true only when the fetch Promise has been fulfilled.
Book components have on hover animations that mimic the action of picking up books from shelves. This effect was done by animating the component through upwards translations and skew parameters.
To create a more seamless user experience, vertical fade-out Vue router transitions were used when routing from one page to another, which complemented the overall vertical geography of the Home page.
The back navigation element on the BookDetails page allows users to easily navigate backwards to the Home page. A scale animation was set on hover to provide additional feedback that the element is clickable.
When navigating back to the Home page from the BookDetails page, the previous search results are re-rendered and the search bar will contain the user's prior search inputs. A smooth scroll animation after back navigation enables the user to scroll down to their last scroll position before they had navigated away from the Home page.
This design feature was made to allow users to quickly revisit the progress of their book search, and this was implemented using local storage (to store fetched data and search input values) and Vue Router's route meta fields (to store scroll position parameters).