The Full Frontend Codes and File Locations

Here's the full frontend codes file by file

App.js inside src folder

import Quote from "./components/Quote";

import "./App.css";

function App() {
  return (
    <div>
      <Quote />
    </div>
  );
}

export default App;

Quote.js file inside components subfolder in the src folder:

import Nav from "./Nav";
import QuoteBody from "./QuoteBody";
import Footer from "./Footer";

const Quote = () => {
  return (
    <div>
      <Nav />
      <QuoteBody />
      <Footer />
    </div>
  );
};

export default Quote;

QuoteBody.js inside components subfolder in the src folder:

import React, { useState, useEffect } from "react";
import { FaTwitter, FaRandom } from "react-icons/fa";

import KantePic2 from "../images/p116594.png";

const api = `http://localhost:5000/api/quotes`; /*|| `${process.env.REACT_APP_API}/api/quotes`; */

const QuoteBody = () => {
  const [quote, setQuotes] = useState("");
  const [author, setAuthor] = useState("");

  // Call Quotes API
  useEffect(() => {
    fetchQuotes();
  }, []);

  // Make the API request
  const fetchQuotes = async () => {
    try {
      const res = await fetch(api);
      const { quotes } = await res.json();

      console.log(quotes);
      // Get random quotes
      let randomNum = Math.floor(Math.random() * quotes.length);
      let randomQuote = quotes[randomNum];

      setQuotes(randomQuote.quote);
      setAuthor(randomQuote.author);
    } catch (error) {
      console.log(error);
    }
  };

  // Handleclick function that will fetch the quotes
  const handleClick = () => {
    fetchQuotes();
  };

  // The functionality for sharing quotes on Twitter
  let tweetURL = `https://twitter.com/intent/tweet?text=${quote} - ${author}`;

  return (
    <section className="quote-body">
      <div className="quote-container">
        <img src={KantePic2} alt="Kante" className="kante-bg" />
        <br />
        <div className="quote">
          <p className="quote-item">{quote}</p>
          <p className="quote-author"> – {author}</p>
        </div>
        <div className="quote-btn-container">
          {/* Twitter Button  */}
          <a className="btn tweet-btn" href={tweetURL} target="_blank">
            <FaTwitter /> Tweet
          </a>
          {/* Random quote Button  */}
          <button onClick={handleClick} className="btn quote-btn">
            <FaRandom /> New Quote
          </button>
        </div>
      </div>
    </section>
  );
};

export default QuoteBody;

Nav.js file inside components subfolder in the src folder:

import KanteHead from "../images/kantehead.png";

// Reloads the windo any thime invoked
const handleClick = () => {
  return window.location.reload();
};

const Nav = () => {
  return (
    <div>
      <nav className="navbar">
        <div className="logo">
          <a href="#" onClick={handleClick}>
            <img src={KanteHead} alt="N'golo Kante" className="kante-pic" />
          </a>
          <a href="#">
            <h1 className="logo-text">
              KANTE <br /> QUOTES
            </h1>
          </a>
        </div>

        <ul>
          <li>
            <a href="#"> Random Quote</a>
          </li>
        </ul>
      </nav>
    </div>
  );
};

export default Nav;

Footer.js file inside components subfolder in the src folder:

import KanteHead from "../images/kantehead.png";

// Reloads the windo any thime invoked
const handleClick = () => {
  return window.location.reload();
};

const Nav = () => {
  return (
    <div>
      <nav className="navbar">
        <div className="logo">
          <a href="#" onClick={handleClick}>
            <img src={KanteHead} alt="N'golo Kante" className="kante-pic" />
          </a>
          <a href="#">
            <h1 className="logo-text">
              KANTE <br /> QUOTES
            </h1>
          </a>
        </div>

        <ul>
          <li>
            <a href="#"> Random Quote</a>
          </li>
        </ul>
      </nav>
    </div>
  );
};

export default Nav;

Footer.js inside components subfolder in the src folder:

import React from "react";

const handleClick = () => {
  return window.location.reload();
};

const Footer = () => {
  return (
    <section className="footer">
      <div className="footer-items">
        <p>
          Made with the MERN Stack by Kolade Chris Ksound, <br />
          Web developer and Technical Copywriter focusing on frontend
          technologies and passionate Chelsea FC supporter. <br /> Dedicated to
          N'golo Kante.
        </p>
        <ol>
          <li>
            <a href="#" onClick={handleClick}>
              Random Quote
            </a>
          </li>
          <li>
            <a href="https://twitter.com/koladechris">Contact Developer</a>
          </li>
        </ol>
      </div>
    </section>
  );
};

export default Footer;

You can find the project in this GitHub repo.