“Portico” – Executive overview tool

Note: I’ve anonymized the name of the project for confidentiality reasons. Also, I can’t show screenshots for the same reason.

“Portico” is a single-page application used to help executives gain insight into the company’s project portfolio and make resource decisions. “Portico” is written in React and Material UI, and uses Apollo GraphQL for backend communication.

Here are a couple highlights of how I empowered our team to create a quality product.

Branch previews: Custom proxy app

Since this is an internal application, we can’t take advantage of tools like Vercel, which deploy each commit to a different preview URL. However, I knew it would be important to quickly get feedback on a partially complete feature, since the project was rapidly evolving and did not have time for formal top-down requirements.

To this end, I added a stage to our CI build which pushed the compiled assets to our static asset repository. I also created a basic Koa.js application which chose a branch preview based on the Host header of the HTTP request, and proxied the static assets for that Git branch or PR.

The preview server was immediately popular with the team, and it’s become core to our communication. Instead of emailing each other screenshots for feedback, we simply ask each other “Can you send me a preview link?”

Component strategy

The project began as exploratory work to determine whether there was demand for the proposed product. We were building reusable components for Portico, and I did not want to see this work wasted in case the project was cancelled. Therefore, I structured the project as a monorepo, which automatically published the project’s components to our internal npm repository. This would allow other teams to reuse our components and provide feedback, giving them value outside the scope of the original project at very little extra effort.