TL;DR
Open source is great for many things. One of them is learning new skills. In this article, we’ll look at some of the best Open Source React projects on GitHub that you can use to quickly boost your hands-on React learning and coding experience.
React tutorials will only take you so far
There are plenty of React tutorials available online. Many of them are excellent resources for teaching you the fundamentals of React. But where most courses fall short is when it comes to explaining how the different pieces of a modern React app tie together.
When first working on a large application, many developers find themselves struggling with questions such as “How do I efficiently manage my folder structure?” or “How can I pass state across a big application?”. These are the types of “real-life” coding issues that have been better tackled outside the classroom by teams that have actually worked together on building larger apps.
Open Source - A Free University
One way to develop these types of skills is to join such a team and see for yourself how the senior developers work on the application. But as simple as this approach sounds, these opportunities can seem few and far between, especially if you are at the beginning of your journey and you haven’t yet secured a job.
Thankfully there’s a free alternative that doesn’t require experience or an interview.
Open Source.
Open Source repositories enable you to get involved in large-scale projects immediately. It’s almost like a back-door cheat code to join these teams as a developer and get feedback from other devs by contributing to the project.
One of the many reasons we love Open Source
This is one of the many reasons we love open source. Not only is it great for the projects and the maintainers themselves (by getting contributions and input from the community), but it’s also a tremendous reciprocal benefit to all community members at large. Open source gives every developer immediate access to information, feedback and hands-on experience that can help them grow and progress.
These are just a few of the reasons we’ve been so excited about out the launch of our open source tool “Preevy” https://github.com/livecycle/preevy. Not only is it something that development teams can benefit from (by easily creating shareable preview environments), but it also has been a great way for us to engage with other developers in the community who are interested to learn from and contribute to a project such as this.
Feel free to check it out, leave us a star and make a contribution❤️❤️❤️!
So with that context, let’s settle in and look at some of the best Open Source React projects on GitHub that you can use to quickly boost your hands on React learning and experience.
Open Source React projects you can learn from
Cal.com
https://github.com/calcom/cal.com
Cal.com labels itself as “Scheduling infrastructure for absolutely everyone”. They’re a competitor to appointment scheduling services like Calendly. They have both a hosted and self-hosted offering. It’s a full-stack Next.js app that relies on tRPC for typesafe client-to-server communication. The repository has quite an extensive Monorepo setup (using Turborepo) to split the app up into various packages. On the styling front, Cal.com uses TailwindCSS and headless Radix components. The repository is very active and they actively encourage contributors. Many issues are labeled as “good first issue” and “help wanted”.
Taxonomy
https://github.com/shadcn/taxonomy
This one is a little bit different. It was built by a single developer as a demo to explore the new Next.js 13 App Router features. But don’t let that fool you. It’s arguably one of the most comprehensive Open Source apps out there that use the new App Router. So this is a great resource even for experienced React developers who want to learn how to use the App Router in production.
Besides Next.js for both front-end and backend, Taxonomy uses NextAuth for authentication, Prisma as the ORM and TailwindCSS with Radix for styling. Particularly interesting is the Stripe subscription integration. So if you’d like to learn how to integrate subscriptions into your app, this is the repository for you.
Highstorm
https://github.com/chronark/highstorm
Highstorm is a new player on the block. It’s a service to monitor events that happen in your application. You submit events through their API which then get fed into the Highstorm dashboard. Once again, this is a project based on Next.js. It uses Tinybird as the database for the analytics data and Clerk for authentication. This project is great if you want to learn how to process large amounts of analytics data and display them in fancy charts.
Dub.sh
https://github.com/steven-tey/dub
Dub.sh was launched roughly a year ago as an Open Source link shortener. It’s an alternative to services like Bitly. It is also based on Next.js and uses a combination of the old Pages and the new App router. It’s usually one of the first projects to adopt new Next.js features, such as the Metadata API.
The repository is a great place to learn about multi-tenancy Next apps. These are apps that serve different users under different domains. In the case of Dub.sh, users can add their own domain to create shortened links under. The app is also beautifully designed, with many joyful animations all over the site. The Framer Motion library is used to help with this.
Bulletproof React
https://github.com/alan2207/bulletproof-react
Bulletproof React is different compared to the other projects we have covered so far. The repository does contain a fully functioning demo React app. But the most value comes from reading the comprehensive documentation that comes with this app. This documentation lays out best practices for all aspects of designing a large-scale React app. This is a great resource to reference on a regular basis to refresh your memory on the best practices.
Wrapping up and getting started
As we have seen, each of the above repositories provides a unique perspective into how large-scale React applications are built. Everyone can benefit from studying the code of the repositories, no matter how experienced you are.
A practical tip for starting to learn from a repository is to pose a specific question. For example, you might ask something like “how does Taxonomy handle Stripe subscriptions?”. Then dig through the layers of code to find an answer to your question.
And one last point - exploring Open Source repositories is a great way to level up your React skills, but it’s not the only thing you should do. It is important to also apply your newly gained knowledge to your own projects. That’s how you’ll solidify new skills and retain the information.
The main thing is to enjoy the process, and recognize that open source is a friendly place to develop new skills, no matter what your current level of experience is.
