Protenus

Protenus specializes in providing healthcare compliance analytics to help health systems reduce risk and save money.

I was the primary developer on this project, doing both front-end and back-end work for the site in WordPress.

Technology Stack

Wordpress 5.x for the CMS
Fractal for the Pattern Library
TailwindCSS for the CSS framework
Gulp & Webpack for the Build System - ITCSS, BEM, & Utility methodologies for the HTML & CSS

We relied heavily on the Advanced Custom Fields plugin to create the fields we needed for each post type. Paired with the fantastic Advanced Custom Fields: Extended plugin, we were able to create a rich editing experience for the client that went far beyond their expectations.

TailwindCSS

I also went all in with TailwindCSS, hoping to achieve consistency, ease of use, and maintainability. It was an overwhelming success for the site.

My primary goal was to use as much of the framework as possible, only writing custom CSS when necessary. This resulted in less duplication, cleaner code, and being able to easy scaffold out any component.

For example, the entire Content Outline section (as seen on the Company Page) was done with TailwindCSS, and no custom CSS:

Here's the markup for that content section.

Challenges

One of the primary requirements from the client was that it had to be a static site. This is a great option for security & speed, but came with a few drawbacks that we had to find solutions for.

We ended up using the WP2Static Plugin to create the static export, since it came with an Amazon S3 integration.

However, some core functionality from WordPress couldn’t be used, such as search, category filtering, and contact form submissions that required any kind of server side script.

Search

For search specifically, we chose a custom plugin solution in which we exported the entire site to an XML file (using stock WordPress’ wp_export()), then used JavaScript on the Search Page to parse that file and provide accurate results using the Fuse.js plugin.

To allow the client to leverage this functionality, we created a custom back-end WordPress page with a button to export those search results. We then told the WP2Static plugin to also include that file in the export.

Continuous Integration

Bitbucket Pipelines was used to allow for faster prototyping of features & components of the site.

Our staging branch was automatically pushed to our stage environment on a push to Bitbucket. For the master branch, a manual trigger was implemented upon pushing a tag to Bitbucket.