abdusabri / fend-neighborhood-map-project

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

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

• bootstrap

• escape-string-regexp

• gh-pages

• jquery

• lodash.debounce

• popper.js

• react

• react-dom

• react-foursquare

• react-icons

• react-map-gl

• react-router

• react-router-dom

• react-scripts

• react-sidebar

• resize-observer-polyfill

References and Credits

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

• Web Accessibility Checklist

• A sidebar component for React. Eaxmples, Repo

• React-Map-GL by Uber, which is a wrapper for Mapbox JS library. Website

• How to use bootstrap with react

• Material Design icons for React-Icons package

• Resize Observer. Discussion on Stack Overflow, Polyfill

• CSS Loader on W3Schools

• Cloudimage. Used to display a default missing image indicator in case no photo is retrieved from Foursquare's API

• RegEx tools regex101.com, regexr.com

• Guide for React Router reacttraining.com

• Changing map cursor for React-Map-GL Issue on GitHub

• Deep JS object equality mattzeunert.com

• Single Page Apps for GitHub Pages