Quote Machine Feedback/Help

https://polila.github.io/projects/quote-machine/index.html, I initially implemented this using React/JSX but had trouble deploying it on github pages. I keep getting an ERLF error whenever I “npm deploy” and couldn’t find a way to have a quote appear upon page loading the first time. Would appreciate some advice/pointers on what I should do since the idea was to learn React.

Here is the link to the version written with React:

import React, { Component } from 'react';
import original from "./doIt.mp4";
import remix from "./remix.mp4";
import './App.css';

function random(max, min) {
  return Math.floor(Math.random() * (max - min) + min);
}

const url = "https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json";

const Util = {
  search() {
    return fetch(url).then((response) => {
      return response.json();
    }).then((jsonResponse) => {
      if (jsonResponse.quotes) {
        return jsonResponse.quotes.map((x) => {
          return {
            quote: x.quote,
            author: x.author
          };
        });
      }
    });
  }
}

const VIDEOS = {
  org: original,
  rmx: remix
};

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      quote: "",
      author: "",
      src: VIDEOS["org"],
      muted: true
    };
    this.toggleVideo = this.toggleVideo.bind(this);
    this.getQuotes = this.getQuotes.bind(this);
  }
  getQuotes() {
    Util.search().then((quotes) => {
      const n = random(quotes.length - 1, 0);
      this.setState({
        author: quotes[n].author,
        quote: quotes[n].quote
      });
    });
  }
  toggleVideo(e) {
    if (this.state.src === original) {
      this.setState({
        src: VIDEOS["rmx"],
        muted: false,
      });
    } else {
      this.setState({
        src: VIDEOS["org"],
        muted: true
      });
    }
  }
  render() {
    let bio = `https://en.wikipedia.org/wiki/${this.state.author.split(' ').join('_')}`;
    return (
      <div id="body">
        <video id="background-video" loop autoPlay muted={this.state.muted} src={this.state.src} type="video/mp4" />
        <div id="container">
          <div id="quote-box">
            <div id="contact">
              <a href="https://github.com/polila" target="_blank" rel="noopener noreferrer"><i className="fab fa-github"></i></a>
              <a href="https://stackexchange.com/users/11590631/patrick-olila?tab=accounts" target="_blank" rel="noopener noreferrer"><i class="fab fa-stack-overflow"></i></a>
              <a href="https://www.linkedin.com/in/patrick-olila-b29518144/?originalSubdomain=ca" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin"></i></a>
              <a href="https://codepen.io/polila/#" target="_blank" rel="noopener noreferrer"><i class="fab fa-codepen"></i></a>
            </div>
            <div id="new-quote">
              <div id="quote-text">
                <blockquote>
                  <em>"{ this.state.quote }"</em>
                </blockquote>
                <div id="author">
                  <p>- { }  
                    <a href={bio} target="_blank" rel="noopener noreferrer">
                      { this.state.author }
                    </a>
                  </p>
                </div>
              </div>
              <div id="audio">
                <i id="audio" className="fab fa-free-code-camp" onClick={this.toggleVideo} ></i>
              </div>
              <button id="quote-bttn" onClick={this.getQuotes} >LET'S GO!</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;