/books

Primary LanguageJavaScript

Built with pwa–starter–kit

Books PWA

Books is a simple Google Books PWA. It uses Google Books API to search for books and Embedded Viewer API to display book content.

Additionally it uses OAuth 2.0 authorization to retrieve a listing of the Favorites on the authenticated user's bookshelf. As well as add/remove favorite on the authenticated user's bookshelf.

The app is built using PWA Starter Kit. Using the starter-template as the starting point and the wiki for configuring and personalizing.

books screenshot

Features/highlights

  • Show a basic search-list-detail flow.
  • Use fetch to send request to Google Books API.
  • Sign-in to Google account using Google Sign-In Client API
  • OAuth 2.0 authorization to access Google APIs via Google API Client Library
  • Display offline UI when fetch returns failure while offline.
  • And once it comes back online, automatically re-fetch and update the page.
  • Uses the SpeechRecognition API to search by voice.
  • Shimmer placeholder while content is loading.
    shimmer
  • Update the browser URL programmatically without causing page reload. In the app, we want to append query param to the URL when the search input’s value is committed.
  • Scroll to top on page change.
  • <book-rating>: Simple rating element.
  • <book-image>: Basic image element which fades in when the image is loaded. Also has a placeholder that can be used to put a base64 encoded data URL to create the “blur up” effect.
  • <book-input-decorator>: Simple input decorator element in which the input's underline animates when the input is focused.

Setup

$ npm i
$ npm start # or similar that serve index.html for all routes

Enable OAuth for list/add/remove favorites on the authenticated user's bookshelf

Build and deploy

$ npm run build:prpl-server

Download the Google App Engine SDK and follow the instructions to install and create a new project. This app uses the Python SDK.

$ gcloud app deploy server/app.yaml --project <project>