Bubble Tea Locator in Cebu City

Instantly locate all the refreshing bubble tea and milk tea store in Cebu City!

How to Use:

Click here to use the online version of the app

Or Run locally

• Download zip or clone github repository
• Open/Run index.html in you browser

A Project in the Udacity Frontend Web Developer Nanodegree Program

This is a single page application featuring a map of a neighborhood you would like to visit. This is an example on how design patterns assist in developing a manageable codebase. Explore how frameworks can decrease the time required developing an application and provide a number of utilities for a developer to use. Finally, implementing third-party APIs that provide valuable data sets that can improve the quality of an application.

Project Focus

• Interacting with API servers
• Use of third-party libraries and APIs as a standard and acceptable practice
• Asynchronous programming

Project Features

• Integrate Google Map to display markers/locations
• Map displays all location markers by default
• A list-view of location names which displays all relevant locations
• Includes a text input field or dropdown menu that filters the map markers and list items to locations matching the text input or selection
• Clicking a marker displays unique information about a location
• Fully mobile responsive web app

JS Files:

• App View Model
• Locations list
• Map styles
• Main JS file to initialize the app

APIs:

Foursquare API

Google Maps API

Required JS library:

jQuery

Frontend Framework:

Materialize CSS

MVVM library:

Knockout JS

Resources:

Neighborhood Map Overview

Using Knockout Tutorial

Google Map Markers

Google Map InfoWindow

Styling InfoWindow

Styling Google Map

Google Map Styling Wizard

Map styles inspirations

Javascript Tutorials