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

#javascript #beginners #react #tutorial

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:

The fundamentals of JavaScript
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;

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);

}

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));
  }

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>
);

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;

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>
  );
}