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:
- 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
- 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
Most companies keep their apps in private repos
- Trade secrets and all that jazz.
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:
Example Apps
Jira Clone by Ivor Reic
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
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
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
HospitalRun by HospitalRun
Project links:
HospitalRun is an offline-first electronic health record (EHR) and hospital information system (HIS) web application. It's an incredibly complete solution for OSS without a massive company building it (though it is sponsored by some companies).
It's written in modern React (as far as I can tell, not a single class component), with TypeScript, and uses SCSS for styles. Most components live in the components package (also worth checking out).
Simorgh by the BBC
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
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
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
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
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
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
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).
(Shameless plug for the useEffect book I wrote below)
Tired of infinite re-renders when using useEffect?
A few years ago when I worked at Atlassian, a useEffect bug I wrote took down part of Jira for roughly one hour.
Knowing thousands of customers can't work because of a bug you wrote is a terrible feeling. To save others from making the same mistakes, I wrote a single resource that answers all of your questions about useEffect, after teaching it here on my blog for the last couple of years. It's packed with examples to get you confident writing and refactoring your useEffect code.
In a single afternoon, you'll learn how to fetch data with useEffect, how to use the dependency array, even how to prevent infinite re-renders with useCallback.
