In the last couple of years, React has risen to become a massively popular JavaScript library and developer ecosystem. There are tens of thousands of software projects that use React and many of them are publicly available on Github. It’s fun and enlightening to check out what other developers have made with React and dig into how they write code.

But since you might not want to spend your free time combing through public React-using projects (or maybe, you might…), I went and found 12 great ones (for part 1) for you to check out. I hope these inspire you to try new design patterns, new libraries, or simply just build new things.

My criteria for searching was they be somewhat interesting, have a functioning demo, and be updated after mid 2017.

Calypso is a project by Automattic, the creators of WordPress. WordPress is a famously PHP using project so this was Automattic’s fun foray into the JavaScript and React worlds. They built a very helpful dashboard for WordPress power users to manage their projects.

This is an incredibly clever map of London tech companies superimposed on a subway map and made by jobsite Honeypot. It appears to be built only in React and let you filter with the sidebar as well as the map. You can filter based off of technology or industry. This is a great project for learning filtering and routing from events on a map.

As someone who cooks a lot of Thai and Indian food (and would like to learn more cuisines), this is a super cool app for learning all about different world spices. This projects uses react-native-animatable and react-native-swiper to create smooth animations and swiping through the content. This would be a great project to model after if you’re taking on a static content browsing app using React Native.

This a well-organized React + Firebase Trello Clone. I’m impressed how much it looks like Trello. This project uses Brad Frost’s atoms, molecules, and organisms method for organizing components.

This is a React + GraphQL + Server-side rendering based Hacker News redesign. The components and GraphQL queries seem to be well-organized. I almost like this interface better than the default.

This is an elegant Spotify player built with React, Redux and Semantic-ui. It uses react-soundplayer to play the mp3s. This is a good project for learning to use the Spotify API (including reading user data). As much as I love Bootstrap and Material-ui, Semantic-ui is a breath of fresh air.

I’d never seen such an elegant menu until I saw this one. This excellent code is accompanied by a thorough tutorial on CSS tricks. Now there’s no excuse for a janky mega menu!

Here’s a very accurate looking AirBnB mobile clone using React Native, Redux, react-native-vector-icons, react-navigation, redux-thunk, and redux-logger. This would be a great project for anyone needing to make an elegant travel app or needing to learn the advanced parts of Redux.

This is likely my favorite of bunch. Click the demo! Watch Portland’s busses move in real-time through the app. This is one of those ‘where have you been all my life?’ types of apps. The map is built using Leaflet and and react-native-maps. This an excellent example for anyone needing to build realtime cross-platform apps using JavaScript.

This an awesome Tetris clone built using Redux, Immutable.js, PostCSS, Less, and many other libraries. It uses localStorage to save your game play. There is a ton of complexity and tooling that went into making this all look so simple and like real Tetris.

Berlin-based developer Robin Wieruch has made quite a name for himself with massive and thorough tutorials on React, Redux, Mobx, Firebase and GraphQL. His tutorials will definitely send you down an educational rabbit hole. This set of tutorials shows how he converts a Redux soundcloud player to Mobx. This is invaluable for any developer considering either technology or needing to learn about state management

 

It’s no surprise that a lot of the projects I’ve mentioned have used Redux. But this simple Youtube clone uses the newer React context for managing state. This projects also uses styled components and TypeScript. This code base would be helpful for anyone needing a simple example of these technologies tied together in action.

 

I hope these projects send you down a fun rabbit hole of architecture patterns, library discovery, and dreaming up your next project.

 

The post 25 Public React Repos/Apps to Inspire Your Next Project (part 1) appeared first on appendTo.