This project was bootstrapped with Create React App by running the following command from the parent folder:

npx create-react-app freecodecamp-frontend-quote --template typescript

Random quote generator

A random quote generator for practicing React development, based on the description and tests from freecodecamp.org's frontend project: Build a Random Quote Machine
Please visit https://kbrnsr.github.io/freecodecamp-frontend-quote for a working example

Setup

Assuming that all commands are run from project root.

Install the project by running this command from the project root:

npm install

Run the app in the development mode.
Open http://localhost:3000 to view it in the browser.

npm start

Run tests by running:

npm test

The only real configuration you might need to do is changing baseUrl in src/constants.ts. It refers to a REST endpoint that should return a payload in the format:

[
  {
    text: 'Genius is one percent inspiration and ninety-nine percent perspiration.',
    author: 'Thomas Edison',
  },
  {
    text: 'You can observe a lot just by watching.',
    author: 'Yogi Berra',
  }
]

Note that the payload should be in this format, if you need to change the endpoint URL then I would recommend transforming the payload in the handler.

CI/CD

Not much to say here, see .github/workflows/ci.yml for continuous integration and .github/workflows/cd.yml for continuous deployment.

The CD process deploys to Github Pages

Tech used

• Node.js
• React
• Create React App
• Axios
• Jest
• React Testing Library
• Mock Service Worker (MSW)
• ESlint
• TypeScript ESLint

Credits

• Kent C. Dodds for his blog post Stop mocking fetch which introduced me to MSW and react-testing-library.
• SergeyWebPro for providing a free endpoint for inspirational quotes.