Web Developer_
< React, JavaScript, HTML5, CSS3 />

Project Overview | Neighborhood Map

Welcome to my neighborhood map! This was the final project for the Grow with Google / Udacity Front End Web Developer Nanodegree program. The assignment involved building a single page web app utilizing React and incoroporating Google Maps, plus a third party API of your choice. Features include responsiveness, filters, asynchronous API requests, error handling, semantics, accessibility, and use of a service worker.

neighborhood map screenshot

For a full list of specifications, check out the rubric.

  • Responsiveness: All application components render on-screen in a responsive manner.
  • Usability: All application components are usable across modern desktop, tablet, and phone browsers.
  • Location Filter: Includes a text input field or dropdown menu that filters the map markers and list items to locations matching the text input or selection. Filter function runs error-free.
  • List View: A list-view of location names is provided which displays all locations by default, and displays the filtered subset of locations when a filter is applied.

    Clicking a location on the list displays unique information about the location, and animates its associated map marker (e.g. bouncing, color change.)

    List functionality is responsive and runs error free.
  • Map & Markers: Map displays all location markers by default, and displays the filtered subset of location markers when a filter is applied.

    Clicking a marker displays unique information about a location somewhere on the page (modal, separate div, inside an infoWindow).

    Any additional custom functionality provided in the app functions error-free.
  • Asynchonous API Requests: Application utilizes the Google Maps API or another mapping system and at least one non-Google third-party API. All data requests are retrieved in an asynchronous manner using either the Fetch API or XMLHttpRequest.
  • Error Handling: Data requests that fail are handled gracefully using common fallback techniques (i.e. AJAX error or fail methods). 'Gracefully' means the user isn’t left wondering why a component isn’t working. If an API doesn’t load there should be some visible indication on the page that it didn’t load.
  • README: A README file is included detailing all steps required to successfully run the application.
  • Comments: Comments are present and effectively explain longer code procedures.
  • Additional Location Data: Functionality providing additional data about a location is provided and sourced from a 3rd party API. Information can be provided either in the marker’s infoWindow, or in an HTML element in the DOM (a sidebar, the list view, a modal, etc.)

    Provide attribution for the source of additional data. For example, if using Foursquare, indicate somewhere in your UI and in your README that you are using Foursquare data.
  • Error Free: Application runs without console errors.
  • Usability: Functionality is presented in a usable and responsive manner.
  • Focus: Focus is appropriately managed allowing users to noticeably tab through each of the important elements of the page. Modal or interstitial windows appropriately lock focus.
  • Site elements are defined semantically: Elements on the page use the appropriate semantic elements. For those elements in which a semantic element is not available, appropriate ARIA roles are defined.
  • Accessible Images: All content-related images include appropriate alternate text that clearly describes the content of the image.
  • Service Worker: When available in the browser, the site uses a service worker to cache responses to requests for site assets. Visited pages are rendered when there is no network access.
  • Proper Use of React: React code follows a reasonable component structure.

    State control is managed appropriately: event handlers are passed as props to child components, and state is managed by parent component functions when appropriate.

    There are at least 5 locations in the model.

    These may be hard-coded or retrieved from a data API.

    There are no errors. There are no warnings that resulted from not following the best practices listed in the documentation, such as using key for list items. All code is functional and formatted properly.
  • collapse ^

Walk-through

1) Setup Development Environment

  1. Open a terminal and navigate to your project folder.
  2. Install Facebook's create-react-app by typing:
    • npx create-react-app my-app
    • cd my-app
    • npm start
  3. If it doesn't happen automatically, open your browser and type localhost:3000 into the address bar. You should see something like this: react app screenshot

2) Choose Your Map Component

  1. There are a variety of map components you can use for the project, but we'll be using google-maps-react for this walk-through. Use the terminal command below to install the library.
    • npm install --save google-maps-react
  2. The library includes a wrapper called GoogleApiWrapper that we'll use to wrap around the Google Maps API. To do this, we'll create a new file with the path my-app/src/components/MapContainer.js. The file should look something like this: Map container screenshot

3) Display the Map

  1. To display the map, we'll be modifying the MapContainer.js and App.js files. If you haven't already obtained your Google Maps API key, please visit this link first.
  2. In our MapContainer component, we'll add a few properties to Map to display and center our map.Map container screenshot 2 Our App.js file now looks like the code below. I used lattitude and longitude coordinates of my hometown Stuart, Florida, but you can modify them with any location of your choice. App.js screenshot...and now the map is displayed! Map render screenshot

4) Display Pins on the Map

  1. The next thing we'll want to do is display the pin locations. To do this, I've hard-coded locations in a .json file like the one below. You may add as many locations as you'd like, but make sure there are at least five. Pins.json screenshot
  2. We'll make a small change to our App.js file, adding pins={this.state.pins} to our MapContainer as seen here: App.js screenshot
  3. Write a couple functions in MapContainer.js to combine our pins.json info with the map. We'll call these two functions fetchPlaces: fetchPlaces function screenshot...and updateMarkers: updateMarkers function
  4. Don't forget to add onReady={this.fetchPlaces}: onReady
  5. And now we see our pins! Pins on map
× Home About Me Software Projects Tutorials