[Ethereum] Contract has not been deployed to detected network

I ran truffle compile and truffle migrate to deploy my contract:

admin@admin-PC ~/Desktop/Coding Projects/truffleTestProject (master)
$ truffle migrate
Using network 'development'.

Running migration: 1_initial_migration.js
  Deploying Migrations...
  ... 0xa8f3001d7778963ca08835f2d1c01c53e86dbb0922dfabcd3aca252d93ab6649
  Migrations: 0xb26e34c748a898f09af7e55875870f947b4d382b
Saving successful migration to network...
  ... 0xc38f5486655c640b692fedeb59d81217a94561e1c6b460dba3b608467e7815f4
Saving artifacts...
Running migration: 2_deploy_contracts.js
  Deploying CryptoSportsToken...
  ... 0x21d3bdfd5afe4ec96d5c37ff647f4a8fcf598272cd32e783edca47d601b47bcc
  CryptoSportsToken: 0xa076500eaafb7259535d3430e5eed8c2904651cb
Saving successful migration to network...
  ... 0x0dc395cdba01fcf01c2f2c89547bf001edc3ad7d0f69235f99e7ac48fb51fe12
Saving artifacts...

However, in my frontend I get the following message:

Contract has not been deployed to detected network (network/artifact
mismatch)

My folder structure looks like the following:

The 1_initial_migration.js is the same as truffle created it in the beginning:

var Migrations = artifacts.require("./Migrations.sol");

module.exports = function(deployer) {
  deployer.deploy(Migrations);
};

My 2_deploy_contracts.js file looks like the following:

var CryptoSportsToken = artifacts.require("CryptoSportsToken");

module.exports = function(deployer) {
  deployer.deploy(CryptoSportsToken);
};

As you can see I only deploy my CryptoSportsToken. Within my CryptoSportsToken contract I am importing the "./ERC721.sol";.

I further tried to use truffle migrate --reset, however it does not change anything on my output message.

Any suggestion what I am doing wrong?

I appreciate your replies!

UPDATE

I am using truffle-contract to access the contract via web3.

See below my code how I access the contract in the frontend:

App = {
  web3Provider: null,
  contracts: {},

  init: function () {
    return App.initWeb3();
  },

  initWeb3: function () {

    // Is there an injected web3 instance?
    if (typeof web3 !== 'undefined') {
      App.web3Provider = web3.currentProvider;
    } else {
      // If no injected web3 instance is detected, fall back to Ganache
      App.web3Provider = new Web3.providers.HttpProvider('http://localhost:8545');
    }
    web3 = new Web3(App.web3Provider);

    return App.initContract();
  },

  initContract: function () {
    $.getJSON('CryptoSportsToken.json', function (data) {
      // Get the necessary contract artifact file and instantiate it with truffle-contract
      var CryptoSportsTokenArtifact = data;
      App.contracts.CryptoSportsToken = TruffleContract(CryptoSportsTokenArtifact);

      // Set the provider for our contract
      App.contracts.CryptoSportsToken.setProvider(App.web3Provider);

      return App.bindEvents();
    });
  },

  bindEvents: function () {
    $(document).on('click', '.btn-create', App.createPerson());
  },

  createPerson: function () {
    //event.preventDefault();
    var cryptosportInstance;

    console.log("test")
    console.log(owner + " " + name + " " + price)
    console.log("###################")

    console.log("App: \n");
    console.log(App);
    console.log("App.contracts: \n");
    console.log(App.contracts);

    console.log("###################")
    console.log(App.contracts.CryptoSportsToken)

    web3.eth.getAccounts(function (error, accounts) {
      if (error) {
        console.log(error);
      }

      var account = accounts[0];

      App.contracts.CryptoSportsToken.deployed().then(function (instance) {
        cryptosportInstance = instance;

        console.log(cryptosportInstance)

        var owner = $('#owner').val();
        var name = $('#name').val();
        var price = $('#price').val();

        return cryptosportInstance.createPromoPerson(owner, name, price).call();
      }).catch(function (err) {
        console.log(err.message);
      })
    });
  },
};

$(function () {
  $(window).load(function () {
    App.init();
  });
});

Further I created the following github repo to show all my current code.

UPDATE 2

The above code is from the create_app.js file and I am trying to make create.html work.