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.

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

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

Start the app - npm start

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

Deploy to gh-pages

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”,
  }
Install the gh-pages module to create gh-pages branch on github during deployment.
```
>>>npm install --save gh-pages
```
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
```
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

Build the app to generate production version and test.
```
npm run build
```
Now the build folder will look like below:
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
```
Service Worker running in the browser.
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=&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“
```