Step 1

Convert their existing store listings built in SQL to JSON.

This involved creating the new JSON structure system, adding additional features such as store hours and custom descriptions, adding additional stores, removing old stores, and improving the accuracy of the latitude and longitude coordinates.

Step 2

Build the UI.

Before any javascript or API development began, the UI was laid out with a few sample stores and tested on multiple devices to make sure the client was happy. This piece was very important because the application needed to follow their new brand guidelines. It also provided a guideline for me to follow on the javascript application side.

Step 3

Calculate the Great Circle Distance.

Google Maps API has the ability to calculate street level distances between two points on earth with ease, but that can add up to a hefty price tag. The client was looking to reduce the number of Google Maps API calculations done on the site, so I worked to make finding stores a two step process. First, the customer would type in an area (address, zip code, etc) or allow geolocation to see a map with a list of the closest 15 stores. The application would loop through all available stores to calculate the approximate distance without an API by using the Great Circle Distance.

Calculating distances over spheres (our planet is a sphere, right?) is pretty tricky. Thanks to trigonometry, we can use the ancient formulae to calculate the rough distance between two latitudinal and longitudinal points using The Great Circle Distance.

Once a user selected an individual store from the map, it would automatically load the user's Google Maps or Apple Maps application where it would then calculate street-level distance.

From Wikipedia - Great-circle distance

The Google Maps geolocation takes around 400 milliseconds, and the Great Circle Distance calculation takes around 15 milliseconds per search, successfully meeting the requirement of "High Performance".

Maintenance

Updating content.

Currently, the code it set up in an easy-to-read and easy-to-update JSON format, which allows even non-coding employees to make updates.

{
	"name": "Store ABC",
	"description": "This store is based in city XYZ and specializes in...",
	"address": "123 Main Street, Dallas TX",
	"phone": "123-456-7890",
	"hours": {
		"mon": "8:00 - 16:00",
		"tue": "8:00 - 16:00",
		"wed": "8:00 - 16:00",
		"thu": "8:00 - 16:00",
		"fri": "8:00 - 16:00",
		"sat": "10:00 - 15:00",
		"sun": "10:00 - 15:00"
	}
}

Finito! (The End)

Thanks for reading!