Idempotency Keys: A small concept that prevent production problem I recently explore something that seems simple but it is fascinating and extremely important in real world applications: Idempotency Keys. The problem is: A user clicks "submit" or "start" a email or sms campaign the network is slow user click again, now backend received two identical POST requests. Which will be a problem in real world systems. An Idempotency Key is a unique identifier sent with a request header: Idempotency-Key: 123e4567-e89b-12d3-a456-426614174000 The backend stores the key and execute the logic based on the request. If the same key comes again - backend prevents the executing same logic and returns the same response as before. What I learned: i. Disabling a button in react is not good enough. ii. Frontend prevention is good UX. iii. This is critical for order creation, financial operation, start campaigns. iv. It helps server avoid doing same operation twice. #ReactJS #SpringBoot #TypeScript #FrontendDevelopment

React's useImperativeHandle: Beginner's Guide 🎯 Ever needed to control a child component directly from the parent? That's useImperativeHandle. 🔹 THE PROBLEM React says: "Don't touch the DOM directly." But sometimes you need direct control: - Video player (play/pause/seek) - Input focus management - Third-party library integration That's where useImperativeHandle comes in. 🔹 VIDEO PLAYER EXAMPLE const VideoPlayer = forwardRef((props, ref) => { const videoRef = useRef(); useImperativeHandle(ref, () => ({ play: () => videoRef.current.play(), pause: () => videoRef.current.pause(), seek: (time) => videoRef.current.currentTime = time, })); return <video ref={videoRef} src="movie.mp4" />; }); Parent can now call: playerRef.current.play() 🔹 AUTO-FOCUS FORM FIELD On validation error, auto-focus the first invalid input. No messy state re-renders. 🔹 DO's & DON'Ts ✅ Use for: Imperative libraries, UX edge cases, performance optimization ❌ Don't: Use as prop-drilling shortcut, expose everything, abuse on every component 🔹 THE REAL TALK useImperativeHandle is RARE in good React code. Master it. Then forget about it until you actually need it. Always ask first: "Can I solve this with props and state?" If yes, do that. Questions? 👇 #React #ReactHooks #Frontend #JavaScript #WebDevelopment

Day 18: Beyond Buttons – Why Shadcn/UI is a Game Changer 🎨 Stop Building UI from Scratch. Start Building Systems. In the earlier days of my MERN journey, I spent hours—sometimes days—hand-coding complex components like Modals, Calendars, or Navbars. Then I discovered Shadcn/UI. If you are using Next.js and Tailwind CSS, Shadcn isn't just a library; it’s a toolkit that gives you professional-grade components that you actually own. Why I’ve integrated it into my workflow: ✅ You Own the Code: Unlike traditional UI libraries (where the code is hidden inside an NPM package), Shadcn copies the source code directly into your project. You can change every single pixel to fit your Creativity. ✅ Accessibility First: It’s built on top of Radix UI, meaning things like keyboard navigation and screen readers work out of the box. This is what separates "amateur" sites from "enterprise" applications. ✅ Perfect for Next.js: It’s designed to work seamlessly with the Next.js App Router and Server Components, keeping your app lightning-fast. The Creativity Angle: When I was refining Cine Nagar, I didn't want it to look like every other generic template. Shadcn allowed me to take high-qualitycomponents and style them with my own Tailwind logic to create a unique "Filmmaker" vibe. My Advice: Don't reinvent the wheel for standard components. Use Shadcn for the "infrastructure" of your UI, so you can spend your brainpower on the Unique Features of your app. What’s your go-to UI library, or are you a "CSS from scratch" purist? Let’s talk about the best workflow in the comments! 👇 #ShadcnUI #NextJS #TailwindCSS #FrontendDevelopment #WebDesign #MERNStack #DeveloperTools #ReactJS #CleanCode #UIUX

Synchronous vs Asynchronous JavaScript — explained simply 👨💻🎨 JavaScript is single-threaded, yet it powers highly responsive apps. 🔹 Synchronous code = blocking Each task waits for the previous one to finish. Simple to understand, but bad for performance and UX. 🔹 Asynchronous code = non-blocking Long tasks (API calls, timers, I/O) run in the background while the main thread stays responsive — thanks to the event loop. 💡 If your UI freezes, it’s probably not “JavaScript being slow”… it’s sync code blocking the main thread. #JavaScript #WebDevelopment #Coding #Frontend #AsyncProgramming #DeveloperTips #Tech #Programming #EventLoop #UX

𝗗𝗮𝘆 𝟭𝟯 𝗼𝗳 𝗽𝗼𝘀𝘁𝗶𝗻𝗴 𝟙𝟝 𝗥𝗲𝗮𝗰𝘁 𝗰𝗼𝗻𝗰𝗲𝗽𝘁𝘀 𝗥𝗲𝗮𝗰𝘁 𝗥𝗲𝗱𝘂𝘅 As React applications grow, managing state across multiple components becomes challenging. This is where Redux comes in. Redux is a state management library that provides a centralized store to manage the entire application’s state in a predictable way. Instead of passing data through many layers of components (props drilling), Redux allows components to access and update state directly from one place. 𝗖𝗼𝗿𝗲 𝗰𝗼𝗻𝗰𝗲𝗽𝘁𝘀 𝗼𝗳 𝗥𝗲𝗱𝘂𝘅: • 𝗦𝘁𝗼𝗿𝗲 → Holds the global state of the application • 𝗔𝗰𝘁𝗶𝗼𝗻𝘀 → Describe what happened in the app • 𝗥𝗲𝗱𝘂𝗰𝗲𝗿𝘀 → Decide how the state changes • 𝗗𝗶𝘀𝗽𝗮𝘁𝗰𝗵 → Sends actions to the store • 𝗦𝗲𝗹𝗲𝗰𝘁𝗼𝗿𝘀 → Read specific data from the store Redux follows a one-way data flow: Action → Reducer → Store → UI With React Redux hooks like useSelector() and useDispatch(), managing state becomes more structured and easier to debug using Redux DevTools. Learning Redux is an important step toward building scalable, maintainable, and professional React applications. Consistency over motivation. Day by day, concept by concept. #Day13 #React #Redux #WebDevelopment #FrontendDevelopment #JavaScript #LearningInPublic #15DaysOfReact

One thing frontend has taught me: small details matter more than we think. Users won’t say, “Wow, great state management.” But they will notice: - When a page feels slow - When a button doesn’t respond instantly - When a form is confusing - When something just feels off - An unexpected scroll jump. These things seem small while building… but they shape the whole experience. We need to be aware of how tiny decisions affect real people using the product. Still improving every day — one small fix at a time. #Frontend #WebDevelopment #UI #JavaScript #Learning

What if neumorphism didn't have to be a trade-off between beauty and usability? Now it doesn't. 👇 I just open-sourced Auraform UI, an accessibility-first Neumorphic component library for React & React Native! Neumorphism looks stunning, but let's be honest, it's notorious for accessibility issues: poor contrast, ambiguous states, and broken focus management. Auraform fixes all of that. Here's what makes it special: • Automatic WCAG-compliant contrast guardrails shadows are generated via HSL math, and if contrast dips below 3.0:1, a fallback border is injected automatically • Dual-signaling states use both shadow depth AND accent color, so nothing relies on shadows alone (great for color-blind users) • Built-in FocusRing for keyboard navigation • Cross-platform shared core logic powers both web and mobile • 19 ready-to-use components: buttons, inputs, sliders, tabs, cards, tooltips, and more • Ships ESM + CJS with full TypeScript types It's a Turborepo monorepo with 3 packages: 📦 @auraform/core: platform-agnostic color math & token generation 📦 @auraform/react: React web components with Framer Motion animations 📦 @auraform/native: React Native components with OS accessibility detection Check it out: 🔗 GitHub: https://lnkd.in/dWUy6BDe 🔗 Live Storybook: https://lnkd.in/dzfCjjpa 🔗 npm: https://lnkd.in/dVyBa2zY Neumorphism shouldn't mean sacrificing usability. Give it a try, star the repo, and let me know what you think! #opensource #react #reactnative #accessibility #neumorphism #uidesign #webdev #componentlibrary #a11y #frontend

One thing I’ve started noticing while learning React is how much it encourages breaking problems into smaller pieces. Instead of thinking about a whole webpage, you think about components. A button. A card. A navigation bar. Each one becomes its own reusable piece of logic and UI. It’s a simple idea, but it really changes how you approach building applications. Still learning, but it's interesting seeing how these concepts shape the way developers think. #React #WebDevelopment #SoftwareEngineering

🚀 Built a Custom OTP Input Field using React.js Excited to share my latest mini project — an interactive OTP (One-Time Password) input component built using React Hooks. 🔧 Features: ✔️ Auto focus to next input ✔️ Backspace moves to previous field ✔️ Arrow key navigation (Left & Right) ✔️ Only numeric input allowed ✔️ Clean and reusable component structure 🛠 Tech Used: React.js useState useRef useEffect JavaScript (Event Handling) This project helped me strengthen my understanding of: 👉 Controlled components 👉 DOM manipulation using useRef 👉 Keyboard event handling 👉 Better UX design practices Always learning and improving 🚀 #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #Learning #100DaysOfCode

Today was about refinement — not big features. Continued working on my React project, focusing on: • Improving mobile responsiveness • Making small UI enhancements • Cleaning up component structure I’m starting to realize that clean code isn’t just about readability — it directly affects scalability and maintainability. At the same time, I continued my DSA practice and went deeper into Recursion, specifically: • Functional recursion • Parameterized recursion Understanding how problems break into smaller subproblems is changing how I think — even while building front-end components. Development builds practical systems. DSA builds structured thinking. Trying to grow on both sides — clean implementation + strong fundamentals. #reactjs #recursion #cleanCode #webdevelopment #engineeringstudent