skip to content
Andrei Calazans

Public Open Source Apps To Learn From

/ 4 min read

react , react-native , redux , graphql , typescript , open-source

I have been compiling a list of open source apps that I find online. In my career I felt that I learned a lot by being a contractor and working with multiple projects, thus you can learn a lot from reading these codebases and answering the following questions:

  • How do they organize their file structure?
  • Are there clear patterns on how to request network data and store it?
  • How do they do stlying and share reusable styles/components?
  • What/How do they test?
  • What libraries do they use?
  • What does their infrastructure look like? Is there a CI/CD pipeline?
  • How do they make Pull Requests, is there a pattern/template used?
  • How is the onboarding documentation like?

There is probably more questions you can try to answer, but I’ll stop here.

These projects are mostly real front-end applications. There are some that are full-stack monorepos. There are a bunch of open source framework/tooling repos you can checkout as well, my list contains stuff I normally build.

Signal Desktop React Electron App

Signal Desktop is an Electron application that links with Signal on Android or iOS.

You will see:

  • Strong testing culture
  • TypeScript, Redux, React-Router, and Websocket usage.
  • Github Actions

Repo

Signal keeps all of its apps open-source, you can also find their server written in Java, native iOS app and native Android app.

Sellflow React Native Expo App

A beautiful, customizable open-source mobile app template for your Shopify storefront.

You will see:

  • React, TypeScript, Apollo GraphQL with autogenerated type definitions, React Navigation usage
  • Its Apollo used local resolvers to store data on the client
  • Some Jest tests
  • Storybook setup for React Native
  • Custom hooks
  • Basic CircleCI flow to run tests

Repo

Spicy Green Book

How about a cross-platform (iOS, Android, Web) Expo app?

You will see:

  • Dev friendly onboard README with video!
  • React Navigation, Native Base, Stripe for payments
  • Lambda functions with Next.js’ API pattern.

Repo

Rainbow

the Ethereum wallet that lives in your pocket!

This is project is massive. If you want to see what a React Native app in production after five thousand commits look like this is the one. You are likely to need a few days to digest everything they are doing.

You will see:

  • Usage of Codepush, Sentry, Styled Components, GraphQL, Redux, Lodash, and more.
  • Lots of custom hooks
  • Redux using Ducks architecture
  • End-to-end testing with Detox
  • How to make Ethereum transactions in JavaScript = )
  • Bitrise CI/CD to run Detox tests & auto deploy to TestFlight

It is a great looking app.

Repo

Egghead.io

The frontend for egghead.io.

How about a modern Next.js React app?

This is a Modern React App that uses Next.JS and state machines. It is a world class codebase with modern practices built by very wise people.

You will see:

  • Usage of Tailwind, Stripe API, GraphQL, XState, Swr, Bitmovin Player, and more.
  • End-to-end testing with Cypress
  • Usage of Github Actions for testing

Repo

Parabol

Parabol is an open-source SaaS application for running team retrospectives and operating a distributed organization.

This codebase is a full-stack monorepo, expect to see a lot of interesting patterns with GraphQL and Relay.

You will see:

  • Usage of Relay GraphQL, React, Styling with Emotion, Cypress Testing, PostgreSQL, Websockets, and a Node Server.
  • Interesting pattern of breaking up GraphQL queries and mutations.
  • GraphQL Subscriptions
  • Suspense with fallback component
  • Query colocation
  • Usage of CircleCI for CI/CD

Repo

Devhub

TweetDeck for GitHub - Filter Issues, Activities & Notifications - Web, Mobile & Desktop with 99% code sharing between them

This is an excellent example of a monorepo structure for maximum code reuse between many platforms.

You will see:

  • Usage of TypeScript, Redux + Sage, Custom Hooks, React Spring, React Native Web, and more.
  • Rendering and Paginating large lists.
  • Usage of TravisCI for CI/CD.

Rocket.Chat

The ultimate Free Open Source Solution for team communications.

Similar to Signal, their apps are open source.

Meteor Website

Electron React App

React Native App

There is a lot to learn from these three repos, their React Native repo has a pretty good CI/CD setup for CircleCI that runs tests, deploys to TestFlight and Google Play Beta store, not to mention it does end-to-end testing with Detox.

For both React and React Native apps you can expect to find similar patterns with the usage of Storybook and Redux. The difference is in the file organization pattern, the Electron app does a module oriented approach.

That’s it

There are more but I won’t cover them all here. The list above is a great starting point for those interested in learning how React is done across different teams. Some patterns repeat, some don’t, seeing examples can help shape the decisions you make in the project you are part of.

I personally always use Github search box to look up examples of code patterns that match what I am working with - this allows me to see how others are solving the same problems.

If you made it to the end, share it with others, I appreciate it.