𝐉𝐮𝐬𝐭 𝐬𝐡𝐢𝐩𝐩𝐞𝐝 𝐃𝐢𝐠𝐢𝐓𝐨𝐨𝐥𝐬 𝐏𝐥𝐚𝐭𝐟𝐨𝐫𝐦 — 𝐚 𝐟𝐮𝐥𝐥 𝐑𝐞𝐚𝐜𝐭 + 𝐓𝐚𝐢𝐥𝐰𝐢𝐧𝐝 𝐬𝐡𝐨𝐩 𝐔𝐈! 🚀 This week, I focused on building a seamless, state-driven shopping experience from scratch. It wasn't just about making it look good; it was about mastering complex UI state and handling React side effects properly. 🔗 𝐋𝐢𝐯𝐞 𝐃𝐞𝐦𝐨: https://lnkd.in/gckjA_sD 💻 𝐆𝐢𝐭𝐇𝐮𝐛: https://lnkd.in/gi6hyHXu 🛠️ 𝐓𝐡𝐞 𝐓𝐞𝐜𝐡 𝐒𝐭𝐚𝐜𝐤  • 𝐂𝐨𝐫𝐞: React + Vite  • 𝐒𝐭𝐲𝐥𝐢𝐧𝐠: Tailwind CSS + DaisyUI  • 𝐈𝐜𝐨𝐧𝐬 & 𝐅𝐞𝐞𝐝𝐛𝐚𝐜𝐤: Font Awesome + React-Toastify 📦 𝐊𝐞𝐲 𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐬 𝐒𝐡𝐢𝐩𝐩𝐞𝐝:  • 𝐅𝐢𝐠𝐦𝐚-𝐭𝐨-𝐂𝐨𝐝𝐞 𝐋𝐚𝐲𝐨𝐮𝐭:  Fully responsive Navbar, Banner, Stats, and Pricing sections.  • 𝐃𝐲𝐧𝐚𝐦𝐢𝐜 𝐂𝐚𝐫𝐭 𝐋𝐨𝐠𝐢𝐜: A seamless toggle between the Product Grid and Cart view. Includes add/remove logic, real-time navbar counts, and a "Proceed to Checkout" flow.  • 𝐒𝐦𝐨𝐨𝐭𝐡 𝐔𝐗: Integrated in-page navigation using custom scroll helpers. Header links and CTAs jump to sections (#pricing, #products) with polished transitions.  • 𝐈𝐧𝐬𝐭𝐚𝐧𝐭 𝐅𝐞𝐞𝐝𝐛𝐚𝐜𝐤: Integrated React-Toastify for duplicate-add warnings and checkout success messages. 💡 𝐓𝐡𝐞 "𝐀𝐡𝐚!" 𝐌𝐨𝐦𝐞𝐧𝐭 (𝐄𝐧𝐠𝐢𝐧𝐞𝐞𝐫𝐢𝐧𝐠 𝐋𝐞𝐬𝐬𝐨𝐧) I ran into a classic React warning: "Cannot update a component while rendering a different component." 𝐓𝐡𝐞 𝐂𝐚𝐮𝐬𝐞: I was triggering a toast notification directly inside a `setState` updater function. 𝐓𝐡𝐞 𝐅𝐢𝐱: I learned to keep state updaters pure. I moved the side effects (toasts) outside the rendering logic to ensure the UI stays predictable and bug-free. 𝐖𝐡𝐚𝐭’𝐬 𝐧𝐞𝐱𝐭? I’m leveling up my component composition and diving deeper into the MERN stack. Onward! 📈 #ReactJS #TailwindCSS #WebDevelopment #Frontend #LearningInPublic #BuildInPublic #JavaScript

🚀 Built a To-Do List Web App using HTML, CSS & JavaScript I recently created a simple task management app to strengthen my frontend skills. ✨ Features: ✔️ Add & delete tasks ✔️ Mark tasks as completed ✔️ Data saved using local storage 🔗 Live Demo: [https://lnkd.in/erim6kMy] 💻 GitHub Repo: [https://lnkd.in/eghkFCdJ] This project helped me understand DOM manipulation and event handling. I’d love your feedback: • What features should I add next? • How can I improve the UI/UX? Your suggestions will really help me improve 🙌 #webdevlopment #javascript #frontend #projects #learning

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

A Fresh Take on the Web Development Journey Instead of the usual “house-building” analogy, I redesigned the concept using a more creative and modern visual approach to clearly explain how web development evolves step by step. 🔹 HTML → The structure (foundation of everything) 🔹 CSS → The design (making things visually appealing) 🔹 JavaScript → The logic (adding interactivity) 🔹 React → The system (building scalable UI) 🔹 Next.js → The performance layer (fast, optimized, production-ready apps) The goal was simple: Make it easy to understand, visually attractive, and unique — without copying common ideas. Design is not just about looks, it’s about clear communication. 💬 Would love your feedback! . . . . #WebDevelopment #Frontend #JavaScript #ReactJS #NextJS #UIDesign #UXDesign #LearningJourney #TechDesign #CreativeDesign #Developers #CodingLife #DesignThinking #UIUX #Infographic

🚀 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

🚀 Portfolio Update, More Than Just a Website A little while ago, I shared my personal portfolio. Since then, I’ve been actively improving it, not just visually, but structurally and technically—to better reflect how I approach building real-world applications. This project has evolved into a fully structured, scalable React application, not just a static showcase. Here’s a deeper look at what I’ve built: ⚡ Modern Frontend Architecture Built using React 19 + Vite 7 for fast performance and clean workflows, with React Router enabling smooth multi-page navigation. 🧩 Data-Driven Design All content (projects, skills, experience, certifications) is modularized into reusable data files—making the app easy to scale and maintain. 🎯 Interactive Features Filterable projects with detailed metadata Skills connected directly to real projects Modal-based interactions for deeper exploration Smooth transitions across pages 🎨 UI/UX & Design System Designed a consistent dark-themed interface using Tailwind CSS, with glassmorphism elements, gradients, and Framer Motion animations. ♿ Accessibility & Usability Implemented semantic structure, keyboard navigation, focus states, and ARIA basics. 🛠 Code Quality & Structure Clean folder organization (components, pages, hooks, data), reusable components, and ESLint for consistency. 📬 Functional Contact System Integrated Formspree with environment-based configuration. 🌐 Deployment & Domain Deployed on Vercel with a custom domain, configured for SPA routing and production optimization. 📈 Ongoing Work This isn’t a finished project—I’m continuously improving it as I build more and learn more. 🔗 https://lnkd.in/e_uACtkt Github Repo: https://lnkd.in/ecwniuDB Open to feedback and opportunities! #webdevelopment #react #tailwindcss #frontend #portfolio #OpenToOpportunities

"The Unified Search Engine for the Modern Developer’s Icon Workflow." https://svgiconsstock.com/ In the fast-paced world of web development, efficiency is the difference between shipping on time and falling behind. SVGIconsStock was born out of a simple frustration: the endless context-switching between different icon libraries, CDNs, and documentation pages. We’ve built a centralized discovery experience that bridges the gap between designers and developers. SVGIconsStock isn't just another asset gallery; it’s a high-performance utility built with Next.js that allows you to search, filter, and preview icons from multiple open-source libraries within a single, consistent interface. Whether you are looking for the perfect SVG for a landing page or managing a custom internal library for a design system, SVGIconsStock provides the tools to evaluate and integrate assets instantly. With our "Copy-to-Code" snippets and modular architecture, we remove the friction from frontend development, letting you focus on building great products rather than hunting for assets. Key Features & Capabilities Unified Discovery: One search bar to rule them all. Access thousands of icons across various popular libraries without leaving the platform. Developer-First Workflow: Get library-specific usage snippets (React, Vue, SVG, or Tailwind) for immediate implementation. Next.js Powered Speed: Experience lightning-fast filtering and instant previews thanks to a modern, modular component architecture. Custom Asset Management: A dedicated admin workflow for uploading, organizing, and tagging custom SVG assets for your specific projects. Designer-Friendly Interface: A clean, responsive UI that makes asset evaluation simple for both technical and creative team members. #SVGIconsStock #WebDev #UIUX #NextJS #Frontend #DesignSystem #SVGIconsStock #SVG #WebDevelopment #DeveloperTools #ReactJS #UIUXDesign #OpenSource #Productivity #NextJS #FrontendWorkflow

"The Unified Search Engine for the Modern Developer’s Icon Workflow." https://svgiconsstock.com/ In the fast-paced world of web development, efficiency is the difference between shipping on time and falling behind. SVGIconsStock was born out of a simple frustration: the endless context-switching between different icon libraries, CDNs, and documentation pages. We’ve built a centralized discovery experience that bridges the gap between designers and developers. SVGIconsStock isn't just another asset gallery; it’s a high-performance utility built with Next.js that allows you to search, filter, and preview icons from multiple open-source libraries within a single, consistent interface. Whether you are looking for the perfect SVG for a landing page or managing a custom internal library for a design system, SVGIconsStock provides the tools to evaluate and integrate assets instantly. With our "Copy-to-Code" snippets and modular architecture, we remove the friction from frontend development, letting you focus on building great products rather than hunting for assets. Key Features & Capabilities Unified Discovery: One search bar to rule them all. Access thousands of icons across various popular libraries without leaving the platform. Developer-First Workflow: Get library-specific usage snippets (React, Vue, SVG, or Tailwind) for immediate implementation. Next.js Powered Speed: Experience lightning-fast filtering and instant previews thanks to a modern, modular component architecture. Custom Asset Management: A dedicated admin workflow for uploading, organizing, and tagging custom SVG assets for your specific projects. Designer-Friendly Interface: A clean, responsive UI that makes asset evaluation simple for both technical and creative team members. #SVGIconsStock #WebDev #UIUX #NextJS #Frontend #DesignSystem #SVGIconsStock #SVG #WebDevelopment #DeveloperTools #ReactJS #UIUXDesign #OpenSource #Productivity #NextJS #FrontendWorkflow

"The Unified Search Engine for the Modern Developer’s Icon Workflow." https://svgiconsstock.com/ In the fast-paced world of web development, efficiency is the difference between shipping on time and falling behind. SVGIconsStock was born out of a simple frustration: the endless context-switching between different icon libraries, CDNs, and documentation pages. We’ve built a centralized discovery experience that bridges the gap between designers and developers. SVGIconsStock isn't just another asset gallery; it’s a high-performance utility built with Next.js that allows you to search, filter, and preview icons from multiple open-source libraries within a single, consistent interface. Whether you are looking for the perfect SVG for a landing page or managing a custom internal library for a design system, SVGIconsStock provides the tools to evaluate and integrate assets instantly. With our "Copy-to-Code" snippets and modular architecture, we remove the friction from frontend development, letting you focus on building great products rather than hunting for assets. Key Features & Capabilities Unified Discovery: One search bar to rule them all. Access thousands of icons across various popular libraries without leaving the platform. Developer-First Workflow: Get library-specific usage snippets (React, Vue, SVG, or Tailwind) for immediate implementation. Next.js Powered Speed: Experience lightning-fast filtering and instant previews thanks to a modern, modular component architecture. Custom Asset Management: A dedicated admin workflow for uploading, organizing, and tagging custom SVG assets for your specific projects. Designer-Friendly Interface: A clean, responsive UI that makes asset evaluation simple for both technical and creative team members. #SVGIconsStock #WebDev #UIUX #NextJS #Frontend #DesignSystem #SVGIconsStock #SVG #WebDevelopment #DeveloperTools #ReactJS #UIUXDesign #OpenSource #Productivity #NextJS #FrontendWorkflow

"The Unified Search Engine for the Modern Developer’s Icon Workflow." https://svgiconsstock.com/ In the fast-paced world of web development, efficiency is the difference between shipping on time and falling behind. SVGIconsStock was born out of a simple frustration: the endless context-switching between different icon libraries, CDNs, and documentation pages. We’ve built a centralized discovery experience that bridges the gap between designers and developers. SVGIconsStock isn't just another asset gallery; it’s a high-performance utility built with Next.js that allows you to search, filter, and preview icons from multiple open-source libraries within a single, consistent interface. Whether you are looking for the perfect SVG for a landing page or managing a custom internal library for a design system, SVGIconsStock provides the tools to evaluate and integrate assets instantly. With our "Copy-to-Code" snippets and modular architecture, we remove the friction from frontend development, letting you focus on building great products rather than hunting for assets. Key Features & Capabilities Unified Discovery: One search bar to rule them all. Access thousands of icons across various popular libraries without leaving the platform. Developer-First Workflow: Get library-specific usage snippets (React, Vue, SVG, or Tailwind) for immediate implementation. Next.js Powered Speed: Experience lightning-fast filtering and instant previews thanks to a modern, modular component architecture. Custom Asset Management: A dedicated admin workflow for uploading, organizing, and tagging custom SVG assets for your specific projects. Designer-Friendly Interface: A clean, responsive UI that makes asset evaluation simple for both technical and creative team members. #SVGIconsStock #WebDev #UIUX #NextJS #Frontend #DesignSystem #SVGIconsStock #SVG #WebDevelopment #DeveloperTools #ReactJS #UIUXDesign #OpenSource #Productivity #NextJS #FrontendWorkflow