Mastering React useEffect Mounting Phase

Your code is only as fast as your fingers. Built a typing speed trainer that tracks WPM and accuracy in real-time — with high scores, celebratory animations, and a deliberately simple UI that gets out of your way. • React 19 + Vite 6 for a snappy, modern build pipeline • Canvas Confetti + Framer Motion for feedback that actually feels rewarding • Vitest + React Testing Library for solid unit coverage • Tailwind CSS v4 for responsive layout that works on any screen Adding high score persistence was the feature that changed everything. Suddenly it wasn't just a utility — it was a game. Small state decisions can completely shift how users engage with a tool. What's your current WPM? And what are you targeting? #Frontend #React #WebDev #OpenSource #Hacktoberfest

🚀 Day 23 — #React useEffect (Updating Phase) Today I explored how useEffect works during the updating phase 👇 🧩 Example: Runs When Dependency Changes import { useState, useEffect } from "react"; function UpdateExample() { const [count, setCount] = useState(0); useEffect(() => { console.log("Count updated:", count); }, [count]); // Runs whenever count changes return ( <div> <h2>Count: {count}</h2> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } export default UpdateExample; ✅ Key Points: 🔹 useEffect runs whenever the dependency (count) changes 🔹 Dependency array controls when the effect executes 🔹 Similar to componentDidUpdate in class components 💡 Use Cases: ✔ API calls on state change ✔ Syncing data with UI ✔ Triggering side effects based on user actions 🔥 Getting better at controlling React side effects step by step! #React #useEffect #FrontendDevelopment #JavaScript #LearningJourney 10000 Coders

🏏 Built BPL Dream 11. Here's what I actually learned. 📚 🌐 Live: https://lnkd.in/gGhzvfd8 This wasn't just about cricket — it was a deep dive into React fundamentals, styling with Tailwind + DaisyUI, and using third-party libraries for the first time. What I practiced: ⚛️ React 19 → Component tree architecture → Props & state (useState, use() + Suspense) → Lifting state up for shared coin & player data → Conditional rendering for tab switching → Array filtering for player removal + coin refund 🎨 Tailwind CSS + DaisyUI → 100% utility-class styling → Responsive grid layout → DaisyUI components (card, divider, loading) 🔔 React Toastify → Toast alerts for selection & removal actions 🔧 React Icons → FaUser, IoFlag, RiDeleteBin6Line Real projects teach what tutorials can’t. 🌱 — #ReactJS #TailwindCSS #DaisyUI #LearningInPublic #FrontendDev #WebDev #JavaScript #100DaysOfCode #BuildInPublic #CodeNewbie #DevLife #CodingJourney

🚀 Just finished building a fully interactive falling‑sand game with Next.js and Tailwind! You can paint sand, water, fire, lava, uranium – even seeds that grow into trees. The simulation handles temperature, phase changes, chemical reactions, electricity, pressure, weather, and ecosystem growth. All buttons work, the UI is responsive, and you can tweak everything from border mode to air temperature in the settings. Built this for fun, but it turned into a surprisingly deep physics toy. 👉 Check out the live demo: https://lnkd.in/gy2jRWjw #nextjs #tailwindcss #sandbox #gamedev #javascript

🚀 Just built my Tic Tac Toe game using HTML, CSS & JavaScript! As part of my JavaScript learning journey, I created a fully functional game that covers: 🎯 DOM Manipulation 🎯 Event Handling 🎯 Game Logic Implementation 🎯 Responsive UI Design This project helped me understand how real-world applications manage state, user interactions, and logic behind the scenes. ✨ Features: * Interactive 2-player gameplay * Win detection algorithm * Reset & New Game functionality * Modern mobile-inspired UI 💡 Next step: Planning to add an AI opponent and turn this into a smarter game. 🔗 Check out the project here: https://lnkd.in/gPVZPyK9 Would love your feedback! 🙌 #JavaScript #WebDevelopment #Frontend #LearningInPublic #Projects #100DaysOfCode #ApnaCollege

💥 Day 78 – DOM Toggle Magic ✨ Today I unlocked the power of toggle in JavaScript DOM — a simple yet impactful way to control element visibility and interactivity. - Practiced how classList.toggle() can add or remove classes dynamically. - Explored how toggling helps in building interactive features like dropdowns, modals, and dark/light themes. - Strengthened my understanding of DOM manipulation, event handling, and how small changes can create big user experiences. 🌱 Reflection – Toggle is more than a function; it’s a mindset. It teaches flexibility — the ability to switch states seamlessly, just like how we adapt in coding and in life. ⚡ Day 78 was about learning how a single function can transform static pages into dynamic, responsive interfaces. #Day78 #JavaScript #DOM #Toggle #CodingJourney #10000Coders #LearnInPublic #100DaysOfCode

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day59 Project: Live Character Counter What I built Today I built a Live Character Counter that tracks characters, words, and spaces in real-time with a clean and modern UI. Technologies Used HTML5 CSS3 JavaScript (DOM, Events, Clipboard API) Challenge I faced Managing real-time updates efficiently while keeping the UI smooth and responsive. How I solved it Used event listeners and optimized DOM updates, along with animations for better user experience. Features Real-time text tracking Word & character count Progress bar with warning states Copy & clear functionality Live Demo: https://lnkd.in/ddMKS65k Open to feedback and suggestions Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #JavaScript #WebDevelopment #100DaysOfCode #DeveloperJourney #Coding #UIUX

🚀 Day 23 – Throttling Events in JavaScript Ever noticed your app lagging during scroll or resize? 🤔 That’s because some events fire hundreds of times per second! 💡 Today I explored Throttling — a simple yet powerful technique to control how often a function executes. 👉 Instead of running a function continuously, throttling ensures it runs at fixed intervals ⏱️ 🔥 Why it matters: ✔ Improves performance ✔ Prevents unnecessary function calls ✔ Makes UI smoother ⚡ Common Use Cases: 📜 Scroll events 📏 Window resize 🖱️ Mouse movement 🎯 Animations & tracking 🧠 Pro Tip (Angular Devs): Using @RxJS makes throttling super easy with throttleTime() 🔥 Small optimization… but a huge impact on performance! 💯 💬 What’s your go-to: Throttling or Debouncing? #Day23 #JavaScript #Angular #WebDevelopment #Frontend #Performance #RxJS #CodingJourney

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day55 Project: Snake Game What I built Today I built a classic Snake Game using JavaScript. The snake moves across a grid, eats food to grow, and the game ends if it hits the wall. Technologies Used HTML5 CSS3 JavaScript (Game Logic, DOM Manipulation, Events) Note This project is still in progress — I’m actively working on adding more features like score tracking, increasing speed, and better game mechanics. Challenge I faced Managing the continuous movement and game state updates while keeping the UI synced with the logic. How I solved it Used a game loop with setInterval and maintained state for snake position, direction, and food to update the board dynamically. Live Demo: https://lnkd.in/dKDHr-sy Open to feedback and suggestions Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #JavaScript #GameDevelopment #WebDevelopment #100DaysOfCode #DeveloperJourney #Coding

🧠 Day 19 of 21days challenge Event Propagation in JavaScript ⚡ Events don’t just happen… they travel. By default, events follow bubbling (child → parent). But we can also use capturing (parent → child). For easy understanding :- Capturing = top to bottom Bubbling = bottom to top Default = bubbling 👉 That’s how DOM events flow This changed how I debug UI events 🚀 #JavaScript #EventPropagation #Frontend #InterviewPrep