neighborhood-map's Introduction

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:

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.

Recommend Projects

klassmann / neighborhood-map Goto Github PK