akyya-mayberry / locations

Project 7 of Grow With Google Udacity Frontend Nanodegree

Munchie Surf

This application displays a list of 5 liqour store locations in Haight Ashbury where you can get munchies/snacks.

This project was bootstrapped with Create React App. It uses react-google-maps library for integrating with Google Maps, and Yelp Fusion API for retrieving details about store locations. To work solely client-side with Yelp Fusion API, a free web proxy located at 'https://cors-anywhere.herokuapp.com', is being used.

Getting Started

The below instructions will walk you through setting up and running this application.

For the project to build, these files must exist with exact filenames:

• public/index.html is the page template;
• src/index.tsx is the JavaScript entry point.

The application is written in Typescript and uses jsx, so various source files you will notice have a .tsx exetension to reflect this.

1. Clone the repository and change into it's directory
2. Grab the dependecies by running npm install

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
There is a known bug where after changes are made 'react-google-maps' library cannot be found. The solution is to stop the app and relaunch it.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Service Worker For Offline Access:

This application offers a limited offline experience by use of a service worker in both development and production. Both uses the service-worker-dev.js worker located in the public folder at the root of the project. To disable the worker, comment out the registration code in index.tsx. Alternatively, to run the service worker only in development or production make changes the registerServiceWorker.js file.

Supported Browsers

By default, the generated project uses the latest version of React.

You can refer to the React documentation for more information about supported browsers.

This particular application is recommended to be used in Google Chrome.

Contributing

Contributions are not being accepted at this time.

locations's Issues

display list of selected locations

Application should have a list view of sorts that displays a list of all locations by default.

yelp api errors need to provide UI update

The yelp api request errors should be handled using .catch() method and also use .alert() inside it to give the user a visible message about the error.

error handling for apis

When api's are unreachable UI should alert user to issue.

offline usage

The app should have some functionality even if there is no internet access. At a minimum a map should be displayed with markers for each location.

update readme

Readme should do a better job of crediting API's used. It should also let users know that service workers are in place. It should mention the difference in the service worker running in production vs development.

Display location details

When a location is selected from the list view or a marker is selected on a map, a pop up of the store details should be shown. There should also be a way for users to close the info box.

accessibility

The app be accessible for usage with screen readers etc.

display store markers on map

Markers for each of the default stores should display when the map loads. Clicking on one of the store markers should animate that marker.

A separate issue will be open to display details about a store location when it's marker is clicked.

filter location list

User should be able to filter the list of location. When use applies a filter, the list should be updated.

Dropdown menu should filter list

To better user experience, when selecting a marker or a location from the dropdown menu, the list of locations should filter.

google maps handle errors

Handle the google map API error and give the user a visible message about that error

include more details about locations

More details should be included about a location. Write now it just displays the name, picture and phone number. I nice addition will be store hours or if they are currently open.

add yelp recognition to app

In the app, credit should be given to Yelp as the details about location is pulling from that API. A nice image will do well in the info window.