Launching Eviction Free NYC using GatsbyJS, GraphQL and Contentful

20190204 eviction free nyc graphql

We recently created a brand-new website at JustFix.nyc, called Eviction Free NYC. It’s an interesting experience to share. A non-profit organization’s needs can be very different from a typical website created for business use. Having spent a few years at JustFix.nyc catering to a similar audience — tenants in NYC having difficulties with their landlord — we had a good idea what the user experience needed to look like. The crowd using the website primarily used mobile devices, in areas with low reception. English may not be their native language as well.

The site had to be built with the following in mind:

  • Mobile-first user experience
  • Fast-loading pages with low overhead
  • Language localization
  • Works with legacy browsers like IE11

The quick development, fast-loading stack

We went with a combination of React and Contentful for a static site setup and here’s why. React, being tried and tested, would offer our developers a consistent, well-supported way of building websites. The code and structure of its component-based philosophy would facilitate contributions from other developers.

A static site would also do wonders for our use case because they can be built to load content quickly., The non-dynamic nature of a static site would make it easier for the site to load on slow lines and remain viewable if the device goes offline. As a result, reliability of the website for users would be increased.

As we had a tight timeline, we opted for GatsbyJS, a React-based static site generator. Gatsby is loaded with a treasure trove of useful features right out-of-the-box. Its ability to prefetch resources, inline code blocks and progressively load images were particularly appreciated when we had to optimize the site for loading. Gatsby also has a growing library of plugins. We could easily integrate anything that used Gatsby’s GraphQL data query system.

We picked Contentful for our content management needs. While traditional CMS platforms let content creators work directly with content, those were less developer friendly when it came to creating a custom solution. Having the content side of things decoupled from how the website is constructed makes it future-proof for when weredesign or rework the site down the line.

We’ve used Contentful before where we dynamically pulled in content via AJAX. In the case of Eviction Free NYC, we drastically reduced server requests and sped up loading time by grabbing content from Contentful via GatsbyJS. This implementation gets content as the site is compiled, as opposed to upon a user’s visit.

We defined content models within Contentful alongside the process of coding the site. This provided a form of structure to the site’s content (such as Providers, Housing Court Action Steps and meta-level page models like LandingPage).

Being able to use GraphQL with Contentful, we used pageQuery to populate the React component’s props with corresponding data to create a straightforward pipeline from content to code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
providers {
  title
  acceptsRtcCases
  phoneNumber
  website
  hours
  intakeInstructions
  address
  logo {
    resolutions(width: 100, height: 100) {
      aspectRatio
      width
      height
      src
      srcSet
    }
  }
}

Personalizing results on a static site

One of the challenges with development of the site was the results page. Eviction Free NYC presents tenants with a questionnaire on their situation. At the end of the questionnaire, they are given results tailored based on their borough’s housing court, eligibility factors for legal representation and varying types of eviction proceedings.

This is incredibly hard to accomplish in both a CMS and static site implementation as four languages, five different housing courts, three distinct case types and eligibility (yes/no) would give us a permutation of 120 static results pages. And that’s before counting the extra pages for public housing tenants and other types of situations.

Six potential routes of users

We crafted a solution that preserved the use of static pages via GatsbyJS, while continuing to provide flexibility and the ability to reuse content. First, we broke the six potential routes (as shown above) down into arrays of references to Housing Court Action Steps. This was represented as editable Markdown snippets within Contentful. By doing this, we could reuse content while embedding external content like Google Maps.

Thanks to Contentful, changing or reordering any part of the process was a matter of drag-and-drop. Pages are rendered based on pathway using Gatsby Node API’s createPages function. It would create the six different pages for each Housing Court Page, in English, Spanish, French and Creole.

Deploying with Netlify

We tried Netlify for the first time since we heard they:

  • are geared towards hosting static sites
  • have a feature-packed free tier
  • simplify HTTPS certificate generation
  • include a system to deploy AWS Lambda functions

Connecting Netlify to the right branch in our GitHub repo was all it took (we have dev and production branches), and we were set to compile and deploy the site with a push.

The biggest Netlify feature for us was the ability to utilize build hooks with Contentful. Using Contentful’s webhook function, this let us trigger a new site build whenever content was added or changed from within Contentful. This made content management and rebuilding the site after simpler than ever.

Closing words

We managed to build and launch the website in a month. Since launching a little under a year ago, we have helped over 2,500 New Yorkers who have received an eviction notice. We provided them with access to free legal representation thanks to the website. This means great access to social services, rental assistance, and ultimately avoiding homelessness. The site now receives thousands of visitors on a regular basis.

Static sites are also low maintenance in nature and allow for quick deployment. This will allow us to focus on content distribution and online marketing efforts to ramp up adoption of the site in 2019.

For reference, you’re more than welcome to check out the source code on GitHub to improve your understanding on our web project!

Blog posts in your inbox

Subscribe to receive most important updates. We send emails once a month.