Christian de Botton


The Civic


  • Client
  • Experimental
  • Web
  • PHP
  • Craft CMS
  • JavaScript
  • React
  • Redux

An immersive and dynamic look at The Civic building in San Francisco. The application is unique in that it runs across two servers, one local server that renders the site isomorphically, and another server running the Craft Content Management System in PHP.

A Luxury Experience

With attention to detail in the user's experience, the site remains fluid and engaging as the user navigates the website. This unusual stack allows for the application to be both easily scalable from an administrative perspective, while being snappy and fast for the end user.

Alt + Immutable

The Flux stores were built on Immutable data for a huge performance win. Checking for changes in application state became incredibly simple thanks to Immutable.js, allowing for easy checks against the last known state to determine whether or not portions of the application should re-render.

External APIs

The Civic required integration with the Real Pages API. More often than not, studios opt to embed the pre-styled widget within the site. Wanting to maintain consistent branding throughout the site, we opted to speak directly with their SOAP API.

A custom plugin was written for Craft CMS that imports unit data from the API, including all relevant leasing information, and stores the data as an Element type. Various caching techniques were leveraged in order to maintain the fastest possible experience for the end user, as the API returned large amounts of data in each request.

A Simple but Intelligent Cache

The prevent repetitive calls to the API, a micro-caching system was created on top of Immutable. The data passes into a store, and when successive calls are made, the URI is checked against the keys within the store, circumventing subsequent calls to the API.