React Server Documentation Site

Engineering at Redfin

React Server Documentation Site

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 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.
Print Friendly, PDF & Email
Show Comments