Grilli Finder (Neighborhood Map React), a Udacity's project

This project is part of the Frontend Web Developer Nanodegree (full Google scholarship). This project's purpose is to build a single page web application from scratch using ReactJS and to add features provided by external APIs (like Maps Javascript API and FourSquare Places APi), focusing on components, props and state.

The app show all the grills and fast foods in Tampere, Finland. This app is my way help hungry and lost youngsters from Tampere finding the closest midnight snack around them.

Table of Contents

• Application Features
• Instructions
• Installation
• Live Version
• Functionality
• Requirements
• Dependencies
• Contributing

Application Features

Grilli Finder is fully responsive to optimize the design for every viewport size. The application is screen reader friendly and has an accessibily audit result provided by Lighthouse of 95%. The service worker provided render the app's beautiful UI even in offline mode or slow network conditions.

Instructions

This project was bootstrapped with Create React App. You can find more information on how to perform common tasks here.

Installation

You can clone this repository or download it as a .zip file. Once downloaded, you need to run npm install and then npm start in your console. Create React App provide a full working service worker. To show it in action you must run the application in production build mode. To do that, run npm run build to create a buil version of the app and then serve -s buid to serve the production build in localhost.

Live Version

You can find a live version of the project here. Enjoy!

Requirements

You can find the full list of the project reuirements visiting Udacity's Project Rubric Link.

Dependencies

The project is created from scratch running create-react-app.

I've used the following dependencies and resources to buil the final version of this app:

React Packages

• google-maps-react. A declarative Google Map React component using React, lazy-loading dependencies, current-location finder and a test-driven approach by the Fullstack React team.
• escape-string-regexp. Escape RegExp special characters.
• sort-by. A utility to create comparator functions for the native Array.sort() in both node and the browser. Allows for sorting by multiple properties.
• react-responsive. A useful package to manage mediaqueries straight into React components
• Prop Types. Runtime type checking for React props and similar objects.
• @material-ui. React components that implement Google's Material Design.
• @material-ui-icons. This package provides the Google Material icons packaged as a set of React components.

API

• Google Maps API. Probably the most popular map on the web!
• Foursquare Place API. Over 125,000 developers building location-aware experiences with Foursquare technology and data.

Icons

• The icons shown on into the markers infobox are taken from the Flaticon free database.

Contributing

All suggestions and tips will be more than appreciated but, as general rule, no pull requested are normally accepted.