Petrix Maps Enterprise

Petrix Maps Enterprise is a full stack web application dashboard portal where enterprise users can search for nearby wellsites in the United States, save them to their account favorites, track users, and much more. I was in charge of building the frontend of this project since the backend was already built for their existing Android/iOS Mobile Application.

• Visit Website

• Web Development

What I Did

I was in charge of creating a web-based platform for Petrix's existing product, Petrix Maps which was only available on Android and iOS at the time. With this in mind, the backend functionalities were mostly implemented by Petrix's existing developer. So I was in charge of working on the frontend and connecting it to their backend. To quickly get this product to market, I decided that it was best to use Vue.js to get the job done, specifically Nuxt.js. From there, I created everything that was needed to be created to get Petrix Maps Enterprise edition to work.

To keep things consistent, I opted to use Google Maps as the map of choice when plotting down wellsite locations. I had to do some reading into their documentation to get the markers to display properly especially getting the tooltips to show a certain way.

The Technology Stack

• HTML5
• CSS3
• JavaScript
• Bootstrap
• Vue.js
• Google Maps API
• Google Analytics
• Google Firebase
• Google Cloud
• Docker

Challenges

This project came with its own unique set of challenges. Some of the significant challenges I faced during the development of this project includes the following:

• How to display custom markers
• How to display tooltips with custom styled text
• User experience issues with Track Users page when user(s) are being tracked
• Getting familiar with Google Maps features so it works with the project specifications
• Show live updated information on Vue.js from data sent by Firebase
• How to prevent Google Maps view position from resetting whenever multiple users are being tracked
• Managing liveSnapshot object instances and toggling tracked users pins so they all remain consistent with one another

What I Would Do Differently

If I were to go back in time to when I began working on this project, there's probably not much I would do differently in terms of planning and actual implementation of this web application.

However, there is one thing I would do differently functionality wise, but was unable to do so due to my client's request, and that is to implement the route to functionality as part of the web application embedded into the platform. Currently, it is set so that whenever the user clicks on "Route To" for any wellsite, it is set so that it opens up a new tab on the browser to Google Maps with a dynamic URL parameter set to the coordinates of the wellsite.