This is a single page application from Udacity Front End Web Developer Nano-Degree. It uses React, Google Maps and FourSquare to present a map of breweries in the downtown San Diego area.
The application functions as follows:
- Clicking on a marker will open info on that venue.
- Markers may be closed using "x" or closed when a new info window is opened.
- Clicking on a venue in the sidebar will open an info window on the map marker. Clicking any new venue in the sidebar will close any open info window.
- The search bar will filter all venues and corresponding map markers dynamically, as typed, depending on the query string being searched. Search filtering is based on venue name.
The application map and locations are based on use of Google Maps API. Venue information is based on data from Fourquare API.
The application also uses axios to simplify API calls to FourSquare.
The single page application is accessible and responsive.
Service worker is functional only after application is put in production with run npm build
To run the application, follow these steps:
- Download the repository to your local machine
- Install all project dependencies with
npm install
- Start the development server with
npm start
- Open up localhost:3000 in your browser
References and attribution is given in code comments for certain functionality approaches used.
This project was bootstrapped with Create React App. You can find more information on how to perform common tasks here.