Search justacoding.blog. [Enter] to search. Click anywhere to close.

February 28th, 2021

8 React Project Ideas For Your Portfolio

Looking for some React project ideas to present within your portfolio?

You’ve come to the right place!

Effectively demonstrating your abilities is a crucial part of obtaining employment within the web development world. For React developers, having a fully functioning single page app that interacts with an external API could be an excellent place to start.

We’ve compiled a list of 8 interesting ideas for you to think about.

Requirements

Backend work is not required in any of the project ideas, but we’ll be using “real” data. There are many public APIs out there in the wild — we’ll be taking advantage of these throughout the list.

A portion of the public APIs contained in the repository above will require an API key – but that’s clearly stated in the article itself.

In general, the ideas are simple enough without many moving parts. This means that it’s easy to get a MVP (minimum viable product) up and running. The idea is then to expand on this, as you wish, fleshing out more features as required.

Let’s get started with the React project ideas!

1. A weather app

It’s something we’re all familiar with, so why not have a go at making your own?

weather app
It’s a sunny day today!

There are plenty of APIs out there that return weather data for a specific location — like this one from MetaWeather.

You can rely on an API like this one to supply your application with any and all data you’ll need; the implementation itself just relies on communicating with this API and then forming a great user experience in the process.

I think this idea is particularly interesting because it provides a great opportunity to explore some nice visuals and really focus on getting the user experience right.

For instance, imagine a weather app with smoothly animated icons alongside full-screen gradients that shift and change based on the returned weather data.

A cold rainy day would render the screen in blues and greys, maybe with some water droplets here and there. A sunny day would do the opposite.

There is a lot of scope to create a visually stunning experience that is dictated entirely by the remotely-fetched data.

2. A React component library

This is the only idea in the list that doesn’t require an external API (or fake/mocked data) – let’s discuss it.

The reason I think a component library is a great example of a React project idea that could work well in your portfolio is simple. Creating an effective component library means creating components that are clean and easy to re-use.

The focus of your component library could be anything – for instance form elements or slideshow/carousels, but the components must be well constructed and fit for purpose.

This provides a great opportunity to really show off your technical prowess.

One of the core tenants of React is using smaller components to build up larger components (component composition).

Having a good grasp on this is a great start, and demonstrating this knowledge within your portfolio is a positive signal to potential employers.

Not only that, you may be able to create something that you’d like to re-use yourself within your own React projects in the future!

3. A personal bookshelf/library app

There are many public APIs that you can use to retrieve data on books and literature.

library
A virtual place to keep all of your books…

One app idea may be a personal library — where you can search for books you have read, books you are reading, or books you would like to read. From here, you can add them to your virtual collection.

In addition, it would be nice to be able to make notes on these books, as well as provide a rating for each.

Basically, a miniature version of Goodreads – for those of us who are familiar.

The proof of concept would require only the frontend (React) component alongside whichever API you choose to utilize (note: Goodreads actually has its own API, too).

To actually save the resultant data (the user’s virtual collection), you’ll need to implement some sort of persistent storage. For the sake of getting a proof of concept up and running, however, this wouldn’t necessarily be required.

This React project idea may be particularly appealing to the bookworms among us.

4. An app to validate “things”

If you looked through the list of APIs above (here is the list of public APIs again) — you may have noticed the “Validation” section.

An interesting React project idea for your portfolio could be to provide a simple frontend to interact with one (or more) of these data validation APIs.

So the user accesses your app, then selects an item from the menu — “what would you like to validate?

Their data input is fed to one of the validation APIs and the result is returned back to them. Rinse and repeat as required.

I personally find this type of utility quite satisfying and rewarding to create.

Depending on the implementation and the specific route you take, the application could also prove to be quite useful, too!

5. A combined dictionary & thesaurus app

This one is fairly simple.

Given an input field, the user can search for definitions or synonyms of a specific word using one of the many dictionary APIs out there. The Merriam-Webster Dictionary API is a great example.

dictionary/thesaurus
There are plenty of APIs to assist with a dictionary/thesaurus app

It’s nice to start simple.

Do this basic component well; and then look to bolster your sample app with some additional features. Additional features for this app could include:

  • A “word of the day” style feature fetched from the API and presented somewhere in the page
  • “Save this word” style functionality. This could be useful for creative writers or other creative types
  • “Suggest me a word” functionality. Return a random synonym related to the user’s input

The list goes on.

As with the other React project ideas within this list, the only limit to the features you can add is dictated by your own imagination!

6. A quiz app

A custom quiz implementation could be a great React project idea to put on your portfolio.

You’ll need to manage the state of the quiz, terminating it once the relevant amount of questions have been answered. You can then report/feedback the results to the player.

If you’re looking to show off your frontend prowess, this results page could contain some smoothly animated graphics and charts to help convey the associated information. This information may include: correct/incorrect answers, time taken per each question and so on.

To gather up the actual questions that you’ll want to feed to the user, there are many trivia APIs out there in the wild, one good example being Open Trivia DB.

For bonus points; have some kind of persistent storage and then allow users to “share” quizzes with each other.

7. A news platform

As you would expect, there are many public APIs out there that can be used to fetch the news.

newspaper
Aggregate and display customized news feeds for your users

A possible frontend implementation for the news app could work as follows:

  • The user logs in
  • They set their preferences, ie. what type of news they are interested in, their location (along with any other relevant information)

Now they’ll receive a feed of all of the recent news items that are relevant to them, based on their previously determined configuration.

It would be most interesting to do something slightly unusual or distinctive here, in terms of user experience. There is nothing wrong with a standard “feed” style layout, but why not try something a little more creative or eye-catching?

A news feed is obviously a very, very common and easy to recognize concept.

For that reason, I think it’d be good to break the mould a little and come up with a unique take on this genre.

8. Clone or integrate with the usual suspects

Last but not least, this is the classic.

Build a clone of one of the “usual suspects” (twitter, Instagram, Facebook and so on). This is very much a standard React project idea, but it’s not without interest.

We’re all (or at least, most of us) familiar with what twitter is and how it works, for instance. It’s easy to digest for whomever is checking out your portfolio; and the intent of the sample app in your portfolio is abundantly clear right away.

You could imitate the current app exactly; or switch things up a little and go for a custom reskin!

Building out a (partial) twitter clone will require the utilization of a lot of web development fundamentals, so it’s a fantastic way to show potential employers you know what you’re doing.

Where to next?

Hopefully you’ve enjoyed the React project ideas listed above! And hopefully one (or more) of them will find a home within your portfolio in the future.

For more React project ideas

If you’re looking for more project ideas, feel free to check out some of my previous articles. These aren’t necessarily specific to React, but you can of course utilize whichever technology you wish to execute your implementation(s):

There are plenty of resources on justacoding.blog in general to help you discover more project ideas!

For some React learning

Of course, there are countless articles and resources out there already on the topic of learning React.

If you’re new to web development in general, however – it’s considered good advice to start with the JavaScript fundamentals first and foremost. From here, you can more easily and more efficiently transition into using a library like React.

If you prefer to learn via a physical resource such as a book (I know, old school!) – I’d particularly recommend Eloquent Javascript, 3rd Edition: A Modern Introduction to Programming.

For API related articles

Most of the APIs listed in the article above are REST APIs, however, should you ever need to consume a GraphQL API from your React app – do be sure to check out my article on this very topic:

Some posts on justacoding.blog may contain affiliate links. These are special links to particular products or services that I would recommend, and as such, I may earn affiliate commission via these links.

Thanks for reading!

Have any questions? Ping me over at @justacodingblog
← Back to blog