16 Opensource Reactjs Projects for Reference

July 22, 2018 0 Comments

16 Opensource Reactjs Projects for Reference



ReactJS can be confusing for beginners when they have just finished with their tutorials on React and started using React in real life projects. Having multiple open source projects as reference can help them write better code.

If you are someone who is in your initial stage of learning React and you need some reference projects, you are at the right place. Open-source React projects can get you a better understanding of how everything works and helps you write better code. Here are some ReactJS applications for content management, task management, iTunes application, Google Maps etc. to showcase how ReactJS can be useful in different use-cases.


1) Calypso


Calypso is the new WordPress.com front-end – a beautiful redesign of the WordPress dashboard using a single-page web application, powered by the WordPress.com REST API. Calypso is built for reading, writing, and managing all of your WordPress sites in one place.

  • Front-end:

  • Back-end technologies:

2) Sentry


Sentry provides real-time crash reporting for your web apps, mobile apps, and games. The Sentry package fundamentally is just a simple server and web UI. It will handle authenticating clients (such as Raven) and all of the logic behind storage and aggregation.

  • Front-end:

  • Back-end technologies:

3) SoundRedux


A Soundcloud client built with React / Redux.

  • Front-end technologies:

  • Back-end technologies:

4) Phoenix Trello

Pheonix trello

Phoenix Trello is a single-page application where existing users are will be able to sign in, create some boards, share them with other existing users and add lists and cards to them. While viewing a board, connected users will be displayed and any modification will be automatically reflected on every connected user's browser in real-time a la Trello style.

5) Kitematic


Kitematic is a simple application for managing Docker containers on Mac, Linux and Windows.

6) Google Map Clustering Example

Google Map Clustering Example

This is a clustering example for Google Map React with point clustering with smooth animations from react-motion.

7) Fil


A playground for in-browser interpreters, to do live coding in your browser with your favourite language. It currently supports Python, Ruby, Javascript, Brainfuck and happycalculator.

  • Technologies used:

8) React iTunes Search

React iTunes Search

A simple web app for iTunes store search, built with React, ES6, Semantic UI, Webpack. Instead of searching and finding all your favorite items in the iTunes store application on you PC or laptop, you could do it on your browser.

  • Front-end:

  • Packaging components

9) Sprintly


Sprintly is an agile project management suite. It allows users to see tasks in each stage of the development process: Someday, Backlog, Current, Done, and Accepted.

10) Glimpse


Glimpse is an OSS diagnostics platform. It inspects web requests as they happen, providing insights and tooling that reduce debugging time and empower every developer to improve their web applications.

11) Grommet


Grommet is an advanced UX framework for enterprise apps developed by HP.

12) Dockunit


Dockunit.io is a containerized continuous integration service for testing software written in any language across any type of environment.

13) Retrospected


This is a Retrospective Idea board, powering retrospected.com.

14) Spectacle


Spectacle is a ReactJS-based presentation library with presenter mode, PDF export, themes, transitions, bg images. It shows you a slide lookahead, current time and your current slide:

15) Storyboard


Storyboard is a end-to-end, hierarchical, real-time, colorful logs and stories which is a library, plus a Chrome DevTools extension.

16) Gatsbyjs


Transform plain text into dynamic blogs and websites using the latest web technologies. A React.js static site generator. It supports Markdown, HTML, and React.js pages out of the box. It makes it easy to add support for additional files types. Leverages React Router's "nested component hierarchy" to make templating incredibly intuitive. All templates, css, and content are hot reloadable — powered by Webpack.

Share the love

Published in javascript, web-development | Tagged with javascript, open-source, web-development, products

  • Tag cloud