Clean Up: Use Environment Variables for URLs more consistently

[TimothyGillespie]

Current, we will see URLs passed like this:

  <Header
    text="Featured Packs"
    icon={faRectangleList}
    linkUrl={`${
      import.meta.env.VITE_BEATSAVER_BASE || 'https://beatsaver.com'
    }/playlists?curated=true`}
    linkText="See all curated packs"
  />

and like this:

      const beatSaverMapData = await fetch(
      `https://api.beatsaver.com/maps/id/${currentMOTWCollectionData.mapId}`,
    ).then((res) => res.json())

The former uses an environment variable, when it's not given it defaults to https://beatsaver.com, the other one hard codes https://api.beatsaver.com as a base (do note they are not the same, the second one uses the api-subdomain)

This task would be done when:

• All such instances are replaced with appropriate, shared environment variables

Nice to Have:

• Find a better way to have the fallback value in place without putting it inline on every instance

Do note:

If you want to access an environment variable via import.meta.env, then the variable name needs to start with VITE_. Otherwise, it won't be picked up.

You can also set the environment variables by creating a .env file in the project root.

You can then do, for example:

VITE_BEATSAVER_BASE="https://beatsaver.com"

to have the value set on running the dev command. Be careful! Only one variable per line, the quotationmarks are not included and you may not put any spaces between the variable name, the equal sign and the value. The syntax is quite sensitive.