QuoteGenie

A Random Quotes Generator App

// example url
`https://api.quotable.io/quotes/random`;

Check out the QuoteGenie live site demo

When the page loads, the quote machine displays a random quote along with the author

When the NEW QUOTE button is clicked, the quote machine will fetch a new quote and author

One can retweet a quote via the TWEET button

Styling

Bootstrap

React Icons

React Bootstrap

Recommended Patterns

Redux Ducks Pattern

Testing

A Quick start testing guide with Cypress for React App

Follow this link for writing tests in Typescript

// example of the App.tsx file is being mounted
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./app/store";

describe("<App />", () => {
  it("renders component and clicking on the new quote button fetches a new quote", () => {
    // see: https://on.cypress.io/mounting-react
    cy.mount(
      <Provider store={store}>
        <App />
      </Provider>
    );
  });
});

API Testing

import App from "./App";
import { Provider } from "react-redux";
import { store } from "./app/store";

describe("<App />", () => {
  it("renders component and tests the api GET request along with data length of 1", () => {
    // see: https://on.cypress.io/mounting-react
    cy.mount(
      <Provider store={store}>
        <App />
      </Provider>
    );
    cy.request({
      method: "GET",
      url: "https://api.quotable.io/quotes/random",
    }).then((response) => {
      expect(response.body).have.lengthOf(1);
    });
  });
});