Recent Work
Briefing
Client
Objective
Build the client a new website! That required putting together a complete tech stack that encompassed content management, deployment, search capability, and form submissions at the minimum. It also needed to support multiple languages, multiple regions, and a couple of hundred products that needed to follow a defined category hierarchy.
Additional supporting sites were built; one to allow customers to login and view their loyalty points and another to manage said customer accounts.
Strategy
Challenges
The website was originally built atop Textpattern—a somewhat obsolete PHP-based CMS—and its version of PHP had long been deprecated by their hosting provider. The site design was not responsive and the content management and multilingual support was not easily scalable. Attempts to upgrade the CMS and PHP to current versions brought errors and would have necessitated PHP expertise that was outside my wheelhouse. The site was also hosted on a shared virtual server which I suspected would have to be upgraded or migrated to handle the additional traffic the client envisioned.
Solution
I wanted the site to take a serverless approach and propagate to a CDN rather than reside on a single server. I also wanted to plan the architecture and devops to be easier to manage and integrate. Using third-party resources and API (PaaS) would allow the site to better handle long-term growth of both content and audience.
I proposed a Jamstack solution and provided estimates of monthly operating costs to the client who gave their blessing to proceed. One advantage to using PaaS is being able to better judge costs than estimating that associated with writing all the functionality from scratch or with integrating an expensive enterprise software that has very narrow platform requirements and admin-level access.
The site framework used Gatsby in order to make most of the site statically rendered and therefore quick to load and render. It was deployed on Netlify's CDN using their CI pipeline with the project's Git repository. The website data and content were set up in GraphCMS and mapped into the front-end templates' GraphQL. Algolia was integrated to provide Search functionality. In addition, server-side code was needed for form submission and product synchronization with Algolia so they were written as Netlify's version of Amazon Lambda functions. Last but not least, taking advantage of Slack's webhooks allowed us to trigger builds (dev or production) with keywords in our team chat, avoiding the need for any admin dashboards or devops knowledge for the folks needing site rebuilds whenever content and not code was updated.
The loyalty site was built with a similar architecture but at a much smaller scale. Airtable and some REST APIs were used to manage membership data and Auth0 was integrated to manage sign-ups and authentication.
The project was not without its challenges. It did survive breaking changes from major updates of both Gatsby and GraphCMS and there is a constant challenge and desire to reduce build times. Nonetheless, the interconnectedness of all the services and components is testament to how far web production has come to enabling small teams—or even one person—to accomplish so much on their own.