Timeline View

The Timeline View presents detailed inventory usage and availability over a given day. It allows tour and activity operators to view their schedule at a glance, and provides an easy interface for booking new customers.

I received this project as a prototype and saw it through to completion, adding and refining features along the way. Product challenges included packing in information while retaining usability, and the popover interface for interacting with individual blocks on the timeline.

Technical challenges included optimizing render performance, and both implementing and using the server API in a performant fashion. Not to mention the CSS trickery that enables precisely positioned nodes to expand to an arbitrary height—and works in IE 10.

Screenshot of the Timeline View showing time-based inventory usage and availability.Screenshot of the Timeline View showing a popover, which provides details on specific usage of a given inventory,item.Screenshot of the Timeline View showing the interface for configuring the view.Screenshot of the Timeline View showing a daily schedule.

Grid View

The Grid View provides a highly customizable schedule overview. It supports organization across three axes (rows, columns, and groups), but retains the filtering functionality and the design of FareHarbor’s existing monthly and daily agenda views.

Like the Timeline View, I took this project from a prototype to its production-ready form. It posed similar challenges. The Grid became the default schedule view for all new FareHarbor clients.

Screenshot of the Grid View showing a weekly schedule organized by day and activity.Screenshot of the Grid View showing a weekly schedule organized by day, time, and crew member.Screenshot of the Grid View showing the interface for configuring the view

FareHarbor Sites

FareHarbor Sites is a website hosting platform with highly flexible templates designed for tourism companies. Helping clients expand their businesses is FareHarbor’s prime directive, and FH Sites helps supercharge their online presence.

I joined FareHarbor for this project, which then hosted some 70 sites. The existing templates were functional, but rigid, and could not keep up with the evolving needs of the growing client base. I re-envisioned them as a website builder supporting arbitrary organization of modular components. I independently designed and implemented this new feature set over several months, and continued to refine it. As of July 2018, FH Sites powered nearly 700 websites.

FH Sites is built on WordPress. The PHP code I wrote adheres strictly to object-oriented standards. When I departed, the platform handled over 1,000 requests per minute, and my custom page caching implementation kept response times low. I helped migrate FH Sites to a multi-server infrastructure on Amazon Web Services, writing Nginx configuration and an Ansible-based deploy playbook.

Embed Generator

FareHarbor’s website embeds power online booking for thousands of companies. But their clients have businesses to run; they don't have time to learn the JavaScript API! So, I helped build the Embed Generator, a GUI for configuring book button and calendar embeds.

Screenshot showing the Embed Generator, which presents a four-step interface for generating an HTML snippet.

FareHarbor.com

When I left in July 2018, I was responsible for a good deal of the code—and some of the design direction—behind the public FareHarbor.com website. FareHarbor offers a wide range of features and services, so the website seeks to guide visitors to the information important to them. It additionally hosts the documentation center for existing clients.

The FareHarbor website is translated into multiple languages and localized for several countries. I implemented the logic that enables this.

Screenshot showing a page on the FareHarbor website advertising a feature named FareHarbor Telescope.Screenshot showing a page on the FareHarbor website advertising the aforementioned FareHarbor Sites.Screenshot showing the homepage of the FareHarbor website.Screenshot showing the country and language selector interface for the FareHarbor website.

Other Projects

Like the website, the FareHarbor application is also internationalized. I helped add support for translation, as well as localized date, number, and currency formatting.

I was also involved in several projects adding new ways to process or record payment in the application.

As mentioned above, FareHarbor's JavaScript API powers embeds on tens of thousands of webpages. I made several additions to this API, including the ability to maintain a consistent shopping cart state across multiple third-party iframes and page refreshes.

Screenshot of an interface for calculating a percentage-based refund.
I contributed many small details to the application over my time at FareHarbor, like this refund calculator.