JavaScript Learning Journey: Live Character Counter with Real User Interaction

Week 5 of learning Next.js in public. Continuing the JavaScript Mastery Next.js course — this week something clicked differently. Not a bug fix. Not a new feature. Just a shift in how I think about building things. The topic was Application Navigation — and I used to think navigation just meant "add a navbar and some links." Turns out, it's one of the most architectural parts of a frontend app. The decisions you make here ripple through everything else. The Mobile Sidebar Built a slide-in panel using Shadcn's Sheet component. While doing this, I learned why Button uses asChild. Nesting a Link inside a Button is invalid HTML — two interactive elements inside each other causes real accessibility issues. With asChild, the Button passes its styles down to the Link instead of rendering a button tag. One small prop, a lot of meaning. The NavLinks Component — One Component, Two Places Instead of writing nav links separately for mobile and desktop, I built a single NavLinks component reused in both. All nav items live in a constants file. It detects active links using pathname, handles a special case for the profile route by appending userId dynamically, and wraps links in SheetClose for mobile or React.Fragment for desktop — controlled by one isMobileView prop. The Left Sidebar Once NavLinks was solid, LeftSidebar was straightforward. Dropped it into the root layout alongside Navbar in a flex container. This is what good component design feels like — you do the hard thinking once, reuse becomes easy. The Right Sidebar and TagCard Shows Hot Questions and Popular Tags. Built a TagCard using Shadcn Badge. The best part was writing getDeviconClassName(name) in lib/utils.ts — a utility that maps any tag name to its Devicon class automatically. Small function, works for every tag, no repetition. What this week actually taught me — navigation is not a UI problem, it's a system design problem. How you structure components, where constants live, how you make something context-aware without tight coupling — all of it compounds over time. I came in to learn sidebars. I left thinking about how production apps are actually organized. #NextJS #WebDevelopment #LearningInPublic #FullStackDeveloper #JavaScript #React #Shadcn

🚀 Day 11 / 21 — Frontend Challenge Today I built: 👉 Interactive Quiz App with Timer 🧠 Flow I designed before coding: • Step 1: Mapped UI into three states: start, quiz (with timer), and result screens. • Step 2: Structured HTML containers, toggling visibility dynamically via an active class. • Step 3: Applied a glassmorphism UI with backdrop-filter and fadeIn animations. • Step 4: Stored questions, answers, and correct choices in a JS array of objects. • Step 5: Initialized state variables for index, score, time, and timer ID. • Step 6: Dynamically rendered <button> elements for answers with data attributes. • Step 7: Built a 15s setInterval() timer that turns red at 5s and handles timeouts. • Step 8: Wrote logic to clear the timer, validate choices, and apply CSS feedback classes. • Step 9: Displayed final score with custom text feedback based on performance. 🛠 Tech Used: HTML | CSS | JavaScript ✨ Features: • 🔄 Dynamic DOM rendering for questions/answers • ⏳ 15s timer with low-time alerts & auto-timeout • ✅ Instant visual feedback for right/wrong choices • 📊 Custom performance-based end screen • 🎨 Glassmorphism UI & fade-in animations 🚧 Challenges Faced: Managing timer state was tricky. I had to call clearInterval() precisely on user clicks and timeouts to prevent overlapping intervals. Disabling buttons and revealing correct answers after a timeout also required careful DOM manipulation. 💡 Key Learning: This solidified my grasp of JS intervals (setInterval/clearInterval) and dynamic DOM manipulation. I learned the importance of cleaning up old state (e.g., removing old buttons) before loading new data. 🙏 Guidance by: Keyur Gohil 🏫 Learning at: Red & White Skill Education Official 📂 GitHub Repo: https://lnkd.in/d8gGPpcp #21DaysJSWithKeyur #JavaScript #FrontendDevelopment #BuildInPublic #WebDevelopment #QuizApp

🚀 Sharing My JavaScript Practice Projects! I recently built a few small but useful JavaScript projects to strengthen my front-end development skills. These helped me improve my understanding of DOM manipulation, event handling, and basic UI logic. 🔹 Counter App A simple app to increment, decrement, and reset values. 🔗 Live Demo:https://lnkd.in/gmKUGScN 🔹 To-Do List Application Add, delete, and manage daily tasks with ease. 🔗 Live Demo: https://lnkd.in/gRcN8fyn 🔹 Celsius → Fahrenheit Converter A quick tool to convert temperatures using JavaScript. 🔗 Live Demo: https://lnkd.in/gKQtQ9xW Building these projects helped me practice: ✔ JavaScript basics ✔ User interface design ✔ Logical thinking ✔ Deployment using GitHub Pages / Netlify I’m excited to continue learning and working on more projects! Feedback is always welcome 😊 #JavaScript #WebDevelopment #LearningJourney #FrontendDeveloper #Projects

🚀 JavaScript Learning Journey — Building UI Systems, Not Just Projects Over the past weeks, I have been learning JavaScript by building small structured UI systems instead of random projects. Each project is designed around one core idea: 👉 State should drive the UI, not direct DOM manipulation. So far, I have built: • Toggle Text System - UI as a reflection of state • Theme Toggle System - persistence with localStorage • Counter System - event delegation and data-driven actions • Password Visibility System - binary state UI with accessibility 🔗 Live: https://lnkd.in/dt94TTW5 💻 Code: https://lnkd.in/dDA8u28H Key shift in thinking: Instead of asking "how do I change the UI?" I now ask 👉 "what is the state and how should the UI reflect it?" This approach is helping me think more like a frontend engineer - focusing on structure, consistency and predictable UI behavior. #JavaScript #Frontend #WebDevelopment #LearningInPublic #100DaysOfCode

𝗥𝗲𝗮𝗰𝘁 𝗡𝗮𝘁𝗶𝘃𝗲 𝟬.𝟴𝟱 𝗶𝘀 𝗵𝗲𝗿𝗲 — and it's a big one! Here are the highlights you need to know: 𝗡𝗲𝘄 𝗦𝗵𝗮𝗿𝗲𝗱 𝗔𝗻𝗶𝗺𝗮𝘁𝗶𝗼𝗻 𝗕𝗮𝗰𝗸𝗲𝗻𝗱 Built in collaboration with Software Mansion, this new internal engine powers animations for both Animated and Reanimated. The biggest win? You can now animate layout & Flexbox props using the native driver in Animated — something that wasn't possible before. Performance just leveled up. 𝗝𝗲𝘀𝘁 𝗣𝗿𝗲𝘀𝗲𝘁 𝗠𝗼𝘃𝗲𝗱 𝘁𝗼 @𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲/𝗷𝗲𝘀𝘁-𝗽𝗿𝗲𝘀𝗲𝘁 A simple one-line change in your jest.config.js but a meaningful step toward a leaner core package and a more modular testing setup. 𝗠𝗲𝘁𝗿𝗼 𝗧𝗟𝗦 𝗦𝘂𝗽𝗽𝗼𝗿𝘁 The Metro dev server now supports HTTPS and WSS during development. Perfect for testing APIs that enforce secure connections. 𝗥𝗲𝗮𝗰𝘁 𝗡𝗮𝘁𝗶𝘃𝗲 𝗗𝗲𝘃𝗧𝗼𝗼𝗹𝘀 𝗚𝗲𝘁𝘀 𝗦𝗺𝗮𝗿𝘁𝗲𝗿 • Multiple simultaneous CDP connections (VS Code, AI agents, and DevTools can connect at the same time!) • Native tab support on macOS • Request payload previews restored on Android 𝗕𝗿𝗲𝗮𝗸𝗶𝗻𝗴 𝗖𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗼 𝗪𝗮𝘁𝗰𝗵 • Node.js v20 (≥20.19.4) or v22+ required — v21 & v23 are EOL and no longer supported • StyleSheet.absoluteFillObject is removed → use StyleSheet.absoluteFill instead • 0.82.x is now unsupported React Native keeps getting faster, more modular, and more developer-friendly. If you haven't upgraded yet, now's a great time to plan it! Have you tried 0.85 yet? Drop your thoughts below 👇 #ReactNative #MobileDevelopment #JavaScript #OpenSource #ReactNative085 #SoftwareEngineering

🧩 Just built a Quiz Web App using HTML, CSS & JavaScript! I recently completed a fully functional quiz application that fetches real-time questions using an API and lets users attempt a 10-question MCQ quiz. 🔧 Features: Dynamic questions using Open Trivia API Randomized options each time Next / Previous navigation Answer selection with instant UI feedback Option restoration when navigating back Score calculation on submit Reset functionality 💡 What I learned while building this: Deep DOM manipulation Handling async API calls (fetch, async/await) Managing application state using arrays Debugging real UI bugs (event handling + DOM issues) Importance of clean HTML structure (IDs & labels matter a lot ) This project helped me understand how real-world frontend apps manage state and user interactions without frameworks. Next step: improving UI/UX and converting this into a React-based version. Feedback is welcome. #JavaScript #WebDevelopment #FrontendDevelopment #HTML #CSS #APIs #FetchAPI #AsyncJavaScript #DOMManipulation #Coding #Programming #WebDevJourney #100DaysOfCode #BuildInPublic #LearnToCode #StudentDeveloper #DeveloperJourney #Projects #FrontendEngineer #TechCommunity #SoftwareDevelopment

“Objects & Arrays are basic…” — until you actually build something real. 👀 So instead of just watching tutorials, I challenged myself to turn concepts into a **fully functional Notifications Page** 💻⚡ ✨ What started as simple JavaScript: 👉 Objects → storing notification data 👉 Arrays → managing multiple items 🔥 Turned into: ✔ Real-time UI updates ✔ “Mark all as read” feature ✔ Dynamic unread counter ✔ Clean, responsive design (desktop + mobile) ✔ Interactive hover & focus states This project made one thing clear: 💡 *The difference between knowing JavaScript and using JavaScript is BUILDING.* No frameworks. No shortcuts. Just pure logic + DOM. And honestly… this is where things start getting exciting 🚀 🔗 Live Demo: https://lnkd.in/dTVdciyF 💻 GitHub Repo: https://lnkd.in/dWPdZ-zD #JavaScript #FrontendDevelopment #WebDev #BuildInPublic #CodingJourney #LearnByBuilding #FrontendMentor #100DaysOfCode #Developers #Tech

React Learning Series | Contd... #Day22: Difference between useEffect and useLayoutEffect Most developers use useEffect everywhere ⚛️ But very few truly understand when to use useLayoutEffect 🤔 Here’s the difference in one line 👇 🟢 useEffect → runs AFTER the UI is painted 🟠 useLayoutEffect → runs BEFORE the UI is painted This small timing difference can cause real UI issues 💥 Example: If you measure DOM size using useEffect, users may see a flicker 😬 Switching to useLayoutEffect fixes it instantly ⚡ Rule I follow 👇 ✅ 90% of cases → useEffect ⚠️ Use useLayoutEffect only when layout must be calculated before paint 🚨 Overusing useLayoutEffect can hurt performance since it blocks rendering React is not just about writing components… It’s about understanding when things happen ⏱️ Have you ever faced a UI flicker issue like this? #React #Frontend #JavaScript #WebPerformance

useEffect can cause you side effects. I've seen people with months of React experience still getting burned by it. This is Post 8 of the series: 𝗥𝗲𝗮𝗰𝘁 𝗨𝗻𝗱𝗲𝗿 𝘁𝗵𝗲 𝗛𝗼𝗼𝗱 Where I explain what React is actually doing behind the scenes. 🔹 It doesn't run when you think it does. Most devs assume useEffect runs during render. It doesn't. It fires AFTER the render and AFTER the browser paints. React keeps the render phase pure and side-effect free on purpose. 🔹 The dependency array controls everything. This one argument decides when your effect runs. No array → runs after EVERY render [ ] empty → runs once on mount [dep] → runs when that value changes Get this wrong → bugs that are nearly impossible to debug. 🔹 [ ] is often a lie. Everyone slaps [] thinking "run once and forget." But if you're using any variable from inside the component and not declaring it as a dep — that's a stale closure. A hidden bug that silently uses outdated data. 🔹 Missing deps → infinite loops. useEffect with no dep array + a setState inside? That's: render → effect fires → state updates → re-render → effect fires again… Infinite loop. Your app crashes. You panic. 🔹 Cleanup is NOT optional. Every event listener, timer, interval, or subscription you create inside useEffect needs to be cleaned up. No cleanup → memory leaks grow silently in the background. 🔹 Stop overusing it. useEffect is for syncing with external systems. Not for everything. Deriving state, transforming data, computing values. None of that needs useEffect. Ask yourself before writing it: "Is this syncing with something outside React?" If no → you probably don't need it. Next post : State vs Ref vs Variable Follow Farhaan Shaikh if you want to understand React more deeply. 👉 Read the previous post: React hooks hate you for this: https://lnkd.in/d7ySVnJA #React #ReactJS #WebDevelopment #Frontend #JavaScript #useEffect #BuildInPublic #LearnInPublic #FrontendDevelopment #ReactUnderTheHood #DevTips #WebDev #Programming

🚀 Understanding Project Folder Structure If you're starting with React or Full-Stack development, knowing the folder structure is very important. Here’s a simple breakdown 👇 📁 src/ Main folder where all your application code lives 👉 Components, pages, logic, styles 📁 assets/ Used for storing static files 👉 Images, icons, fonts, videos 📁 components/ Reusable UI parts 👉 Navbar, Footer, Buttons, Cards 📁 pages/ Represents different screens of your app 👉 Home, About, Contact 📁 api/ Handles backend communication 👉 Fetching and sending data 📁 utils/ Helper functions used across the app 👉 Date format, validations, calculations 📁 hooks/ Custom React hooks 👉 Reusable logic (useAuth, useFetch) 📁 context/ Global state management 👉 Share data across components 💡 Clean folder structure = Clean and scalable code #ReactJS #WebDevelopment #FullStack #JavaScript #Coding #Developers #Programming