Restaurant Reviews

Overview

I completed this for the Udacity Mobile Web Specialist Certification Course. This commit represents stage 3, the final stage in the course. The objective is to convert this static webpage to a responsive, mobile-ready web application which is in compliance with accepted accessibility standards and functional during limited or no internet connectivity.

Requirements

• ImageMagick is required to use the Grunt script to build the responsive images. The installation process is quite lengthy so if you don't want to build the responsive images, you can download them here. Just unzip in the project directory before running gulp. Otherwise here are the installation instructions for macOS (I've only attempted installation on macOS):

  • Make sure Xcode and the Xcode Command Line Tools are installed.
  • Downlaod and install MacPorts.
  • In a terminal run sudo port install ImageMagick to install ImageMagick. Be patient. Installation can take several minutes.

• Development also requires Grunt, Gulp, Browserify, ESLint and sailsjs. In a terminal, run these to install as needed:

  • Grunt: npm install -g grunt-cli
  • Gulp: npm install -g gulp-cli
  • Browserify: npm install -g browserify
  • ESLint: npm install -g eslint
  • sailsjs: npm install sails -g

API

The API is hosted on timothynelson.me. Currently it only supports GET requests as POST/PUT/DELETE would require a user login and that's a bit beyond the scope of the project (a least for now). As such, when attempting to submit data to the API, it performs as if it were offline: The data gets stored in IndexedDB and a snackbar message informs the user that the network is unavailable and data will be submited once connectivity is restored.

Project Setup

• In a new terminal window, clone this repo to your machine.
• cd into the project directory.
• Run npm install.
• Run grunt to build the responsive images.

Development

• Run gulp in the project directory. The page should automatically launch in your default browser. Modifying the html, js and scss files should cause the page to refresh automatically. Auditing in development mode will produce lower scores. See below for how to setup the project for auditing.