🎯 From a Simple Idea to a Smarter Game Experience What started as a basic “Guess the Number” game turned into an interesting challenge — 👉 How do you make a simple logic feel engaging, interactive, and user-friendly? Instead of stopping at just “Too High / Too Low”, I focused on improving the experience. 💡 I asked myself: How can I guide the user instead of making them guess blindly? That led me to build: 🔹 Multiple difficulty levels with dynamic ranges 🔹 A timer-based challenge to add pressure ⏱ 🔹 A smart hint system (range narrowing + “Very Close” feedback) 🔹 Bonus logic-based hints (Even/Odd after multiple attempts) 🔹 Score tracking to encourage better performance 🏆 🔹 Clean, responsive UI with Dark Mode 🌙 What I realized while building this: It’s not just about writing logic — it’s about designing how users interact with that logic. This project helped me think beyond code and focus on: ✨ User experience ✨ Real-time feedback systems ✨ Writing scalable and structured frontend logic 🔗 Live Demo: https://lnkd.in/dQ_48trb 🔗 Github Repository: https://lnkd.in/dtgmC67b Still improving it — would love your feedback! 😊 #WebDevelopment #Frontend #JavaScript #UIUX #Projects #BuildInPublic

🚀 Building a Random Password Generator using useState, useEffect, useRef & useCallback I recently built a Random Password Generator project and gained some valuable hands-on experience with React hooks. Here are my key learnings: 🔹 useCallback – Optimizing Performance I learned that when you don’t want a function to be recreated on every render, you can use useCallback. By specifying dependencies, React only recreates the function when needed, improving overall efficiency. 🔹 useEffect – Controlling Side Effects If you want React to re-run a function after a state change, useEffect is the way to go. In my project, whenever the password length or character options changed, I needed to regenerate the password. So I used: useEffect(() => { generate(); }, [length, numbers]) This ensured the password updates automatically whenever dependencies change. 🔹 useRef – Direct DOM Access For better UX, I used useRef to directly access the HTML element when needed, avoiding unnecessary re-renders. 🔹 Clipboard Feature – Improving UX I implemented a copy-to-clipboard feature using: window.navigator.clipboard.writeText(password) This makes it super easy for users to copy the generated password instantly. 💡 Key Takeaway: Understanding when and how to use these hooks can significantly improve both performance and user experience in React applications. #React #WebDevelopment #JavaScript #FrontendDevelopment #LearningInPublic #Projects

🔐 Built a Clean & Interactive OTP Input Component using React Recently, I worked on building a fully functional OTP (One-Time Password) input UI with a focus on both user experience and real-world usability. ✨ Key Features: • Auto-focus on next input while typing • Backspace navigation (moves to previous input) • Input validation (only digits allowed) • Clean and responsive UI with modern styling • Ref handling using useRef for DOM control 💡 This is a commonly asked frontend interview question in companies like Microsoft, Google, Atlassian, etc., and a great example of how DSA + DOM manipulation + UX thinking come together in real-world applications. 🧠 What I learned: Managing focus dynamically, handling edge cases (like backspace & paste), and building a smooth user experience using React hooks. 🚀 Live demo & code: 👉 GitHub: https://lnkd.in/ga92Jib9 Would love to hear your feedback and suggestions! #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #UIUX #Coding #InterviewPreparation #100DaysOfCode

Whether you're building a complex dashboard or a simple search bar, UI jank is the ultimate vibe-killer. If you've ever felt like your app was "stuttering" because a heavy UI update was fighting with user input, useDeferredValue is about to become your new best friend. Here’s the breakdown of why this hook is a game-changer for React performance. 🚀 💡 The Problem: Blocking the Main Thread Normally, React updates are urgent. If a user types into an input and that input triggers a massive re-render (like filtering a list of 10,000 items), the typing feels "laggy" because React is too busy rendering the list to handle the keystrokes. ✨ The Solution: useDeferredValue This hook allows you to mark a piece of state as non-urgent. It tells React: "Hey, keep the input feeling snappy. Update the heavy UI when you have a spare moment." 🛠️ How it works: 1. React updates the "urgent" state (the input text) immediately. 2. It then attempts to render the "deferred" value in the background. 3. If the user types again before the background render finishes, React interrupts the old render and starts over with the new value. ⚡ When to use it? Expensive Re-renders: When a part of your UI is slow to render and there's no way to further optimize the component itself. Search/Filtering: Keeping the search input responsive while the results list "catches up." Third-party integrations: When you're passing data to a library that you don't have performance control over. Pro-Tip: For the best UX, pair it with React.memo on the component receiving the deferred value. This ensures the component only re-renders when the deferred value actually changes! Have you made the switch from traditional debouncing to useDeferredValue yet? Let’s talk about it in the comments! 👇 #ReactJS #WebDevelopment #Frontend #JavaScript #CodingTips #React18 #SoftwareEngineering

I didn’t want another “scroll + cards” portfolio. So I built mine like a tool I actually use every day — an IDE inspired by VS Code File explorer 📂 • Tabs 🗂️ • Command palette ⌘ • Themes 🎨 • Copilot-style panel 🤖 Not for aesthetics — but to rethink how developers *navigate and read* content. It forced me to focus on: ⚡ Layout performance ⌨️ Keyboard-first interactions 🧭 Real navigation state (not just sections on a page) Built with React + Vite, structured like a small product — not a landing page. 🔗 https://mohitkuril.xyz/ If the UI feels familiar, that’s intentional 😉 If you notice anything in the UI/UX or functionality that could be improved, I’d genuinely appreciate your feedback — feel free to reach out and discuss. What would you add to a command palette in your own portfolio? #FrontendDevelopment #ReactJS #WebDevelopment #UIDesign

#FrontendFridays - Loading to Success Button This week, I built a simple yet practical UI interaction that transitions a button from a loading state to a success state. This pattern is commonly used in real-world scenarios like form submissions and API calls to provide clear user feedback. Key highlights: • Loading spinner with disabled state • Smooth transition to success feedback • Auto reset after completion • Lightweight and reusable component Live Demo: https://lnkd.in/gZ2jgKYy Continuing to explore small UI interactions that improve user experience with minimal code. #FrontendFridays #FrontendDevelopment #WebDevelopment #UIUX #JavaScript #CSS #HTML

🚀 Stop Wasting API Calls & Fix Laggy UI (Every Dev Needs This) Most developers confuse Debounce and Throttling… and that’s exactly why their apps feel slow, laggy, or inefficient. Let’s fix that 👇 🧠 Debounce (Wait → Then Execute) Debounce delays execution until the user stops doing something. 👉 Example: Search Input User typing: R → Re → Rea → React ✅ API call only happens after user stops typing 💡 Best for: • Search bars • Auto-save forms • Input validation ⚡ Throttle (Limit → Execute at Intervals) Throttle ensures a function runs at a fixed interval, no matter how often it's triggered. 👉 Example: Scroll Event User scrolls continuously ✅ Function runs every 300ms (not on every pixel scroll) 💡 Best for: • Scroll tracking • Resize events • Button spam prevention 🔥 Key Difference in One Line: 👉 Debounce = “Wait until user stops” 👉 Throttle = “Run at regular intervals” 🎯 Learning Perspective If your app feels: ❌ Too many API calls → Use Debounce ❌ Performance issues on scroll → Use Throttle Understanding this difference = Cleaner UX + Better Performance 🚀 💬 Which one have you used more in your projects? Debounce or Throttle? #javascript #webdevelopment #reactjs #frontenddeveloper #codingtips #learnincode #developerlife #programmingtips #reactnative #softwaredevelopment #techlearning #100daysofcode #devcommunity

"CSS linear()" Recently, as part of a term project at BCIT, I built a small web app that generates alt text from images. It’s implemented using HTML, CSS, and TypeScript. In addition to building the features, I spent time researching and designing the app with a focus on JavaScript architecture and separation of concerns. One thing I learned in particular was how to use the linear() easing function in CSS. I used to rely on ease and ease-in-out, but linear() allows for much finer control over animation timing, making it easier to fine-tune the overall feel of the UI. In this app, I applied linear() to the theme switcher and hover interactions, adding a subtle spring-like motion to create a more natural and pleasant experience. This project reinforced how even small differences in motion can significantly impact user experience. 🔗 Live site: https://lnkd.in/g2Xm7VyV 😼 Git hub: https://lnkd.in/gi2wpRsC Notes - This app uses Puter.js. You will be asked to log in or agree to the terms on first use. - Since it includes an image upload feature, please be cautious when uploading images containing personal or sensitive information. As it relies on external services, it’s best to consider the content before use.

🚀 Mastering ARIA: Roles, States & Properties (Web Accessibility Game-Changer!) ♿✨ If you want to build truly accessible & inclusive web apps, understanding ARIA (Accessible Rich Internet Applications) is a MUST! 💡 Let’s break it down in a simple & practical way 👇 --- 🔹 1. ARIA Roles – “What is this element?” Roles define the purpose of an element for screen readers. 👉 Example: - "role="button"" → Tells assistive tech this is a button - "role="navigation"" → Marks a navigation section 🔥 Use roles when HTML alone is not enough! --- 🔹 2. ARIA States – “What is its current condition?” States describe dynamic changes in UI. 👉 Example: - "aria-expanded="true"" → Dropdown is open - "aria-checked="false"" → Checkbox is unchecked ⚡ States change based on user interaction! --- 🔹 3. ARIA Properties – “What extra info should users know?” Properties provide additional context about elements. 👉 Example: - "aria-label="Close menu"" → Gives accessible name - "aria-live="polite"" → Announces updates dynamically 💬 Helps screen readers understand UI better! --- 🎯 Pro Tips: ✅ Always prefer semantic HTML first (No ARIA > Bad ARIA) ✅ Use ARIA only when necessary ✅ Test with screen readers for real impact --- 💡 Why it matters? Because accessibility is not just a feature… 👉 It’s a responsibility to make the web usable for everyone ❤️ --- 🔥 Are you using ARIA in your projects? Drop your experience 👇 #WebAccessibility #ARIA #FrontendDevelopment #InclusiveDesign #A11y #UIUX #Developers #Coding #TechForGood ♿🚀 #AccessibilityMatters #DigitalAccessibility #WCAG #W3C #UXDesign #WebDevelopment #SoftwareEngineering #AssistiveTechnology #ScreenReaders #HTML #CSS #JavaScript #OpenWeb #DesignForAll #InclusiveWeb #AccessibilityFirst #DevCommunity #TechEducation #CodeForAll #FutureOfWeb

Hello #connections I finally built something I’ve been meaning to for a while, which is a Sorting Algorithm Visualizer! This project started off pretty simply: I wanted to actually understand how sorting algorithms behave step-by-step instead of just reading theory or memorizing time complexities. But somewhere along the way, it turned into something much more meaningful for me. This was also my first time working with React, which made the whole process both exciting and slightly chaotic. → I had to wrap my head around components, state, re-renders, and how everything ties together → Managing animations alongside algorithm logic was way trickier than I expected → And I definitely underestimated how much small UI decisions matter when you're trying to visualize something clearly The visualizer currently supports: → Bubble Sort → Merge Sort → Quick Sort → Heap Sort Quick breakdown of what each does (in very simple terms): → Bubble Sort: repeatedly swaps adjacent elements until everything is sorted (simple but slow) → Merge Sort: divides the array into halves, sorts them, then merges them back together → Quick Sort: picks a pivot and partitions the array around it recursively (fast in practice) → Heap Sort: builds a heap and repeatedly extracts the maximum/minimum element Each algorithm is animated so you can actually see how elements move, swap, and settle into place, which honestly helped me understand them way better than just code ever did. The attached video is at a faster animation speed, but you can check it out for yourself in the link provided! I used React and Vanilla CSS for this project. Honestly, my CSS isn’t very polished in this project. I focused way more on getting the logic and animations right than making everything look perfect. Also, the mobile UI is kinda terrible right now, but I will try fixing it later on. What I learned from this: → Visualizing algorithms forces you to truly understand them → React makes dynamic UI powerful, but you have to think carefully about state updates → Even “simple” projects can get complex when you care about the details Link: https://lnkd.in/gRkqVeGQ Repo: https://lnkd.in/g7YKV8uq Would love any feedback, suggestions, or ideas on what I can add next.