Neighborhood Map React Project

This project is developed using Google Map API and React. The initial location data (to load onto the map) is being fetched from Foursquare third party API. You can filter the location from the text filter section and the map markers & place listings will be updated on real-time based on the input text. Also you will be able to get the details about each place by selecting the place from the listing or by clicking on the individual map markers.

Table of Contents

• Getting Started
• Project URL
• Create React App
• Folder Structure
• Prerequisites
• How to launch the app locally
  • Installation
• Deploy to gh-pages
• Offline Use and Service Worker
• Thirt Party APIs
• Resources
• Author
• Acknowledgments

Getting Started

You need to set up the application before you can see it running live in your browser. Please check the installation section to know more.

Project URL

• https://gauravsinghaec.github.io/FEND-Neighborhood-Map-React/

Create React App

This project was bootstrapped with Create React App. You can find more information on how to perform common tasks here.

Folder Structure

Your project folder should look like this:

├── README.md - This file.
├── package.json # npm package manager file. It's unlikely that you'll need to modify this.
├── .eslintrc.json # eslint configuration settings
├── public
│   ├── favicon.ico # React Icon,
│   └── index.html # DO NOT MODIFY
├── build It contains the production ready code
└── src
    ├── App.css # Styles for your app.
    ├── App.js # This is the root of the app.
    ├── GoogleMap.js # React Map component
    ├── PlaceList.js # React place list component
    ├── Toggle.js # A React component for hamburger menu
    ├── registerServiceWorker.js # registers service worker in production environment
    ├── index.css # Global styles.
    └── index.js # It is used for DOM rendering only.

Prerequisites

• ES6, Promises, REACT, Service Worker, A11y

How to launch the app locally?

Installation

1. Clone the Project - https://github.com/gauravsinghaec/FEND-Neighborhood-Map-React.git
2. Go into the directory where the project now lives - cd FEND-Neighborhood-Map-React
3. Install the dependencies - npm install
4. Start the app - npm start

The application will be running at http://localhost:8000 URL

Deploy to gh-pages

1. Add the following scripts in your package.json and also add the "homepage":

"homepage": "https://.github.io/",

"scripts": {

• "predeploy": "npm run build",
• "deploy": "gh-pages -d build", }

2. Install the gh-pages module to create gh-pages branch on github during deployment.

>>>npm install --save gh-pages

3. Deploy the app - Below command is used to deploy the React app to the gh-pages but before that we need few pre-requisite.

>>>npm run deploy

4. Now there will be a new branch in your GitHub repo "gh-pages" where the build files will be present and do check the gh-pages section in GitHub repo setting to see the hosted URL.

• You can get all the info about deployment here. Also don't forget to check the Resources below.

Offline Use and Service Worker

By default, the create-react-app includes a service worker in the production build. Do check the below steps to see service worker in action after production build

1. Build the app to generate production version and test.

npm run build

2. Now the build folder will look like below:

3. Static Server - Set up your favorite HTTP server so that a visitor to your site is served index.html. For environments using Node, the easiest way to handle this would be to install serve and let it handle the rest:

>>>npm install –g serve
>>>serve –s build

4. Service Worker running in the browser.

5. Service Worker caching main.{hash}.js, main.{hash}.js and index.html for offline access.

Thirt Party APIs

• Foursquare API We are loading the neighbouring locations for a given place (using its lattitude, longitude) from this API. The places received are shown in the place listing and hence on the Map.

Foursquare fetch API url
"https://api.foursquare.com/v2/venues/search?ll=22.5726,88.3639&client_id=<YOUR_CLIENT_ID>&client_secret=<YOUR_CLIENT_SECRET>&limit=25&v=20180707"

Here I am using Kolkata Coordinate 22.5726° N, 88.3639° E to get the neighboring locations

• Wiki API We are fetching the wiki data from this API about each place and hence showing in the infowindow when marker is clicked on the map.

Wiki fetch API url
"https://en.wikipedia.org/w/api.php?&origin=*&action=opensearch&search=Belgium&limit=5"

Resources

• Google Maps JavaScript API V3 Reference
• Google Maps Markers
• Google Maps Infowindow
• All aria-* attribute
• WebAIM Checklist for Accessibility
• Color Contrast Checker
• MediaWiki API help
• Foursquare API endpoints
• Google Map and React
• React componentDidUpdate lifecycle event
• Writing Scalable React Apps with the Component Folder Pattern
• Throttle and Debounce used for input field
• react-throttle
• Refs in React

Authors

• Gaurav Singh

Acknowledgments

• Special thanks to Udacity Team