Ask HN: What good open source projects written in React that I can learn from? - GutenYe
======
rarrrrrr
Not sure just what you're looking for, but SpiderOak's Semaphor is a
desktop/mobile end-to-end-encrypted Slack alternative where the presentation
layer is React, and the client side app backend (networking, crypto, database)
is Go. That keeps the React code focused and easy to follow.

Source is here:
[https://spideroak.com/solutions/semaphor/source](https://spideroak.com/solutions/semaphor/source)

~~~
chrisfosterelli
Although it's cool that they open sourced this, I really wished they would
open source their zero-knowledge backup client :(

~~~
amelius
Yes, every zero knowledge cryptosystem should be open source on the client
side. Otherwise, what is the point?

------
emilong
This is a nice, non-trivial, but not too big project in react and redux:

[https://github.com/andrewngu/sound-redux](https://github.com/andrewngu/sound-
redux)

~~~
lalos
Pretty nice commit history, this actually could be used to learn.

~~~
jurre
It is! It's part of a tutorial

------
scrollaway
Plugging in our own :) A Hearthstone replay engine

[https://github.com/HearthSim/Joust](https://github.com/HearthSim/Joust)

Example:
[https://hsreplay.net/replay/rjUdp6iC5FcQmKGmLX35RA](https://hsreplay.net/replay/rjUdp6iC5FcQmKGmLX35RA)

~~~
chriswwweb
Oh this is very nice, didn't know you could export games to be replayed on the
web, well done.

~~~
scrollaway
The whole thing is open source. Go check it out!

[https://github.com/HearthSim/HSReplay.net](https://github.com/HearthSim/HSReplay.net)

[https://github.com/HearthSim/python-
hearthstone](https://github.com/HearthSim/python-hearthstone)

[https://github.com/HearthSim/Hearthstone-Deck-
Tracker](https://github.com/HearthSim/Hearthstone-Deck-Tracker)

[https://github.com/HearthSim/HearthstoneJSON](https://github.com/HearthSim/HearthstoneJSON)

[https://github.com/HearthSim/extract-
scripts](https://github.com/HearthSim/extract-scripts)

Swing by the #hearthsim IRC channel some time and ping me (jleclanche) if you
are interested.

------
praveenster
The new Wordpress frontend code seems to be utilizing React:

[https://developer.wordpress.com/calypso/](https://developer.wordpress.com/calypso/)

[https://github.com/Automattic/wp-calypso](https://github.com/Automattic/wp-
calypso)

~~~
Mchl
It does (also redux), and their repo also contains a lot of useful reading
material

------
jacobjzhang
My buddy Jason and the Mozilla devtools team have been working on the next
version of the Firefox debugger, written in React and Redux:

[https://github.com/devtools-html/debugger.html](https://github.com/devtools-
html/debugger.html)

Open source FTW

~~~
vmasto
I wonder what the reasoning is behind not using JSX.

~~~
treve
Not needing a transpiler would be a major plus.

------
activatedgeek
FormidableLabs
([https://github.com/FormidableLabs](https://github.com/FormidableLabs)) is
doing some very good work in the React ecosystem. Here are projects that I'm
particularly excited about:

1\. Spectacle
([https://github.com/FormidableLabs/spectacle](https://github.com/FormidableLabs/spectacle)),
Presentation Library

2\. Victory
([https://github.com/FormidableLabs/victory](https://github.com/FormidableLabs/victory)),
Graphing Library

3\. Radium
([https://github.com/FormidableLabs/radium](https://github.com/FormidableLabs/radium)),
Component Styling

------
yamalight
I'm currently building a React app while trying to explain how/what I do in
weekly(-ish) videos. You can find the source code (along with links to videos)
on github: [https://github.com/yamalight/building-products-with-
js](https://github.com/yamalight/building-products-with-js)

------
niftich
I recommend 'debugger.html' [1] from Mozilla.

"debugger.html is a hackable debugger for modern times, built from the ground
up using React and Redux. It is designed to be approachable, yet powerful. And
it is engineered to be predictable, understandable, and testable.

Mozilla created this debugger for use in the Firefox Developer Tools."

[1] [https://github.com/devtools-
html/debugger.html](https://github.com/devtools-html/debugger.html)

~~~
patsplat
Redux is a great framework for ux development that maps well to architectural
patterns like a service bus

------
OmarIsmail
I highly recommend checking out React Toolbox [[http://react-
toolbox.com/#/](http://react-toolbox.com/#/)]. It's a horrible name for what
it is - but it's a Material Design implementation in React.

There are simple components, and then more complicated concepts like higher-
order components and factories. It has very good documentation, and is under
active development.

------
indexerror
I'll plug in my project here.

Work in progress: [https://github.com/Cloud-CV/cvfy-
frontend](https://github.com/Cloud-CV/cvfy-frontend)

It is a platform to build pipelines to showcase machine learning models on the
web. You select input components, output components, and use the cvfy-lib
python client to connect all these.

~~~
derwiki
Is this based on OpenCV? You say "machine learning models", but the Github org
says "computer vision as a service". Screenshots would be nice too :)

~~~
indexerror
Hello, this will clear things up:

[https://ashishchaudhary.in/gsoc-2016-finish](https://ashishchaudhary.in/gsoc-2016-finish)

I should've posted it before!

------
grinich
You might be interested in building React apps that support plugins safely:
[https://nylas.com/blog/react-plugins/](https://nylas.com/blog/react-plugins/)

The code is also open source:
[http://github.com/nylas/n1](http://github.com/nylas/n1)

(I work at Nylas)

------
caterama
ES6 React with react-router, server side rendering, and Webpack code splitting
+ tree shaking. It's based on the "huge-app" example from the react-router
project.

[https://github.com/5tefan/universal-react-
demo](https://github.com/5tefan/universal-react-demo)

------
jedireza
A website and user system starter. Server side is built with hapi.js. The
front-end is built with React. Redux as the state container. Client side
routing with React Router.

[https://jedireza.github.io/aqua/](https://jedireza.github.io/aqua/)

[https://github.com/jedireza/aqua](https://github.com/jedireza/aqua)

------
artellectual
I have a video series with source code, you can follow along if you want.

Videos: [https://www.codemy.net/channels/react-
foundation](https://www.codemy.net/channels/react-foundation)

Source Code: [https://github.com/codemy/invoiced-
ui](https://github.com/codemy/invoiced-ui)

------
rickhanlonii
We wrote slack-like app for reddit called Breaker and the front-end is written
in React:

\- [http://breakerapp.com/r/breakerapp](http://breakerapp.com/r/breakerapp)

\- [http://github.com/larvalabs/breaker](http://github.com/larvalabs/breaker)

------
fzaninotto
Admin-on-rest: Admin GUI for REST APIS, using react + redux + react-router +
saga + material ui

[https://github.com/marmelab/admin-on-rest](https://github.com/marmelab/admin-
on-rest)

Contains documentation and unit tests, plus a few neat react tricks (like a
custom React-router Route component and an accumulator saga), documented
there:

* [http://marmelab.com/blog/2016/09/20/custom-react-router-comp...](http://marmelab.com/blog/2016/09/20/custom-react-router-component.html) * [http://marmelab.com/blog/2016/10/18/using-redux-saga-to-dedu...](http://marmelab.com/blog/2016/10/18/using-redux-saga-to-deduplicate-and-group-actions.html)

------
Cymen
If you're interested in component composition, react-bootstrap is a good one
to look at for ideas:

[https://github.com/react-bootstrap/react-bootstrap](https://github.com/react-
bootstrap/react-bootstrap)

They are also accepting of new contributors.

------
ehfeng
Sentry
([https://github.com/getsentry/sentry](https://github.com/getsentry/sentry))
has a React frontend but it's a big enough project that it's less ideal for
learning.

------
rwieruch
React + Redux SoundCloud Application

GitHub: [https://github.com/rwieruch/favesound-
redux](https://github.com/rwieruch/favesound-redux) Live:
[http://www.favesound.de/](http://www.favesound.de/)

Basic feature set: Login, Sort/Filter/Search, Play Audio in Browser,
Pagination, ...

No over engineered libraries: normalizr, redux-thunk, react-touter, enzyme ...

Tutorial to build your own: [http://www.robinwieruch.de/the-soundcloud-client-
in-react-re...](http://www.robinwieruch.de/the-soundcloud-client-in-react-
redux/)

------
whicks
I had this same question awhile back:
[https://news.ycombinator.com/item?id=12497202](https://news.ycombinator.com/item?id=12497202)

Just leaving this here for reference and as a resource.

------
purephase
Metabase is written in React:
[https://github.com/metabase/metabase](https://github.com/metabase/metabase)

------
astockwell
Mattermost[1]: Open-source Slack alternative written in React and Go.

[1] [https://www.mattermost.org](https://www.mattermost.org)

~~~
oelmekki
As much as I'm reluctant to blame people who try to get cool products out
there, I must say that I actually uninstalled mattermost from my server (well,
deactivated from gitlab) after reading its source code, both go and react. I
would not recommend to use it to learn react.

~~~
it33
Hi @oelmekki,

Could you share more on your issues with how Mattermost implements React?

~~~
oelmekki
Hi @it33,

Sorry I had to say that, I know how depressing it can sound. Note that we're
in the context of recommending examples to someone wanting to learn about
react, so there's an expectation about finding the best code around.

The general critic I would make about Mattermost's React source code is that
it does not take advantage of react composable nature, and instead just drop
all the code in huge render methods, which are fairly difficult to read, and
probably to maintain.

Here is an example:
[https://github.com/mattermost/platform/blob/master/webapp/co...](https://github.com/mattermost/platform/blob/master/webapp/components/about_build_modal.jsx)

The render method takes 170 lines, putting tons of "stuff" in. This file could
easily have been split into 15 to 20 components to make it easier to reason
about.

Same here:
[https://github.com/mattermost/platform/blob/bb69e98631b25419...](https://github.com/mattermost/platform/blob/bb69e98631b2541954b6ae465b8ba5f788b9dc49/webapp/components/post_view/components/post_list.jsx#L169)

Almost 200 lines in the same function, containing rendering, looping,
conditional execution, more rendering, that is, about everything. This should
be split into more components and more functions. Most of files can be taken
as such examples.

I think that's actually a problem for Mattermost, because when you run someone
else code on your server, you take the responsibility for security breaches. I
know how horrible this sounds, it's super cool to be able to run a slack-like
app for free, self hosted. The thing is, reading the code, I'm not confident
the tools used has been properly understood yet, which in turn makes me
reluctant to execute it on my servers.

I wish you the best, though, you're on something with Mattermost!

EDIT: please also note this is not just Mattermost. I usually review part of
code of apps I want to put on premise, and decide whether to keep them or not
based of my level of confidence in it.

~~~
it33
Thanks oelmekki,

Highly appreciate the feedback--critique is valued, and we welcome hearing it
publicly.

It benefits Mattermost to have more people with deep React experience looking
over the project and suggesting changes.

One example is the discussion that influenced us to adopt React Router:
[https://github.com/mattermost/platform/issues/790](https://github.com/mattermost/platform/issues/790)

Mattermost started in the early days of React and you're right not all the
patterns were in place from the start--and you've pointed out areas we know we
want to re-write.

We're doing this by starting fresh with new React Native apps using Redux:
[https://github.com/mattermost/mattermost-
mobile](https://github.com/mattermost/mattermost-mobile)

The goal is to create a model for the future with React and Redux, and move
that back into the server.

Would you be interested in dropping by our Developer channel some time
([https://pre-release.mattermost.com/core/channels/developers](https://pre-
release.mattermost.com/core/channels/developers)) and maybe just hanging out
with us and sharing more of your thoughts?

For example, how would you break the re-write into parts, and prioritize?

How might we organize tickets for people to help?

On Wednesdays at 10am California time we have open developer meetings via
Hangouts if you're up for speaking in person (or any time really, we're always
looking for feedback).

Just a thought,

What I would note is that we have significant test coverage on the Mattermost
server and hundreds of manual tests run for each release, so the quality of
the end product is generally high, even if the React code isn't pristine.

I would say the Mattermost project is closer to the beginning than it is to
the end. Significant refactoring is on our roadmap, and we'd highly welcome
help.

~~~
oelmekki
Sure! I'm already under contract half time, and I work on my own company for
like two full time, so I can't be a big contributor, but I contribute here and
there to open source projects, so I can look around from time to time.

> For example, how would you break the re-write into parts, and prioritize?

I would probably do it component per component, factoring out complexity one
method at a time. I avoid "big rewrites", aka v2 or whatever, because I've
seen too many startups doing that to disastrous consequences (typically: a
whole dev team not releasing anything for like a year, and a "new" app that is
at the end not better than the previous one). Not really a surprise: v1s are
iterated on and always keep track of reality, by releasing often - which v2s
never do, they just try to bring everything at once.

> How might we organize tickets for people to help?

I guess people at Gitlab have way better ideas than me, given how successful
they've been at that :) I see you already have a "help wanted" section, that's
probably the most important, so contributors can quickly spot low hanging
fruits and help a bit.

------
tbrock
parse-dashboard: [https://github.com/ParsePlatform/parse-
dashboard](https://github.com/ParsePlatform/parse-dashboard)

It even has user interface guidelines for the components.

------
boyter
[https://github.com/madou/armory-react](https://github.com/madou/armory-react)

A Guild Wars 2 Armory. Fairly impressive. You can view it live too
[https://gw2armory.com/](https://gw2armory.com/)

------
hellothree23
Nice resource

[https://react.rocks/](https://react.rocks/)

------
eg312
I don't know how much you can learn from it, but here is a react + three.js
project I've done for testing:
[https://github.com/alexadam/bridges](https://github.com/alexadam/bridges)

------
victorbinetruy
MASAS - "Make A Sound And Share" www.masas.fm

[https://github.com/masasfm](https://github.com/masasfm)

All I know is that it written in react and by what seems to be three, very
passionate, brothers.

"MASAS.fm is going to be a platform on which all of an Artist's needs, from
creating music, to getting it discovered, to selling it and playing at live
events, can be met, for free. Thus eliminating the need for all the vicious
middlemen that have placed themselves between Artists and their fans.
Together, we can build that platform, one that will truly help all Artists,
without ripping them off of their music rights!"

www.MASAS.fm

------
riledhel
For another type of application, you can check brave browser source code
[https://github.com/brave/browser-laptop](https://github.com/brave/browser-
laptop)

------
danesparza
Facebook has some great tutorials and examples on their site:
[https://facebook.github.io/react/tutorial/tutorial.html](https://facebook.github.io/react/tutorial/tutorial.html)

Also: I would highly recommend getting familiar with both npm and
Babel/ES6/ES2015 -- even if you're not a node developer.

I found that understanding the tech was one thing, but when I actually started
building my own projects I sought out community help with specific questions I
had.

Have fun!

------
jwookie55
Ill plug our new project, Desklamp. Its a replacement for the Redux + React
Router standard. These two just weren't built to work with each other and so
take a lot of extra code. Desklamp solves this problem by delivering a single
library that handles both state and routing.

check it out here [https://github.com/desklamp-
js/desklamp](https://github.com/desklamp-js/desklamp) and feel free to make
pull requests and submit issues.

good luck in your tech journey

------
slig
I build this trivial SPA front end [https://github.com/javascript-
obfuscator/javascript-obfuscat...](https://github.com/javascript-
obfuscator/javascript-obfuscator-ui) to a Node.js package.

demo here:
[https://javascriptobfuscator.herokuapp.com](https://javascriptobfuscator.herokuapp.com)

It has just two reducers, uses redux-promise-middleware to make one ajax call,
and uses Semantic-UI for the UI.

------
sAbakumoff
Hi! Here is the top 100 of the most rated react apps in Github:
[https://airtable.com/shrB7DlRYXDlU23a6](https://airtable.com/shrB7DlRYXDlU23a6)
And the article that describes how I obtained this list:
[https://medium.com/@sAbakumoff/react-
entourage-6d51e7df9944#...](https://medium.com/@sAbakumoff/react-
entourage-6d51e7df9944#.mekyvmx36)

------
samtoday
Presenter Club is written in React/Redux:

[https://gitlab.com/presenter.club/presenter.club/tree/master...](https://gitlab.com/presenter.club/presenter.club/tree/master/static/jsx)

[https://www.presenter.club/](https://www.presenter.club/)

------
goo
[https://github.com/callemall/material-
ui](https://github.com/callemall/material-ui) is a great collection of
components -- there's perhaps some insight into how to make (and document!)
reusable components, since the project is built to be a component library for
others' use

------
cybermarkus1
I built my own react-cellar to learn react, redux, typescript, and so on.

GitHub: [https://github.com/ayxos/react-
cellar](https://github.com/ayxos/react-cellar) Web: [https://react-
cellar.herokuapp.com/](https://react-cellar.herokuapp.com/)

------
umurkontaci
WordPress.com front end is written with React. It's one of the biggest React
projects, and it is used in production. We are actively developing on GitHub
and trying develop out in the open.

[https://github.com/Automattic/wp-calypso](https://github.com/Automattic/wp-
calypso)

------
ryanluker
If you are looking for more of a learning project (and in typescript) I
converted Wes bos' react tutorial series for my own learning
[http://www.github.com/ryanluker/typed-catch-of-the-
day](http://www.github.com/ryanluker/typed-catch-of-the-day)

------
dmlittle
[https://pokedextracker.com](https://pokedextracker.com) is written in react

[https://github.com/robinjoseph08/pokedextracker.com](https://github.com/robinjoseph08/pokedextracker.com)

------
andy-shea
Octopush - A simple GUI for Capistrano built on React and Redux with server-
side rendering

[https://github.com/octahedron/octopush](https://github.com/octahedron/octopush)

------
Sir_Cmpwn
I helped out a lot with this codebase, it's well on its way to becoming a
production React SPA:

[https://github.com/Linode/manager](https://github.com/Linode/manager)

------
Buetol
Sentry is also a nice non-trivial one:
[https://github.com/getsentry/sentry/search?l=JSX](https://github.com/getsentry/sentry/search?l=JSX)

------
shanedaugherty
[https://medium.mybridge.co/22-amazing-open-source-react-
proj...](https://medium.mybridge.co/22-amazing-open-source-react-projects-
cb8230ec719f#.6syxev80e)

------
cellis
React Isomorphic Starter Kit: [https://github.com/RickWong/react-isomorphic-
starterkit](https://github.com/RickWong/react-isomorphic-starterkit)

------
jiji262
You can't miss this one: [https://github.com/airbnb/react-
dates](https://github.com/airbnb/react-dates)

Provided by Airbnb.

------
nathantotten
We have a bunch of open source react apps in
[https://github.com/auth0-extensions](https://github.com/auth0-extensions)

------
crashdown
I found this tutorial really really helpful:
[http://academy.plot.ly/#react](http://academy.plot.ly/#react)

------
Novex
f8app -
[https://github.com/fbsamples/f8app](https://github.com/fbsamples/f8app)

React Native, but same idea. There's also an excellent set of posts at
[http://makeitopen.com/](http://makeitopen.com/) which run through how it was
built and why.

It's responsible for a lot of my 'aha' moments about Flow type-checking and
Redux.

------
MicheleBertoli
Check this out: [https://github.com/zeit/hyper](https://github.com/zeit/hyper)

