DEV Community

Cover image for Cool Projects to Help You Learn React Js - Part 2
Gerald
Gerald

Posted on

Cool Projects to Help You Learn React Js - Part 2

Hello there 👋, citizens of the web!
A couple of days ago I decided to write a series of articles on Cool Projects to Help You Learn React Js. I remember when I started learning react, I went through the documentation, then I had to come up with interesting projects to help me grasp the concepts. I needed an API that I'd consume. However I didn't have the time to start building one. I went through the web and found interesting APIs that are publicly available for anyone to use. This saved me much time to work on other projects.

Now, I'd like to share the APIs with you so that you can bootstrap on React ASAP, and save time while doing it! After all, who doesn't need extra seconds? 😃 Note that you can consume these APIs with any frontend framework of your choice. Be it ReactJS, React Native, VueJS, Flutter, Angular, etc.

For the ReactJS enthusiast, I'll point out ReactJS concepts you can learn through each of these APIs.

Let's dive in!

ToddlerDiveChildGIF

1. NASA Open APIs

Welcome to the NASA API portal. The objective of this site is to make NASA data, including imagery, eminently accessible to application developers. This catalog focuses on broadly useful and user friendly APIs and does not hold every NASA API. - Nasa

Isn't this amazing? This API allows you to integrate these NASA functionalities into your build:-

  • Astronomy Picture of the Day
  • Space Weather Database Of Notifications, Knowledge, Information
  • Earth Observation Data and Natural Event Triacker
  • Mars Weather Service API - This could be useful in the event of a zombie apocalypse and we all move to Mars 😂

And many more that you'll find on the official website.

MarsNeedsYouGIF
### What you'll learn while building this project

  • React Router - In case you need multiple pages for your project
  • Rendering Elements, Conditional Rendering
  • State and Lifecycle
  • Handling Events
  • Lists and Keys, Forms
  • Code Splitting, Context
  • React Hooks -useEffect, useState, useParams, etc

2. Coinbase Crypto API

ChangeangelDidYouSayCryptoGIF

Crypto nerds I got something for you! You can build your own crypto trading web app where you can:-

  • Check the price of a crypto
  • Buy it
  • Track your activity
  • Get notifications when the price of a crypto changes and more React Fetch API or Axios while getting or posting data to the api.
  • You can also integrate charts.

What You'll Learn

  • Authentication - The Coinbase API provides a passport authentication capability.
  • Protecting Routes
  • useFetch, React Fetch API or Axios while getting or posting data to the api.
  • You can also integrate charts.

This is more of a real world app that you can add to your portfolio. If you do it just right, it can help you secure a Frontend Job!

Let me leave it at that! If you like this article you can leave a comment below. You can also share other open APIs we can use to learn stuff.

You can also check out part 1 of this series.

Discussion (2)

Collapse
zaidshaikh333 profile image
Zaid Shaikh

Even the GitHub Rest API is a great Option to begin with.

Collapse
geraldmuvengei06 profile image
Gerald Author

Awesome one too