Neighborhood Map

• About this project
• Features
• Requirements
• Usage
• Important Notes about uses of third-party libraries, scripts and tutorials
• License

About

This project shows a map of a neighborhood and its sights that I want to visit. The main goal is building a mashup between google maps and other services like foursquare, providing a useful map and information about the place.

Demo(without API keys, but the React app is working)

Note: The client secrets and ids changed. If you clone this repository create your own ids and secrets at Google and Foursquare.

Features

• Google Maps API
• Foursquare API
• React

Requirements

• Yarn
• NPM/nodejs (tested on Node v9.5.0)
• serve for testing production.

Usage

Start cloning the repository.

git clone https://github.com/klassmann/udacity-neighborhood-map.git

Inside the project folder, install the dependencies with npm.

npm install

Start the local server, It will open the browser automatically.

yarn start

Testing Production Version (with ServiceWorker support)

You need build before.

yarn build

And run the build.

serve -s build

Important Notes about uses of third-party libraries, scripts and tutorials

For helping me to integrate React with a Google Maps, I have been following some instructions and tips from this Blog post:

• How to Write a Google Maps React Component

I used some scripts from the tutorial, I copy them from this Gist:

• GoogleAPI.js
• GoogleAPIComponent.js
• ScriptCache.js

There is a complete project on Github, but I am using only the basic scripts. There are other components that a write following the instructions from the tutorial and I changed for my purposes.

I used this scripts and references because I am not advanced in React and I needed to follow some instructions to help me to understand how to load the Google API and React and how to use third-party components with React.

License

You can't use this project as your project for Udacity, but you can use for study purposes if you want.