How to make Random Quote Of The Day WebApp in React JS

Have you ever wanted to create a web app that delivers a dose of daily inspiration? Whether it’s for your personal use or to engage your audience, a Random Quote of the Day web app can be a delightful addition to your portfolio. In this guide, we’ll walk you through the process of building such an app using React JS. By the end of this tutorial, you’ll have a fully functional web app that fetches and displays a random quote every day. Let’s get started!

What You’ll Learn

• Setting up a React project with Create React App.
• Fetching data from an API.
• Managing state in React.
• Styling components with CSS.
• Deploying the app to a web server.

Prerequisites

Before we dive in, make sure you have the following installed on your computer:

• Node.js and npm (Node Package Manager)
• A code editor (like VS Code)

Step 1: Setting Up the React Project

First, we need to set up our React project. We’ll use Create React App, a popular tool for creating React applications with no build configuration.

Open your terminal and run the following command:

npx create-react-app random-quote-app

This will create a new directory called random-quote-app with all the necessary files and dependencies. Navigate into this directory:

cd random-quote-app

Start the development server to make sure everything is working:

npm start

You should see the default React app running in your browser at http://localhost:3000.

Step 2: Cleaning Up the Project

Let’s clean up the project by removing some unnecessary files and code. Delete the following files from the src directory:

• App.test.js
• logo.svg
• reportWebVitals.js
• setupTests.js

Open src/App.css and remove all the default styles. Replace the content of src/App.js with the following:

import React from 'react';
import './App.css';
import Quote from './Quote';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Random Quote of the Day</h1>
        <Quote />
      </header>
    </div>
  );
}

export default App;

We’ve removed the boilerplate code and set up a basic structure for our app. Now, let’s create the Quote component.

Step 3: Creating the Quote Component

Create a new file called Quote.js in the src directory and add the following code:

import React, { useState, useEffect } from 'react';
import './Quote.css';

function Quote() {
  const [quote, setQuote] = useState('');
  const [author, setAuthor] = useState('');

  useEffect(() => {
    fetchQuote();
  }, []);

  const fetchQuote = async () => {
    const response = await fetch('https://api.quotable.io/random');
    const data = await response.json();
    setQuote(data.content);
    setAuthor(data.author);
  };

  return (
    <div className="quote-container">
      <p className="quote">{quote}</p>
      <p className="author">- {author}</p>
      <button onClick={fetchQuote}>New Quote</button>
    </div>
  );
}

export default Quote;

In this component, we use the useState hook to manage the state of the quote and author. The useEffect hook fetches a new quote when the component mounts. The fetchQuote function fetches a random quote from the Quotable API and updates the state.

Step 4: Styling the App

Let’s add some styles to make our app look better. Create a new file called Quote.css in the src directory and add the following styles:

.quote-container {
  text-align: center;
  margin: 20px;
}

.quote {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.author {
  font-size: 1.2em;
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
}

Next, open src/App.css and add the following styles:

.App {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #282c34;
  color: white;
}

.App-header {
  text-align: center;
}

These styles will center the content on the page and add some basic styling to the quote and author text.

Step 5: Testing the App

At this point, your app should be functional. Save all your files and make sure the development server is running. Open your browser and navigate to http://localhost:3000. You should see the Random Quote of the Day app displaying a quote and an author. Click the “New Quote” button to fetch a new quote.

Step 6: Deploying the App

Finally, let’s deploy our app so others can use it. We’ll use GitHub Pages for deployment.

First, create a GitHub repository for your project. Follow the instructions on GitHub to push your local project to the remote repository.

Next, install the gh-pages package, which makes it easy to deploy to GitHub Pages:

npm install gh-pages --save-dev

Add the following scripts to your package.json file:

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

Now, deploy your app by running the following command:

npm run deploy

Your app will be built and deployed to GitHub Pages. You can find your deployed app at https://<your-github-username>.github.io/random-quote-app.

Final Result:

Conclusion

Congratulations! You’ve successfully created and deployed a Random Quote of the Day web app using React JS. This project is a great example of how to fetch data from an API, manage state in React, and deploy a React app to the web.

Feel free to customize the app further by adding more features or improving the design. Happy coding!