Problemas no fetch, carregamento dos dados na página

Front-end JavaScript
#1

Estou com problemas para carregar os produtos de um catálogo. O console de desenvolvedor pediu para usar o mode no-cors mas começou a dar erros no fetch. Por favor deêm uma olhada no codigo app.js e no index.html. Observação o código está meio confuso e talvez tenha alguma função que eu não estou usando ainda. Segue abaixo os códigos:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Make Up Catalog</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <header>
      <h1>Make Up Catalog</h1>
    </header>
    <main>
      <form class="catalog-control">
        <div class="form-control">
          <label for="filter-name">Nome:</label>
          <input type="text" id="filter-name" />
        </div>
        <div class="form-control">
          <label for="filter-brand">Marca:</label>
          <select id="filter-brand">
            <option value="">Todos</option>
          </select>
        </div>
        <div class="form-control">
          <label for="filter-type">Tipo:</label>
          <select id="filter-type">
            <option value="">Todos</option>
          </select>
        </div>
        <div class="form-control">
          <label for="sort">Ordem: </label>
          <select id="sort-type">
            <option>Melhor Avaliados</option>
            <option>Menores Preços</option>
            <option>Maiores Preços</option>
            <option>A-Z</option>
            <option>Z-A</option>
          </select>
        </div>
        <button type="button" id="pesquisar">Pesquisar</button>
      </form>
      <section class="catalog"></section>
    </main>

    <div class="catalog" id="catalogo"></div>
  </body>
  <script src="js/app.js"></script>
</html>

app.js

// Função que realiza a chamada HTTP para recuperar os dados
function lerDados(callback) {
  fetch("http://makeup-api.herokuapp.com/api/v1/products.json", {
    mode: "no-cors",
  }).then((resp) => {
    // Obtém a resposta da requisição HTTP e faz a conversão para JSON
    // Em seguida invoca a função callback passando os dados recebidos
    resp.json().then((data) => callback(data));
  });
}

// Monta a string com o conteúdo html para ser renderizado na DIV
function renderTabela(produtos) {
  let linhas = produtos.map((produto) => {
    return `<tr><td>${produto.name}</td><td>${produto.price}</td></tr>`;
  });
  return `<table>${linhas.join("")}</table>`;
}

var pesquisar = document.getElementById("pesquisar");
pesquisar.addEventListener("click", preparaFiltros);

function preparaFiltros() {
  var nome = document.getElementById("filter-name");
  var marca = document.getElementById("filter-brand");
  var tipo = document.getElementById("filter-type");
  var ordenacao = document.getElementById("sort-type");
}

function leDadosFiltrados(callback) {
  if (nome.value != "") {
    fetch(
      `http://makeup-api.herokuapp.com/api/v1/products.json&name=${nome.value}`
    ).then((resp) => {
      resp.json().then((data) => callback(data));
    });
  }
  renderTabela(dados);
  catalogo.innerHTML = tabela;
}

// Obtém a DIV onde a tabela será renderizada e adiciona um texto para indicar que os daados estão sendo carregados
const catalogo = document.getElementById("catalogo");
catalogo.innerText = "Loading...";

// Chama a função que recupera os dados passando uma função callback que irá receber os dados no formato json
lerDados((dados) => {
  let corpoCatalogo = renderTabela(dados);
  catalogo.innerHTML = corpoCatalogo;
});

/*
function renderTabela(produtos) {
  let linhas = produtos.map((produto) => {
    return `<tr><td>${produto.name}</td><td>${produto.price}</td></tr>`;
  });
  return `<table>${linhas.join("")}</table>`;
}
*/

function renderTabela(produtos) {
  let linhas = produtos.map((produto) => {
    return productItem(produto);
  });
  return `${linhas.join("")}`;
}

//EXEMPLO DO CÓDIGO PARA UM PRODUTO
function productItem(product) {
  return `<div class="product" data-name=${product.name} data-brand=${product.brand} data-type=${product.product_type} tabindex="508">
  <figure class="product-figure">
    <img src="${product.image_link}" width="215" height="215" alt="${product.name}" onerror="javascript:this.src='img/unavailable.png'">
  </figure>
  <section class="product-description">
    <h1 class="product-name">${product.name}</h1>
    <div class="product-brands"><span class="product-brand background-brand">${product.brand}</span>
<span class="product-brand background-price">R$ ${product.price}</span></div>
  </section>
</div>`;
}

//EXEMPLO DO CÓDIGO PARA OS DETALHES DE UM PRODUTO
function loadDetails(product) {
  let details = `<section class="product-details"><div class="details-row">
        <div>Brand</div>
        <div class="details-bar">
          <div class="details-bar-bg" style="width= 250">nyx</div>
        </div>
      </div><div class="details-row">
        <div>Price</div>
        <div class="details-bar">
          <div class="details-bar-bg" style="width= 250">10.49</div>
        </div>
      </div><div class="details-row">
        <div>Rating</div>
        <div class="details-bar">
          <div class="details-bar-bg" style="width= 250">5</div>
        </div>
      </div><div class="details-row">
        <div>Category</div>
        <div class="details-bar">
          <div class="details-bar-bg" style="width= 250"></div>
        </div>
      </div><div class="details-row">
        <div>Product_type</div>
        <div class="details-bar">
          <div class="details-bar-bg" style="width= 250">bronzer</div>
        </div>
      </div></section>`;
}

Preciso mostrar um catálogo de produtos e aceito sujestões.
Atenciosamente,
Ronaldo