React Code — Unsplash

5 Real World React Projects To Help you learn — No ToDo Apps!

George Field
May 10 · 10 min read

So…how many tutorials have you been watching lately? I presume with most of you the answer is a lot! While I am all for learning, and would never discourage it, doing is better than watching and in this article we take a look at 5 React Projects that you can get started on right away to start apply what you are learning or to just create something cool.

I have highlighted potential learning opportunities, Resources and a brief overview of how you could implement each idea.

1) Crypto Dashboard App

According to a recent report by business insider, the Crypto Market is worth an estimated $267 billion and is growing rapidly. With ever changing markets, and a huge demand for Crypto, there is a huge need for tracking various currency prices.

Why not build your own Crypto dashboard that allows you to view the price of various currencies over a time period. Crypto Trading dashboards are a common use case for React with many trading platforms using React as the UI of choice.

Potential Learning Opportunities

Implementation

Data Source: Getting data for this idea is straight forward. You will need to take a look at one of the following REST APIs to get data on Crypto prices.

UI: To implement this, take a look at some data visualisation libraries such as Chart.js, dygraphs, Flot or D3.js. You can use these to display data that you fetch from APIs for the Crypto prices.

If you want to take it a step further and turn it into a fully fledged dashboard, take a look at ANT designs free UI component library. You will find an awesome collection of components that, when combined with charting libraries(like the ones mentioned above), enable you to create very powerful and interesting dashboard views.

I would also recommend taking a look at something like React Redux or MobX for helping out with state management, if you want to use GraphQL then take a look at Apollo to help you out there. You could also opt with using reacts context API and hooks here however knowing at least one state management library will pay dividends in the long run as they are commonly used among enterprise applications.

Resources

Charts: Chart.js, dygraphs, Flot or D3.js.

A useful article that may get you off the ground is this one by Ethan Ryan.

2) Social Media Feed Tool

Research posted by Statistica’s research department has reported that the average person had 8.5 Social Media Accounts, that is before the recent emergence of TikTok which will have undeniably bolstered that number.

How is that useful for creating a react app I here you ask? Well, with all of these accounts why not find a way to manage them in one place!? This presents an opportunity to learn and create a cool tool.

You could build a React Social Media Tool that lets users, or yourself, view and manage multiple feeds in one place. It could look something like below:

Social Media Tool Wireframe

Or maybe you could make it a Drag and Drop able type of interface where the user can move social media tiles around(take a look at
react-dnd). Take a look getstream.io for possible inspiration!

Potential Learning Opportunities

Implementation

Data Source: Data for this will require social media accounts and utilising their APIs. Twitter has a great API that I am sure you will find useful for gathering social data.

Other APIs for social feeds:

UI: The UI will require some form of Card to display the social information to users. You will also need to display multiple in some form of feed or, if you go for the drag and drop approach, a drag-able card(Like I mentioned above, you can use react-dnd for that).

If you want to add some form of infinite scroll, take a look at the React Infinite Scroller package, it will save you a lot of time and there is a lot of support available.

User Authentication and Management: I would take a look at Firebase, if you decide to make this a product. It is a wonderful service that provides a fully fledged back-end that can be accessed via a library that Firebase provides.

This will allow you to log users in and out, manage various common back-end problems and issue tokens.

A token( or web token) is a method for identifying a user and providing increased security for data flowing through an application by adding a signature and/or encryption.

Resources

Google Firebase

Build a simple twitter like feed with React

Beginners React & Firebase Tutorial

3) Movie Search app using Elasticsearch
and ReactiveSearch

According to UXBooth, “Search is a fundamental activity and a critical element of building a content-heavy app or site.”. Think about how difficult it would be if you went to your favourite, content heavy website, and the only option to find what you are looking for is by clicking a “next page” button.

MovieSearch

Low and behold, we have search functionality as a solution!

As a result though, you will more than likely find that at some point in your carer you are involved with implementing the above functionality. Fortunately there are an abundance of tools that have been created to help with exactly that. One of which, is Elasticsearch.

Elasticsearch is a super fast, open-source, full-text search engine. It allows you to store, search, and analyse large volumes of data quickly (we are talking milliseconds here). It is generally used as the underlying engine/technology that powers applications that have complex search features and requirements. With React we can use ReactiveSearch to build a layer over the top of it to create a really fast search engine.

So, Why not create a movie search app that lets you search by topic, title or actors so that you can learn how to do it?

Potential Learning Opportunities

Data Source: You can use something such as The Movie DB to get a collection of movies that you can then store in Elasticsearch. You could do this by creating a simple script that makes a request to get the movies and then formats them into the structure that Elasticsearch expects and then stores them in Elasticsearch(Note: You would only need to do this once).

UI: Use something like React Material UI to build out a simple interface that a user can interact with. As a starting point, I would recommend that each search result that is displayed contains a movie name, rating, description and link to a trailer.

Material UI has a great list of components, including an App Bar component that will make a perfect home for a search input box.

Resources

4) Ecommerce Store using Redux, Stripe and a product API

Oberlo’s latest report stated that It is estimated there will be 2.05 billion global digital buyers in 2020. $3.46 trillion online in 2019 so it is definitely worth adding an eCommerce based app to your portfolio.

Ecommerce App

eCommerce based apps are one of the most common use cases for React. Shopify, one of the largest eCommerce platforms, is built using React as its front end. One project you could work on is building an eCommerce store using Redux, stripe and a mock Product API to get your product data. For the UI you could use the Bootstrap UI kit that you can find in the resources list below.

For this project, Build a store with React, Redux and Stripe being the primary focus, that sells retro clothes.

Potential Learning Opportunities

Data Source: For your source of data, I’d recommend using a Mock RESTful API to provide you with products. Create some products that use the following structure.

{'id': 'someIdasda','title': 'Product Title','imageUrl' : 'somerandomurl','description' : 'sadasd asd asd hjfdsgh sdjfhg fdhg sl','price' : '$45.99','tags' : ['Image', 'Cool', 'Nike']}

UI: For this, like I mentioned above, I’d recommend using react bootstrap to give yourself a fully usable component library, saving you time. React Bootstrap also has a tone of really useful cards and is perfect for creating a UI for an eCommerce based app.

Stripe: Stripe is a powerful and awesome tool that gives us developers so much power when it comes to monetising our projects. Stripe is an online payments system that handles billions of dollars every year.

This makes it a perfect fit for an eCommerce app and it will integrate perfectly into our system. Once you have a basic UI, You could create a basket in your app and then use stripe to charge cards. Stripe provides a set of libraries and APIs to allow you to do this, such as the Pre-built checkout library.

Resources

Inspiration Store — built with react!

Great tutorial and article on building an eCommerce store with React and Redux.

5) Build an Admin panel

Data Visualisation and the gathering of core metrics is a fundamental aspect of any part of a business and is commonly used as a means of Tracking costs, budgets, leads, revenue…the list is endless. As a result businesses often turn to admin dashboards / apps to collect data in a single place.

There are so many different dashboards for different industries so I would recommend picking something that interests you. It could be anything, Football, Crypto, Stocks, Marketing, Human Resources…the world is your oyster!

A great project would be to build an Admin Panel with Three Screens on it. You could split them up into the following:

Overview Page

This page would be the screen that you see when you login and is the home of the dashboard. It could showcase marketing data, revenue, units sold ect. You could go down a similar path to the one in the image above where graphs are used to showcase growth over time.

Social Page

A page that allows users to get the details of other coworkers. Each profile could contain some basic user info, such as a bio, social profiles and a mail button that when click opens up the default email tool on the users computer.

Profile Page

This page highlights the core profile details of the user and is a place where they can edit their details. You could display an abundance of different data here, take a look at the data sources mentioned below for an idea of what you could include.

Potential Learning Opportunities

Data Source: To power the various pages mentioned above, you can use different APIs to experiment with different data and ideas. Consider this idea a bit of a playground for you to express any cool data ideas you may come up with.

List of Marketing APIs:

Stripe

LinkedIn Marketing Developer

Amazon Product Advertising

You can find more in this article.

If you want to find some other APIs, do a quick google search for the area/topic/industry you interested in followed by “API” or “REST API” and you will most likely find something that you like.

UI: You are open to options here! You will be best picking one UI component library that you like, I have listed a few below, and some form of Data visualisation library, such as D3.js or Chart.js.

Resources

A cool medium article on how to build an Admin dashboard with React that is really good is this one by Saurabh Mhatre.

Some inspiration can be found at madewithreactjs.com

List of UI libraries

Conclusion

I hope you find the above projects really awesome and useful! If you build any of these you will learn an abundance of skills and really get to explore react in a number of different ways.

If you want to get hold of me please comment below or reach out to me on twitter @degreelessdev

Frontend Weekly

It's really hard to keep up with all the front-end…

George Field

Written by

Software Engineer, creative thinker passionate about creating Applications and data solutions.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

George Field

Written by

Software Engineer, creative thinker passionate about creating Applications and data solutions.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store