Feature/frontend mvp

[tomwalsh96]

Realtime page layout for react app, not yet connected to bus routes data

Changes

I have included a google maps component, and made the layout responsive for mobile devices

Checklist:

• Tests
  I have yet to implement any tests, the code is still not finalised as I have not connected to the real graphql bus data

• Documentation
  Again, no finalised documentation needs to be added as the page is not finished

How to use

The UI is self-explanatory. Dropdown menus can be seen on one side of the page, and a map component on the other. I created a custom popup component for the map, which will contain relevant stop information.

I was working to achieve the following design:

A gif of the completed page in action can be seen below:

In order to run the code, a .env file must be created in the /web_app directory, with a google maps API key. Include one line in this file in the following format:
REACT_APP_GOOGLE_API_KEY={key}

How the design has changed compared to mockups

• an additional dropdown search was added (it is just a duplicate for now, and still dummy data)
• a google maps component was added
• a map popup was added
• the page was made responsive, when the width of the viewport gets below a certain point the layout collapses into a mobile view

Additional notes

This is still a work in progress. I need to merge this code into the main branch in order to connect to the new graphql bus routes data.

[JasonBallantyne]

Looks ideal, good job!

[JFfarrell]

LGTM! if you send me your .env file, I can test it locally