9 ms·

Ask HN: What good open source projects written in React that I can learn from?

270 points by GutenYe 10y ago

artellectual 10y ago
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
emilong 10y ago
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 10y ago
  Pretty nice commit history, this actually could be used to learn.
  - jurre 10y ago
    It is! It's part of a tutorial
praveenster 10y ago
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 10y ago
  It does (also redux), and their repo also contains a lot of useful reading material
- pc86 10y ago
  I remember doing a lot of WP consulting in the 2006-12 timeframe. The PHP was (is?) god awful. Difficult to parse, difficult to follow, and followed no discernible best practices. Spaghetti all the way down. I hope the React is better!
hellothree23 10y ago
Nice resource https://react.rocks/ https://react.rocks/
dmlittle 10y ago
https://pokedextracker.com https://pokedextracker.com is written in react https://github.com/robinjoseph08/pokedextracker.com https://github.com/robinjoseph08/pokedextracker.com
Cymen 10y ago
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.
caterama 10y ago
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
rarrrrrr 10y ago
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 10y ago
  Although it's cool that they open sourced this, I really wished they would open source their zero-knowledge backup client :(
  - amelius 10y ago
    Yes, every zero knowledge cryptosystem should be open source on the client side. Otherwise, what is the point?
samtoday 10y ago
Presenter Club is written in React/Redux: https://gitlab.com/presenter.club/presenter.club/tree/master/static/jsx https://gitlab.com/presenter.club/presenter.club/tree/master... https://www.presenter.club/ https://www.presenter.club/
niftich 10y ago
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 10y ago
  Redux is a great framework for ux development that maps well to architectural patterns like a service bus
astockwell 10y ago
Mattermost[1]: Open-source Slack alternative written in React and Go. [1] https://www.mattermost.org https://www.mattermost.org
- oelmekki 10y ago
  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 10y ago
    Hi @oelmekki, Could you share more on your issues with how Mattermost implements React?
    - oelmekki 10y ago
      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/components/about_build_modal.jsx https://github.com/mattermost/platform/blob/master/webapp/co... 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/bb69e98631b2541954b6ae465b8ba5f788b9dc49/webapp/components/post_view/components/post_list.jsx#L169 https://github.com/mattermost/platform/blob/bb69e98631b25419... 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.
rickhanlonii 10y ago
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
boyter 10y ago
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/
tbrock 10y ago
parse-dashboard: https://github.com/ParsePlatform/parse-dashboard https://github.com/ParsePlatform/parse-dashboard It even has user interface guidelines for the components.
whicks 10y ago
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.
Sir_Cmpwn 10y ago
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
goo 10y ago
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
umurkontaci 10y ago
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
jedireza 10y ago
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
OmarIsmail 10y ago
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.
nathantotten 10y ago
We have a bunch of open source react apps in https://github.com/auth0-extensions https://github.com/auth0-extensions
activatedgeek 10y ago
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
Novex 10y ago
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.
ehfeng 10y ago
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.
scrollaway 10y ago
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 10y ago
  Oh this is very nice, didn't know you could export games to be replayed on the web, well done.
  - scrollaway 10y ago
    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.
- keyle 10y ago
  This is interesting to see Heartstone mechanics with no animation or effects.
cellis 10y ago
React Isomorphic Starter Kit: https://github.com/RickWong/react-isomorphic-starterkit https://github.com/RickWong/react-isomorphic-starterkit
cybermarkus1 10y ago
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/
grinich 10y ago
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)
andy-shea 10y ago
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
andy-shea 10y ago
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
Buetol 10y ago
Sentry is also a nice non-trivial one: https://github.com/getsentry/sentry/search?l=JSX https://github.com/getsentry/sentry/search?l=JSX
fzaninotto 10y ago
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-component.html http://marmelab.com/blog/2016/09/20/custom-react-router-comp... * http://marmelab.com/blog/2016/10/18/using-redux-saga-to-deduplicate-and-group-actions.html http://marmelab.com/blog/2016/10/18/using-redux-saga-to-dedu...
slig 10y ago
I build this trivial SPA front end https://github.com/javascript-obfuscator/javascript-obfuscator-ui https://github.com/javascript-obfuscator/javascript-obfuscat... 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.
jacobjzhang 10y ago
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
- jasonlaster11 10y ago
  Thanks! We'd love to have OSS help. We try to be as beginner friendly as possible. Getting started is as easy as `npm install; npm start`. Here are our contributing docs - https://github.com/devtools-html/debugger.html/blob/master/CONTRIBUTING.md https://github.com/devtools-html/debugger.html/blob/master/C... We have lots of great "up for grabs" issues for first time contributors - https://github.com/devtools-html/debugger.html/issues?q=is%3Aissue+is%3Aopen+label%3A%22up+for+grabs%22 https://github.com/devtools-html/debugger.html/issues?q=is%3.... If you're interested, comment on one of the issues and it's yours. This week we've had lots of first time contributors and there's a lot of low hanging fruit.
  - ryneandal 10y ago
    This sounds like fun. I'll have to see if my kiddos will cooperate with going to bed on time this weekend.
- vmasto 10y ago
  I wonder what the reasoning is behind not using JSX.
  - treve 10y ago
    Not needing a transpiler would be a major plus.
  - jasonlaster11 10y ago
    yep - at the time we were not sure if we would want to transpile the code.
yamalight 10y ago
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
eg312 10y ago
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
indexerror 10y ago
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 10y ago
  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 10y ago
    Hello, this will clear things up: https://ashishchaudhary.in/gsoc-2016-finish https://ashishchaudhary.in/gsoc-2016-finish I should've posted it before!
riledhel 10y ago
For another type of application, you can check brave browser source code https://github.com/brave/browser-laptop https://github.com/brave/browser-laptop
crashdown 10y ago
I found this tutorial really really helpful: http://academy.plot.ly/#react http://academy.plot.ly/#react
ryanluker 10y ago
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
danesparza 10y ago
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!
purephase 10y ago
Metabase is written in React: https://github.com/metabase/metabase https://github.com/metabase/metabase
deleted 10y ago
[deleted]
deleted 10y ago
[deleted]
shanedaugherty 10y ago
https://medium.mybridge.co/22-amazing-open-source-react-projects-cb8230ec719f#.6syxev80e https://medium.mybridge.co/22-amazing-open-source-react-proj...
MicheleBertoli 10y ago
Check this out: https://github.com/zeit/hyper https://github.com/zeit/hyper
jwookie55 10y ago
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
jiji262 10y ago
You can't miss this one: https://github.com/airbnb/react-dates https://github.com/airbnb/react-dates Provided by Airbnb.
victorbinetruy 10y ago
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
sAbakumoff 10y ago
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#.mekyvmx36 https://medium.com/@sAbakumoff/react-entourage-6d51e7df9944#...
rwieruch 10y ago
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-redux/ http://www.robinwieruch.de/the-soundcloud-client-in-react-re...

270 points by GutenYe 10y ago

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

emilong 10y ago

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 10y ago
Pretty nice commit history, this actually could be used to learn.
- jurre 10y ago
  It is! It's part of a tutorial

praveenster 10y ago

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 10y ago
It does (also redux), and their repo also contains a lot of useful reading material
pc86 10y ago
I remember doing a lot of WP consulting in the 2006-12 timeframe. The PHP was (is?) god awful. Difficult to parse, difficult to follow, and followed no discernible best practices. Spaghetti all the way down. I hope the React is better!

hellothree23 10y ago

Nice resource https://react.rocks/ https://react.rocks/

dmlittle 10y ago

https://pokedextracker.com https://pokedextracker.com is written in react https://github.com/robinjoseph08/pokedextracker.com https://github.com/robinjoseph08/pokedextracker.com

Cymen 10y ago

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.

caterama 10y ago

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

rarrrrrr 10y ago

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 10y ago
Although it's cool that they open sourced this, I really wished they would open source their zero-knowledge backup client :(
- amelius 10y ago
  Yes, every zero knowledge cryptosystem should be open source on the client side. Otherwise, what is the point?

samtoday 10y ago

Presenter Club is written in React/Redux: https://gitlab.com/presenter.club/presenter.club/tree/master/static/jsx https://gitlab.com/presenter.club/presenter.club/tree/master... https://www.presenter.club/ https://www.presenter.club/

niftich 10y ago

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 10y ago
Redux is a great framework for ux development that maps well to architectural patterns like a service bus

astockwell 10y ago

Mattermost[1]: Open-source Slack alternative written in React and Go. [1] https://www.mattermost.org https://www.mattermost.org

oelmekki 10y ago
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 10y ago
  Hi @oelmekki, Could you share more on your issues with how Mattermost implements React?
  - oelmekki 10y ago
    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/components/about_build_modal.jsx https://github.com/mattermost/platform/blob/master/webapp/co... 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/bb69e98631b2541954b6ae465b8ba5f788b9dc49/webapp/components/post_view/components/post_list.jsx#L169 https://github.com/mattermost/platform/blob/bb69e98631b25419... 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.

rickhanlonii 10y ago

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

boyter 10y ago

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/

tbrock 10y ago

parse-dashboard: https://github.com/ParsePlatform/parse-dashboard https://github.com/ParsePlatform/parse-dashboard It even has user interface guidelines for the components.

whicks 10y ago

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.

Sir_Cmpwn 10y ago

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

goo 10y ago

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

umurkontaci 10y ago

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

jedireza 10y ago

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

OmarIsmail 10y ago

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.

nathantotten 10y ago

We have a bunch of open source react apps in https://github.com/auth0-extensions https://github.com/auth0-extensions

activatedgeek 10y ago

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

Novex 10y ago

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.

ehfeng 10y ago

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.

scrollaway 10y ago

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 10y ago
Oh this is very nice, didn't know you could export games to be replayed on the web, well done.
- scrollaway 10y ago
  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.
keyle 10y ago
This is interesting to see Heartstone mechanics with no animation or effects.

cellis 10y ago

React Isomorphic Starter Kit: https://github.com/RickWong/react-isomorphic-starterkit https://github.com/RickWong/react-isomorphic-starterkit

cybermarkus1 10y ago

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/

grinich 10y ago

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)

andy-shea 10y ago

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

andy-shea 10y ago

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

Buetol 10y ago

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

fzaninotto 10y ago

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-component.html http://marmelab.com/blog/2016/09/20/custom-react-router-comp... * http://marmelab.com/blog/2016/10/18/using-redux-saga-to-deduplicate-and-group-actions.html http://marmelab.com/blog/2016/10/18/using-redux-saga-to-dedu...

slig 10y ago

I build this trivial SPA front end https://github.com/javascript-obfuscator/javascript-obfuscator-ui https://github.com/javascript-obfuscator/javascript-obfuscat... 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.

jacobjzhang 10y ago

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

jasonlaster11 10y ago
Thanks! We'd love to have OSS help. We try to be as beginner friendly as possible. Getting started is as easy as `npm install; npm start`. Here are our contributing docs - https://github.com/devtools-html/debugger.html/blob/master/CONTRIBUTING.md https://github.com/devtools-html/debugger.html/blob/master/C... We have lots of great "up for grabs" issues for first time contributors - https://github.com/devtools-html/debugger.html/issues?q=is%3Aissue+is%3Aopen+label%3A%22up+for+grabs%22 https://github.com/devtools-html/debugger.html/issues?q=is%3.... If you're interested, comment on one of the issues and it's yours. This week we've had lots of first time contributors and there's a lot of low hanging fruit.
- ryneandal 10y ago
  This sounds like fun. I'll have to see if my kiddos will cooperate with going to bed on time this weekend.
vmasto 10y ago
I wonder what the reasoning is behind not using JSX.
- treve 10y ago
  Not needing a transpiler would be a major plus.
- jasonlaster11 10y ago
  yep - at the time we were not sure if we would want to transpile the code.

yamalight 10y ago

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

eg312 10y ago

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

indexerror 10y ago

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 10y ago
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 10y ago
  Hello, this will clear things up: https://ashishchaudhary.in/gsoc-2016-finish https://ashishchaudhary.in/gsoc-2016-finish I should've posted it before!

riledhel 10y ago

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

crashdown 10y ago

I found this tutorial really really helpful: http://academy.plot.ly/#react http://academy.plot.ly/#react

ryanluker 10y ago

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

danesparza 10y ago

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!

purephase 10y ago

Metabase is written in React: https://github.com/metabase/metabase https://github.com/metabase/metabase

deleted 10y ago

[deleted]

deleted 10y ago

[deleted]

shanedaugherty 10y ago

https://medium.mybridge.co/22-amazing-open-source-react-projects-cb8230ec719f#.6syxev80e https://medium.mybridge.co/22-amazing-open-source-react-proj...

MicheleBertoli 10y ago

Check this out: https://github.com/zeit/hyper https://github.com/zeit/hyper

jwookie55 10y ago

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

jiji262 10y ago

You can't miss this one: https://github.com/airbnb/react-dates https://github.com/airbnb/react-dates Provided by Airbnb.

victorbinetruy 10y ago

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

sAbakumoff 10y ago

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#.mekyvmx36 https://medium.com/@sAbakumoff/react-entourage-6d51e7df9944#...

rwieruch 10y ago

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-redux/ http://www.robinwieruch.de/the-soundcloud-client-in-react-re...