Udacity FEND - Neighborhood Map Project

Table of Contents

• Project Overview
• Project Requirements
• Installation
  • Live Demo
  • Local Installation
• Browsers tested
• Tools used
  • Resources used
• Author
• Contribution
• License

Project Overview

(Back to top)

Neighborhood Map (React), is the last project of Udacity Front End Developer Nanodegree program. This is a project build on ReactJS showing a Google map of my neighborhood with some locations that are fetched randomly from Foursquare API. There is a list showing all available locations that can be filtered by an input search bar. The map has markers on it that represents the showing list, so if you filter the list, the markers will be filtered as well. By clicking on a list button, an infoWindow will open on the marker that shows additional information about the location. Tab focus is locked within the infoWindow as it is a modal, by pressing the close button or escape button it will close the infoWindow and return focus to the element that opened the modal.

In order to succeed on this project, I had to create a Progressive Web Application that runs error-free, with accessibility features in modern devices browsers.

Project Requirements

(Back to top)

Criteria	Specifications
Interface Design	All application components are usable and should render across modern desktop, tablets and phone browsers.
Application Functionality	Application should include a text input that filters the map markers and the list items. A list-view of locations names. Map that displays all locations markers by default.
Asychronous Data Usage	Application utilizes Google Maps Api and at least one 3rd party API. Data requests that fail are handled by common fallback techniques by an errorHandler function.
Documentation	A README file is included. Comments are presented on code.
Location Details Functionality	Additional data about a location is provided by a 3rd party API in an infoWindow. Application runs error-free and this functionality is presented in a usable and responsive manner.
Accessibility	Focus is approprietly managed. Elements on the page have semantic tags or a ARIA role attribute. All images have alt attribute to describe the image.
Offline Use	Service worker is available on production build, allowing offline use where serivce worker is available.
Application Architecture	React code follows a reasonable component strocture.

Installation

Live Demo

(Back to top)

A live demo of the page can be seen on this git page.

Local Installation

(Back to top)

• Download the repository from the download button.
• Or clone the repository with Git $ git clone.
• Run $ npm install to install the project's dependecies.
• Run $ npm start to start the development server on your machine.
• Then your default browser will open a page on your localhost with the page.
• Run $ npm run build in order to run the server with Service Worker.

Browsers Tested

(Back to top)

• Google Chrome - Version 67, Windows 10 x64
  • ChromeVox - Test screen reader
• Firefox - Version 61, Windows 10 x64
• Android Google Chrome - Version 64, Redmi Note 3 Pro

Tools Used

(Back to top)

• Git version control
• Sublime text editor 3

Resources Used

(Back to top)

• General searching
  • Google search
  • w3schools
  • MDN web docs
  • CSS-Tricks
• Library
  • React
• Dependencies
  • Create-react-app
  • gh-pages
• API
  • Google Maps Javascript API
  • Foursquare API
  • Unsplash API
• Helpfull
  • Udacity Google Maps API Course
  • Map Icon
  • Preload images
  • Use of Google Maps API
  • All the other resources used for this project are commented on the source code.

Author

(Back to top)

• Athanasios Markou

Contribution

(Back to top)

Pull requests are not welcomed, as this is a project to test my skills in Responsive layout, Accessibilty features and 3rd Party API.

License

(Back to top)

This project is licensed under the MIT License