New York City Restaurant Reviews PWA Web App

Features

• The application uses Responsive Web Design with Flexbox mostly, CSS Grid sparingly and Media Queries heavily.

• Responsive design is carried out keeping content in mind. Breakpoints are set according to content look as per screen starting from the smallest 300px device-width.

• Accessibility techniques such as use of semantic HTML, roles, ARIA attributes, managing focus have been carried out throughout the application along with skip links for both the pages as well. Care was taken to make sure most of the interactive elements used were native HTML elements.

• The 10 images in the first page are lazily loaded with the help of Intersection Observer.

• For performance optimization, the styles were loaded asynchronously with the help of media and onload attributes of link tag. This will prevent render blocking.

• Service Worker has been used extensively to cache different types of files such as HTML, CSS, JavaScript, json, mapbox files, images and places them accordingly into static or dynamic caches.

• Shows interactive street map of 10 restaurants located with NYC's 5 boroughs. For getting data related to restaurants and reviews through separate calls, for performance, if the user is online the data for both are fetched as network then cache strategy otherwise, the fallback strategy cache then network is used. This technique helps to revalidate the cache with latest content in the client's offline storage.

• IndexedDB is used with the help of Jake Archibald's idb library. Kudos to Jake!

• The "Review Form submission" and "Favourite a restaurant" features are built with custom Background sync. Even if user enters data while offline, The data is stored into IndexedDB while offline and then it goes to server. Online and Offline events were tracked carefully! Progressive Web Application (PWA)

• A generic Toast class was created from scratch alongwith css for informing users when they are online or offline. If user comes back online from offline state, the background sync for the specific tasks which user did are run and a toast message is shown in the app when the tasks finish syncing with the server.

• The Gulp build tasks have been written from scratch with custom requirements kept in mind. Delete old build from dist folder, Minification, bundling, support for latest ES6 syntax including import and export, css browser compatibility, WebP image generation from JPG images, gzipping, serving cached files with max-age set to 1 year via gulp serve, all have been carried out to bring out the most optimal performance of the application. Use gulp build to build the app.

• API driven website. All data is stored as JSON objects on remote database server.

Table of Contents

1. About
2. Requirements
3. Technology
4. Getting Started
5. Versioning
6. License
7. Contact
8. Screenshots

About

Uses the fetch() API to make requests to the remote database server to populate the content of this Restaurant Reviews app.

For the Restaurant Reviews, it is a a mobile-ready web application featuring a responsive, accessible design connected to an external JSON REST API server.

1. Use asynchronous JavaScript to request JSON data from the server.

2. Store data received from the server in an offline database using IndexedDB, which will create an app shell architecture.

3. Finally, the site has been optimized to meet performance benchmarks, using Lighthouse testing tool.

Back to top

Requirements

Uses remote server API data instead of local memory. Instead of all the restaurant data stored in the local application web server, the site is now pulling all of the data from a remote database server instead, and using the response data to generate the restaurant information on the home page and the detail page of the web app.

Use of IndexedDB to cache JSON responses. For offline use, the JavaScript service worker stores the JSON received by get requests using the IndexedDB API. All web pages that has been visited by the user are available for offline browsing, since the data is pulled from the users local web-based IndexedDB database instead of over the network.

The website meets minimum performance requirements as an offline app. This app has been verified by Google Lighthouse performance metrics in three areas.

1. Progressive Web App score is 90 or better.
2. Performance score should is 70 or better.
3. Accessibility score should is 90 or better.

This site's performance can be verified with Google Lighthouse by using the Audit tab of Chrome Dev Tools.

Technology

JavaScript

• Progressive Web App (PWA)
• Service Worker
• Indexed DB (IDB with Promises)
• Fetch API
• Cache API
• JSON REST API
• Sails.js Database server
• node
• npm

HTML

• Responsive Images
• HTML5 Landmarks
• ARIA A11y web accessibility

CSS

• Responsive Web Design (RWD)
• Cross Browser Testing
• Live Editing

Build Tools

• Grunt
• Gulp
• Yeoman Web App Generator
• Bower Components
• Lighthouse Web Auditing
• ES6 / JavaScript 2015 Module bundling
• Chrome DevTools
• VS Code
• Web Server Live Reloading
• ES6 / JavaScript 2015 Transpiling
• JavaScript Source Maps
• JavaScript Linting
• File Minification
• File Uglification
• git
• github.com
• Cmder

Style Guide Compliance

• HTML
• CSS
• JavaScript
• Git
• JsDoc3

Testing

• JavaScript Unit Testing
• JSON API Endpoint Testing
• JavaScript Profiling
• Web Performance testing

Back to top

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

What things you need to install the software and how to install them

node
npm
git

Dependencies

Refer to /package.json

Development Setup

npm install
bower install
gulp build
gulp serve

The application will be running at http://localhost:9000/ .

Local Development API Server

1. Fork and clone the server repository. You’ll use this development server to develop your project code.
2. Change the data source for your restaurant requests to pull JSON from the server, parse the response and use the response to generate the site UI.
3. Cache the JSON responses for offline use by using the IndexedDB API.

Get Restaurants

curl "http://localhost:1337/restaurants"

Get Restaurants by id

curl "http://localhost:1337/restaurants/{3}"

Architecture

Local server

• Node.js
• Sails.js

Usage

Start the server

# node server

You should now have access to your API server environment

debug: Environment : development

debug: Port : 1337

Versioning

Using SemVer for versioning. For the versions available, see the tags on this repository.

For list of the changes and updates, see the commits on this repository.

• 0.0.1

• Pull reviews data from new remote JSON API server endpoint

Contributing

1. Fork it (https://github.com/anthonyalvarez/mws-restaurant-stage-2a/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request

License

View license

Contact

If you find a bug in the source code or a mistake in the documentation, you can help us by submitting an issue to GitHub. Even better you can submit a Pull Request with a fix :)

• Anthony E. Alvarez – My GitHub
• Twitter: @AnthonyEAlvarez

Back to top

Screenshots

The screenshots below give a brief overview of the application features.

Lighthouse Audit Score was carried out in Chrome's incognito mode under localhost without HTTPS configuration.

iPhone 5SE View (Restaurants)

iPad View (Restaurants)

Desktop View (Restaurants)

iPhone 5SE View (Reviews)

iPad View (Reviews)

Desktop View (Reviews)

Offline Restaurants & Favourite Feature With IndexedDB

Offline Reviews With IndexedDB

Background Sync Favourite Toast

Background Sync Reviews Toast

Gulp Build

Back to top