Vite Proxy Config Avoids CORS Error with Nodejs

## What actually happens when you call an API in React? They call an API… and don’t realize it’s running multiple times. I made the same mistake. At first, I thought: “Just fetch data inside the component and display it.” But React doesn’t work like that. Every time your component re-renders, your API call can run again. And again. And again. That means: • Unnecessary network requests • Slower performance • Confusing bugs The fix? useEffect(). It controls when your API runs — not just how. Here’s the actual flow: Component renders useEffect triggers API call is made Data returns State updates Component re-renders (once, correctly) My biggest realization: React isn’t just about writing code — It’s about understanding the lifecycle behind it. If you ignore that, small mistakes become big problems. #reactjs #javascript #webdevelopment

⚛️ React Internals — Understanding the RSC Payload & React Flight Protocol When using React Server Components (RSC) in frameworks like Next.js, React doesn't send fully rendered HTML or large JavaScript bundles to the browser. Instead, React sends a special serialized data stream called the RSC Payload. This payload is generated using the React Flight Protocol. What is the React Flight Protocol? The React Flight Protocol is the format React uses to transmit Server Component results from the server to the browser. Instead of sending HTML, React sends structured instructions describing the component tree. Example payload: ["$","div",null,{  "children":[   ["$","h1",null,{"children":"Product Name"}],   ["$","$L2c",null,{"id":123,"qty":1}]  ] }] Here: • div → root element • h1 → server rendered element • $L2c → client component reference • { id:123, qty:1 } → props passed to the client component #React #ReactJS #NextJS #ReactServerComponents #JavaScript #FrontendDevelopment #WebDevelopment #SoftwareEngineering #ReactDeveloper #FullStackDeveloper #ModernReact #CodingCommunity #DevCommunity #LearnInPublic #TechEducation

I just committed the last JavaScript code for AuthKit. After debugging today, I don’t think I’ll be writing any more JS for v1.0.0. Feels good getting to this point. Over the past few days I’ve been building AuthKit — a modular authentication toolkit for Laravel. The goal is simple: move authentication beyond basic scaffolding into a structured and testable architecture. Instead of authentication logic living inside controllers, AuthKit structures flows through dedicated actions that return DTO result objects, which are then resolved into either API responses or web redirects. This keeps authentication logic clean, reusable, and much easier to test. The core backend architecture and frontend runtime are now complete. If you'd like to experiment with it early, you can clone the repository and test it locally (it's not yet on Packagist). One small caveat for now: the default styling layer isn’t finished, so you’ll need to provide your own CSS while testing. Planning to release v1.0.0 next week. Repo: https://lnkd.in/eztMKU-z Would love feedback from Laravel developers. #Laravel #PHP #OpenSource #SoftwareEngineering #WebDevelopment

𝗦𝗺𝗮𝗹𝗹 𝗪𝗶𝗻, 𝗕𝗶𝗴 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴, 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗥𝗼𝘂𝘁𝗶𝗻𝗴 𝗚𝗼𝘁𝗰𝗵𝗮 Today I was working on an email navigation feature, the kind where you click through a list and the URL updates to reflect the selected item. The data was already fetched. No need to reload the page. I just wanted to update the URL silently. Simple, right? 𝗔𝘁𝘁𝗲𝗺𝗽𝘁 (𝗮𝘀 𝗺𝗲𝗻𝘁𝗶𝗼𝗻𝗲𝗱 𝗶𝗻 𝗻𝗲𝘅𝘁 𝗷𝘀 𝗱𝗼𝗰𝘀): window.history.replaceState(null, '', newPath); Didn't work. 𝗪𝗵𝗮𝘁 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝘄𝗼𝗿𝗸𝗲𝗱: window.history.replaceState( { ...window.history.state, as: newPath, url: newPath }, '', newPath, ); 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆: Sometimes the fix is one line. Finding that one line? That's the real work.😆 #NextJs #WebDevelopment #Frontend #JavaScript #React #TIL #SoftwareEngineering

🚀 The Power Duo of Modern Back-End: Node.js & Express.js In the rapidly evolving landscape of web development, efficiency and scalability aren't just goals—they are requirements. Understanding the synergy between Node.js and Express.js is fundamental for any developer or architect aiming to build high-performance applications. While they are often mentioned in the same breath, they play distinct, complementary roles: Node.js is the powerhouse—a JavaScript runtime built on Chrome's V8 engine. It revolutionized the industry by introducing an event-driven, non-blocking I/O model, allowing developers to use JavaScript for server-side scripting and handle thousands of concurrent connections with a single thread. Express.js is the architect. As a minimalist, unopinionated framework built on top of Node.js, it abstracts the complexity of the runtime. It provides the essential structure for robust routing, middleware integration, and streamlined HTTP request handling, allowing teams to move from concept to deployment with incredible speed. Together, they represent more than just a tech stack; they represent a philosophy of minimalism and performance. By leveraging Node’s raw power and Express’s developer-friendly abstraction, we can build APIs and web services that are as maintainable as they are fast. What’s your take? Are you still a fan of the classic Express.js setup, or have you started migrating toward newer alternatives like Fastify or NestJS? Let’s discuss in the comments! 💻👇 #WebDevelopment #NodeJS #ExpressJS #SoftwareEngineering #Backend #JavaScript #TechTrends

🚀 The Event Loop: Browser vs. Node.js 🌐 Ever wondered how JavaScript stays "fast" despite being single-threaded? The secret sauce is the Event Loop. But depending on where your code runs, the Event Loop wears different hats. 🎩 Here is a quick breakdown of how it works on the Client-side vs. the Server-side: 🖥️ 1. JavaScript in the Browser (Client-Side) In the browser, the Event Loop is all about User Experience. The Goal: Keep the UI responsive. How it works: When a user clicks, scrolls, or fetches data, these actions are added to a task queue. The Flow: The Event Loop constantly checks if the Call Stack is empty. If it is, it pushes the next task from the queue to the stack. This ensures that heavy tasks don't "freeze" the screen while rendering. ⚙️ 2. Node.js (Server-Side) In Node.js, the Event Loop is the backbone of High-Concurrency servers. The Goal: Handle thousands of simultaneous requests without blocking. The Heavy Lifters: For "blocking" tasks like File System (FS) or Database operations, the Event Loop offloads the work to Worker Threads (via the Libuv library). The Callback Cycle: 1. The Event Loop registers a callback for an operation. 2. It hands the task to a worker thread. 3. Once the worker is done, it sends the result back to the queue. 4. The Event Loop picks it up and executes the final callback to send the response. 💡 The Bottom Line Whether you are building a snappy UI or a scalable backend, understanding the Event Loop is the difference between a laggy app and a high-performance system. #JavaScript #NodeJS #WebDevelopment #Programming #SoftwareEngineering #TechTips #react #express #next

Ever wonder how your modern ES6+ React code actually runs on older browsers? 🤔 It’s not magic—it’s Babel. ⚙️ I recently wrote a deep dive into how this transpiler acts as the backbone of the React ecosystem, ensuring our code stays clean while remaining universally compatible. If you’ve ever used an arrow function or a spread operator, you’re relying on this "secret engine" every single day. 🚀 In my latest blog post, I break down: 🔹 The "Under the Hood" Mechanics – What’s actually happening during transpilation. 🔹 React’s Best Friend – Why Babel is indispensable for modern UI development. 🔹 The Compatibility Bridge – How it translates cutting-edge syntax into something every browser understands. 🌉 Understanding your tools is the first step toward mastering your craft. I'd love to hear your thoughts on the role of transpilers in the comments! #ReactJS #BabelJS #JavaScript #WebDevelopment #CodingLife #SoftwareEngineering #TechBlog 👇 Read the full deep dive here:

If you’re using Next.js 13+, fetching data inside useEffect is often unnecessary. It causes: • Extra client-side waterfalls • Loading flashes • Worse performance // ❌ Old Pattern useEffect(() => { fetch("/api/posts").then(res => res.json()).then(setPosts); }, []); // ✅ Modern Pattern (Server Component) async function Posts() { const posts = await fetch("https://api.com/posts").then(r => r.json()); return <PostList posts={posts} />; } Server Components reduce JS bundle size and improve performance automatically. #NextJS #ReactJS #WebPerformance #FrontendDev #JavaScript

🚀 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗨𝗽𝗱𝗮𝘁𝗲: 𝗡𝗼𝗱𝗲.𝗷𝘀 — Day 1 to Day 4 I used to think JavaScript only lived in the browser. Turns out, it runs entire servers too. Mind = blown. 🤯 Here's what I've covered so far: 📖 Day 1 — Dove into the official Node.js docs. Started from zero. 🖥️ Day 2 — Built my very first Node.js server. A few lines of code and boom — a running server on my machine. ⚔️ Day 3 — Understood the real difference between Node.js and the Browser: → Node has file system access. Browser doesn't. → Node uses `global`. Browser uses `window`. → Node = you control the environment. Browser = you don't. → Same JavaScript. Completely different superpowers. Also explored the V8 engine, NPM basics, devDependencies vs dependencies, and versioning. 🌐 Day 4 — Fetched and posted data to an API using Node.js. Saw the real result in the terminal. Only 4 days in and I already feel like backend development is clicking. If you're a frontend dev thinking Node is scary — it's not. Start with the docs. Build a server. Break things. The journey continues. 💻 #NodeJS #JavaScript #BackendDevelopment #LearningInPublic #WebDevelopment #100DaysOfCode

Why your Next.js upgrade is throwing searchParams errors ❓. 👇 If you are upgrading an app to Next.js 15 or 16, your dynamic pages are probably throwing errors. For years, we accessed URL queries and route parameters exactly like normal props. But as Next.js pushes toward a fully async rendering model, accessing request-specific data synchronously actually blocks the server from preparing the rest of the page. To fix this, Next.js made dynamic APIs asynchronous. ❌ The Legacy Way (Next.js 14): Reading searchParams directly as an object. This forces the entire component tree to wait for the user's request, preventing the server from pre-rendering the static shell of your page. ✅ The Modern Way (Next.js 15+): You must await the searchParams prop. • Performance: It allows Next.js to start rendering your layout before the dynamic data is even requested. • Future-Proof: This aligns your code with the new React Server Components async architecture. • Clean: It is a simple 1-line syntax update that prevents massive hydration bugs. The Shift: We are moving away from treating the server environment like a synchronous browser window. A technical guide on migrating to Next.js 15 and 16 by resolving searchParams and params errors. Learn why dynamic APIs are now asynchronous and how to await searchParams in your React Server Components to improve performance and prevent rendering bugs. #NextJS #NextJS15 #NextJS16 #ReactJS #WebDevelopment #Frontend #JavaScript #CleanCode #SoftwareEngineering #TechTips #WebDev #CodingTips #FrontendDevelopers