Skip to content

abdusabri/fend-neighborhood-map-project

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Neighborhood Map App

Project Summary

This is the 7th project as part of my Front-End Web Development Nanodegree. It is a React web app for a neighborhood map (Berlin, Germany) with some interesting locations/places to visit. The app can be used here

Technical Implementation Notes

  • This project was bootstrapped with Create React App

  • Locations list are loaded from a local JSON file

  • Locations can be filtered through a text input field, and they are always synced between the map and the list view. Filtering is done as the user types (with a 200 millisecond delay)

  • Clicking on a location from the list view or on a map marker displays a popup with additional info on the location. The selected location is styled differently - both in the list view and on the map - to make it clear to the user which location is selected

  • The app has url/paths management implemented, so the user can go backward and forward through the browser's navigation history. Also, entering the direct url/path of a location pre-selects it and shows its popup

  • The app is responsive, follows recommended accessibility practices, and is usable with a keyboard

  • It is also a progressive web app that can be used offline, using the default service worker implementation and behavior from Create React App

  • The app uses Mapbox and data from OpenStreetMap. Additional location info is from Foursquare

To run the app locally

Clone the repo, or download a zipped version, then unzip it. After that, navigate to the directory, open a shell window, and do the following:

  • Install all project dependencies with npm install
  • Start the development server with npm start

For more details and explanations, refer to the documentation from Create React App here.

Used libraries and dependencies

References and Credits

Following are some articles, links, and tools that were very helpful for me while completing the project work:

About

Bootstrap, React, Debounce, React Router v4, Mapbox, Foursquare, Responsive, JS Promises

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published