This is the eighth required project on the Udacity Front End Nanodegree.
Neighborhood map is a responsive web application that shows interesting locations in New York. These locations are displayed in an interactive map, as well as in a list (sidebar).
There is a search input (sidebar top) where the user can filter the list of locations. While filtering, not matching locations disappear from the list and the map. The map will automatically zoom in or zoom out to show all visible locations.
By clicking an item from the list or a marker the application will highlight it to indicate which one was selected. It will also set the center of the map to that location and display a small info window.
Marker's info window contains a button. On click, the application displays a gallery of photos (modal) related to the current location.
This project has four main React.js components:
- Header: app header.
- Sidebar: list of locations and filter.
- Gallery: display location photos.
- App: contains Google Map. It handles map & list interactions and fetch photos using Flickr API.
The following scheme shows how components are structured:
<App/>
├── <Header/>
├── <Sidebar/>
└── <Gallery/>- Download ⬇ or clone this repository.
- Install dependencies with
npm install. - Start the server with
npm start. - Visit
http://localhost:3000.
- Download ⬇ or clone this repository.
- Install dependencies with
npm install. - Build and start the server with
npm run serve. - Visit
http://localhost:5000.
It is available online at http://bycorsanchez.github.io/neighborhood-map.
- React.js
- Google Maps JavaScript API
- Flickr API
- Material-UI
- prop-types
- sort-by
- escape-string-regexp
- serve
This application follows Google's Material Design system by using Material-UI components.
Most of the code in this project has been written to the ES6 JavaScript specification for compatibility with modern web browsers and future proofing JavaScript code.
The photography data is provided by Flickr service.
Marker and image icons made by Paomedia. https://www.iconfinder.com/iconsets/small-n-flat
Map style made by bruno perrier. https://snazzymaps.com/style/6666/green-and-blue
