How to build a quote search app with React and Tailwind CSS

Hello everyone,

In this article we are going to build a quote search app with React.js and Tailwind CSS.
We will use the Quotable API to get the quotes.

You’ll learn how to make Http request with axios and render data using React conditional rendering.

Let’s get started.

If you prefer video, you can watch it here:

Prerequisite:

To follow along you’ll have to know:

1. The fundamental of React.js
2. Fundamentals of Tailwind css

Setup

To build the project first we need to setup a basic React.js and Tailwind CSS project. You can do that easily by following the Tailwind docs.
Follow these instructions from tailwind docs to setup the project.

Setup React and Tailwind Project

I’ll wait for you to setup the project.

Install Axios

To install axios run this command inside of your project folder.

npm i axios --save

The setup is done we can now move on and start building.

Initial Setup:

We’ll start by importing useEffect , useState hooks and axios.

Then we will initialize states for the tag to search for and for the quotes array. So we can render the quote after fetching.

Inside the return we got a header and and an input field to get the tag from the user.

The input element is connected to the state with the state using the onChange event-listener.

The form also connected with a event-listener called handleSubmit that’ll get the quotes.

import { useState, useEffect } from "react";
import axios from "axios";

const App = () => {
    const [quotes, setQuotes] = useState([]);
  const [tag, setTag] = useState("love");

    function handleSubmit(e) {
    e.preventDefault();
    //get the quotes here.
  }

  return (
    <div>
            <div className="container mx-auto text-center pt-20">
        <h1 className="font-bold text-gray-800 text-5xl">Get Inspired</h1>
      </div>

      <form
        onSubmit={handleSubmit}
        className="flex items-center justify-center text-center mt-5"
      >
        <input
          type="text"
          name="tag"
          placeholder="search quote.."
          className="border-2 border-gray-800 px-2 py-2"
          value={tag}
          onChange={(e) => setTag(e.target.value)}
        />
        <button
          type="submit"
          className=" bg-gray-800 text-white px-4 py-2 border-2 border-gray-800 hover:bg-transparent hover:text-gray-800 "
        >
          Search
        </button>
      </form>
        </div>
  )
}

export default App

The input fields and states are setup completely. Now we can get the quote and then render them on screen.

Get the Quotes:

To get the quotes we will create a function called getQuotes. It’ll make the HTTP request using Axios.

function getQuote() {
    axios
      .get(`https://quotable.io/quotes?tags=${tag}`)
      .then((res) => setQuotes(res.data.results))
      .catch((err) => console.log(err.message));
  }

Define this function before the handleSubmit function.

And then call it inside the handleSubmit function.

The getQuote function makes HTTP request with axios. We are using promises here if the promise is fullfilled then the quotes will be stored in the quotes State.

Rendering quotes

Now is the easiest part. We will use the conditional rendering. We will check to see if the quotes state is not empty.

If it’s not empty then render it on screen.

function App() {
  ....
  return (
    <div className="App">
     ...
      {quotes.length !== 0 && (
        <div className="mt-5 w-[800px] mx-auto ">
          {quotes.map((quote, i) => {
            return <Item quote={quote} key={i} />;
          })}
        </div>
      )}
        </div>
  );
}

export default App;

Inside the map function we used the Item component for the quote items. It won’t work right now.

Because we don’t have the component yet.

So, go ahead and create the component and Import it.

To create the component first create a folder called component then create the Item component file, and write the code below.

Note: We used an Item component to render the quotes.

So the code to work we need to create the item component.

Create a component folder inside that Item file and create the component inside that.

import React from "react";

const Item = ({ quote }) => {

  return (
    <div className="bg-gray-200 mb-5 px-5 py-5 rounded">
      <p className="text-xl mb-2">{quote.content}</p>

      <p className="text-gray-600">
        {quote.author} | <a href="/#">Tweet</a>
      </p>
    </div>
  );
};

export default Item;

The Item component will take the quote as prop and then render the contents.

Source Code: https://github.com/Coderamrin/100-react-projects/tree/main/1.%20quote-search

Conclusion

In this article we’ve built a quote search app using React and Tailwind CSS. We’ve learned how to make a HTTP request using Axios.

Hope you enjoyed the article. For more content like this connect with me.

Twitter: https://twitter.com/CoderAmrin

YouTube: https://www.youtube.com/@coderamrin