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:

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

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:

{
  "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.