Beer Maps

For Udacity’s Maps project, we needed to incrementally convert a static webpage to a mobile-ready web application. In Stage One, I took a static design that lacks accessibility and converted the design to be responsive on different sized displays and accessible for a screen reader to use. I  also had to add a service worker to begin the process of creating a seamless offline experience for the users.

Specification

The final project for Udacity’s Front End Course is to build a React App From Scratch. The App is supposed to have a list of Restaurants but I decided to do Breweries in Miami, Fl instead. Since Ya girl Loves Beer and craft beer is part of the Miami Scene!

The map is generated by the Google Maps API. The list of restaurants is generated by a call to the Foursquare API Search endpoint. A second API request is made when a location is clicked to get details about the Brewery, including address, phone, price point, user tip and an image as well. A link to the brewery’s Foursquare page is also provided for more information for the user.

Technologies used for this project:

HTML, CSS, JavaScript, React, Google Maps: Get API Key, Foursquare Api

Project
GitHub Repository

Screenshots of the site