mapppppppert-1

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

React-icon.svg
MySQL-Logo.wine_
1280px-Node.js_logo.svg
express-logo
logo
Google_Cloud_Platform-Logo.wine_
HTML5_Badge_256_thumb
CSS3_logo.svg
Unofficial_JavaScript_logo_2.svg

APIs Used: Google Maps Api, Google Places Api

d87e33c4-6a4c-4d52-8286-4e64fee99704_google-place-1
google-maps-platform-1200×675-2

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.

Selected Works

Gryd Park's - Parking MapFull Stack Web Developer | React, MySql, Express, Google Api | Internship - Solo Project

Lance AppTeam Lead, UI Designer, Prototype, User Experience | Team Project (6 People)

Fresh Foundry Ecommerce AppFull Stack Web Developer | Php, Mysql| Duo Project

Particle Js and Particle WebappWeb Developer |Vanilla Js | Solo Project

UBC Banking AppUI Design | Solo Project

Heartland Travels Website DesignUI Design | Solo Project

Conversational Form DesignForm Design, User Experience, User Interface | Solo Project

Smarthwatch UIUI Design | Solo Project

Weather AppWeb Developer | React | Duo Project