```js
npm init -y
````

Install packages
```js
npm install express mongoose dotenv colors express-async-handler cors
```
- Express for rest API
- Mongoose for MongoDB ODM
- dotenv for working with `dotenv` files
- colors for seeing things better in the terminal
- express-async-handler for handling exceptions inside async express routes and passing them to your express error handlers
- cors for sharing resources between servers (backend) and clients (frontend)

Install `nodemon` as a dev dependency`
```js
npm install -D nodemon
```

Create backend folder and `server.js` file inside it 

Update package.json file
```js
{
  "name": "quote-gen",
  "version": "1.0.0",
  "description": "A fullstack quote generator",
  "main": "server.js",
  "scripts": {
    "start": "node backend/server.js",
    "dev": "nodemon backend/server.js"
  },
  "author": "Kolade Chris",
  "license": "MIT",
  "dependencies": {
    "colors": "^1.4.0",
    "dotenv": "^16.0.0",
    "express": "^4.17.3",
    "express-async-handler": "^1.2.0",
    "mongoose": "^6.2.4"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}
```
Put a test code inside server.js
```js
console.log("Hello codecontinuers");
```
Run the development server
```js
npm run dev //Output: Hello codecontinuers
```

This is what the folder structure looks like so far:

 ![folder-structure](https://tutorial-image-bucket.s3.amazonaws.com/huN0fpQFNUMzh_cJTZ-XZ.jpeg)

Initialize the project

Bring in express, colors, and dotenv
```js
const express = require("express");
const colors = require("colors");
const dotenv = require("dotenv").config();
```
Declare port variable
```
const port = 5000;
```
Initialize express
```js
const app = express();
```
Set up the app to listen for changes at the port
```js
app.listen(port, () => console.log(`Server running on port ${port}`));
```
Create .env file and put the following inside
```
NODE_ENV = development
PORT = 5000
```
Modify port variable to use the port from the .env file

```js
const port = process.env.PORT || 5000;
```

Set up a get rout inside server.js
```js
app.get("/api/quotes", (req, res) => {
  res.send("Get quotes");
});
```

Test the get route with Postman

 ![gwt-quotes](https://tutorial-image-bucket.s3.amazonaws.com/JMTNiGLyzsvSusif27TIb.jpeg)

Setup server.js

Create `quoteRoutes.js` file inside the route folder

Bring in express and express router into the `quoteRoutes.js` file
```js
const express = require("express");
const router = express.Router();
```

Export the router 
```js
module.exports = router;
```

Set up the get route inside the `quoteRoutes.js` file
```js
router.get("/", (req, res) => {
  res.status(200).json({ message: "Get quotes" });
});
```
Modify server.js to use the get route
```js
app.use("/api/quotes", require("./routes/quoteRoutes"));
```

Set up the post route inside the `quoteRoutes.js` file
```js
router.post("/", (req, res) => {
  res.status(200).json({ message: "Create quote" });
});
```

Set up the update route inside the `quoteRoutes.js` file
```js
router.put("/:id", (req, res) => {
  res.status(200).json({ message: `Update quote, ${req.params.id}` });
});
```

Set up the delete route inside the `quoteRoutes.js` file
```js
router.delete("/:id", (req, res) => {
  res.status(200).json({ message: `Delete quote, ${req.params.id}` });
});

```

Test the get route with Postman
 ![getRoute](https://tutorial-image-bucket.s3.amazonaws.com/8dEt0SZ8nZnr0pMOiXmKK.jpeg)

Test the post route with Postman
 ![postRoute](https://tutorial-image-bucket.s3.amazonaws.com/n5-mUoCkuayB6Sr2RTPIh.jpeg)

Test the update route with Postman
 ![updateRoute](https://tutorial-image-bucket.s3.amazonaws.com/wI-9oyV1G3AtMPqwPc_el.jpeg)

Test the delete route with Postman
 ![deleteRoute](https://tutorial-image-bucket.s3.amazonaws.com/zgFBn4-cB0Bm6EEAdD3JD.jpeg)

Setup route subfolder inside backend folder to clean up server.js file

Set up the get function to get quotes
```js
const getQuotes = (req, res) => {
  res.status(200).json({ message: "Get quotes" });
};
```

Set up the post function to create a quote
```js
const createQuote = (req, res) => {
  res.status(200).json({ message: "Create quote" });
};
```

Set up the update function to update a quote 
```js
const updateQuote = (req, res) => {
  res.status(200).json({ message: `Update quote, ${req.params.id}` });
};
```

Set up the delete function to delete a quote 
```js
const deleteQuote = (req, res) => {
  res.status(200).json({ message: `Delete quote, ${req.params.id}` });
};
```

Export the functions
```js
module.exports = {
  getQuotes,
  createQuote,
  updateQuote,
  deleteQuote,
};
```

Import the functions into the `quoteController.js` file
```js
const {
  getQuotes,
  createQuote,
  updateQuote,
  deleteQuote,
} = require("../controllers/quoteController.js");
```

Replace the quoteRoute.js functions with the ones imported from the controllers
```js
router.get("/", getQuotes);

router.post("/", createQuote);

router.put("/:id", updateQuote);

router.delete("/:id", deleteQuote);
```

Make sure the router is exported
```js
module.exports = router;
```

Test the get route with Postman once again
 ![getRoute](https://tutorial-image-bucket.s3.amazonaws.com/8dEt0SZ8nZnr0pMOiXmKK.jpeg)

Test the post route with Postman once again
 ![postRoute](https://tutorial-image-bucket.s3.amazonaws.com/n5-mUoCkuayB6Sr2RTPIh.jpeg)

Test the update route with Postman once again
 ![updateRoute](https://tutorial-image-bucket.s3.amazonaws.com/wI-9oyV1G3AtMPqwPc_el.jpeg)

Test the delete route with Postman once again
 ![deleteRoute](https://tutorial-image-bucket.s3.amazonaws.com/zgFBn4-cB0Bm6EEAdD3JD.jpeg)

Setup controller folder and quoteController.js file to add functionalities

Set up express middlewares inside the `server.js`  to receive body data
```js
app.use(express.json());
```

Set up error handler for the post route
```js
const createQuote = (req, res) => {
if (!req.body) {
    res.status(400);
    throw new Error("Please add a quote and author field");
  }
  res.status(200).json({ message: "Create quote" });
};
```

Set up error handler for the update route
```js
const updateQuote = (req, res) => {
  if (!goal) {
    res.status(400);
    throw new Error("Goal not found");
  }
  res.status(200).json({ message: `Update quote, ${req.params.id}` });
};
```

Set up error handler for the delete route
```js
const deleteQuote = (req, res) => {
  if (!goal) {
    res.status(400);
    throw new Error("Goal not found");
  }
  res.status(200).json({ message: `Delete quote, ${req.params.id}` });
};
```

Change the default express error by adding error handler middleware in an `errorMiddleware.js` file inside a middleware folder to be created

```js
const errorHandler = (err, req, res, next) => {
  const statusCode = res.statusCode ? res.statusCode : 500;

  res.status(statusCode);

  res.json({
    message: err.message,
    stack: process.env.NODE_ENV === "production" ? null : err.stack,
  });
};

You might need this later

module.exports = {
  errorHandler,
};
```

Bring in the error handler middleware into `server.js` and use it
```js
const { errorHandler } = require("./middleware/errorMiddleware");

app.use(errorHandler);
```

Test the post route to make sure the error handler is working by inputting no data to the body

 ![errortest](https://tutorial-image-bucket.s3.amazonaws.com/ylrEVOlJMP1st-2btvt86.jpeg)

Set up error handler and the server to receive body data

Require the express-async-handler package in the `quoteController.js` file 
```js
const asyncHandler = require("express-async-handler");
```

Wrap the controller functions with async 
```js
const asyncHandler = require("express-async-handler");

const getQuotes = async (req, res) => {
  res.status(200).json({ message: "Get quotes" });
};

const createQuote = async (req, res) => {
  if (!req.body.text) {
    res.status(400);
    throw new Error("Please add a text field");
  }
  res.status(200).json({ message: "Create quote" });
};

const updateQuote = async (req, res) => {
  if (!goal) {
    res.status(400);
    throw new Error("Goal not found");
  }
  res.status(200).json({ message: `Update quote, ${req.params.id}` });
};

const deleteQuote = async (req, res) => {
  if (!goal) {
    res.status(400);
    throw new Error("Goal not found");
  }
  res.status(200).json({ message: `Delete quote, ${req.params.id}` });
};

module.exports = {
  getQuotes,
  createQuote,
  updateQuote,
  deleteQuote,
};
```

Wrap the controller functions with asyncHandler
```js
const asyncHandler = require("express-async-handler");

const getQuotes = asyncHandler(async (req, res) => {
  res.status(200).json({ message: "Get quotes" });
});

const createQuote = asyncHandler(async (req, res) => {
  if (!req.body.text) {
    res.status(400);
    throw new Error("Please add a text field");
  }
  res.status(200).json({ message: "Create quote" });
});

const updateQuote = asyncHandler(async (req, res) => {
  if (!goal) {
    res.status(400);
    throw new Error("Goal not found");
  }
  res.status(200).json({ message: `Update quote, ${req.params.id}` });
});

const deleteQuote = asyncHandler(async (req, res) => {
  if (!goal) {
    res.status(400);
    throw new Error("Goal not found");
  }
  res.status(200).json({ message: `Delete quote, ${req.params.id}` });
});

module.exports = {
  getQuotes,
  createQuote,
  updateQuote,
  deleteQuote,
};
``` 


Set up the controller functions to use a async await with the express-async-handler package

Put the MongoDB URO in the .env file
```js
MONGO_URI = mongodb://localhost:27017/quoteGenerator
```

If you are using Mongo Atlas instead of Mongo local, you can replace the URI with it

Make sure you restart the server once you make changes to the .env file

Create config folder inside the backend folder

Create `db.js` file to connect with the MongoDB database

Bring in Mongoose into the `db.js` file
```js
const mongoose = require("mongoose");
```
Bring in colors package into the `server.js` file in order to see the console texts in a specified color

```js
const colors = require("colors");
```

Write the function to connect to the MongoDB database
```js
const connectDB = async () => {
  try {
    const conn = await mongoose.connect(process.env.MONGO_URI);

    console.log(`MongoDB Connected: ${conn.connection.host}`.yellow.underline);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};
```

Export the function
```js
module.exports = connectDB;
```

Bring in the function to connect the database into `server.js`
```js
const connectDB = require("./config/db");
```

Initialize the function
```js
connectDB();
```

Run the development server in order to connect to the database
```js
npm run dev
```
 ![runningDB](https://tutorial-image-bucket.s3.amazonaws.com/v-MMIJHjPT7amCnyyVyM8.jpeg)

Create and Connect MongoDB Database

Create models folder

Create `quotesModel.js` inside the model folder

Bring in mongoose
```js
const mongoose = require("mongoose");
```

Create quote Schema
```js
const mongoose = require("mongoose");

const quoteSchema = mongoose.Schema({
  quote: {
    type: String,
    required: [true, "Quote  is required"],
    maxlength: [250, "Quote cannot be More than 250 Characters"],
    trim: true,
  },

  author: {
    type: String,
    maxlength: [20, "Author's name canot be more than 10 characters"],
  },
});

module.exports = mongoose.model("Quote", quoteSchema);

```

Export the schema
```js
module.exports = mongoose.model("Quote", quoteSchema);
```

Create Model For Interacting with the Database

Create read controller to get all quotes
```js
const getQuotes = asyncHandler(async (req, res) => {
  //Find quotes
  res.status(200).json({ quotes });

  res.status(200).json(quotes);
});
```

Create post controller to create a quote
```js
const createQuote = asyncHandler(async (req, res) => {
  if (!req.body) {
    res.status(400);
    throw new Error("Please add a quote and author field");
  }

  // Create quote
  const quote = await Quote.create(req.body);
  res.status(200).json(quote);
});
```

Create update controller to update a quote
```js
const updateQuote = asyncHandler(async (req, res) => {
  // Find the quote by Id
  const quote = await Quote.findById(req.params.id);

  if (!quote) {
    res.status(400);
    throw new Error("Quote not found");
  }

  // Update the quote
  const updatedQuote = await Quote.findByIdAndUpdate(req.params.id, req.body, {
    new: true,
  });

  res.status(200).json(updatedQuote);
});
```

Create update controller to delete a quote
```js
const deleteQuote = asyncHandler(async (req, res) => {
  // Find the quote by Id
  const quote = await Quote.findById(req.params.id);

  if (!quote) {
    res.status(400);
    throw new Error("Quote not found");
  }

  //   Delete the quote
  await quote.remove();

  res
    .status(200)
    .json({ message: `Quote with the id ${req.params.id} deleted` });
});
```

**N.B.**: We won't be needing the update and delete routes in production. I decided to include the 2 so beginners can learn how to make a full CRUD (Create, Read, Update and Delete) API.

Create the Read, Post, Update and Delete Controllers with the Quote Model

 ![addQuotes](https://tutorial-image-bucket.s3.amazonaws.com/IESkZlOkSrvCB1U_-A65j.jpeg)

Add the Quotes to the Database

`server.js` in the root

The only new thing here is that I have added and used `cors`

```js
const express = require("express");
const colors = require("colors");
const dotenv = require("dotenv").config();
const cors = require("cors");
const { errorHandler } = require("./middleares/errorMiddleware");
const connectDB = require("./config/db");

const port = process.env.PORT || 5000;

connectDB();

const app = express();

app.use(express.json());
app.use(cors());

app.use("/api/quotes", require("./routes/quoteRoutes"));
// app.use(errorHandler);

app.listen(port, () => console.log(`Server running on port ${port}`));
```

`db.js` inside config subfolder in the backend folder
```js
const mongoose = require("mongoose");

const connectDB = async () => {
  try {
    const conn = await mongoose.connect(process.env.MONGO_URI);

    console.log(`MongoDB Connected: ${conn.connection.host}`.yellow.underline);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};

module.exports = connectDB;
```

`quoteController.js` inside controllers subfolder in the backend folder
```js
const asyncHandler = require("express-async-handler");
const Quote = require("../models/quotesModel");

const getQuotes = asyncHandler(async (req, res) => {
  //Find quotes
  const quotes = await Quote.find();

  res.status(200).json({ quotes });
});

const createQuote = asyncHandler(async (req, res) => {
  if (!req.body) {
    res.status(400);
    throw new Error("Please add a quote and author field");
  }

  // Create quote
  const quote = await Quote.create(req.body);
  return res.status(200).json(quote);
});

const updateQuote = asyncHandler(async (req, res) => {
  // Find the quote by Id
  const quote = await Quote.findById(req.params.id);

  if (!quote) {
    res.status(400);
    throw new Error("Quote not found");
  }

  // Update the quote
  const updatedQuote = await Quote.findByIdAndUpdate(req.params.id, req.body, {
    new: true,
  });

  res.status(200).json(updatedQuote);
});

const deleteQuote = asyncHandler(async (req, res) => {
  // Find the quote by Id
  const quote = await Quote.findById(req.params.id);

  if (!quote) {
    res.status(400);
    throw new Error("Quote not found");
  }

  //   Delete the quote
  await quote.remove();

  res
    .status(200)
    .json({ message: `Quote with the id ${req.params.id} deleted` });
});

module.exports = {
  getQuotes,
  createQuote,
  updateQuote,
  deleteQuote,
};
```

`errorMiddleware.js` inside middleware subfolder in the backend folder
```js
const errorHandler = (err, req, res, next) => {
  const statusCode = res.statusCode ? res.statusCode : 500;

  res.status(statusCode);

  res.json({
    message: err.message,
    stack: process.env.NODE_ENV === "production" ? null : err.stack,
  });
};

module.exports = {
  errorHandler,
};
```

`quoteModel.js` inside models folder in the backend subfolder
```js
const mongoose = require("mongoose");

const quoteSchema = mongoose.Schema({
  quote: {
    type: String,
    required: [true, "Quote  is required"],
    maxlength: [250, "Quote cannot be More than 250 Characters"],
    trim: true,
  },

  author: {
    type: String,
    maxlength: [20, "Author's name canot be more than 10 characters"],
  },
});

module.exports = mongoose.model("Quote", quoteSchema);
```

`quoteRoutes.js` file inside routes subfolder in the backend folder
```js
const express = require("express");
const router = express.Router();

const {
  getQuotes,
  createQuote,
  updateQuote,
  deleteQuote,
} = require("../controllers/quoteController.js");

router.get("/", getQuotes);

router.post("/", createQuote);

router.put("/:id", updateQuote);

router.delete("/:id", deleteQuote);

module.exports = router;
```

The screenshot below shows what the folder structure looks like
 ![folderstructure](https://tutorial-image-bucket.s3.amazonaws.com/muyfFv_yDGxQ6M4ApTbDq.jpeg)

The full Backend Codes and Location of the Files

**Before We Start!**

The main thing we are going to do in the frontend is to make an API request to the server, get the quotes added to the database, and display each of them randomly.

The algorithm we will be using to display the quotes randomly is in the code snippet below:
```js
let randomNum = Math.floor(Math.random() * quotes.length);
let randomQuote = quotes[randomNum];
```

### Install react

Make sure you are in the root directory (not the backend folder), then open your terminal and run `npx-create-react-app frontend`

This will install react in a folder called frontend

run `cd frontend` and then `npm start` to open up the development server in your default browser

You should see something like this when it finishes loading:
![FPAoGIIXsAAhEBU](https://tutorial-image-bucket.s3.amazonaws.com/OTvwE-wfKqiy0b7d2AOQR.jpeg)

The project will have a button that will be clicked to display the quotes randomly and another button you can click to share the quote on Twitter. So, we have to install an icon package from NPM.

The icon package I will be using is React Icons, so open the terminal again and run `npm i react-icons`

When you install react and react-icons, your package.json file should look like this:
```json
{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
```

In the next chapter, we will start creating the components.

Start Working with the Frontend

Before you create any component, create a component subfolder inside the `src` folder, then create a NAv.js component inside the component subfolder

In addition, create an images subfolder inside the `src` folder, download the following images, and put them there:

![kantehead](https://tutorial-image-bucket.s3.amazonaws.com/Kqh-e00nXax6hVFEhBOch.jpeg) 

![p116594](https://tutorial-image-bucket.s3.amazonaws.com/cbh25P0S_8ZOG-u5Lc7Jb.jpeg)

Our Nav components codes look as shown in the snippet below:

```js
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;
```
```

Create the Navbar Component

The `QuoteBody.js`  component will contain every other thing apart from the navbar and footer

Inside the `component` subfolder in the `src` folder, create a file named `QuoteBody.js` 

**Import useState and useEffect hooks**
```js
import React, { useState, useEffect } from "react";
import { FaTwitter, FaRandom } from "react-icons/fa";
```

**Import an image**
```js
import KantePic2 from "../images/p116594.png";
```

**Declare an API variable to be used for the API call**
```js
const api = `http://localhost:5000/api/quotes`;
```

The rest of the codes are well commented so you can understand it. It look like this:

```js
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;
```


Create the QuoteBody Component

Inside the components subfolder, create a file and name it `Footer.js`

Our footer component contains some text and two buttons to fetch random quotes and contact the developer:

```js
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;
```

Create the Footer Component

Inside the components subfolder, create a file and name it `Quote.js`

The Quote component will contain every other components, so we can import only the Quote component to the `app.js file`

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

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

```

Create the Quote Component

Get rid of everything inside the `App.js` file and paste in the following:

```js
import Quote from "./components/Quote";

import "./App.css";

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

export default App;
```

By now, the output looks like this in the browser:
![ssgif](https://tutorial-image-bucket.s3.amazonaws.com/0slgVwh5fT1J0aGTJJthk.jpeg)

Things are working as expected, but we need to add some CSS in the next chapter 

Update App.js File

Inside the App.css file, paste in the following codes:

```css
:root {
  --link-color-1: #3498db;
  --link-color-2: #13486b;
  --bg-color-1: #f1eeee;
  --bg-color-2: #ced8fc;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,
ol {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--link-color-1);
}

a:hover {
  color: var(--link-color-2);
}

/* Nav */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 3.8rem;
  border-bottom: 1px solid var(--bg-color-1);
  box-shadow: 2px 2px 4px 0px var(--bg-color-2);
  color: var(--link-color-1);
}

.logo {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kante-pic {
  height: 80%;
  width: 80%;
}

ul {
  display: flex;
  gap: 40px;
}

/* quote Body */
.quote-body {
  max-width: 800px;
  margin: 30px auto;
  width: 90%;
}

.kante-bg {
  opacity: 0.1;
}

.quote-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 2rem;
  border: 1px solid var(--bg-color-2);
  box-shadow: 2px 2px 4px 2px var(--bg-color-2);
}

.quote-item {
  margin-bottom: 6px;
}

.quote {
  position: absolute;
  top: 340px;
  left: 70px;
}

.quote-btn-container {
  position: absolute;
  top: 420px;
  left: 70px;
  padding: 15px 0;
  display: flex;
  gap: 280px;
}

.btn {
  padding: 4px 8px;
  border-radius: 4px;
  outline: 0;
  border: 1px solid green;
  cursor: pointer;
}

.tweet-btn {
  background-color: #3498db;
  color: black;
}

.tweet-btn:hover {
  background-color: #6fbaec;
  color: black;
}

.quote-btn {
  background-color: #2ecc71;
}

.quote-btn:hover {
  background-color: #4ae798;
}

/* Footer */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
}
.footer-items {
  display: flex;
  height: 15vh;
  gap: 200px;
  align-items: center;
  justify-content: center;
}

ol li {
  padding: 4px;
}

.submit-text {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

@media screen and (max-width: 720px) {
  nav {
    padding: 0rem 1.2rem;
  }

  nav h1 {
    font-size: 1.2rem;
  }

  ul li {
    font-size: 1rem;
  }

  .burger {
    display: block;
  }

  .logo {
    align-items: center;
    justify-content: space-between;
  }

  ul {
    gap: 10px;
  }

  .kante-bg {
    width: 90%;
  }

  .quote {
    position: absolute;
    top: 160px;
    left: 20px;
  }

  .quote-btn-container {
    position: absolute;
    top: 265px;
    left: 20px;
    gap: 80px;
  }

  .footer {
    margin-top: 70px;
    padding: 60px;
  }

  .footer-items {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

@media screen and (max-width: 420px) {
  nav {
    padding: 0rem 1.2rem;
  }

  nav h1 {
    font-size: 1rem;
    font-weight: 900;
  }

  ul li {
    font-size: 0.8rem;
  }

  .quote {
    top: 75px;
    left: 13px;
  }

  .quote-btn-container {
    top: 192px;
  }

  .footer {
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 0;
    padding: 118px 30px;
  }

  .footer-items {
    gap: 20px;
  }
}

@media screen and (max-width: 375px) {
  .quote-container {
    position: relative;
    top: 30px;
  }

  .footer {
    margin-top: 103px;
    padding: 129px 30px;
  }

  .quote {
    top: 55px;
  }

  .quote-btn-container {
    top: 181px;
  }
}

@media screen and (max-width: 321px) {
  nav h1 {
    font-size: 0.5rem;
    font-weight: 900;
  }

  ul li {
    font-size: 0.6rem;
  }
  .quote {
    top: 35px;
  }

  .quote-btn-container {
    top: 141px;
  }
}
```

The project now looks a lot better and everything works as expected:

 ![ss2gif](https://tutorial-image-bucket.s3.amazonaws.com/JmX3n6BqBvUC_Eyp4AP0d.jpeg)

Add CSS to the Project

Here's the full frontend codes file by file

`App.js` inside `src` folder 
```js
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:
```js
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:

```js
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:

```js
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: 

```js
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:

```js
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](https://github.com/Ksound22/fullstack-quote-generator).

The Full Frontend Codes and File Locations

A full stack application similar to dad jokes. Made with the MERN stack.

Fullstack Quote Generator

Initialize the project

Best React Node MERN Courses on Udemy