Creating a Random Quote Generator Using ReactJS

In today’s fast-paced digital world, small interactive applications can make a significant impact on user engagement. One such example is a Random Quote Generator, a simple yet powerful tool that delivers inspiration, motivation, or a moment of reflection with every click. In this article, we explore how to create a dynamic and responsive Random Quote Generator using ReactJS.

Why Build a Random Quote Generator?

A Random Quote Generator is more than just a fun side project; it demonstrates essential React concepts, including state management, component lifecycle, event handling, and integration with external platforms such as Twitter for social sharing. For beginners, it serves as an excellent project to understand React basics, while for experienced developers, it offers an opportunity to refine UI/UX skills.

Follow this video for complete guidance :

Source Code for Quote.js Component

import React, { useState, useEffect } from 'react';

const Quote = () => {
  const quotes = [
    { text: "The best way to predict the future is to invent it.", author: "Alan Kay" },
    { text: "Life is 10% what happens to us and 90% how we react to it.", author: "Charles R. Swindoll" },
    { text: "Success is not final, failure is not fatal: It is the courage to continue that counts.", author: "Winston Churchill" },
    { text: "Believe you can and you're halfway there.", author: "Theodore Roosevelt" },
    { text: "Do what you can, with what you have, where you are.", author: "Theodore Roosevelt" }
  ];

  const [quote, setQuote] = useState('');

  const getNewQuote = () => {
    const randomIndex = Math.floor(Math.random() * quotes.length);
    setQuote(quotes[randomIndex]);
  };

  // Get random quote when component mounts
  useEffect(() => {
    getNewQuote();
  }, []);

  const shareOnTwitter = () => {
    const tweetText = encodeURIComponent(`"${quote.text}" - ${quote.author}`);
    window.open(`https://twitter.com/intent/tweet?text=${tweetText}`, '_blank');
  };

  return (
    <div className="min-vh-100 d-flex align-items-center">
      <div className="container py-5">
        <div className="row justify-content-center">
          <div className="col-md-8 col-lg-6">
            <div className="card border-0 shadow rounded-4">
              <div className="card-body p-4 p-md-5">
                {/* Quote Content */}
                <blockquote className="text-center mb-4">
                  <p className="h4 mb-3 fw-normal lh-base">"{quote.text}"</p>
                  <footer className="blockquote-footer fs-6 mt-4">
                    <cite title="Source">{quote.author}</cite>
                  </footer>
                </blockquote>
                <hr />

                {/* Action Buttons */}
                <div className="d-flex justify-content-center gap-2 mt-4">
                  <button 
                    onClick={getNewQuote}
                    className="btn btn-primary px-4">
                    New Quote
                  </button>
                  <button 
                    onClick={shareOnTwitter}
                    className="btn btn-outline-primary px-4">
                    <i className="fab fa-twitter me-2"></i>
                    Share
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Quote;

Add this CSS to make it colorful

body{
  background: linear-gradient(135deg, #4b7036b3, #3459bb);
}
.card-body{
  background-color: beige;
}

Core Features of the Random Quote Generator

The Random Quote Generator built with ReactJS typically includes the following features:

• Dynamic Quote Display: A random quote is displayed each time a button is clicked.
• Author Attribution: Each quote is paired with its respective author.
• Social Media Sharing: Users can share quotes directly to Twitter.
• Responsive Design: The application adapts seamlessly across devices.

Breaking Down the Application

At the heart of this application is the useState and useEffect hooks, two key features of ReactJS. These hooks manage the application’s state and trigger actions when the component mounts.

• State Management: The application uses a state variable to store and display the currently selected quote.
• Random Selection Logic: By leveraging JavaScript’s Math.random, the app selects a random quote from a predefined array.
• Event Handling: A button click triggers the logic to fetch a new random quote.
• Social Sharing: Quotes are formatted and shared via Twitter’s intent URL, making the experience interactive.

Enhancing the User Experience

To ensure the application feels modern and visually appealing, a clean UI design is essential. By integrating Bootstrap or custom CSS, the layout remains minimal yet functional. Buttons are styled for clarity, and animations or transitions can add a touch of elegance when quotes change.

Real-World Applications

While a Random Quote Generator may seem like a simple tool, it has real-world applications:

• Motivation Platforms: Daily quotes can boost morale and engagement on websites.
• Content Curation Tools: Quotes can serve as valuable shareable content.
• Learning Projects: Developers can use this project as a portfolio piece or a learning exercise.

Deployment and Sharing

Once built, the application can be deployed on platforms such as Netlify, Vercel, or GitHub Pages. Sharing the live version allows friends, colleagues, or recruiters to interact with your project.

Building a Random Quote Generator with ReactJS is a rewarding project for developers at any skill level. It blends logic, design, and user interaction into a single experience. Beyond technical skills, it’s also a great way to share positivity and inspiration online.

Whether you’re new to React or refining your skills, this project serves as an engaging challenge that leaves room for creativity and further enhancements. So why wait? Start building, and let the world get inspired—one quote at a time!