/mws-restaurant-client-complete

My solution for the Google Mobile Web Specialist Nanodegree, including all three stages. No JS or CSS framework used. Only ES6, Flexbox, Media Queries, PWA with Service Workers and IndexedDB 🎓

Primary LanguageJavaScript

Mobile Web Spacialists Nanodegree

My solution for the Google Mobile Web Specialist Nanodegree.

Getting Started

Clone this repository and follow the instructions: https://github.com/munkacsitomi/mws-restaurant-server

Before start please make sure the backend is running!

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

Prerequisites

Install node.js LTS Version: v8.11.3

Install Gulp globally

npm install -g gulp

Install Http server globally

npm install -g http-server

Installing

Install node modules

npm install

Run locally

Now we can start the project with Gulp

gulp

With your server running, visit the site: http://localhost:8000

Developer Notes

If you want to generate new images you need to setup some tools first.

  1. Install ImageMagick brew install imagemagick
  2. Install GraphicsMagick brew install graphicsmagick
  3. Now you're able to generate new images: gulp resize-images

Requirements for Stage 1

  • All content is responsive and displays on a range of display sizes.
  • Content should make use of available screen real estate and should display correctly at all screen sizes.
  • An image's associated title and text renders next to the image in all viewport sizes.
  • Images in the site are sized appropriate to the viewport and do not crowd or overlap other elements in the browser, regardless of viewport size.
  • On the main page, restaurants and images are displayed in all viewports. The detail page includes a map, hours and reviews in all viewports.
  • All content-related images include appropriate alternate text that clearly describes the content of the image.
  • Focus is appropriately managed allowing users to noticeably tab through each of the important elements of the page. Modal or interstitial windows appropriately lock focus.
  • Elements on the page use the appropriate semantic elements. For those elements in which a semantic element is not available, appropriate ARIA roles are defined.
  • When available in the browser, the site uses a service worker to cache responses to requests for site assets. Visited pages are rendered when there is no network access.

Requirements for Stage 2

  • The client application should pull restaurant data from the development server, parse the JSON response, and use the information to render the appropriate sections of the application UI.
  • The client application works offline. JSON responses are cached using the IndexedDB API. Any data previously accessed while connected is reachable while offline.
  • The application maintains a responsive design on mobile, tablet and desktop viewports.
  • The application retains accessibility features from the Stage 1 project. Images have alternate text, the application uses appropriate focus management for navigation, and semantic elements and ARIA attributes are used correctly.
  • Lighthouse targets for each category exceed: Progressive Web App: >90, Performance: >70, Accessibility: >90.

Requirements for Stage 3

  • Add a form to allow users to create their own reviews: In previous versions of the application, users could only read reviews from the database. You will need to add a form that adds new reviews to the database. The form should include the user’s name, the restaurant id, the user’s rating, and whatever comments they have. Submitting the form should update the server when the user is online.
  • Add functionality to defer updates until the user is connected: If the user is not online, the app should notify the user that they are not connected, and save the users' data to submit automatically when re-connected. In this case, the review should be deferred and sent to the server when connection is re-established (but the review should still be visible locally even before it gets to the server.)
  • Users are able to mark a restaurant as a favorite, this toggle is visible in the application. A form is added to allow users to add their own reviews for a restaurant. Form submission works properly and adds a new review to the database.
  • The client application works offline. JSON responses are cached using the IndexedDB API. Any data previously accessed while connected is reachable while offline. User is able to add a review to a restaurant while offline and the review is sent to the server when connectivity is re-established.
  • The application maintains a responsive design on mobile, tablet and desktop viewports. All new features are responsive, including the form to add a review and the control for marking a restaurant as a favorite.
  • The application retains accessibility features from the previous projects. Images have alternate text, the application uses appropriate focus management for navigation, and semantic elements and ARIA attributes are used correctly. Roles are correctly defined for all elements of the review form.
  • Lighthouse targets for each category exceed: Progressive Web App: >90, Performance: >90, Accessibility: >90.

Lighthouse Report