React Server Documentation Site - Redfin Real Estate News

React Server Documentation Site

by
Updated on October 5th, 2020

Twice a year, Redfin Engineering gathers for a hackathon. A few weeks ago we had our second hackathon of the year. For four days, 27 teams developed, designed, and implemented ideas that were submitted and voted on by hackathon participants. This is the story of one of those teams.

In May, we announced and open-sourced React Server, the universal web application framework that powers Redfin.com. React Server is great at handling details like data bundling, which ensures the server- and client-rendered DOMs are identical. React Server streams content to the client as portions of the page are ready, allowing the above the fold section to load before the rest of the page is complete. It also makes building single-page applications without code bloat a snap.

The Redfin site is powered by React Server, and is a great example of the power of React Server, serving in excess of one billion requests a month. However, it does not demonstrate how to build a React Server site. To address this, and to make it easier to learn all about the project, my hackathon team — six of us in total — built and deployed a React Server documentation site.

Screen Shot 2016-08-24 at 4.08.09 PM

Although we just put it out there, the site was posted on Hacker News (by a non-Redfinnian!) and made it to the first page. That led to great discussions, a lot of traffic to the documentation site, and more interest in the project! The project topped the GitHub trending projects list and spent several days on the trending page.

GitHub stars on the React Server project.
Stars on the React Server GitHub project, courtesy of Star History

The documentation page is off to a great start and proved to be a great hackathon project.

Here are some of the features of the new site:

  • Is powered by React Server. As such, it showcases React Server features, such as client transitions and data bundling.
  • Documents React Server. The documentation content comes from the project’s repository, and changes in the repository are reflected on the site quickly and automatically.
  • Documents its own source code on the site. How meta!
  • Is responsive, so it looks great on mobile. On that note, the site looks great overall because the team included one of Redfin’s amazing designers.
  • Provides the ability to request an invite to the project’s Slack community through an instance of the Slackin service we host along with the documentation service.

Leave a Comment

Your email address will not be published. Required fields are marked *

Be the first to see the latest real estate news:

  • This field is for validation purposes and should be left unchanged.

By submitting your email you agree to Redfin’s Terms of Use and Privacy Policy

Scroll to Top