Sailing Plan App Sets Sail

Sailing_Plan_Technical_Article_2400x720.png

Author: Jared Jewitt, Full Stack Developer

The Concept

The purpose of a sailing plan is to have a documented copy of a sailors trip in the case of an emergency.

Sailing plans have been around long before mobile/web applications were popular. Previously, plans were filled via paper and needed to be faxed. Although the system worked, keeping track of active and escalated plans was difficult to maintain. Not something you want to deal with when lives are on the line.


Application Structure

In order to recreate the sailing plan process, we needed to create two separate kinds of applications. One app for sailors to file their information and create plans, and a dashboard to keep track of the plans created. I was responsible for creating a web version of the first app and the dashboard component. Integrating both of these together provided me with both a great challenge and a lot of fun!

Let’s Get Specific

To better understand these applications, let’s analyze their details separately:

Sailing Plan App 

Using the Sailing Plan app, users have the ability to save passengers, vessel details and emergency contacts. These are all used when it comes to creating the plan, which is the main aspect of the application. In addition to this information, the user must also provide their plan title and description, as well as their departure, waypoints and arrival locations. This is where things get interesting. We have integrated this process with Google Maps. Users can select anywhere on the map to drop a pin and have the system fill out the information for them, including the place name, coordinates and timezone. A line will connect all the points together, showing the path the sailor will follow.

Dashboard

The dashboard is the emergency tool to keep track of sailing plans. It consists of paginated tables for active, completed and escalated plans. It also has an advanced search filter component. Users can filter by search type, date and location. Google Maps is also integrated here. To search via radius the user can either type a kilometer value, or drag and expand a circle on the map for a visual representation. The dashboard also features audit logs which track user activity and engagement throughout the application

SailingApp-Dashboard-MapFilter

Challenges

With such a unique application, there had to have been some challenges. Working with Google Maps definitely had it’s fair share, however there were other aspects that don’t seem so obvious. For example on the web app when creating a sailing plan, you can choose to create an emergency contact or vessel on the spot. But you can also have it pre-saved before creating a plan. Or on the Dashboard, handling routes and redirects based on user authentication status. It’s challenges like these that really challenge and push me to develop clean, simple and manageable code architecture.

The Sailing Plan Team :-)