photo of restaurant reviews app site

Restaurant Reviews App

This project, for Udacity's Mobile Web Specialist Nanodegree, had to pass code review at each of it's three stages. I refactored existing code to make the app responsive, accessible, performant, and available offline. This was a JavaScript-heavy project. I gained experience working with someone else's code and refactoring to improve performance and add new features to the application. I also wrote a lot from scratch, which helped improve my JavaScript and error handling skills.

  • Stage 1: Made app responsive, accessible, available offline with service worker
  • Stage 2: Used fetch API to access server data, used indexedDB to cache restaurant data
  • Stage 3: Added a working form, ability to mark restaurants as favorites, took steps to raise lighthouse scores above 90

Project Details

  • Progressive Web Application
  • Lighthouse Performance Scores above 90
  • Offline-first code: with Service Worker and IndexedDB
  • Responsive design
  • Accessible code
  • HTML5, CSS3, Flexbox
  • JavaScript and Grunt

See the Code

The app includes the main search page, and individual restaurant review pages.

Responsive Design

I made all content display on a range of media sizes utilizing available screen real estate. I also used responsive images sized appropriately depending on what viewport size the app is opened in. Below is a sample of some of the changes I made.

Accessible Code

Fetching Data & Offline Availability

I refactored existing code to fetch data from the server, add form data to the server, activate a service worker to cache site assets and open an IndexedDB in the browser to store the restaurant and review data, so that visited pages are rendered when there is no network access.

New Features and Performance

Along with a review form, I added the option for users to save restaurants as favorites, and saved that data to local storage. I also made changes to improve performance, the biggest being lazy loading photos using intersection observer and adding a static map on page load that switches to an interactive google map when clicked.

See the Code