Shipping v0.2.0 fixes edge cases and improves UX

I recently ran into a classic Next.js App Router challenge while building EduTrac, my school management portal. The Problem: I had a ParentLayout (sidebar, topbar, navigation) wrapped around my entire (parent) route group. It worked great for the Dashboard and Learning Hub, but when I built the Security & Settings page, I wanted a clean, focused UI—free from the sidebar. Because of how Next.js layouts work, my Sidebar was "leaking" into every single page inside that group. The Solution: Route Group Isolation Instead of using messy conditional logic (like if (pathname === '/settings') return null), I leveraged Route Groups to separate concerns: 1. Root Group (parent): Holds the WardProvider (Context) so data is available everywhere. 2. UI Group (dashboard-group): Holds the actual ParentLayout (Sidebar/Nav). 3.Settings Route: Sits inside the root but outside the UI group. The Result: A clean URL (/parent/settings) with a focused UI, while still maintaining access to my global state. Architecture isn't just about where files live; it's about controlling how they behave. Eleazer Ugwu #NextJS #WebDevelopment #ReactJS #SoftwareEngineering #EduTrac #Frontend

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day76 Project: Lucky Scratch Card What I built Today I created an interactive Scratch Card Web App where users can scratch the surface to reveal exciting rewards like cashback, discounts, and even a jackpot Technologies Used HTML5 (Canvas) CSS3 (Animations, UI Styling) JavaScript (DOM, Events, Logic) Challenge I faced Calculating how much area is scratched and determining when to reveal the reward accurately. How I solved it Used Canvas pixel data (getImageData) to track erased pixels and calculated percentage to trigger reward after threshold (>85%). Live Demo: https://lnkd.in/dHtCMfTi Feedback is always welcome! Code Of School Avinash Gour | Ritendra Gour #JavaScript #FrontendDeveloper #WebDevelopment #CSS #Canvas #UIUX #100DaysOfCode

🛠 Latest update on my tRPC + Next.js + Inngest project — focused on making fragments actually usable in the UI. Until now, fragments were just stored and displayed as data. That’s limiting if you want real interaction. So I introduced a FragmentWeb component: 🖥️ Renders a live preview of fragments inside an iframe 🔁 Allows refresh, opening in a new tab, and copying the sandbox URL This turns fragments from static output into something you can actively explore. I also built a reusable Hint (tooltip) component to improve usability and provide context for actions across the UI. This update shifts the system from just “showing results” to actually letting users interact with them — which is necessary if the goal is to build something closer to a real development environment. #NextJS #tRPC #Inngest #FrontendDevelopment #FullStackDevelopment #BuildInPublic

Building and refining a scalable React architecture using lazy loading and modular components. Focused on improving navigation structure, connecting pages properly, and optimizing performance across the app. Small improvements every day → better user experience 🚀 #React #WebDevelopment #FrontendDevelopment #JavaScript #SoftwareEngineering #UIUX #CleanCode #CodingJourney

Just built a Random GIF Generator using React! 🎉 It's a small project, but it packs some solid React concepts: 🔹 Custom Hook (useGif) — abstracted all the API logic away from the UI, keeping components clean and reusable 🔹 Conditional Rendering — swaps in a spinner while the GIF loads, so the UX feels smooth 🔹 Axios + Giphy API — fetching random GIFs, with optional tag-based filtering 🔹 Two components, one hook — Random fetches any GIF, Tag lets you search by keyword The thing I'm most proud of? The useGif custom hook. One hook, two completely different components, zero duplicated fetch logic. That's the magic of React hooks. ✨ Every small project teaches something new. This one reinforced how powerful custom hooks are for separating concerns. Inspired by @Love Babbar's teachings! What's a small project that taught you a big lesson? Drop it in the comments 👇 #React #JavaScript #WebDevelopment #FrontendDevelopment #ReactHooks #BuildInPublic

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day80 Project: MyShows – Movie Booking App (HTML + Tailwind CSS + JavaScript + TVMaze API) What I built Today I built a fully interactive movie booking web app called MyShows. It allows users to browse shows, view details, and book seats with a smooth and modern UI experience. Challenge I faced Managing seat selection state and ensuring booked seats don’t overlap or reset incorrectly while updating UI dynamically. How I solved it - Used a Set to track booked seats globally   - Managed selected seats with array state   - Separated UI update logic for cleaner rendering   - Improved event handling for dynamic elements  Live Demo: https://lnkd.in/dvz5cgjw Feedback is always welcome! Code Of School   Avinash Gour | Ritendra Gour  #JavaScript #WebDevelopment #100DaysOfCode #Frontend #MovieApp #API #FullStackDevelopment

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

🚀 𝗕𝗼𝗼𝘀𝘁 𝗬𝗼𝘂𝗿 𝗥𝗲𝗮𝗰𝘁 𝗔𝗽𝗽 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝘄𝗶𝘁𝗵 𝗩𝗶𝗿𝘁𝘂𝗮𝗹𝗶𝘇𝗮𝘁𝗶𝗼𝗻! Ever tried rendering 1000s of items in React and noticed your app slowing down? 😓 That’s where 𝗩𝗶𝗿𝘁𝘂𝗮𝗹𝗶𝘇𝗮𝘁𝗶𝗼𝗻 (𝗪𝗶𝗻𝗱𝗼𝘄𝗶𝗻𝗴) comes to the rescue! 💡 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗩𝗶𝗿𝘁𝘂𝗮𝗹𝗶𝘇𝗮𝘁𝗶𝗼𝗻? Virtualization is a technique where React renders only the visible items on the screen, instead of the entire list. 👉 Instead of loading 10,000 items at once, it loads just what the user can see 👀 ⚡ 𝗪𝗵𝘆 𝘀𝗵𝗼𝘂𝗹𝗱 𝘆𝗼𝘂 𝗰𝗮𝗿𝗲? ✔ Faster rendering ✔ Smooth scrolling ✔ Reduced memory usage ✔ Better user experience 🧠 𝗛𝗼𝘄 𝗶𝘁 𝘄𝗼𝗿𝗸𝘀 (𝘀𝗶𝗺𝗽𝗹𝗲 𝗶𝗱𝗲𝗮): • Render only visible items • Remove items that go off-screen • Add new items as user scrolls 📦 𝗣𝗼𝗽𝘂𝗹𝗮𝗿 𝗟𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀: 🔹 react-window (lightweight & fast) 🔹 react-virtualized (feature-rich) 📊 𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝘃𝘀 𝗪𝗶𝘁𝗵 𝗩𝗶𝗿𝘁𝘂𝗮𝗹𝗶𝘇𝗮𝘁𝗶𝗼𝗻 ❌ Rendering all items → Slow, heavy UI ✅ Rendering visible items → Fast, smooth UI 📌 𝗪𝗵𝗲𝗻 𝘁𝗼 𝘂𝘀𝗲 𝗶𝘁? 👉 Large datasets (1000+ items) 👉 Tables, feeds, chat apps 👉 Infinite scrolling UI ⚠️ 𝗞𝗲𝗲𝗽 𝗶𝗻 𝗺𝗶𝗻𝗱: • Dynamic heights can be tricky • Needs careful scroll handling • Not needed for small lists 💬 𝗣𝗿𝗼 𝗧𝗶𝗽: If your React app feels slow while scrolling… 👉 Virtualization might be the missing piece! 🔥 Start building high-performance React apps today! #ReactJS #WebDevelopment #Frontend #JavaScript #Performance #SoftwareEngineering

You add useMemo. The app is still slow. Before you blame React — two questions. Skip them and memo is just noise. Without useMemo, React just runs the computation. With useMemo, on every render, it checks the dependencies, saves the result in memory, and updates the dependencies. You only benefit if the dependencies stay the same. Otherwise, you’re paying for a cache that doesn’t help. Each time you use useMemo, you’re making a bet that caching will cost less than just running the computation. Most people make this bet without actually checking. Before you add useMemo, ask yourself two questions. First question: Are the dependencies stable between renders? // ❌ object created inside — reference is always new const filters = { search: input, page: current } // ✅ object from the store — reference is stable const filters = useSelector(state => state.filters) If you create a dependency inside the component, its reference changes on every render. The cache will never be used, so memo just adds extra work. If your dependencies aren’t stable, stop. Memo won’t help. Second question: Is the computation actually expensive? You don’t have to guess. There’s a clear way to check using console.time. If it takes less than 1ms, memo isn’t needed because caching takes about as long as the computation. Over 5ms, it’s worth considering. Over 16ms, you should definitely use memo. Why 16ms? Browsers render 60 frames per second, so each frame has 16ms. If a computation takes longer, users will notice lag. This is the line between a smooth UI and a visible freeze. The mistake I see most often: a developer notices slowness, adds useMemo everywhere, DevTools shows more work being done. The lag remains. They don't understand why. Memo without measurement isn't optimization. It's superstition. Measure first. Then decide. #Frontend #JavaScript #React #Vue #WebDev #Performance #SoftwareEngineering

Rendering 10,000 items in the DOM is a mistake. Most apps don’t crash… They just become painfully slow. Scroll lag. Janky UI. High memory usage. All because we tried to render everything at once. Enter: List Virtualization Instead of rendering the full list: • You render only what’s visible on screen • As you scroll → old items unmount • New items mount dynamically 👉 The DOM stays small, fast, and predictable How it actually works • Track scroll position • Calculate visible window (start + end index) • Render only those items • Use spacer elements to preserve scroll height Libraries like react-window and react-virtualized handle this really well. Practical lesson I’ve seen apps go from unusable → smooth just by adding virtualization. But there’s a catch: • Dynamic heights are tricky • SEO can break (content not in DOM) • Accessibility needs extra care 💡 Takeaway Performance isn’t about doing less work. It’s about doing only the necessary work. Are you using virtualization in your apps, or still rendering everything and hoping React saves you? #Frontend #ReactJS #WebPerformance #JavaScript #SystemDesign