Deepak Tiwari’s Post

⚡ Shipped JavaScript & TypeScript support in AI-MR-Reviewer — a GitHub App that reviews your PRs the moment you open them. Inline comments on the diff. Clear severity levels. Zero setup. Built for teams who want fast, reliable feedback without heavy tooling. What lands in this release: ~18 focused JS/TS rules. 🔴 HIGH RISK — 7 rules == / != instead of === / !== Empty catch blocks (silent failures) eval() / new Function() usage innerHTML with dynamic content / dangerouslySetInnerHTML (XSS risk) setTimeout / setInterval with string arguments SQL injection patterns in .query() / .exec() (concat / template literals) Hardcoded secrets (API keys, tokens, passwords in code) 🟡 MID RISK — 7 rules console.log / debug statements in production var usage instead of let/const TypeScript any type usage // @ts-ignore / // @ts-nocheck Non-null assertions (!) on property access new Date() without timezone awareness Promises without .catch() or not awaited 🔵 LOW RISK — 4 rules TODO / FIXME comments left behind Numbered function names (handler2, doThing3) require() used inside ES modules Magic numbers outside constants Every rule is tuned to minimize noise and maximize real signal — so developers focus only on what actually matters. Under the hood: TypeScript · Node.js · Octokit · Express · Docker Reviews land within seconds of opening a PR. Next up: deeper semantic checks on top of this — smarter detection, fewer false positives, and richer context. If your team works with JS/TS daily, this removes friction from every PR. 🚀 Launching publicly by this Sunday, InshaAllah. #JavaScript #TypeScript #CodeReview #DeveloperTools #AI #StaticAnalysis #DevEx #OpenSource

The complete MERN Stack Developer Roadmap — 6 months, 3 phases, job-ready. Save this. Here's exactly what to learn and when: ━━━ PHASE 1 — FRONTEND (Month 1–2) ━━━ 🔷 HTML & CSS Semantic HTML · Flexbox · Grid · Responsive Design · CSS Variables 🔷 JavaScript + TypeScript DOM Manipulation · Async/Await · ES6+ · TypeScript basics (TypeScript is non-negotiable for Rs.10 LPA+ roles) 🔷 Git & GitHub Branching · PRs · Push every project — your GitHub IS your portfolio 🔷 React useState · useEffect · React Router · Forms · Tailwind CSS ━━━ PHASE 2 — BACKEND (Month 3–4) ━━━ 🟢 Node.js & Express REST APIs · Routing · Middleware · Environment variables 🟢 MongoDB & Mongoose CRUD · Schemas · Relationships · Queries 🟢 Authentication JWT · bcrypt · Protected routes · Input validation 🟢 Full Stack Integration CORS · Axios · State for auth · Deploy to Render + Vercel ━━━ PHASE 3 — NEXT.JS + AI (Month 5–6) ━━━ 🟣 Next.js File routing · Server Components · SSR vs CSR vs SSG · SEO 🟣 AI Integration OpenAI / Gemini API · Prompt engineering · Streaming · Cursor/Copilot 🟣 Open Source One merged PR > ten solo projects ━━━ DSA — DAILY THROUGHOUT ━━━ 🟡 Month 1–2: Arrays, Strings 🟡 Month 3–4: Recursion, Stacks, HashMaps 🟡 Month 5–6: Trees, Graphs, DP 🟡 Target: 200 problems The 70-20-10 rule: 70% building · 20% learning · 10% DSA Start applying from Month 3. Do not wait until you feel ready. You never will. Full detailed PDF in the comments with every resource mapped out. ♻️ Repost to help someone who needs this. #MERN #FullStack #WebDevelopment #JavaScript #React #NodeJS #MongoDB #NextJS #Programming #TechCareer #100DaysOfCode #SoftwareEngineer #Coding #LearnToCode

🚀 Understanding MVC in Backend ! If you're learning backend development, you’ve probably heard of MVC — but what does it actually mean? 🤔 Let’s break it down in a simple way 👇 🔹 M = Model This is your data layer. ♻️ It handles: Database interaction Data structure Business logic 👉 Example: User data, product details, etc. 🔹 V = View This is what the user sees. ♻️ It handles: UI (HTML, templates, frontend output) Displaying data 👉 Example: A webpage showing user profile 🔹 C = Controller This is the brain 🧠 It connects Model + View. ♻️ It handles: User requests Processing logic Sending data to View 👉 Example: When user clicks "Login", controller processes it 💡 How MVC Works Together: User sends request Controller receives it Controller talks to Model (get/update data) Model sends data back Controller sends data to View View shows it to user 🎉 🔥 Why MVC is important? ✔ Clean code structure ✔ Easy to maintain ✔ Scalable for large projects ✔ Team-friendly (frontend + backend separation) 💻 Example (Node.js): Model → Database (MongoDB) View → Frontend (HTML/CSS) Controller → Express.js logic Follow for more simple dev concepts 🚀 #WebDevelopment #Backend #JavaScript #NodeJS #MVC #LearnToCode

⚡ 𝗦𝗮𝗺𝗲 `...` 𝗦𝘆𝗻𝘁𝗮𝘅, 𝗧𝗼𝘁𝗮𝗹𝗹𝘆 𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝘁 𝗕𝗲𝗵𝗮𝘃𝗶𝗼𝗿 ⤵️  Spread vs Rest Operators in JavaScript 🧠  🔗 𝗥𝗲𝗮𝗱 𝗵𝗲𝗿𝗲: https://lnkd.in/drV-7dZa  𝗧𝗼𝗽𝗶𝗰𝘀 𝗰𝗼𝘃𝗲𝗿𝗲𝗱 ✍🏻:   ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺   ⇢ Spread vs Rest — simple mental model   ⇢ Expanding arrays & objects using spread   ⇢ Collecting values using rest parameters   ⇢ Key differences based on context   ⇢ Real-world use cases (merge, clone, functions)   ⇢ Common mistakes developers make   ⇢ Tradeoffs: shallow copy & performance  Thanks Hitesh Choudhary Sir & Piyush Garg Sir, and the amazing Chai Aur Code community 🙌  #ChaiAurCode #JavaScript #WebDevelopment #Programming #Frontend #CleanCode #Hashnode

{JS Problem Solving} Today, I solved some JavaScript problems to improve my problem-solving skills. Problems I solved=> 1. Deep Flatten Array No matter how deep the nested array is, make it completely flat flatten([1, [2, [3, [4]], 5]]) // output: [1,2,3,4,5] 2️. Debounce function Create a function that will execute with a delay if called rapidly debounce(fn, 500) Real use: search input optimization 3️. Throttle Function Run the function only once in a specified time throttle(fn, 1000) Real use: scroll event 4️. Custom Promise.all() Implement it yourself myPromiseAll([p1, p2, p3]) Output: Return the result if all are resolved 5️. LRU Cache Implement Least Recently Used cache const cache = new LRUCache(2) cache.put(1, 1) cache.get(1) Real use: browser caching 6️. Group By Function Group an array groupBy(users, "age") 7️. Deep Clone Object clone nested object (no reference) deepClone(obj) JSON.parse cannot be used 8️. Infinite Curry Function Will support unlimited chaining sum(1)(2)(3)(4)() // 10 9️. Event Emitter (Node.js style) Create a custom event system emitter.on("click", fn) emitter.emit("click") 10. Retry API Call with Limit API will retry if it fails retry(fetchData, 3) Repo link: https://lnkd.in/gXtcS9qP #problemsolver #programmer #javascriptdeveloper

🚀 Debugging a Real MERN Stack Issue (and what I learned) Recently, I faced a tricky bug in my project SecureSharing (MERN stack) that looked simple but took proper debugging to fix. Live Link -> https://lnkd.in/dZksRWJQ 👉 Problem: After uploading a file, the “Copy Link” feature worked perfectly. But in the dashboard, the same button returned undefined. 🔍 What was happening? The uploaded file response looked like: { id: "...", originalFilename: "..."} But my frontend expected: { _id: "...", shareLink: "..."} ⚠️ Root Cause: Backend was sending id instead of _id shareLink was missing inside the file object Old database records didn’t have shareLink React list keys were also incorrect → caused warnings ✅ Fixes I applied: ✔️ Fixed backend response: file: { _id: fileRecord._id, shareLink: fileRecord.shareLink, ... } ✔️ Used _id as React key (removed warning) ✔️ Updated frontend to use: file.shareLink ✔️ Cleared old DB data (migration issue) 💡 Key Learnings: Always keep backend response structure consistent Debug using console.log() at every step React warnings (like key errors) often point to real bugs Data mismatch > logic bug 🔥 Result: ✔ Copy link works everywhere ✔ No undefined issues ✔ Clean UI + better UX Building projects is not just about writing code, it’s about debugging like a developer 💯 #MERN #WebDevelopment #JavaScript #ReactJS #NodeJS #Debugging #FullStack #Developers

𝗪𝗵𝗮𝘁 𝗛𝗮𝗽𝗽𝗲𝗻𝘀 𝗕𝗲𝗵𝗶𝗻𝗱 𝘁𝗵𝗲 𝗦𝗰𝗲𝗻𝗲𝘀 𝗼𝗳 𝗮 𝗪𝗲𝗯 𝗔𝗽𝗽 You click a button… And instantly see a result. But behind that simple action — A lot is happening 👇 💡 Here’s the journey of a single click: 1️⃣ Your browser sends a request 👉 (HTTP request to the server) 2️⃣ Server receives and processes it 👉 Business logic runs 3️⃣ Database is queried 👉 Data is fetched or updated 4️⃣ Server sends a response 👉 JSON / HTML returned 5️⃣ Frontend updates UI 👉 You see the result instantly 🔥 All this happens in milliseconds. 💻 Technologies involved: ✔ Frontend (HTML, CSS, JavaScript) ✔ Backend (Node.js, Python, etc.) ✔ Database (SQL / NoSQL) ✔ APIs (communication layer) 📌 The real magic? 👉 Everything works together seamlessly 👉 Users only see the final result 💡 That’s why full stack development is powerful — You understand the *complete flow*. Because in real-world systems — E𝘃𝗲𝗿𝘆 𝗰𝗹𝗶𝗰𝗸 𝘁𝗿𝗶𝗴𝗴𝗲𝗿𝘀 𝗮 𝗰𝗵𝗮𝗶𝗻 𝗼𝗳 𝗲𝘃𝗲𝗻𝘁𝘀. Next time you use an app… Think about what’s happening behind the scenes 👇 👉 It’s more complex than it looks 😉 #WebDevelopment #FullStackDeveloper #Frontend #Backend #APIs #SoftwareEngineering #DeveloperLife #TechExplained #CodingBasics #SystemDesign #LearnToCode

😵💫𝗢𝗻𝗲 𝗼𝗳 𝘁𝗵𝗲 𝗺𝗼𝘀𝘁 𝗰𝗼𝗻𝗳𝘂𝘀𝗶𝗻𝗴 𝘁𝗵𝗶𝗻𝗴𝘀 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁: `...` At first glance, it looks simple. But depending on where you use it, it completely changes its role. Same syntax. Different behavior. That’s where most developers get tripped up. So I decided to break it down clearly: ✍️ New Blog Published: 𝗦𝗽𝗿𝗲𝗮𝗱 𝘃𝘀 𝗥𝗲𝘀𝘁 𝗢𝗽𝗲𝗿𝗮𝘁𝗼𝗿𝘀 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁: 𝗘𝘅𝗽𝗮𝗻𝗱 𝗼𝗿 𝗖𝗼𝗹𝗹𝗲𝗰𝘁 𝗟𝗶𝗸𝗲 𝗮 𝗣𝗿𝗼 https://lnkd.in/gFPgrdEv 🔍 What you’ll learn: 🔹 When ... acts as a Spread Operator (expanding data) 🔹 When it becomes a Rest Operator (collecting data) 🔹 Real-world use cases to eliminate confusion Hitesh Choudhary Piyush Garg Chai Aur Code Anirudh J. Akash Kadlag Suraj Kumar Jha Nikhil Rathore Jay Kadlag DEV Community #JavaScript #WebDevelopment #TechnicalWriting #LearningInPublic #Chaicode #Cohort

🎯 Angular Outputs – How Child Components Talk Back 🔥 Most beginners learn how to pass data into components… But the real magic? 👉 When a child component sends data back to the parent That’s where Angular Outputs come in 🚀 🔹 Think of it like this: Parent → Child = Input ✅ Child → Parent = Output 🔁 🔍 Simple Example: import { Component, output } from '@angular/core'; @Component({ selector: 'custom-slider', }) export class CustomSlider { valueChanged = output<number>(); updateValue() { this.valueChanged.emit(50); } } 👉 Parent listens like this: <custom-slider (valueChanged)="onValueChange($event)"></custom-slider> 🧠 What’s happening here? ✔ Child emits event using .emit() ✔ Parent listens using (eventName) ✔ Data is passed using $event 🔥 Real Power: You can send any data: this.valueChanged.emit(7); // number this.valueChanged.emit({ x: 100, y: 200 }); // object ⚡ Pro Tips: ✔ Output names are case-sensitive ✔ Events do NOT bubble like DOM events ✔ Use camelCase naming ✔ Avoid naming conflicts with native events 💡 Realization: “Inputs pass data down… Outputs bring data back up.” 👉 That’s how Angular components communicate like a team 🤝 🚀 Why it matters: ✔ Enables component interaction ✔ Helps build reusable UI ✔ Essential for real-world apps 📌 Bonus: Old way (still valid): @Output() valueChanged = new EventEmitter<number>(); New way (recommended): valueChanged = output<number>(); If you're preparing for Angular interviews, this is a must-know concept 🔥 #Angular #WebDevelopment #FrontendDeveloper #JavaScript #SoftwareDevelopment #CodingJourney #BuildInPublic #Developers #TechLearning

🧠 𝗗𝗼 𝗬𝗼𝘂 𝗥𝗲𝗮𝗹𝗹𝘆 𝗞𝗻𝗼𝘄 𝗪𝗵𝗮𝘁 `new` 𝗗𝗼𝗲𝘀 𝗜𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁? ⤵️  The new Keyword in JavaScript: What Actually Happens ⚡  🔗 𝗥𝗲𝗮𝗱 𝗵𝗲𝗿𝗲: https://lnkd.in/dyAXzDHD 𝗧𝗼𝗽𝗶𝗰𝘀 𝗰𝗼𝘃𝗲𝗿𝗲𝗱 ✍🏻:   ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺   ⇢ What actually happens internally when you use `new`   ⇢ The 4-step process: create → link → run → return   ⇢ Constructor functions & how they really work   ⇢ Prototype linking & why it matters   ⇢ How instances share methods but keep separate data   ⇢ Recreating `new` manually (deep understanding)   ⇢ What goes wrong when you forget `new`   ⇢ Debugging real-world bugs related to constructors   ⇢ new vs ES6 classes — what's really different   ⇢ Key tradeoffs & hidden pitfalls  Thanks Hitesh Choudhary Sir & Piyush Garg Sir, and the amazing Chai Aur Code community 🙌  #ChaiAurCode #JavaScript #WebDevelopment #Programming #SystemDesign #Frontend #Hashnode