Skip to content

Neighborhood Map (React) with use of Google Maps + Foursquare APIs

License

Notifications You must be signed in to change notification settings

dimikara/React-Neighborhood-Map-3

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Depfu Depfu

React

Neighborhood Map Project

Table of Contents

Overview

I built a single page application featuring a map of some important sights in Thessaloniki, Greece, the city I live in. I added functionality to this map including highlighted locations, third-party data about those locations and various ways to browse the content.

Specification

The goal of this project was to build a single page map application using React & Google Maps API, plus to integrate a third-party data API and make the app accessible and usable offline.

How to run the project

To run the project in the development mode, follow the instructions below:

Download or clone the repository in your computer:

$ git clone https://github.com/dimikara/React-Neighborhood-Map-3.git

In the repository folder:

  • install project dependencies with
npm install axios --save
npm install react-burger-menu --save
npm install escape-string-regexp --save
  • start the development server with
npm start

To run the project in the build mode, follow the instructions below.
Run:

npm run build

This command builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

  • Using a static server

For environments using Node, the easiest way to handle this would be to install serve and let it handle the rest. Run the commands:

npm install -g serve
serve -s build

The last command above will serve the project on the port 5000 so just open http://localhost:5000 to run the production build of the project.

Important

Please note that the Service Worker providing offline capabilities works only in the production build.

Supported Browsers

By default, the generated project uses the latest version of React.

You can refer to the React documentation for more information about supported browsers.

Dependencies & Tools Used

  • As a project generated with create-react-app, it includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency.
  • The project setup also uses Webpack for handling all assets, as Webpack offers a custom way of “extending” the concept of import beyond JavaScript.
  • axios, a promise based HTTP client for the browser and node.js. I used it instead of Fetch API.
  • react-burger-menu, an off-canvas sidebar React component with a collection of effects and styles using CSS transitions and SVG path animations. I used it to create the off-canvas sidebar.
  • Escape RegExp special characters.

APIs used

  • Google Maps API for the map.
  • Places API by FourSquare, for the info fetched upon clicking a sight marker.
    I chose the Get Venue Recommendations, which returns a list of recommended venues near the current location.

Credits & Helpful Links

Screenshot

Screenshot

Next Steps

  • Deploying the project live in GitHub Pages.
  • Improving the styling & general design to make the app more appealing. Add more color to the menu & design.
  • Implementing a better way to handle the list of sights.
  • Use more APIs to fetch more info about the sights. For example, Wikipedia, or maybe photos by Flickr.
  • Make the list of sights more focused, for example, getting only sights of archaeological or other interest.