🚀 Day 3/100 – Daily Machine Coding Challenge Day 3 of building. Day 3 of turning logic into interaction — because time management isn’t just for life, it’s for UI too ⏱️ 🧩 Today’s Challenge: Build a Countdown Timer in React. A simple yet precise app to practice state transitions, useEffect cleanup, and user control flows. ✅ Features Implemented: Set custom hours, minutes, and seconds Start, Pause/Resume, and Reset controls Real-time countdown with formatted display Alert when the timer hits zero 💡 Key Takeaway: Managing time in code is just like in life — every second counts. Clean state flow + precise control = predictable and elegant UI behavior. 🔗 Live Demo & Code: https://lnkd.in/dzjA5Mqg #Day3 #100DaysOfCode #MachineCoding #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CleanCode #UIUX #StateManagement #LearnInPublic #DeveloperJourney #MERNStack #CodeSandbox #DailyChallenge #KeepBuilding

🚀 Day 6/100 – Daily Machine Coding Challenge Day 6 of building. Day 6 of crafting smooth interactions that make interfaces feel alive — because clarity and control go hand in hand 🎛️✨ 🧩 Today’s Challenge: Build an Accordion List where only one section opens at a time. A clean, dynamic UI element that showcases controlled state management and thoughtful user experience. ✅ Features Implemented: 🔹 Expand and collapse sections with intuitive click actions 🔹 Only one accordion section stays open at a time 🔹 Smooth open/close animations for a polished feel 🔹 Built using conditional rendering and controlled expansion logic in React 🔹 Fully reusable Accordion component for scalability 💡 Key Takeaway: Simplicity is power — when users interact with your UI, every motion should feel intentional and clear. A well-designed accordion doesn’t just organize content, it guides attention and reduces friction. 🔗 Live Demo & Code: https://lnkd.in/dnRXtcYp #Day6 #100DaysOfCode #MachineCoding #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CleanCode #UIUX #UserExperience #LearnInPublic #DeveloperJourney #MERNStack #DailyChallenge #KeepBuilding 🚀

🚀 Day 6/100 – Daily Machine Coding Challenge Day 6 of building. Day 6 of crafting smooth interactions that make interfaces feel alive — because clarity and control go hand in hand 🎛️✨ 🧩 Today’s Challenge: Build an Accordion List where only one section opens at a time. A clean, dynamic UI element that showcases controlled state management and thoughtful user experience. ✅ Features Implemented: 🔹 Expand and collapse sections with intuitive click actions 🔹 Only one accordion section stays open at a time 🔹 Smooth open/close animations for a polished feel 🔹 Built using conditional rendering and controlled expansion logic in React 🔹 Fully reusable Accordion component for scalability 💡 Key Takeaway: Simplicity is power — when users interact with your UI, every motion should feel intentional and clear. A well-designed accordion doesn’t just organize content, it guides attention and reduces friction. 🔗 Live Demo & Code: https://lnkd.in/dv2_3k7G #Day6 #100DaysOfCode #MachineCoding #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CleanCode #UIUX #UserExperience #LearnInPublic #DeveloperJourney #MERNStack #DailyChallenge #KeepBuilding 🚀

Passing data from parent to child components in React: a common task with a couple of approaches. We often choose between passing an object as props or spreading an object into individual props. Which do you prefer? I lean towards object props when the component represents a clear, well-defined entity – think a Card, UserProfile, or ProductItem. This enhances readability, strongly supports type safety, and makes future maintenance easier. It's explicit and instantly communicates the data's purpose. Spreading props makes sense for smaller, simpler components where the props directly mirror the object's fields. Consider reusing a data structure without modification or embellishment. It's concise and effective in the right context. My general rule of thumb: Use object props for entity-based components, and prop spreading for simple data passthrough. Both are perfectly valid techniques; the key is choosing based on the component's role and overall complexity within the application. What are your preferred methods and when do you reach for each technique? Let’s discuss! #reactjs #nextjs #javascript #webdevelopment #frontend #programming #coding #developer #softwareengineering #ui #ux #components #props #datamanagement #development

🚀 Day 4/100 – Daily Machine Coding Challenge Day 4 of building. Day 4 of structuring data flow — because how you display data is just as important as how you fetch it. 📄✨ 🧩 Today’s Challenge: Build Pagination in React. A crucial feature for any scalable app — learning to manage large datasets efficiently while keeping the UI clean and intuitive. ✅ Features Implemented: 🔹 Display paginated data fetched from an API 🔹 Dynamic page navigation (Next, Previous, and direct page numbers) 🔹 Controlled items per page 🔹 Loading and edge-case handling for smooth transitions 💡 Key Takeaway: Efficient pagination isn’t just about splitting data — it’s about enhancing user experience through performance and clarity. When you control how data flows, you control how users feel. 🔗 Live Demo & Code: https://lnkd.in/dhqa7TpK #Day4 #100DaysOfCode #MachineCoding #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CleanCode #UIUX #StateManagement #Pagination #LearnInPublic #DeveloperJourney #MERNStack #DailyChallenge #KeepBuilding 🚀

🚀 Day 4/100 – Daily Machine Coding Challenge Day 4 of building. Day 4 of structuring data flow — because how you display data is just as important as how you fetch it. 📄✨ 🧩 Today’s Challenge: Build Pagination in React. A crucial feature for any scalable app — learning to manage large datasets efficiently while keeping the UI clean and intuitive. ✅ Features Implemented: 🔹 Display paginated data fetched from an API 🔹 Dynamic page navigation (Next, Previous, and direct page numbers) 🔹 Controlled items per page 🔹 Loading and edge-case handling for smooth transitions 💡 Key Takeaway: Efficient pagination isn’t just about splitting data — it’s about enhancing user experience through performance and clarity. When you control how data flows, you control how users feel. 🔗 Live Demo & Code: https://lnkd.in/dhqa7TpK #Day4 #100DaysOfCode #MachineCoding #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CleanCode #UIUX #StateManagement #Pagination #LearnInPublic #DeveloperJourney #MERNStack #DailyChallenge #KeepBuilding 🚀

I just spent 5 days in testing hell. 470 Jest tests. 60+ components. 100% pass rate. Countless lessons. Over the past week, I wrapped up the complete Jest testing suite for a frontend project I was assigned to, covering every form, modal, card, table, and layout across the codebase. Here’s what actually moved the needle 👇 🎯 I stopped testing implementation, started testing behavior. Focused on “Can users see this button?” not “Does this function return true?” 🔧 I embraced the debugging chaos. Radix UI conflicts taught me to mock primitives, not wrappers. Redux context errors pushed me to build reusable renderWithRedux helpers. Canvas warnings showed me the power of jest.setup.ts for global mocks. 💡 I learned to read components like a detective. I spent 30 minutes understanding each component before writing a single test — that small investment saved 3+ hours of debugging later. The real game-changer? Building helper functions early. My renderWithRedux helper got reused 200+ times across the suite. That’s compound productivity in action. But here’s the deeper lesson: Testing isn’t a chore you do after building features. It’s a conversation with your future self about what you intended to build. Every test that passes says, “Yes, this works exactly as I planned.” Every test that fails says, “Wait, let me think about this again.” After 470 tests, I don’t just have better code coverage: I have confidence in the codebase. Users experience fewer bugs. And honestly? I sleep better at night. What’s your favourite strategy for testing UI-heavy React apps? #FrontendDevelopment #Jest #Testing #Reactjs #WebDevelopment #EngineeringExcellence #BuildingInPublic #TypeScript

Day-60 Full Stack Development 💡 Day 5: React Interactivity — Event Handling & Conditional Rendering In React, building dynamic UIs isn’t just about displaying data — it’s about how users interact with your components. Today, I explored how React handles events and how we can conditionally render content based on app state. 🖱️ 1️⃣ Event Handling in React React events are similar to DOM events but follow the camelCase naming convention and use JSX syntax. Example: <button onClick={handleClick}>Click Me</button> Functions like handleClick are defined inside the component and can update state or trigger other actions. React automatically binds event listeners efficiently through its Virtual DOM, ensuring smooth updates. ⚙️ 2️⃣ Passing Parameters to Event Handlers You can pass arguments easily using arrow functions: <button onClick={() => handleDelete(id)}>Delete</button> This keeps handlers flexible and avoids unnecessary re-renders. 🔁 3️⃣ Conditional Rendering React lets you show or hide elements dynamically using: Ternary operators: {isLoggedIn ? <Dashboard /> : <Login />} Logical && operator: {error && <p>Error loading data!</p>} This approach makes UIs clean, declarative, and responsive to state changes. ✨ In short: Event handling and conditional rendering together make React apps feel alive — responding instantly to user actions while maintaining component-based architecture. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ConditionalRendering #ReactEvents #ManojLearnsReact #UIUX #CodingJourney #cfbr

🌟 The Day React ⚛ Walked Into the Office Last week, while debugging yet another tangled UI, I joked to myself: “Wish someone could just organize this mess for me.” And that’s when React walked in. Not the library — but a character. A calm, sharp engineer with a coffee in one hand and a notebook in the other. He looked at my chaotic code and smiled. React: “Why are you rebuilding the same things everywhere?” Me: “Uhh… that’s how I’ve always done it.” React chuckled, placed a small glowing cube on my desk, and whispered: “Make it a Component.” Suddenly everything changed. Buttons became reusable stars ⭐ Cards became stars ✨ Forms, navbars, modals — all tiny stars floating in a clean UI galaxy. When these stars aligned, they didn’t just create a webpage… They formed a constellation — organized, scalable, and beautiful. That’s when it hit me: >⚛ 🌌 React isn’t just a library. It’s a mindset — Break big problems into small reusable pieces, and let small things create big things. Now whenever my code gets messy, I imagine React walking in again with his coffee saying: “Relax. Make it a component.” ☕💡 #ReactJS #JavaScript #WebDevelopment #SoftwareEngineering #FrontendDeveloper #CodingJourney #LearningReact #TechStory #DeveloperLife #ProgrammingCommunity #UIUX #FullStackDeveloper

🎥 Ever thought about how 𝗬𝗼𝘂𝗧𝘂𝗯𝗲’𝘀 𝗟𝗶𝘃𝗲 𝗖𝗵𝗮𝘁 keeps updating smoothly — new messages flowing in, no lag, and the DOM never explodes? I tried building a mini version of it as part of my LLD prep (inspired by Akshay Saini 🚀’s Namaste System Design course). 🧩 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 𝗦𝘁𝗮𝘁𝗲𝗺𝗲𝗻𝘁: 1. Short polling API to fetch new comments periodically 2. UI updates every few seconds 3. Prevent DOM bloat with a strict limit 4. Instant user input rendering 5. Clean React lifecycle management 💡 Built using React Hooks (useRef, useEffect, useState) and random data generation to mimic live chat flow. 💻 𝗟𝗶𝘃𝗲 𝗱𝗲𝗺𝗼 : https://lnkd.in/gW3_9nXk 🔗 𝗚𝗶𝘁𝗛𝘂𝗯 (𝗰𝗼𝗱𝗲): https://lnkd.in/gWUUXAAN 𝗬𝗼𝘂𝗿 𝗺𝗼𝘃𝗲: 💬 Got a smarter way to handle this flow? Share your approach in the comments! #React #SystemDesign #FrontendDevelopment #AkshaySaini #MachineCoding #WebDev #NamasteSystemDesign #LLD #JavaScript #FrontendEngineer #LearningByBuilding #100DaysOfCode