DEV Community

Cover image for How to build a random quote generator app with React & Tailwind
Amrin
Amrin

Posted on

How to build a random quote generator app with React & Tailwind

Hello everyone,
today we’ll build a random quote generator app with React and tailwindcss. We will use the animechan api for the quotes.

If you prefer video check it out here:

Prerequisite:

To follow along in the article, you’’ll need to know:

  1. The fundamentals of JavaScript
  2. The fundamentals of CSS & tailwind CSS

What you’ll learn:

At the end of the article you’ll learn how to make API call with fetch api. And how to render the data on the screen you got from the API

Now that you know all the details. Let’s get started:

1. Setup:

To build the project first we will have to setup a React and Tailwindcss.

You can setup a basic React and tailwind css project by follwing these instructions.

2. Initial setup

So, to start building we need to import the css file and the useState hook from react.
We are importing the css file because we will add some custom css to add the background image and some other styles.

And we need the useState hook to store the quote we’ll get from the API.

import "./App.css";
import { useState } from "react";

function App() {
  const [quote, setQuote] = useState({
    anime: "Junjou Romantica",
    character: "Akihiko Usami",
    quote:
      "When you love someone, I think it's only natural to worry about what they love.",
  });

  return (
    <div className="App h-screen flex justify-center items-center">
      <div>
        Hello world
      </div>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

As you can notice we’ve also added some tailwind classes to the jsx to make it horizontally and vertically center.

custom css

.App {
  background: url("../src/bg.jpg") no-repeat;
  background-size: cover;
}

.card {
  background: rgba(211, 235, 255, 0.57);
  backdrop-filter: blur(5px);

}
Enter fullscreen mode Exit fullscreen mode

We are done with the basic setup let’s move on and get the quote and show it on screen.

2. Get the quote & render

To get the quote we will create a function. That function will fetch a quote and store it on the state.

function getQuote() {
    fetch("https://animechan.vercel.app/api/random")
      .then((res) => res.json())
      .then((data) => setQuote(data))
      .catch((error) => console.log(error.message));
  }
Enter fullscreen mode Exit fullscreen mode

Add this function above the return statement. Now, we need to call this function. So, we will add a button inside the return.

Like this:

return (
  <div className="App h-screen flex justify-center items-center">
    <div>
      <button
        onClick={getQuote}
        className="bg-green-400 px-5 py-4 mt-5 text-white"
      >
        Get Quote
      </button>
    </div>
  </div>
);
Enter fullscreen mode Exit fullscreen mode

Now that we got the quote let’s show it on screen.

In order to show the quote on screen first we will create a card component. Then we will use it to show the quote.

import React from "react";

const Card = ({ quote }) => {
  return (
    <div className="card px-5 py-8 max-w-[650px]">
      <p className="text-2xl font-mono font-bold">{quote.quote}</p>
      <div className="pt-4">
        {" "}
        <span>by {quote.character}</span> |{" "}
        <a
          href={`https://twitter.com/intent/tweet?text="${quote.quote} by ${quote.character} &hashtags=animeQuote`}
          target="_blank"
          rel="noreferrer"
        >
          Tweet
        </a>{" "}
      </div>
    </div>
  );
};

export default Card;
Enter fullscreen mode Exit fullscreen mode

Now import this component in the app.js file and pass the quote as a prop.

return (
    <div className="App h-screen flex justify-center items-center">
      <div>
        {quote && <Card quote={quote} />}
        <button
          onClick={getQuote}
          className="bg-green-400 px-5 py-4 mt-5 text-white"
        >
          Get Quote
        </button>
      </div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

We are done. Now check out the app on your browser. It should work perfectly.

Conclusion:

In this article we’ve learned how to create a random quote generator with React & Tailwindcss.

Hope you enjoyed the article.

If you want to read more articles like this follow me.

Twitter : https://twitter.com/CoderAmrin
YouTube : https://www.youtube.com/@coderamrin
Facebook

Latest comments (4)

Collapse
 
__masashi__ profile image
Masashi

Thanks a lot. I made a few changes and added it to electron. I shipped the app as a gift. Can't thank you enough.

Collapse
 
coderamrin profile image
Amrin

wow!
this is amazing.
You made my day Masashi :)

Collapse
 
naucode profile image
Al - Naucode

Great article, you got my follow, keep writing!

Collapse
 
coderamrin profile image
Amrin

Thanks Naubit :)