Cloning React Projects from GitHub with npm Install

I recently built and published a custom CLI tool using Node.js and npm. The tool can be installed globally using: npm, Inc. : npm install -g tracky-cli-yogesh Available commands: tracky start → Initialize a project tracky save [files...] → Save files tracky history → View change history tracky restore <version> → Restore a previous version tracky status → Check current changes This project helped me gain hands-on experience with CLI development, command handling, package structuring, and npm publishing. I plan to continue improving it by adding more advanced features. #NodeJS #JavaScript #CLI #SoftwareDevelopment #FullStackDeveloper

Day 28 #100DaysOfCode 💻 Today I learned Git basics and how local & live environments work together. ✔ Initialized a project using Git ✔ Understood how API works with live URL (Vercel) ✔ Fetched live data and displayed it in localhost Small insight: Even if the API is hosted online, we can easily fetch that data in our local development server. fetch("https://lnkd.in/guq_n9Xe") .then(res => res.json()) .then(data => console.log(data)); This helped me clearly understand how frontend connects with live backend services. #webdevelopment #javascript #git #api #frontend #learning #Akbiplob

I have released my first npm package 📦 Every time we start a new project, we have to manually set up the same folders and files ourselves. To solve this, I implemented an npm package called quick-scaffolds-cli. Using this package, you can now generate a clean project structure in seconds. In version 1.0.0, it generates a simple HTML/CSS/JS template so you can get straight to coding. 🛠️How I built it, 1️⃣Node.js v24 ➡️ Leveraged the latest features and ES Modules for a modern backend. 2️⃣ Inquirer.js ➡️ To create an interactive CLI experience with project naming and type selection. 3️⃣ fs/promises ➡️ For efficient, asynchronous directory creation and template cloning. I hope to improve this package and bring more features soon. 🟢 Try it out with one command 1️⃣ npm install quick-scaffolds-cli 🟢 Then just run 2️⃣ ct-pro project-name I’d love for you to try it and let me know what you think. npm package - https://lnkd.in/gSiPYpTJ Git repo - https://lnkd.in/g-bzeNkS #NodeJS #NPM #WebDevelopment #JavaScript #Automation #BuildInPublic

A small but important shift in my Node.js workflow: Understanding when to use npm vs npx. It sounds basic — but it actually affects how clean and maintainable your setup is. Here’s how I look at it 👇 🔹 npm (Node Package Manager) Used when a package is part of your project. For example: npm install express It gets added to your project and is used consistently. 👉 npm = project dependencies 🔹 npx (Node Package Executor) Used for running tools when you don’t need to install them. For example: npx create-react-app myapp npx prisma init 👉 npx = run and move on 💡 What changed for me: I stopped installing everything globally. Now I keep it simple: • Dependencies → npm • One-time tools → npx This made my setup: • Cleaner • More predictable • Easier to manage 👉 Good development isn’t just about writing code. It’s about making small decisions that scale well. Still learning and improving 🚀 #NodeJS #npm #npx #BackendDevelopment #WebDevelopment #JavaScript

Assalamu alaikum everyone. I recently put together a small npm package called create-express-modular. It's a CLI that scaffolds an Express + TypeScript project with a modular folder structure baked in. There's also a command to generate new modules (routes, controllers, services, etc.) automatically so you don't have to wire everything up manually. I built it mostly for my own projects to save time and keep things clean. If you work with Express and want to give it a spin, here's the link: https://lnkd.in/g4MM-P3p If you try it out and have feedback (good or bad), I'd love to hear it. Always looking to learn and improve. #NodeJS #Express #TypeScript #OpenSource

Class-11 'Data is the new oil' from the Namaste React course by Akshay Saini 🚀 01. What is prop drilling? It is a concept of passing props from one component to another(deep-level), it means passing from one component to another, it passes deep-down until it truely wants. 02. What is lifting the state up? It is a concept of lifting 'React state variable and setter function' to the closest ancestor/parent component, in order to control multiple child components with the same state variable. 03. What is Context Provider and Context Consumer? The context (it can be any Js value) created with createContext function is made available across the app/to a specific component by using Context Provider component provided by 'React', Context Consumer is a pre-built react component using that to  access the provided context value for the component. 04. If you don’t pass a value to the provider does it take the default value? // Scenario 1:   <UserContext.Provider value={{ loggedInUser: userName, setUserName }}>    <div className="app-layout">     <Header />     <Outlet />    </div>   </UserContext.Provider> When passing value to the provider, it overrides the 'Default' value provided by the createContext. // Scenario 2:   <UserContext.Provider>    <div className="app-layout">     <Header />     <Outlet />    </div>   </UserContext.Provider> When not passing value to the provider, value is 'undefined', it throws error in the app. // Scenario 3:   <div className="app-layout">     <Header />     <Outlet />   </div> When provider is absent, it takes the 'Default' value provided by the createContext. Please have a look at my github repo at the 'branch 11' I've shared all my assignments. #frontend #uideveloper #reactjs #programming #javascript #jsx #coding #uiux https://lnkd.in/g6Dt-SuA

Debugging a React + TypeScript deployment was a rollercoaster today. Here is what I learned: Project Overview: Ajaia Docs is a modern, responsive documentation platform built with React, TypeScript, and Vite, designed with a clean UI and a scalable monorepo architecture where users can share and edit documents conveniently. I just finished submitting my latest project, Ajaia Docs (a documentation platform built with React, TypeScript, and Vite). Getting it to work locally was smooth, but pushing it to production was a completely different beast. I hit a wall with deployment, and it taught me some valuable lessons about real-world architecture: 1. Dev vs. Prod Environments: My app used a proxy to connect the frontend to a backend API on localhost:3001. I learned the hard way that static hosts (like Vercel/Netlify) don't run backend servers automatically! 2. Monorepo Structures: Having a /client and /server folder means your deployment platform needs exact instructions on where to look (Root Directory settings) and where to put the build. 3. TypeScript is strict for a reason: I spent an hour troubleshooting deployment errors, only to find a tiny type mismatch (user_id vs userId) in an API route. TS caught what would have been a silent runtime bug. Deployment isn't always just pushing a button. It requires understanding how your code is actually bundled and served to the browser. Huge shoutout to the dev community for the resources that helped me untangle this. Repo here: https://lnkd.in/guTYWCwr #ReactJS #TypeScript #Vite #WebDevelopment #SoftwareEngineering #100DaysOfCode #TechJourney

Class-13 'Time for test' from the Namaste React course by Akshay Saini 🚀 01. What are different types for testing?  - Manual testing: Testing the functionality that we have developed. E.g → we have developed a search bar, manual testing is checking the search bar manually by typing in it and searching the query.  - Automatic testing: We can write the test cases for testing the functionality. It includes   1. Unit testing : Write test cases for the specific part (isolated components)  2. Integration testing: writing testcases for the components that are connected like menu page and cart page are connected.  3. End-to-end testing: writing testcases from user enters into the website to user leaves the website. 02. Enzyme and React Testing Library (RTL) are both popular utilities for testing React components,  but they operate on fundamentally different philosophies.  While Enzyme was the industry standard for years,  React Testing Library is now the officially recommended tool for modern React applications. Enzyme:  Implementation-focused: Tests how a component is built (state, props, internal methods). Supports Shallow Rendering (renders only the top-level component) and Full DOM rendering React Testing Library (RTL): User-focused: Tests what the user sees and interacts with (DOM nodes, text, labels). Always performs Full DOM rendering to simulate a real browser environment. 03. What is Jest and why do we use it? Jest is a Javascript testing framework designed to ensure correctness of any Javascript codebase. It creates a test environment  - Running tests: Finding files and executing them in the command line.  - Assertions: using expect() to verify code outcomes.  - Mocking: Simulating modules or functions with jest.fn() or jest.mock()  - Code Coverage: Generating reports on how much code is tested. Please have a look at my github repo at the 'branch 13' I've shared all my assignments. #frontend #uideveloper #reactjs #programming #javascript #jsx #coding #uiux https://lnkd.in/g6Dt-SuA

Introducing chain-validate, a chainable validation library designed for JavaScript and TypeScript. Reasons for its creation include: - Combining validation and sanitization in a single chain - Collecting all errors instead of stopping at the first one - Returning structured results without throwing errors - Having zero dependencies - Maintaining a tiny bundle size Here’s a quick example: import { v } from 'chain-validate'; const userSchema = v.object({ email: v.string().required().trim().lowercase().email(), age: v.number().optional().coerce().min(18), }); const result = userSchema.validate({ email: ' KENIL@EXAMPLE.COM ', age: '21', }); result.value comes back already cleaned and typed. You can find it on npm: https://lnkd.in/dQPR_BPG Documentation is available at: https://lnkd.in/d_cYEWWz Check out the GitHub repository: https://lnkd.in/dR92DFAy I would appreciate feedback from JavaScript and TypeScript developers who are currently using Zod, Yup, or Joi. #JavaScript #TypeScript #OpenSource #WebDevelopment #NodeJS

😂 POV: You told yourself “It’s just a small project” You open your terminal. You type: npm install …and suddenly your node_modules folder is the size of a small African country. This man isn’t pouring olive oil. He’s pouring NODE MODULES on his “tiny salad” project 😂 We’ve all been there. You just wanted a simple Express API or a quick automation script… but 15 seconds later your project is carrying 487 MB of transitive dependencies like it’s luggage for a 2-day trip. Knowledge drop for my fellow devs: • The average node_modules folder today is bigger than the entire Linux kernel. • One innocent package can pull in hundreds of sub-dependencies (thanks, transitive dependency hell). • Some “hello world” projects are now hitting 1GB+ in node_modules. Pro tips to stop the madness: 1. Use pnpm or Yarn PnP — they can shrink your node_modules by 70-90% 2. Run npm audit + depcheck regularly 3. Always .gitignore your node_modules (if you’re not doing this… we need to talk 😂) 4. Consider Bun or Deno if you want to escape the dependency drama entirely Tag a developer who’s currently drowning in node_modules right now 👇 What’s the biggest node_modules size you’ve ever seen? Drop it in the comments — let’s laugh (and cry) together! #NodeJS #DeveloperLife #WebDevelopment #TechHumor #JavaScript #CodingLife #SoftwareEngineering