I scanned through your article and (maybe I missed something, but) I noticed that you expose the private key for your API to the client. This is really bad advice (even for a hobby project) and will expose your API account to anyone who likes to use it. Novice developers who read this article will copy your code and think it is standard practise, so I think you should make some adjustments.
As stated in the Vite docs, any env var prefixed by VITE_ will be string-replaced in the code, so they private key is in your client bundle.
To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code
What you should do is set up a very simple API server with Express or something similar. The client makes requests to your Express server. The Express server calls the Marvel API with the private key and forwards the results to the client.
Other than that, I wouldn't recommend using SASS anymore and you're not really using any SASS features anyway. Nowadays, native CSS can do almost everything SASS can do, even nested selectors.
My name is Aleks and my goal is to create interesting and practical web based projects in React and JavaScript that will help you learn and improve as a developer.
Thank you for the feedback Edwin. For a learning project, and almost all of my tutorials are learning projects, it's a bit of an overkill to set up a server just for the API key. I usually mention that setting up API calls on the frontend isn't the best practice, but I haven't written/recorded tutorials for the past 2-3 years, so I missed mentioning it in this one as well. Also, my tutorials are geared towards people starting with React/frontend, so I stayed away from introducing backend stuff into the mix, but maybe I should change that.
As for Sass, I do mention it's a preference thing in the video. I've been using it daily for the past 6-7 years and a lot of companies have it as a job requirement, so being at least familiar with it is a plus for anyone. Your article on modern CSS features is great, but we'll have to wait and see if companies are just going to ditch Sass or pre-processors entirely.
The visual part is mostly irrelevant here as it's not a CSS tutorial. A lot of the times I just point readers/viewers to copy and paste my CSS files if they aren't interested in that part, and I either skim through the code, or skip it entirely.
Thank you for commenting, I appreciate it.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I scanned through your article and (maybe I missed something, but) I noticed that you expose the private key for your API to the client. This is really bad advice (even for a hobby project) and will expose your API account to anyone who likes to use it. Novice developers who read this article will copy your code and think it is standard practise, so I think you should make some adjustments.
As stated in the Vite docs, any env var prefixed by
VITE_will be string-replaced in the code, so they private key is in your client bundle.What you should do is set up a very simple API server with Express or something similar. The client makes requests to your Express server. The Express server calls the Marvel API with the private key and forwards the results to the client.
Other than that, I wouldn't recommend using SASS anymore and you're not really using any SASS features anyway. Nowadays, native CSS can do almost everything SASS can do, even nested selectors.
Thank you for the feedback Edwin. For a learning project, and almost all of my tutorials are learning projects, it's a bit of an overkill to set up a server just for the API key. I usually mention that setting up API calls on the frontend isn't the best practice, but I haven't written/recorded tutorials for the past 2-3 years, so I missed mentioning it in this one as well. Also, my tutorials are geared towards people starting with React/frontend, so I stayed away from introducing backend stuff into the mix, but maybe I should change that.
As for Sass, I do mention it's a preference thing in the video. I've been using it daily for the past 6-7 years and a lot of companies have it as a job requirement, so being at least familiar with it is a plus for anyone. Your article on modern CSS features is great, but we'll have to wait and see if companies are just going to ditch Sass or pre-processors entirely.
The visual part is mostly irrelevant here as it's not a CSS tutorial. A lot of the times I just point readers/viewers to copy and paste my CSS files if they aren't interested in that part, and I either skim through the code, or skip it entirely.
Thank you for commenting, I appreciate it.