Gryd Park's - Parking Map

Gryd Park's - Parking Map is a web-app I developed solo during my internship at Gryd, Winnipeg. App was developed for the Gryd Park's admin staff who would use it to view their associate parking spots marked on a live google map. 

The project got great reviews from the product manager and the developer team at gryd. Gryd's admin staff who are the end users of the app were pleased by the end result as well.

Technologies Used: React, MySql, Node, Express, Material UI, Google Apis

APIs Used: Google Maps Api, Google Places Api

More about the project:

The Frontend of the project was built using React and Material UI. The application is built as a single page app, hence no routing was required. 

MySql is utilized as the database solution for storing the marker data. Node library 'Axios ' is used to make http requests between client and server. Other node libraries used on server side are Body-Parser and Dotenv.

Working of the application

Gryd Park has a network of parking lots accross the City of Winnipeg. You begin using the app by typing a location within Winnipeg City. The app utilizes Google Places Api's autocomplete feature to get suggestions based on whats being typed in the search box which are displayed using a combobox's search result component. User then selects a location from the autocomplete suggestions. Google Geocoding Api is utilized to convert the address from a string to a lat- lng lliteral (geo co-ordinates). 

Clicking 'Go' shifts the google map so that the searched location is centered which is indicated by a standard red location marker. Simultaneously map is populated with green Gryd park logo marker pins that indicate the locations of Gryd Park's parking lots across the city. Hence user is able to locate Gryd Park's parking lots present near the desired location.

Clicking on one of the pins triggers a popup infobox that replaces the clicked pin. The popup box displays information about the clicked parking-lot such as address, open times and amenities.

MySql is utilized as the database solution for storing the marker data. Node library 'Axios ' is used to make http requests between client and server. Other node libraries used on server side are Body-Parser and Dotenv.