https://github.com/rproenza86/news-books-browser
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.
https://github.com/rproenza86/news-books-browser
differential-ssr es6 polymer3 pwa-apps redux typescript webcomponents
Last synced: about 2 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/rproenza86/news-books-browser
- Owner: rproenza86
- Created: 2018-07-22T03:36:20.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-23T13:40:25.000Z (almost 7 years ago)
- Last Synced: 2025-04-12T23:47:32.546Z (about 2 months ago)
- Topics: differential-ssr, es6, polymer3, pwa-apps, redux, typescript, webcomponents
- Language: JavaScript
- Homepage: https://news-and-books-browser.firebaseapp.com
- Size: 905 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: news-books-browser.code-workspace
Awesome Lists containing this project
README
[](https://github.com/Polymer/pwa-starter-kit "Built with pwa–starter–kit")
# News & Books Browser PWA
> [Check the webapp online here!](https://news-and-books-browser.firebaseapp.com)
**News & Books** is a simple Progressive Web App. It uses [Google Books API](https://developers.google.com/books/docs/v1/reference/volumes/list) to search for books and [Embedded Viewer API](https://developers.google.com/books/docs/viewer/reference) to display book content. It also use the [New York Times API](https://developer.nytimes.com/) as source of news and information and the [Unsplash API](https://unsplash.com) to get high resolutions pictures related with the key word.
Additionally it uses [OAuth 2.0](https://developers.google.com/identity/protocols/OAuth2UserAgent) 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](https://github.com/Polymer/pwa-starter-kit). Using the starter-template as the starting point and the [wiki](https://github.com/Polymer/pwa-starter-kit/wiki) for configuring and personalizing.
## 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](https://developers.google.com/identity/sign-in/web/reference#googleauthsignin)
- OAuth 2.0 authorization to access Google APIs via [Google API Client Library](https://developers.google.com/api-client-library/javascript/reference/referencedocs)
- 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](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition) to search by voice.
- Shimmer placeholder while content is loading.
- 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.
- ``: Simple rating element.
- ``: 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.
- ``: 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
```bash
$ 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
- Enable Books API and create OAuth client ID
https://developers.google.com/identity/protocols/OAuth2UserAgent#prerequisites
- Set the OAuth client ID in the application [here](https://github.com/PolymerLabs/books/blob/master/src/actions/auth.js#L24)
## Build and deploy
Using npm `v9.9.0` as requirement.
```bash
$ npm run build:prpl-functions
```
Using firebase as hosting and backend-severless provider.
Using npm `v6.11.5` as requirement.
```bash
$ firebase deploy --only hosting,functions
```