Max RozenMax Rozen
TwitterArticlesNewsletterUses

Examples of large production-grade, open-source React apps

It’s bloody hard to find a good example of a large production-grade, open-source React app.

There are a few reasons for this:

  1. No one writes amazing code the first time they write it

    • Experienced product engineers know there’s a trade-off between quality and getting features in the hands of customers. You’re more likely to find ugly tech debt with a //TODO: Improve this later! comment than best practices
  2. Most companies keep their apps in private repos

    • Trade secrets and all that jazz.
  3. There’s a lot of beginner-grade repos out there

    • Without a ton of experience, it’s hard to tell the good from the bad

On that note, I’ve reviewed the following well-known open-source React apps, and reckon they’re worth checking out.

I’ve split this article into two parts:

  1. Example Apps
  2. Apps with Users

Example Apps

Jira Clone by Ivor Reic

Jira Clone

Project link: Jira Clone

Jira Clone is… a Jira clone built in modern React, entirely out of functional components with Hooks. It’s noteworthy because its stack is more or less what I’d use on my own side-projects:

  • TypeScript with TypeORM on the backend, communicating with a Postgres database
  • React on the frontend with a custom webpack config
  • Relies on Cypress for end-to-end testing

On top of that, the author has done an amazing job making it look very similar to Jira (when the clone was built), using a mix of styled-components and global styles.

This repo also highlights the benefits of just working on a project by yourself with a clear understanding of what you’re trying to build. You’ll see the contrast when you check out the other projects in this article.

RealWorld aka Conduit by Thinkster

realworld-thinkster

Project links:

RealWorld by Thinkster re-implements the same app (a Medium.com clone called Conduit) in over 24 different languages and frameworks. In this case, we’re reviewing the React/Redux version.

It uses create-react-app, with react-router for routing, Redux for state management, classNames for styling, superagent for data fetching, with no testing, or type-checking.

It seems like a decent way to understand the syntactical differences between dozens of language and framework combinations, but isn’t exactly a beacon of best practices.

Real World App by Cypress

Cypress Real World App

Project link: Real World App

Real World App is a great example of best-practices to use for end-to-end testing an application with Cypress, with example data in the repo, so both tests and the app run out-of-the-box without the need for a database.

It’s built with create-react-app, written in TypeScript with an Express backend, using Material UI as a UI/component library, Formik for forms, and react-router for routing.

It looks like a pretty solid example of an application you would see in the real world, (especially since it uses forms), though data-fetching and form submission are optimised for ease of testing/portability rather than best practices.

Apps with Users

Simorgh by the BBC

BBC News Afrique

Project links:

Simorgh is the BBC’s React SPA, currently serving millions of users in production around the world. It is being progressively rolled out to each BBC World Service News website, and you can track the progress here.

It uses PropTypes for type-checking, Jest and Enzyme for unit testing, Cypress for end-to-end testing, styled-components for styling (with most components living in @bbc/psammead, which is an awesome component library to check out too), react-router for routing, with Express handling server-side rendering.

It’s extremely well-tested (98% coverage) and well-documented, with READMEs throughout the project to explain large directories.

AST Explorer by Felix Kling and open-source community

AST Explorer

Project link: AST explorer

AST Explorer is a tool for exploring Abstract Syntax Trees.

It’s worth checking out as a React project because it’s a good example of a project under continuous development for several years. It’s a classic React project that uses PropTypes for type-checking, and Redux for state management while still using local state where possible.

While you won’t find anything fancy like TypeScript/Flow here, the code is well commented, with hacks and workarounds clearly pointed out.

Some might say there’s some “tech debt”, as the authors have chosen to stick with class components, and not immediately rewrite to functional components + Hooks. Instead, they’ve maintained class components in older files, with functional components + Hooks in newer files.

Also worth noting, that like many real life, open-source projects, AST Explorer was started with the intention of adding tests later, but only one contributor in four years mentioned wanting to add tests in the GitHub Issues.

Excalidraw by Vjeux and open-source community

Excalidraw

Project link: Excalidraw

Excalidraw is a tool for drawing flow-charts, and various other diagrams with a hand-drawn style. I actually use it quite a bit for my own projects.

It’s worth checking out because it’s one of the most popular (in terms of daily users) examples of an un-ejected create-react-app application I’ve seen in production.

It’s written in relatively modern React (mostly functional components with Hooks) with TypeScript, uses SCSS for styles, there are tests, and rather than using Redux, they’ve lifted state up and persisted it in localStorage.

Spectrum by Spectrum

Spectrum

Project link: Spectrum

Spectrum is a community site, seeking to combine the features of a real-time chat app with the features of forums. It’s been under active development since early 2017, and was acquired by GitHub at the end of 2018.

Spectrum was very interesting to follow during its early years, as it used RethinkDB for (almost) live updates on queries, server-side rendering and GraphQL (very cutting edge at the time).

The codebase uses Flow for type-checking, Apollo (GraphQL) for data-fetching, Redux for state management, an Express server for server-side rendering, and uses functional components + Hooks, with custom hooks here. Naturally, as one of the founders is Max Stoiber (creator of styled-components), the app is styled with styled-components.

Since the acquistion, Max has written a post called Tech Choices I Regret at Spectrum that’s also worth checking out.

Sentry by Sentry

Sentry

Project links:

Sentry is a service that allows you to report on errors in your web app.

It runs on a Django backend, with a React frontend written in TypeScript (with PropTypes too), uses Emotion for styling, react-router for routing, Redux for state management, and is a great example of trade-offs and //TODO comments in a SaaS app with users that pay for it.

One peculiar thing to check out is that the app is internationalized, using a translation service to convert strings here.

Grafana by Grafana

Grafana

Project links:

I almost didn’t add Grafana as an example here, since it’s an AngularJS project in the process of migrating to React.

It’s an AngularJS app being progressively rewritten into a modern React app, written in TypeScript. It uses Redux for state management, an internal design system that uses emotion for styling (@grafana/ui).

It’s kind of a nightmare to navigate as a codebase, mainly due to mixing folders only used by AngularJS with folders only used by React, and that’s exactly why it’s in this article, as an example of what you’ll see in the real world.

GoAlert by Target

GoAlert

Project links:

GoAlert is an open source on-call scheduler and notifier (simlar to PagerDuty or Opsgenie).

It runs on a Go backend, using Apollo (GraphQL) for data-fetching, react-router for routing, Redux for state management, Cypress for end-to-end testing, Material UI for some components, and plain old CSS for styling.

Surprisingly, it’s a pretty good example of Cypress testing in a real application, using data-cy for selecting elements (for example).

Do you struggle to keep up with best practices in React?

I send a single email weekly with an article like this one to help improve the quality of your React apps. Lots of developers like them, and I'd love to hear what you think as well. You can always unsubscribe.

    Join 153 React developers who signed up this month!

    rssTwitterGitHub

    © 2020 Max Rozen. All rights reserved.