Ten people sit at office desks scattered throughout a brick-walled office working at their computers. A blue overlay sits atop the image, with a white Flywheel logo atop it. Under the logo reads Front End Engineer.

Flywheel Engineering

Front-end work rebuilding the software UI and new product offerings at Flywheel.
Role Overview
I was brought on to Flywheel as a front-end software engineer due to my specialization in mobile-first responsive development. At the time, the company was about to undertake a massive application-wide rebuild to make their product responsive and wanted my expertise to help them accomplish it. Alongside the rework, I also assisted the team in creating their first design library and new products such as White Labeling, which was their most profitable non-hosting product ever launched.
My Contributions
As an individual within the team, my responsibility primarily was the ongoing construction of various new application pages within the software using languages such as native Javascript, HAML/YAML, and CSS, and integrating them into backend languages which were primarily Ruby on Rails but occasionally leveraged tools such as Puppeteer as well.

Outside of daily responsibilities, I helped to facilitate weekly internal presentations about new technologies, spoke at conferences about new CSS techniques, and was a primary liaison for our design team ensuring that all new pages aligned with design standards, as well as new designs adhering to code systems.
Two fake laptop screens show a before and after image of Flywheel's customer dashboard. The laptop of the left depicts the Old interface which feels dated. The laptop on the right contains the new interface, which feels bright and modern.
The largest project to which I contributed to was the complete overhaul of the customer-facing Flywheel application. The refresh was not only a redesign of how the application looked, but also involved making the entire application mobile-friendly, responsive, and more accessible. The original application had not been updated since the cofounders created it in the early 2010s, which meant a tremendous amount of effort to modernize the application to be up to current standards.

Technical Challenges
The internal responsive redesign project was split between myself and two other front-end engineers who each handled a significant portion of the application's pages. Due to the wide scope of the project, spanning the entire application, we set out to create a set of standard components to then reuse throughout the pages as much as possible. This resulted in constant communication with our Design and Project Management teams to deal with scope creep, surprise conflicts, new ideas, and ongoing refactoring to create the most stable, yet robust, library to create the new application.

Alongside the refactoring and modernization, our team also took tremendous pride in ensuring that our product worked for as many of our customers as possible, which meant doing constant testing across tens of devices, operating systems, browsers, and browser versions.

We also were able to implement additional accessibility improvements throughout the application, such as ensuring colors adhered to visibility standards, improved screen reader compatibility, descriptive text for all visual elements, and improved navigation for keyboard users.
Internal Responsive Redesign
Massive six-month undertaking to make the entire Flywheel product completely responsive.
Three devices sit next to each other, showing different visual versions of the same website at different scales. The website depicted is a dashboard, showing information about hosting. On the left is a phone, the middle is a laptop, the right is an ipad. The interface across all three is clean, spacious, and modern.A screenshot of a popup is shown, it is depicting a feedback form in which you can tip a support agent with a monetary donation for beer along with an optional text box to attach a polite message to.

Built for longevity

When your company undertakes a large-scale rebuilding of its core product the last thing you want to do is come back in three years to rebuild all of it again. The goal of the redesign and rebuild was to create a flexible structure that grew with the company's needs over time without needing to be fundamentally redone for the next decade or more. We completed the rebuild in early 2017 and as of the time of this writing the work that our front-end development team created is still being used today five years later with no end in sight.

Three laptops depict three different stages of a website's checkout process. The left is a dashboard showing purchase options, the center is selecting specific services, and the right is an example of a billing manifest.
White Labeling is when you take Flywheel's product, in this case, it would be "web hosting", and remove all of Flywheel's branding so that you cannot tell who is doing the hosting. Then, you allow Flywheel's customers to replace Flywheels' branding with their own instead. White Labeling let Flywheel's customers re-sell hosting at a markup to their clients as if the customer was the one providing the web hosting, which created a large boom in business for our company and customers alike.

My specific contribution to the product was building a new user interface that existed outside of our primary components library and allowed for dynamic information from the customer to apply their custom branding (logo, colors, etc) so that they could "brand" the White Labeled hosting for their clients. This involved a tremendous amount of research into native CSS Variables and compatibility, javascript fallbacks, and extensive testing to ensure that everything worked properly for all customers. We then added third-party payment processors (Stripe) so that billing between any White Labeled Customer and their clients did not directly involve Flywheel (both for security and to extend the hidden nature of White Labeling).

Technical Challenges
The largest undertaking for the White Label product was creating a stand-alone system that mirrored Flywheel's main Ruby framework but was not allowed to interface with the main framework due to security reasons. To accomplish this, the team did a full printout of all Ruby classes and systems, and when printed at ~30pt size the paper spanned an entire length of 45ft wall down the engineering corridor.

An unexpected challenge was the amount of hiding needed to truly White Label our hosting, and every few months we'd learn of a new small way that customers were able to peek through the White Label and discover it was secretly Flywheel. This resulted in a lot of work from our team to do additional hiding through means such as embedded meta information, cURL data, WHOIS reports, IP Sniffing, and other technical means of inquiring, ultimately making it extremely difficult to trace back to Flywheel so that our customers would feel more secure in the product offering of reselling our hosting through White Label.
White Label Product
Building the first and most profitable non-hosting product for Flywheel.