Project acceptance date: 16 August 2018
The Udacity Neighborhood Map project is the final Front-end Web Development Nanodegree project. The task was to create a Neighborhood Map from scratch using React. For this purpose, this project was bootstrapped with Create React App.
The app allows users and visitors to Leipzig to find the locations of museums located in or around the centre of the City of Leipzig in Saxony, Germany. Users can interact with both the listed museums and the map markers, and can search for museums by entering queries.
- Download or clone this repository
- Install all project dependencies with
npm install
- Start the development server with
npm start
create-react-app
comes with a built-in service worker, although it is only available in production mode. To work in production mode:
- Run
npm run build
This will create a build version of the app that caches the page and renders visited pages even when there is no network access.
As part of the project requirements, I used the Google Maps API as well as the Foursquare API.
create-react-app
escape-string-regexp
While the project makes use of third-party data, it is still rather static. In future, I would like to list all Leipzig museums, and make the list searchable via category. I would also like to include more useful data in the info windows, and allow user to look up directions.
This was an extremely challenging project, and the help and advice of fellow Scholarship recipients was priceless. I wanted to thank by name
- Mariola Karpiewska, who helped me work through marker filtering
- David Garrood, who was an early cheerleader for this project
- Eman Zaghloul, for her excellent study jam and patient explanations
- Alain Cadenat, for his marvelous error handling
- Antje Lemberg, who patiently walked me through some tricky React stuff
- and Bram Vanroy, who swooped in at the last and saved my sanity when everything seemed irreversibly synchronous
In addition, this guide was absolutely invaluable in making the map work in React without using a package: Making Google Maps work with React