Neighbourhood Maps React Project

Live Website

Table of Contents

• About the Application
• Application dependencies
• Getting Started
• How to Run the Application
• Production mode
• Utilites and Assests
• Resources
• Built with
• Technologies
• Contributing

About the Application

A Neighbourhood Maps React Project which is a web application with mobile and offline first approach that is responsive and works offline.Conforming with the web accesibilty standard this single page application shows a map with markers representing some points of interest in Mumbai City. The app interface is such that the user can click on a marker on the map or on a list item in the toggleable side menu to display an info window with details of that place.User can also search specific places with a search input provided on the sidebar.

This single page application uses asynchronous API requests utilizing the Google Maps API and FourseSquare API and uses error handling wherin data requests that fail are handled gracefully using common fallback techniques.

Application-dependencies

        This application Requires Active Internet Connection to Run

Getting Started

• To run the project you will need Node.js installed on your machine, which comes with npm , a node package manager.
• Visit the official page to download it and read more about it Node.js

How to Run the Application

1. Download the zip folder and unzip it.
2. Open the main folder
3. Do the of following two steps to get this app running
   i. In this folder open the terminal , cd to current folder and type npm install to install dependencies.
   ii.Then, type npm start into the terminal after the installation is complete.
4. A new window will be opened visting http://localhost:3000 in your default browser.
5. With your server running, You can also visit the site: http://localhost:3000 in your preferred browser.
6. To disconnect simply close your terminal.

Production mode

• To create a production mode use npm run build or yarn build
• This will build the app for production to the build folder.
• It correctly bundles React in production mode and optimizes the build for the best performance.
• For more info Refer create react app documentation The build is minified and the filenames include the hashes.
• By default, it also includes a a service worker so that your app loads from local cache on future visits.

Utilites and Assests

Google Maps Api

The project makes use of the Google maps api service to display the map of the chosen neighbourhood.

Fouresquare Api

The data retrieved for each places are supplied by FoursquareAPI a local search and recommender-system service. Attribution are credited on each infowindow displayed when the user clicks on a marker.

Utils

• Axios
• sort-by
• escape-string-regexp
• Fontawesome
• Favicon
• prop-types

Resources

1. Integrating Google Maps in React using script tags and ref node

• making-google-maps-work-with-react
• Google Async defer
• handling-google-maps-in-async-and-fallback

2. Fallbacks and Error Handling

• error handling in react
• componentdidcatch-lifecycle-method

3. Asynchronous API Requests

• api request with axios
• axios api request react

4. Google Maps Api Resources

• markers
• infowindows

5. React Learning

• Create React App
• Building with React
• React thinking-in-react
• React
• React faq-functions
• React reactive-state
• CSS
• react smooth sliding menu react motion
• conditional-rendering
• handling-events
• callback-functions-in-react

Built with

This project was bootstraped with create react app

Technologies

• Visual Studio Code Editor
• React.js
• Javascript
• HTML
• CSS

Contributing

Any suggestions are welcome.