Skip to content

Progressive Web App to search books and news by content. Google Books API integration to search books. To search news and information the app consume the New York Times API. Unsplash API integration to get high resolutions pictures related with keywords.

Notifications You must be signed in to change notification settings

rproenza86/news-books-browser

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Built with pwa–starter–kit

News & Books Browser PWA

Check the webapp online here!

News & Books is a simple Progressive Web App. It uses Google Books API to search for books and Embedded Viewer API to display book content. It also use the New York Times API as source of news and information and the Unsplash API to get high resolutions pictures related with the key word.

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 NYTimes API, Unsplash API and 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.
  • <news-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.
  • <news-book-input-decorator>: Simple input decorator element in which the input's underline animates when the input is focused.

Features/Technical highlights

  • Hosting : Firebase
  • Differential Server Side Rendering(DSSR): Firebase
  • Javascript Framework: Polymer 3
  • Javascript version: ES6
  • Javascript libraries: Typescript for the DSSR, Gulp, Redux

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

Using npm v9.9.0 as requirement.

$ npm run build:prpl-functions

Using firebase as hosting and backend-severless provider. Using npm v6.11.5 as requirement.

$ firebase deploy --only hosting,functions

About

Progressive Web App to search books and news by content. Google Books API integration to search books. To search news and information the app consume the New York Times API. Unsplash API integration to get high resolutions pictures related with keywords.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published