Freelance Project - NAP

Dec. 17, 2017

NAP's Website

I recently had the opportunity to create a new website for my Uncle’s anesthesiology practice, Northeastern Anesthesia Physicians (NAP). My uncle first approached me about the site a few months ago. His existing site was outdated and the developer who created it had apparently moved and was becoming increasingly difficult to keep in contact with. The main purpose of NAP’s site was to collect payments from patients online (using their existing merchant account, JetPay), but there were also other important pages like a Billing FAQ page and a Job Listing page.

Design

The design for the site was completed by my co-worker, Sam. He used Sketch for the design work, and delivered prototypes to both myself and NAP using InVision. This is the workflow we’re accustomed to using at our company, Recovery Brands. Since this was a freelance project, Sam and I had the opportunity to work together a lot closer than we’re used to. This helped ensure that the design-development handoff was pretty seamless.

Development

I opted to use WordPress for NAP’s site. I built them a custom theme, using underscores as my starting point. For my local development, I used the VCCW vagrant environment. I used a custom webpack configuration to compile my assets and establish a development server with hot-module-reloading. Hot-module-reloading sped up my development time significantly by allowing me to see my style changes in the browser without having to reload the page after every change. I used thoughtbot’s Neat grid framework to ensure that the site was responsive and their Bitters library to scaffold out global styles. To make it easy for NAP to manage their site from the WordPress backend, I also created custom post types for the billing FAQs, job listings, and staff members.

The following JavaScript and PHP packages were used for various functionality throughout the site (installed using npm and composer, respectively):

  • Swiper – for the payment form slider
  • Cleave – for automatically formatting the credit card and phone number inputs on the payment form
  • ParsleyJS – for client-side input validation
  • Respect\Validation – for server-side input validation
  • mailgunphp – for delivering contact form emails to NAP
  • phpdotenv – for storing sensitive information like the JetPay and Mailgun API keys

Once the site was completed, I used the Ngrok Linux package on my VCCW virtual machine to generate a URL where NAP could view the site before it was deployed.

Deployment

I chose Siteground to host NAP’s completed site. Siteground’s GrowBig shared hosting plan is more than capable of accommodating the amount of traffic NAP receives. Additionally, being on a shared hosting plan means there is virtually no server maintenance. I have a git repository setup on their hosting machine that I can push changes to from my terminal.

Conclusion

NAP’s site ended up being pretty straightforward with one exception… JetPay. Personally, I would’ve liked to have set up NAP with a Stripe account, but they already have JetPay integrated in other areas of their business. It would’ve been outside the scope of this project to move the entire business over to Stripe. I didn’t enjoy using JetPay for a few reasons. First, their developer documentation is pretty vague and confusing. To make matters worse, I found an entirely different (but thankfully, more helpful) set of documents once I logged into their service using NAP’s credentials (those documents can also be viewed here). Second, their API uses XML instead of conventional JSON. This meant I had to write a bunch of extra PHP code to convert all of my data into the XML format to send (and receive) from their API. Despite my gripes with JetPay, it was cool to find out how they use a “three-step redirect” to prevent sensitive credit card information from ever having to touch their clients’ servers (this process is described in the previous link).

Moving Forward

After finishing NAP’s site, I think it’s safe to say that this will be one of the last projects that I use WordPress on. I’ve become increasingly interested in using Express with content served from a third-party API such as Contentful. Using JavaScript and Express will make development smoother by eliminating the need to use PHP (and thus a Virtual Machine or Docker container) and also enable me to use better code quality tools that aren’t available for the PHP language (like prettier).

Category: Web

←Detox.net Theme Redesign

Contact Me