I’m wanting to use a rate-limited API in my web app that requires a key. What is the best practice for dealing with this? Do I need to create a server backend that calls the API, and then my web app calls the backend server? Any useful resources to learn about how to do this are appreciated.
That is generally good practice. It’s called a proxy server, and what it means is that you can authenticate (using the key) on the server side and never expose it publicly.
There are other things to consider that make it a good fit for what you want – you can track the requests made for example, and send warnings that you’re close to the limit, or just cache the responses (ie save the response and use that on subsequent calls instead of hitting the real API) and only return them for a period to ensure you don’t overshoot the limit. There’s loads of stuff you can do anyway that isn’t practical frontend but is generally pretty easy serverside.
Node makes building proxy servers very easy: if you haven’t encountered it yet, then I’d advise going through the basic tutorials in the NodeJS site + the FCC backend curriculum for an overview. Once you know basically how to build a basic server (it can be a single file of just a few lines), you can then use that as the endpoint your web app hits rather than directly hitting the API – you can use Glitch or similar to set the Node server up & play around with.
There are quite a few libraries that simplify this process even more: it’s a very common need. I’ve used this one and it’s pretty good (you can create a proxy in literally about ten lines of code):