How to Create a Random Quote Generator with Random Color?

Ateev Duggal
1 min readNov 16, 2021


Web developers have to make several projects to increase their understanding of that specific language and move up a level. One such project is Creating a Random quote generator with API.

It is considered the starting point where one learns to integrate API in our project as it is one of the basic and easiest projects out there.

In this blog, we will be making a random quote generator with API. We will be using this API for our project.


  1. React App
  2. Creating the UI part
  3. Using Hooks and integrating API
  4. Getting data from API
  5. Adding Random colors

Let’s start….

Creating our React App

We can very easily create our React App with the following command.

create-react-app random-quote-generator

For this to work, you should have npm and node installed in your system and then navigate using the cd command to the folder where you want to create your react app.

We will be using bootstrap for this project with its CDN link for CSS and JS Bundle. You can use the npm package React-Bootstrap also.

You can visit the official website for the full blog.



Ateev Duggal

I am a front-end developer from India with over one year of experience in freelancing with skills like Git, HTML5, CSS3, Bootstrap 4&5, and React.