I was so excited to work on UConn Health's Find a Provider application. Every day, it's an application that helps people all over Connecticut find health care and doctors. When people visit it, they can search for doctors by: name, specialty, location, or combinations of those things. Once they search, they get a list of results from UConn Health's public API. Then, they can choose individual providers, see their bios and information. Then, they can easily make an appointment request.

This app was originally built a few years ago with Angular 1. However, over time, it became unmaintainable and fragile. So, I decided that it was time for an upgrade. After doing some research, I chose a new application stack of:

I broke the application into two WordPress plugins for easier maintenance and debugging. The first was a custom WPGraphQL extension. This plugin would handle all the server-side requests and database caching. It translated all the responses from the API into GraphQL responses. That might seem like a lot of work, but really it saved a lot of debugging time. That's because the API isn't very developer friendly. Normalizing the responses into GraphQL helped both debugging and building a front-end application. The second plugin was just for the front-end. I built it with Vue 2 and Apollo Client. The graphql queries were broken out into separate files. That way, if we ever need to change from Vue to React or any other framework, we can do so quickly and efficiently.

As with all the applications I work on, I tried my best to make this one WCAG compliant. This included:

  • an accessible tab component
  • aria-live regions to alert people who use screen readers when the application changes
  • accessible forms

You can see the public repo in the University Communications Bitbucket.