How to Clone One React Project from a Large Repo with Git Sparse Checkout

As developers, we’ve all seen messy or unclear commit messages like “𝘧𝘪𝘹 𝘴𝘵𝘶𝘧𝘧” or “𝘶𝘱𝘥𝘢𝘵𝘦 𝘤𝘰𝘥𝘦” 😅 That’s why I built https://lnkd.in/d6z7Yb2J  a lightweight 𝗡𝗼𝗱𝗲.𝗷𝘀 𝗖𝗟𝗜 𝗽𝗮𝗰𝗸𝗮𝗴𝗲 that helps you 𝘄𝗿𝗶𝘁𝗲 𝗯𝗲𝘁𝘁𝗲𝗿 commit messages effortlessly.  𝗪𝗵𝗮𝘁 𝗶𝘁 𝗱𝗼𝗲𝘀:  • Guides you through an interactive prompt to choose your commit type (feat, fix, docs, chore, etc.)  • Ensures your message follows a consistent convention  • Automatically runs the git commit for you  • Adds a touch of color and clarity with Chalk  • Saves time and keeps your Git history clean 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀: Clear commit messages make collaboration smoother, improve project history readability, and align with best practices like Conventional Commits especially in large teams or open-source projects. 𝗧𝗲𝗰𝗵 𝗦𝘁𝗮𝗰𝗸: Node.js • Inquirer.js • Chalk • simple-git • Jest If you’d like to make your Git commits more professional and consistent, give it a try 👇 𝗜𝗻𝘀𝘁𝗮𝗹𝗹: 𝘯𝘱𝘮 𝘪 @𝘩𝘢𝘮𝘻𝘢𝘳𝘢𝘧𝘪𝘲𝘶𝘦964/𝘨𝘪𝘵-𝘤𝘰𝘮𝘮𝘪𝘵-𝘨𝘦𝘯 Let me know your feedback — always open to suggestions and contributions! 🙌 #nodejs #opensource #developertools #git #automation #cli #javascript #productivity #softwaredevelopment #reactjsdeveloper #fullstackdeveloper #angular #typescript

🚀 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

#Developer #Notes: Dependencies vs DevDependencies: An example that Just Saved 563 Packages from Production Here's what happens when you run pnpm install --production on a properly configured NestJS project: Result: -563 packages excluded from production Let that sink in. 563 packages that would have unnecessarily bloated the production build were kept out—simply by correctly categorizing dependencies. The Clear Distinction: Dependencies (RUNTIME) → What your app needs to EXECUTE passport (0.7.0) - Authentication at runtime bcrypt (6.0.0) - Password hashing in production @nestjs/core (11.1.8) - Core framework functionality rxjs (7.8.2) - Reactive programming in your app These go to production. Your app won't run without them. DevDependencies (BUILD TIME) → What you need to BUILD and TEST jest (29.7.0) - Unit testing framework typescript (5.9.3) - Compiles to JavaScript before deployment eslint (9.38.0) - Code linting during development @types/* - TypeScript type definitions These stay on your machine. Production never sees them. The Real Numbers: When I ran pnpm install --production: Excluded: 563 packages (devDependencies) Time saved: Milliseconds vs seconds on every deploy Space saved: Hundreds of megabytes Security surface reduced: 563 fewer packages to audit The Test Every Developer Should Run: pnpm install --production # or npm install --production If you see TypeScript, ESLint, Jest, or testing libraries still being installed, you have a problem. Common Mistakes I See: Putting typescript in dependencies (it compiles, doesn't run) Adding @types/* packages to dependencies (only for dev intellisense) Leaving testing libraries in dependencies (tests don't run in prod) Installing everything as a regular dependency "just to be safe" Being "safe" is actually making your production environment LESS safe. The difference between a 150MB and a 800MB container? Usually just this classification. Stop Bloating Your Production Bundle What's your production bundle size? Tag someone who needs to see this #NodeJS #DevOps #BestPractices #SoftwareEngineering #NestJS #Performance

🚀 Understanding npm, package.json, dependencies & scripts If you’ve ever worked with Node.js or React, you’ve definitely used npm — but here’s a quick breakdown of what’s really happening behind the scenes 👇 🧩 npm (Node Package Manager) It’s the default package manager for Node.js. You use it to install, manage, and share open-source packages that help you build faster without reinventing the wheel. Example: npm install express 📦 package.json Every Node.js project has a package.json file — it’s like the project’s manifest. It stores important details like: project name, version, author dependencies (the packages your app needs) scripts (custom commands you can run) 📚 Dependencies These are the external libraries or modules your app relies on. There are two main types: "dependencies" → needed for your app to run "devDependencies" → only needed during development (e.g., testing, linting) Example: "dependencies": { "express": "^4.18.2" }, "devDependencies": { "nodemon": "^3.0.2" } ⚙️ Scripts Scripts let you automate common tasks. You define them in package.json and run them with npm run <script>. Example: "scripts": { "start": "node server.js", "dev": "nodemon server.js" } Then run: npm run dev 💡 In short: npm helps you manage your project’s tools, package.json describes them, dependencies are what your project needs, and scripts automate how you run it. #npm #nodejs #javascript #webdevelopment #frontend #backend #reactjs #developers #programming #softwaredevelopment #coding #tech #learning #webdev

🚀 Quick Git Tip for Developers Ever been in the middle of building a new component when suddenly you’re asked to jump into another branch to fix a critical UI bug? You try to switch branches, but Git or VS Code blocks you: ❌ "Your local changes would be overwritten" Don’t panic and don’t commit half-finished code just to get around it. 👉 Meet your silent hero: git stash This saves all your uncommitted changes in a temporary safe spot without cluttering your commit history. Now you can freely: - Switch branches. - Pull updates. - Fix urgent issues. - Experiment safely. When you’re ready to return to your original work use : " git stash pop " and boom all your changes are back exactly as you left them! 💡 Pro tips: git stash list : see all your saved stashes git stash apply : restore without deleting the stash Stashes are branch-agnostic you can apply them anywhere. ✨ Keep your Git history clean, your PRs focused, and your workflow smooth. #FrontEnd #Angular #JavaScript #TypeScript #Git #WebDevelopment #DeveloperTips #VSCode #CleanCode #SoftwareEngineering #TechTips #AngularDev #CodeLife

📅 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

npm run dev vs npm run build — My Humbling Lesson As a junior dev, I used to think: “If my app spins up and the terminal is green ✅ — I’m good. Zero bugs.” Then reality hit… Working on a production project, I pushed changes, opened a PR, feeling confident. Suddenly — got that weird message! 💥 “Hey bro, your changes broke the CI pipeline.” Me? Impossible. My terminal was green! I even tried to deny it at first Then my teammate calmly said: “Run npm run build and check again.” Boom. Errors everywhere. Unused variables. Lingering logs. Stuff I thought didn’t matter “for now.” Lesson learned ✅ npm run dev helps you develop ✅ npm run build tells you if your code can survive the real world Now before pushing any code: - npm run build - clean up - lint & fix 🧹 Every. Single. Time. If you're starting out — don’t trust only the green dev console Your future self (and your team) will thank you! 💡 Takeaway If it works on your machine but not in CI/CD, the problem is probably not CI/CD… it’s your build. #webdevelopment #frontend #javascript #reactjs #nextjs #cleanCode #softwareengineering #devlife #learninginpublic #techjourney #npm #typescript #juniorToSenior

Set up a Prettier, ESLint, Husky and lint-staged Integration with TypeScript in Next.js 16 | 2025 With the release of Next.js 16 and the latest ESLint updates, setting up a clean and consistent development workflow has become even smoother. In this article, we’ll walk through how to configure ESLint, Prettier, Husky, and lint-staged in a Next.js 16 project to maintain high code quality and ensure a seamless developer experience. Maintaining clean and consistent code is crucial in any project, and that’s where these tools come in: ESLint: helps catch common bugs and enforces coding standards, keeping your codebase error-free and consistent. Prettier: takes care of formatting automatically, so your code always looks neat and follows a uniform style. Husky: lets you run scripts (like linting or formatting) before committing changes, ensuring only clean code gets pushed. lint-staged: works alongside Husky to run these checks only on files that are staged for commit — making the process faster and more efficient. create a new Next.js project by running the following command: npx create- https://lnkd.in/gxyV_iJU

No doubt, one of the most common and frustrating issues in TypeScript projects is when everything works perfectly in development, but production mode throws a bunch of errors unused components, missing types, or small warnings you ignored earlier. My advice to all junior developers: after adding or updating code, run a build every day. Don’t wait until the end. Building regularly helps you catch hidden issues early, not at the worst possible time right before deployment. Think of it as a quick “reality check” for your code. If it builds cleanly, you’re safe. If not, fix it right away before those tiny mistakes pile up. #TypeScript #WebDevelopment #JuniorDevelopers #CleanCode #BuildBeforePush #DevTips #FullStackDeveloper #LearnToCode #CodeQuality #SoftwareEngineering

Ever felt like you're spending endless hours setting up project dependencies, downloading libraries one by one, and wrangling configuration files? 😩 If you're in the JavaScript/Node.js world, you know the struggle is real! That's why package managers like npm are absolute game-changers. Imagine running a single command and having everything you need installed and ready to go. It's not just a dream – it's the reality npm creates for developers every day! From effortlessly installing thousands of reusable packages to managing project dependencies with a simple `package.json` file, npm streamlines your workflow and saves you countless hours. Plus, those handy `scripts` in `package.json`? Total lifesaver for automating common tasks. It's all about leveraging the power of community-created tools so we can focus on building amazing things, rather than reinventing the wheel. A huge shoutout to the open-source community for making our lives so much easier! What's your favorite npm trick or package that you can't live without? Share in the comments! 👇 If you found this insight helpful, hit that like button and follow for more tech tips and industry reflections! #npm #JavaScript #Nodejs #WebDevelopment #DeveloperLife #TechTips #Productivity #OpenSource Read more: https://lnkd.in/gwSFkcQZ