All Projects

Map app

Map app website screenshot taken on desktop.

A simple app to search for specific type of places around a location you choose.


  • react
  • google maps API
  • foursquare API
  • materialize.css
  • progressive web app
  • service worker API

This was the last project in Udacity's Front End Developer Nanodegree. It was a great experience because i was only given the idea of the app and its requirements and i had to implement everything from scratch which mimics a real world project.

How it works:

  • When the app starts it will ask for the user location to make it the center of the map and search for places(default is restaurants) around it if the user block the app from getting the location, it will get the location using user's IP address if this failed it will use New York as the default location.

  • The user has the ability to change location using to any city, town or neighborhood using the google maps places API.

  • The user can search for any places instead of restaurants.

  • The user can can filter the places list and the markers on the map will be filtered as well.

  • The Service Worker allows the app to works offline by caching app assets.

  • The app is a PWA (progressive web app) which can be installed to home screen and provide a good experience to users on any internet condition.