JavaScript Notes App with LocalStorage

I removed useEffect from my code… and my app got faster ⚡ Yes, seriously. For a long time, I was doing this in React: useEffect(() => { fetchUsers(); }, []); Seemed correct… right? ❌ But in real projects, this caused: • Multiple unnecessary API calls • Data mismatch bugs • Hard-to-control logic 💡 Then I changed my approach: Instead of auto-calling APIs inside useEffect, 👉 I started triggering APIs based on user actions Example: • Search → onChange • Button → onClick ✅ Result: • Better control over API calls • Cleaner component logic • Improved performance (~30% fewer calls) 🔥 What I learned: useEffect is powerful… but overusing it makes your code messy. 💬 Curious: Do you still rely on useEffect for API calls? #ReactJS #FrontendDeveloper #JavaScript #CodingTips #WebDevelopment

🚀 Excited to share something I built for the React Native community! Over the past 3+ years working with React JS and React Native, I’ve built multiple reusable components to simplify development and maintain consistency across projects. One of those is now published on npm: 👉 react-native-form-textinput This is a TextInput component built specifically to work smoothly with React Hook Form — helping you write less code while handling forms more efficiently. 🔹 What it offers: • Seamless integration with React Hook Form • Reduces boilerplate code in forms • Built-in validation & error handling • Clean and reusable structure • Easily customizable UI I’ve been using this in my own projects, and it has significantly improved development speed and code quality. 🔗 NPM: https://lnkd.in/dV9UyR_G 💻 GitHub: https://lnkd.in/drZ_GM_F I’m planning to improve this package further 🚀 If you have suggestions, ideas, or want to contribute, feel free to open an issue or PR on GitHub. Would really appreciate your feedback 🙌 #ReactNative #JavaScript #OpenSource #NPM #MobileDevelopment #MERN #Developers

I built a dynamic quiz application using Next.js, TypeScript, and Redux Toolkit to manage state and persistence. The app features two main interfaces: an admin portal where users can add, review, and delete quiz questions with multiple-choice options, and a student page for taking the quiz with real-time scoring and progress tracking. Styled with CSS for a clean, responsive design, it demonstrates full-stack frontend skills in React ecosystem, including form handling, state management, and user experience optimization. Perfect for educational tools or interactive assessments! 🚀 #NextJS #TypeScript #Redux #WebDevelopment #React

‎🖱️ Day 5 of 30: Mastering User Interactions – Events & Handlers ‎Static components are a thing of the past. Today I wired up my UI to actually respond to users. ‎ ‎Events are the heartbeat of any interactive React app. Here's what I drilled into today: ‎ ‎🔘 Core Events: Click, Change, Submit ‎ ‎· onClick → Button actions and toggles ‎· onChange → Real‑time input tracking and live character counters ‎· onSubmit → Controlled form submission with validation ‎ ‎🌐 SyntheticEvent & Cross‑Browser Consistency ‎React wraps native events in a SyntheticEvent. This means e.target.value works exactly the same in Chrome, Firefox, and Safari—zero browser quirks. ‎ ‎📦 Passing Custom Arguments ‎Need to pass an id or extra data to a handler? Arrow functions to the rescue: ‎ ‎``` ‎onClick={() => handleDelete(item.id)} ‎``` ‎ ‎(Just remember: don't call it directly or it runs on render!) ‎ ‎📝 Controlled Forms – Single Source of Truth ‎Input values are bound to useState. The state drives the UI, and the UI updates the state. Predictable and debuggable. ‎ ‎🛠️ Today's Builds: ‎✅ Interactive Button Group – Dynamic styles and click counters with onClick and mouse events. ‎✅ Live Character Counter – Real‑time onChange validation with visual feedback. ‎✅ Registration Form – Full controlled form with validation, error handling, and checkbox management. ‎✅ Tabs Component (Mini Build) – Managing active state, event propagation, and dynamic tab removal. ‎ ‎⏱️ The 3.5‑Hour Grind Continues ‎ ‎· 15m Review ‎· 45m Deep Study ‎· 60m Code Along ‎· 45m Independent Build ‎· 30m Debugging ‎· 15m GitHub Documentation ‎ ‎📁 GitHub Streak: Day 5 ✅ ‎Every component is pushed, documented, and ready to be reviewed. ‎ ‎Next: Day 6 – Conditional Rendering & Lists. Time to make the UI truly dynamic with .map() and the all‑important key prop. ‎ ‎#ReactJS #WebDevelopment #Frontend #JavaScript #30DaysOfReact #LearningInPublic #ReactEvents #ControlledComponents #CodeNewbie

GitHub User Search App (API Integration Project) Developed a simple and functional GitHub User Search Application using HTML, CSS, and JavaScript, focused on working with external APIs and dynamic data handling. Key Features: Search any GitHub user by username Fetch real-time data using GitHub API Display user details dynamically (profile info, avatar, etc.) Instant UI updates without page reload What I Learned: Working with APIs (fetch / async-await) Handling asynchronous JavaScript DOM manipulation for dynamic content Error handling for invalid usernames Building user-friendly search functionality This project helped me understand how to integrate APIs and display real-time data in web applications. #JavaScript #API #WebDevelopment #FrontendDevelopment #GitHubAPI #Projects #LearningByDoing #CodingJourney

#JourneyToTechJob – Day 13 🚀 #50DaysOfRevision Built a simple Counter App using JavaScript. Features: ✔️ Increment and decrement functionality ✔️ Reset option ✔️ Dynamic UI updates using DOM manipulation What I revised: → Event handling in JavaScript → DOM manipulation → Writing cleaner and reusable functions 🔗 Live Demo: https://lnkd.in/dtSMAAaS Here’s a quick demo 👇 #SoftwareDevelopment #JavaScript #FrontendDevelopment #WebDevelopment #Projects #BuildInPublic #Consistency #50DaysOfCodeChallenge

🚀 New Project: Interactive Joke Generator in Next.js! I just built a dynamic random joke app exploring the power of Next.js Client Components and State Management. Technical Highlights: 🏗️ Architecture: Organised with Route Groups (projects) for a clean, scalable folder structure. ⚡ Data Fetching: Leveraged async/await and useEffect to pull live data from the Official Jokes API. 🧠 State Control: Implemented useState for a smooth Reveal/Hide punchline toggle and "Next Joke" functionality. 🎨 Styling: Fully responsive UI built with Tailwind CSS integrated via globals.css. Understanding the "use client" boundary and preventing unnecessary re-renders was a great deep dive into React performance! #NextJS #ReactJS #WebDev #TailwindCSS #Coding #Javascript

Recently, I revisited some of my earlier React projects and decided to finally share them. Here are a few projects I built while learning: 🔹 To-Do List App A modern task manager with drag-and-drop, dark mode, filtering, and local storage support. 🔹 Weather Dashboard Fetches real-time weather data (temperature, wind speed, conditions) using OpenWeather API. 🔹 FlipMind A card-matching game with smooth animations and responsive design. 🔹 QuoteCraft A minimal quote generator with a clean and simple UI. These projects helped me strengthen my fundamentals in React, state management, and working with APIs. Links are in the comments 👇. #React #WebDevelopment #FrontendDevelopment #JavaScript #LearningJourney

Today I explored React Router and key concepts behind Single Page Applications (SPA). 🔹 SPA – Loads a single HTML page and dynamically updates content without full page reloads. Example: Facebook, Gmail. 🔹 React SPA – Component-based SPA built with React. Each UI part is a reusable component. 🔹 Routing – Controls which component shows based on the URL, keeping navigation fast. 🔹 Nested Routing & Outlet – Parent routes can have child routes, and Outlet decides where the child renders. Example: Dashboard → Profile / Settings. 🔹 Link & NavLink – Link navigates without reload; NavLink highlights active routes. 🔹 Loader & useLoaderData – Fetch data before route renders and access it in the component easily. 🔹 Params & Dynamic Routes – Capture dynamic URL values with: id and useParams(). Example: /user/5 → id = 5. 🔹 useNavigate – Programmatically navigate between routes. Example: Redirect after form submission. Understanding these makes building scalable and smooth React apps much easier! #React #SPA #Frontend #WebDevelopment #JavaScript

#JourneyToTechJob – Day 5 🚀 #50DaysOfRevision Built a simple Color Picker Web App using JavaScript. Features: ✔️ Change background color with button clicks ✔️ Display selected color code ✔️ Dynamic UI updates using DOM manipulation What I learned: → Handling events in JavaScript → Updating UI dynamically → Writing reusable functions 🔗 Live Demo: https://lnkd.in/grH-tWFG Here’s a quick demo of the project 👇 #SoftwareDevelopment #JavaScript #FrontendDevelopment #WebDevelopment #Projects #50DaysOfCodeChallenge