Hi I would appreciate it if you could checkout my project and give me some feedback on where I can improve. I used the actual twitch api instead of the one fCC provided. *Just a note I am not very good at designing website so it might not be very visually appealing 
Twitch board
You really don’t want the client to talk to the API directly if it needs auth that shouldn’t be leaked. You need a backend that talks to the API on behalf of the client. It is one of the reasons why the fCC pass-through API is provided so you do not have to deal with auth, although I’m not sure if the proxy still works.
For pure DOM manipulation, I would recommend using template literals. They can make the code easier to write and read.
You might not know a framework yet and that’s fine but they can really simplify the code needed to do DOM manipulation and the meta frameworks can help make the client/server communication easier as well. Some are more beginner friendly than others, something like Svelte/SvelteKit might be easier to get going with than React/NextJS.
Anyway, nice job. Keep at it.
Thank you for the response, I was confused on how to hide my key and secrete on the frontend since there is no .env, but having your backend communicate with the api instead of the client makes a lot of sense to solve this problem. Would I just have my frontend send a request to the backend which would then get the data from the api and return it?
Never mind I think I now understand what you were saying. I would just send a request to the backend to receive the secrete or key.
Yes, the backend has to do the API interaction that needs the auth and your client will communicate with your own backend and get the data back from it. When the backend does nothing more than act as a middle-man it is often called a proxy or pass-through API.
Even with an .env file the client can’t hide the auth information. If the auth is in the request, for example as part of the URL, it will leak the auth.