Skip to content

Latest commit

 

History

History
67 lines (45 loc) · 2.07 KB

README.md

File metadata and controls

67 lines (45 loc) · 2.07 KB
Raw

Fend Neighbourhood React Map

This is the eighth project from Udacity's Front End Nanodegree.

It utilises React's create-react-app template and the Google Maps API to create an app that shows a series of interesting locations at the greek city of Thessaloniki.

How to run the app:

The app has a development and a production mode. You need to follow the steps below to access each mode:

Devolopment mode:

  • Download or clone the repository
  • Install all dependencies with npm install
  • Start the server with npm start
  • Visit http://localhost:3000

Production mode:

  • Download or clone the repository
  • Install all dependencies with npm install
  • Build and start the server with npm build
  • Visit http://localhost:5000

Note that the service worker is only available in the production build of the app.

(More on the production build: https://reactjs.org/docs/optimizing-performance.html)

General Info:

  1. The project was created with the create-react-app: https://github.com/facebook/create-react-app

  2. The project uses React: https://reactjs.org/

  3. The project uses the Google Maps API: https://developers.google.com/maps/documentation/

  4. The project fetches data with the Wikipedia API: https://www.mediawiki.org/wiki/API:Main_page

  5. Kudos to the code sandbox editor that allowed me to develop this app in a public computer: https://codesandbox.io/

Dependecies:

The project was created with:

  • escape-string-regexp
  • fetch-jsonp
  • google-maps-api
  • react
  • react-router
  • react-router-dom
  • react-scripts

Component Hierarchy

<App />
--- <Filter />
--- <Infowindow />
  • The App starts the google map and stores the wikipedia api (fetch jsonp)
  • The Filter component is filtering the markers and the locations (according to the search bar)
  • The Infowindow component is based on the wikipedia api and displays content from the wiki page of each location

Future changes:

Those are things I don't have the time currently to do so they are written here for future documentation.

  • Put a slide menu to the app with links to sources
  • Change the map styles of this app