npm error: A typo that wasted my time

📅 Day 74 #FrontendChallenge ⚛️ Mastering NPM, NPX, npm init, npm init -y, package.json, package-lock.json, node_modules, gitignore, README, dependencies and devDependencies in React 🔹 npm (Node Package Manager) Used to install & manage React libraries. 👉 Example: npm install react-router-dom 🔹 npx (Node Package eXecute) Runs packages without installing them globally. 👉 Example: npx create-react-app myApp 🔹 npm init Initializes a new project by creating a package.json file (asks setup questions). 🔹 npm init -y Creates package.json instantly with default values — no prompts. 🔹 package.json 📦 Stores project info, dependencies, and npm scripts (like npm start or npm build). 🔹 package-lock.json Locks exact package versions for consistency across all systems. 🔹 node_modules Contains all installed packages & their dependencies. (Usually ignored in Git 😅) 🔹 gitignore 🚫 A file that tells Git which files or folders to ignore. Usually includes: node_modules/ .env build/ This keeps your repo clean and lightweight. 🔹 README.md Your project guide — explains setup, usage, and purpose. 🔹 dependencies Libraries your React app needs to run (e.g., React, Axios, React Router). 🔹 devDependencies Tools used only during development (e.g., ESLint, Jest, Babel). 💡 Pro Tip: Never delete your package-lock.json. It ensures your React app behaves the same on every machine. #ReactJS #NPM #WebDevelopment #Frontend #JavaScript #DeveloperTips

💻 React Devs, ever noticed your production build folder is massive — or worse, your original source code appears in the browser’s DevTools? Here’s a simple yet powerful trick to fix that 👇 GENERATE_SOURCEMAP=false npm run build ✨ What this does: 🚀 Reduces build size 🔒 Keeps your source code secure (no readable code exposed) ⚡ Speeds up the build process ⚠️ A quick note: Avoid disabling source maps in development — it’ll make debugging much harder  💡But wait… what is a Source Map, anyway? 🤔 Think of it as a map that links your minified production code back to your original React files. It’s super useful for debugging — but in production, it’s often unnecessary (and risky). 👉 Have you tried disabling source maps before? Did you notice improvements in build speed or bundle size? Share your experience below 👇 #WebPerformance #ReactJS #CodeOptimization #BuildOptimization #FrontendDevelopment #DeveloperTips #TechCommunity

🚀 Episode 03: Writing Code with Node.js! 💻 In this episode, I finally got hands-on with Node.js — moving from concepts to actual coding! ⚙️ Here’s what I learned and practiced: 🔹 Installed Node.js from nodejs.org and verified it using node -v and npm -v. 🔹 Explored Node REPL (Read-Eval-Print-Loop) — an interactive way to write and test JavaScript directly in the terminal. 🔹 Created my first Node.js file (app.js) in VS Code and ran it using node app.js. 🔹 Understood Global Objects in Node.js — unlike browsers that use the window object, Node.js uses a global object. 🔹 Discovered that globalThis (introduced in ECMAScript 2020) provides a universal way to access the global scope in any environment. 💡 It’s fascinating to see how Node.js bridges JavaScript from the browser to the server and brings so much power to the backend world! #NodeJS #JavaScript #BackendDevelopment #LearningJourney #MERNStack #WebDevelopment #Coding #V8Engine #GlobalObject

Ever had a React component get stuck in an infinite re-render loop? It happened to me last week. I was debugging a simple data-fetching component, but my network tab was exploding with requests. 🔥 The culprit was a sneaky `useEffect` dependency. The hook’s dependency array included a function `fetchData` that was defined right inside the component body. On every single render, React was creating a 𝐧𝐞𝐰 instance of that function. This new reference would trigger the `useEffect` all over again. It’s a classic trap that's surprisingly easy to fall into. 🧠⚡ The fix was simple: wrapping the function in `useCallback` to memoize it. Have you struggled with this before? #ReactJS #FrontendDevelopment #DeveloperTips

💡 From Vanilla JS → React → Redux Toolkit: Full Circle Moment This week I have been exploring Redux Toolkit and had a fun realisation. In React, we never mutate state and always return new objects with useState. Then with Redux Toolkit, I wrote this: state.push(action.payload) …and it just worked. Why? Immer handles immutability under the hood. It lets us write “mutating” code while keeping state updates safe and predictable. Feels like a full circle: from mutating in vanilla JS → immutable in React → “mutating safely” in Redux Toolkit. ✅ Lesson: Redux Toolkit makes state management clean, simple, and safe. #React #ReduxToolkit #JavaScript #WebDev #StateManagement

𝐒𝐦𝐚𝐥𝐥 𝐀𝐜𝐡𝐢𝐞𝐯𝐞𝐦𝐞𝐧𝐭𝐬 We've all had that mini heart-attack moment, right? You're about to push a new feature, and the cold sweat begins... "Did I leave an API key hardcoded in there?" 😱 I was in that exact spot last week, working on a React project juggling a dozen different APIs. The thought of manually cutting, pasting, and creating the ".𝑒𝑛𝑣" file was... well, let's just say it wasn't my idea of fun. Ufff. So, instead of a marathon of copy-pasting, I decided to code my way out of it. I'm excited to share the result: two new npm packages npm, Inc.! 💡 𝐞𝐧𝐯𝐚𝐥𝐲𝐳𝐞: This little tool automatically scans your project, finds all your secrets, and neatly pops them into a `.𝑒𝑛𝑣` file for you with option for backups! Security + Speed = Happy Developer. 🤔 𝐞𝐧𝐯-𝐟𝐚𝐮𝐥𝐭: Ever had your app crash because a variable was in your code but not your '.𝑒𝑛𝑣'? This one acts as a 'diff' checker, instantly showing you the difference between the variables your code expects and what your environment provides. No more guesswork! 🧑🏻💻 Just 𝘯𝘱𝘮 𝘪 𝘦𝘯𝘷𝘢𝘭𝘺𝘻𝘦 𝘦𝘯𝘷-𝘧𝘢𝘶𝘭𝘵 and see the magic. From a small annoyance to two developer tools. Hope they can save you some time too! 𝐋𝐢𝐧𝐤𝐬 𝐭𝐨 𝐛𝐨𝐭𝐡 𝐩𝐚𝐜𝐤𝐚𝐠𝐞𝐬 𝐚𝐫𝐞 𝐢𝐧 𝐭𝐡𝐞 𝐟𝐢𝐫𝐬𝐭 𝐜𝐨𝐦𝐦𝐞𝐧𝐭. What's the most mundane task you have faced so far? 👇 #DeveloperTools #NPM #JavaScript #ReactJS #NodeJS #OpenSource #Security #WebDevelopment

If you’ve ever tried setting a breakpoint in a NestJS project and wondered why it never stops where it should — you’re not alone 😅 I recently wrote a short guide on how to properly set up debugging for NestJS in WebStorm, step by step, with screenshots and explanations. It’s one of those small things that can save you hours once you set it up right. 👉 Check it out here: https://lnkd.in/dEwYKWg7 If you find it helpful, give it a ❤️ or leave a comment — I’d love to hear your thoughts and experiences!

🚀 npm start vs npm run — What’s the Difference? If you’ve worked with Node.js or React, you’ve definitely used these commands. But do you really know how they differ? 🤔 🟢 npm start It’s a shortcut command that automatically runs the “start” script defined in your package.json file. You don’t need to type the word run — it’s built in as a special shortcut. 🟣 npm run This command is used to execute any custom script you define in your project. You can use it for tasks like build, test, deploy, or dev. In simple terms — npm run is used for everything other than the default start script. ⚙️ Quick Recap ✅ npm start → Shortcut for running the “start” script ✅ npm run → Used to run other custom scripts 💡 In short: npm start is for the default script, while npm run gives you flexibility to run any custom command. ✨ Small details like this make you a smarter developer every day! Keep learning, keep building 🚀 #NodeJS #JavaScript #WebDevelopment #ReactJS #CodingTips #npm #DeveloperCommunity #CodeNewbie #100DaysOfCode #FrontendDevelopment #TechLearning

This is a simplified overview of a React project using Vite. The src folder is where you write your React components and logic, public holds static files like images and HTML, and node_modules contains all the packages your project needs. Key files like App.jsx and main.jsx control your app’s behavior, while CSS files style your components. Package files (package.json & package-lock.json) manage dependencies, and Vite handles the development server. Understanding this structure helps beginners navigate and build React apps efficiently. Learn More About React : https://lnkd.in/gvzmHypZ #ReactJS #React #JavaScript #Frontend #WebDevelopment #FrontendDeveloper #WebDev