🚀 Day 10 of my #100DaysOfCode Challenge! ⚽ I’m continuing to build out my web development foundations! 🚀 I just wrapped up a new project: a fully responsive React Feedback Form. Handling user input is such a crucial part of building interactive UIs, so I used this project to really solidify my understanding of React Hooks and state management. Here is a quick look at what I implemented: ✅ Controlled Components: Utilized the useState hook to smoothly manage dynamic inputs for Name, Email, and Feedback text. ✅ Submission Validation: Added a native window.confirm step, allowing users to review their details before the form officially submits. ✅ Responsive Design: Wrote custom CSS to ensure the UI looks clean and functions perfectly across both desktop and mobile screens. Every project feels like a solid stepping stone toward mastering frontend architecture and eventually tackling full-stack applications. Getting these core mechanics down is key! You can check out the source code and how I structured the logic over on my GitHub: 🔗 https://lnkd.in/gJ5jg3NC #ReactJS #WebDevelopment #Frontend #JavaScript #SoftwareEngineering #CodingJourney #BuildInPublic

🚀 𝗘𝘅𝗰𝗶𝘁𝗲𝗱 𝘁𝗼 𝘀𝗵𝗮𝗿𝗲 𝗺𝘆 𝗹𝗮𝘁𝗲𝘀𝘁 𝗽𝗿𝗼𝗷𝗲𝗰𝘁: 𝗗𝗶𝗴𝗶𝗧𝗼𝗼𝗹𝘀 𝗣𝗹𝗮𝘁𝗳𝗼𝗿𝗺! 🛒💻 I recently built a modern, responsive eCommerce web application designed for exploring and purchasing premium digital tools. This project was an excellent opportunity to deepen my understanding of React state management and dynamic UI rendering! ✨ 𝗞𝗲𝘆 𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀 & 𝗪𝗵𝗮𝘁 𝗜 𝗕𝘂𝗶𝗹𝘁: 🔹 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝘃𝗲 𝗖𝗮𝗿𝘁 𝗦𝘆𝘀𝘁𝗲𝗺: Developed a seamless shopping cart where users can add products, remove individual items, automatically calculate totals, and proceed to checkout. 🔹 𝗧𝗮𝗯𝗯𝗲𝗱 𝗕𝗿𝗼𝘄𝘀𝗶𝗻𝗴: Designed an intuitive interface allowing users to toggle smoothly between the main Products gallery and their personal Cart. 🔹 𝗥𝗲𝗮𝗹-𝗧𝗶𝗺𝗲 𝗡𝗼𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻𝘀: Integrated React-Toastify to provide users with instant, elegant feedback for actions like adding/removing items or completing a successful checkout. 🔹 𝗗𝘆𝗻𝗮𝗺𝗶𝗰 𝗦𝘁𝗮𝘁𝗲 𝗠𝗮𝗻𝗮𝗴𝗲𝗺𝗲𝗻𝘁: Managed complex component states to prevent duplicate cart additions and dynamically update UIs (like changing a "Buy Now" button to an inactive "Added to Cart" state). 🛠️ 𝗧𝗲𝗰𝗵 𝗦𝘁𝗮𝗰𝗸: React.js | Tailwind CSS | Vite | React-Toastify | JavaScript (ES6+) Building this application reinforced my skills in component-driven architecture, conditional rendering, and creating user-centric frontend experiences. 🔗 𝗟𝗶𝘃𝗲 𝗣𝗿𝗲𝘃𝗶𝗲𝘄: https://lnkd.in/eJVHjRew 💻 𝗚𝗶𝘁𝗛𝘂𝗯 𝗥𝗲𝗽𝗼𝘀𝗶𝘁𝗼𝗿𝘆: https://lnkd.in/eCQiGmsr I'd love to hear your thoughts and feedback! Let me know what you think in the comments. 👇 #WebDevelopment #ReactJS #Frontend #TailwindCSS #Vite #JavaScript #CodingJourney #BuildInPublic

Day 2 of my Next.js Journey 🚀 Today was all about understanding how rendering actually works in modern web applications—and this changed how I think about frontend development. Here’s what I learned: • What is Rendering? Understanding how content gets generated and displayed in the browser • CSR vs SSR Learned the difference between Client-Side Rendering and Server-Side Rendering, and when to use each • Hydration This concept was really interesting—how static HTML becomes interactive in the browser • Rendering Techniques in Next.js Got an overview of how Next.js handles different rendering strategies • Client vs Server Components Understanding where code runs and how it impacts performance and security • Data Fetching (Client Side) How to load and display data using client components • Dynamic Routing in Real Use Case Created dynamic links to show specific data (like food details) • Loading & Error Handling Learned how to handle loading states and errors properly for better user experience What stood out today is how Next.js gives control over performance. It’s not just about building UI anymore—it’s about deciding where and how your app runs. Slowly connecting the dots between theory and real-world application 💡 Excited to go deeper and build something practical soon. #NextJS #WebDevelopment #FullStackJourney #LearningInPublic #SoftwareEngineering

🚀 Day 27/30 – React.memo (Stop Unnecessary Re-renders) Your app feels slow… but the issue might not be logic. 👉 It might be unnecessary re-renders 👀 Today I learned one of the most underrated React optimization tools ⚡ 👉 React.memo --- 💻 The Hidden Problem: You update one state in parent component… But React may also re-render child components ❌ Even when nothing changed. That means: ❌ Wasted renders ❌ Slower UI ❌ Poor performance in large apps --- 💻 The Solution: Use "React.memo" ✅ It tells React: 👉 “If props are same, skip re-render.” --- 💻 Example: const Child = React.memo(({ name }) => { console.log("Child Rendered"); return <h2>Hello {name}</h2>; }); function App() { const [count, setCount] = useState(0); return ( <> <button onClick={() => setCount(count + 1)}> {count} </button> <Child name="Umakant" /> </> ); } --- 🔥 What actually happens: 1️⃣ Count changes 2️⃣ Parent re-renders 3️⃣ Child gets same props 4️⃣ React skips Child render ⚡ --- 💡 Why this matters: ✅ Faster UI ✅ Better scalability ✅ Less wasted rendering work Especially useful in: - Dashboards - Large lists - Complex child components - Real production apps --- ⚡ Advanced Insight: "React.memo" uses shallow prop comparison 👀 So these can still re-render child: ❌ New object props ❌ New function props 👉 That’s why "useCallback" + "useMemo" are powerful partners. --- 🔥 Key Takeaway: Not every render is a problem… But unnecessary renders become expensive at scale. --- Be honest 👇 Have you ever optimized re-renders… or are you only styling components? 🚀 #React #ReactMemo #Performance #FrontendDevelopment #JavaScript

🚀 Your Next.js App is Fast… But Why Does It Still Feel Slow? 🤯 Most developers say: 👉 “We are using SSR, so performance is good.” But here’s the uncomfortable truth: ⚠️ Fast HTML ≠ Fast Experience Let’s break what really happens in the browser 👇 🎭 1. The Illusion of Speed Request → Server → HTML → Screen Boom 💥 content appears instantly. But… 👉 That UI is just a static snapshot 👉 It looks interactive, but it’s not 🧠 2. The Hidden Reality (Main Thread) Main Thread = JS + Layout + Paint + Events Only ONE task at a time If something heavy runs: for (let i = 0; i < 500000000; i++) {} 👉 UI freezes 👉 Clicks don’t work 👉 Nothing paints 🎨 3. How Your Page Actually Appears HTML → DOM CSS → CSSOM → Render Tree → Layout (Reflow) → Paint FCP = first pixels LCP = biggest element ⚡ 4. The Biggest Trap: Hydration <button>Like</button> Looks clickable? Nope. JS loads → React runs → Events attached This is Hydration Large apps = heavy hydration = blocked main thread 🐢 5. Why It Feels Laggy (Even with SSR) HTML arrives fast ✅ BUT main thread busy ❌ Result: 😤 Click delay 🐌 Scroll lag ⚠️ Poor INP 🎯 6. INP — Real UX Metric Click → Wait → JS → Paint If JS blocks: Click → waiting… → waiting… → response Bad INP 🧱 7. Silent Killers element.style.width = "500px" → Reflow ❌ element.style.color = "red" → Repaint ✅ Reflow = layout recalculation → expensive 💣 8. Real Production Problem Ads (GPT / APS / PWT) Analytics Trackers Heavy JS → Main thread blocked → UI delayed 🧩 9. Real Timeline Request ↓ TTFB ↓ HTML ↓ Paint (FCP) ↓ LCP ↓ JS execution ↓ Hydration ↓ User interaction ↓ INP 💡 Final Insight Users don’t care when HTML arrives They care when UI responds 🔥 If you understand this, you’re thinking like a performance engineer. #NextJS #WebPerformance #Frontend #ReactJS #CoreWebVitals #INP #LCP

🚀 Hydration in Web Dev — The Concept Most Devs Pretend to Understand You open a website… It loads instantly ⚡ But for a second — nothing is clickable. Ever wondered why? 👉 That’s Hydration Server sends ready-made HTML (fast ✅) But it’s just “dead UI” Then JavaScript kicks in… and suddenly everything works. Buttons respond State updates App becomes alive 🔥 💡 In simple terms: Hydration = Attaching interactivity to server-rendered HTML ⚠️ Real dev problem: If server and client render different content → 💥 Hydration mismatch Example: Math.random() Looks harmless… but breaks your app in SSR. 🧠 Why you should care: • Faster load time • Better SEO • Smoother UX • Common interview topic Frameworks like Next.js and React rely heavily on this. If you're building modern apps and still ignoring hydration… you're missing how your app actually works under the hood. 💬 Drop “HYDRATE” in comments I’ll share a deep breakdown of what actually happens under the hood (step-by-step with real flow) 👇 #Hydration #WebDev #SeniorDeveloper #DAY109

I restarted. Again. This time, I followed one simple rule: Done is better than perfect. Just start. Improve along the way. So I built FocusList — a clean and simple To-Do web app focused on productivity and user experience. ✨ What it does: • Smart task menu to quickly view All, Planned, and Focused tasks with counts • Minimal and distraction-free main workspace • Interactive task panel to edit tasks, add notes or delete tasks. • Customizable background themes for a better feel ⚙️ Tech Stack: • React • JavaScript (ES6) • Tailwind CSS • React Router 🛠️ My process: I didn’t try to build everything at once. I started small — just adding tasks. Then step by step: → Improved UI → Added task interactions (edit, delete, complete) → Built a right-side task panel → Focused on responsiveness and UX → Added theming for personalization And honestly, it’s still not “perfect” — but it’s real, working, and improving. That’s what matters. I’d genuinely love to hear your thoughts or suggestions 😊 #BuildInPublic #ReactJS #FrontendDevelopment #UIUX #LearningInPublic

Day 40–41 of My Web Development Journey ⚛️ These two days were all about taking my React Routing skills to the next level 🚀 Now it’s not just navigation… it’s programmatic control + modern routing + better UX 😤🔥 What I worked on: 🔹 useNavigate() (Programmatic Navigation) • Redirect users after login/logout • Navigate using logic instead of clicks • Used navigate("/dashboard") Real-world use case unlocked 🔥 Outlet (Nested Routing) • Used <Outlet /> to render child routes • Understood layout-based routing • Built structure like dashboard → profile/settings createBrowserRouter (Modern Routing ⚡) • Learned new object-based routing system • Cleaner and scalable approach • Used with <RouterProvider /> This is how modern React apps are built NavLink (Active Links 🎯) • Styled active routes automatically • Used isActive for dynamic styling • Perfect for navbars Key Learning 💡 Routing is not just about moving between pages It’s about controlling flow, structure, and user experience Big Realization 🚀 Earlier: Basic navigation using Link Now: Programmatic routing + nested layouts + active states Frontend is getting more real every day 💯 Day 40–41 #ReactJS #JavaScript #FrontendDevelopment #ReactRouter #SheriyansCodingSchool #CodingJourney #BuildInPublic #WebDevelopment

🚨 Modern Frontend ≠ Always Better Lately, I’ve been thinking about how often we default to tools like React, TailwindCSS, and other modern frameworks without fully considering the end user. Yes—they’re powerful. Yes—they speed up development. But they also come with trade-offs. Not all users have: • Modern browsers • High-end devices • Fast internet connections And that matters more than we think. If your application depends heavily on modern JavaScript frameworks or CSS utilities, you may unintentionally: • Break compatibility with older browsers • Create performance issues on low-end devices • Deliver a poor or inconsistent user experience In environments where accessibility and broad device support are critical, this becomes a real problem. Sometimes, a simpler stack: • Vanilla JavaScript • Progressive enhancement • Lightweight CSS …can deliver a more reliable and inclusive experience. 💡 The goal isn’t to avoid modern tools completely— it’s to use them intentionally, not automatically. Build for your users, not just your stack. #WebDevelopment #Frontend #UX #Performance #Accessibility #React #TailwindCSS #Solobea.com