List of Open Source React projects on GitHub to learn from

As you grow your knowledge in React.js, you will notice that there are many sources with simple code examples but only a few of advanced stuff. And many of them have “outdated code” (no hooks, class components everywhere, etc).

What if you want to know how to structure a medium to large codebase? Or if you want to know if you are doing everything fine?

One way to improve your skills is to study what other devs are doing. How they approach their projects can teach you lessons that maybe will take you weeks to learn.

That’s why I made this list of open-source React.js applications you can learn from. All uses modern features such hooks, context and many uses redux-toolkit. So, no matter if you already have hit a plateau as seasoned developer or if you’re just starting, take a look!

1) Take Note – Live | Repo

Take Note is an open-source project to take notes, known as The Note Taking App for Developers

It’s a simple plain-text take note app with markdown support. Without all the fancy stuff that we don’t need :)

The code seems to be good organized:

It uses React hooks (yay!) and redux-toolkit =) (see the slices folder). See how slices/auth.ts looks like:

2) PrologApp – Live | Repo

The application is an error logging and monitoring tool similar to Sentry or Rollbar, built by Johannes Kettmann.

It’s built with Next.js, a feature-based project structure, and lots of tooling like ESLint, Prettier, TypeScript, Cypress, and Storybook.

What do I mean by “feature-based project structure”? Well, it has a “feature” folder where you can find a “issues” and “projects” folder:

And inside each folder, you can find the components, api, and types:

If you want a Codebase Tour, you can see it here.

3) Cloud Music - Repo

This is a clone of NetEase, a cloud music streaming service. The README is in Chinese but the code is in plain English.

This project uses redux (without redux-toolkit) and hooks. What I find interesting in this project is the code structure:

At first, it seems pretty standard but after reviewing the reducer (store/reducer.js) I noticed that they are “grouping” (inside application folder) some components and styles alongside the redux logic:

4) Todoist clone - Repo

Karl Hadwen did this Todoist clone, and he even has a video tutorial on Youtube.

For the “backend”, he used Firebase instead of building an API from scratch. He used context and didn’t use redux (yes, you don’t always need to use redux).

5) Mortgage – Live | Repo

Mortgage is a mortgage overpayment calculator!

It uses D3 to draw the chart and hooks! It is a small app but it is a good start to learn how to use hooks in calculator-like applications.

6) Tomato Work – Live | Repo

Tomato-work is a personal affairs management system written in React using hooks and redux:

For the UI, it uses Antd, which is pretty awesome BTW. The code structure is standard:

What I find interesting is that it has a services folder (remind me of angular) where each file is an abstraction to make API calls. So instead of calling axios directly in the component, he uses a service function instead.

7) Write with me – Live | Repo

Write with me is a real-time collaborative markdown editor written in React with hooks and it uses AWS Amplify

As you can see, this is a small project:

So, the code structure is not organized using different folders. All the state management is done using useReducer hooks.

There is a graphql folder because Amplify works with graphql

8) JIRA Clone – Live | Repo

This is a simplified JIRA Clone, looks awesome!

Analyzing the code structure, you can see it uses cypress and jest for testing:

As the author says, it is a good example of a modern real-world React codebase. There are the features (from README):

9) Spectrum – Live | Repo

Spectrum is a platform that allows you to create and participate in awesome communities.

I have seen many people recommending this repository. And there is a good reason for this: the repository is their entire product!

“That being said, this codebase isn’t your typical open source project because it’s not a library or package with a limited scope—it’s our entire product.”

In my opinion, this is one of the best open source full-stack react projects that shows off how to properly structure a large codebase

The frontend SPA (react) lives in src folder

As you can infer from the folder structure, they split the code by “type” of code (components, reducers, hooks, etc).

10) GitHub profile README Generator – Live | Repo

This tool provides an easy way to create GitHub profile README with the latest add-ons like visitors count, GitHub stats etc.

This is an example of a Gatsby project that uses hooks. The files are organized by type which is fine for the size of the project:

If you haven’t created your GitHub profile, maybe you can now by using this tool (I did!)

11) Moose - Live | Repo

Moose is an application to stream, cast and download torrents built with Nextron.

What is Nextron? It’s “Next.js” (for Server Side Rendering) + “Electron” (to built desktop app using web technologies).

I don’t have experience building this kind of apps. But as far I can see, the file structure is by file type:

The project uses TypeScript and for custom styles css-modules

12) Courselit - Live | Repo

Courselit is an app that helps you to start your own online teaching business.

How? Well, it is a CMS (content management system) for starting creating your own courses which uses Stripe to receive payments. It is an alternative to paid solutions (like Teachable).

Frontend is built with Preact (instead of React) with Next:

Backend is Express with MongoDB.

Something interesting is that this is a MonoRepo, which means in the same github repo lives frontend and backend as separated packages (see packages). To manage multiple javascript packages in the same repository, it uses Lerna.

13) Fireact - Repo - Live

Fireact is an app to build your own SaaS where you can receive payments through Stripe.

It is a full-stack app built with Firebase and React (CRA).

File structure is a mix betweeen “file types”:

And “by page”. Pages are split between “auth pages” and “without auth”:

It uses Firestore as you can see in UserList (here).

And for the UI, it uses coreui which is an Admin template for Bootstrap:

Did I miss a project?

It was a bit hard to find open-source projects using the latest react tools (e.g. hooks) 😓.