Why my API call didn't work: Understanding Promises and Async/Await

Async vs Sync… in real life (and in JavaScript) Ever notice how cooking and coding have a lot in common? If you cook synchronously, it goes like this: boil pasta → wait → chop veggies → wait → make sauce → wait. By the end, the pasta is mush, the sauce is cold, and you’re questioning your life choices. ⏳ Now, cook asynchronously: start boiling pasta, chop veggies while it cooks, prep the sauce while veggies are chopping, maybe even put a dessert in the oven. Everything happens at once, nothing waits around, and somehow, dinner is ready on time. ✅ JavaScript async works the same way. Fetching user data? Instead of freezing the whole app until the response arrives, async lets your page keep scrolling, buttons stay clickable, and typing uninterrupted. When the data arrives, the UI updates like magic. It’s basically multitasking… without chaos. Next time your code is waiting for something, think: “Could this be async?” 💡 #JavaScript #Coding #WebDevelopment #AsyncProgramming #FrontendDev #CodeTips #SyncProgramming

What’s concepts are important in JavaScript to master? “I’ve built 5 projects… and still feel like I know nothing.” That’s the pain every new developer hides. Hours of tutorials. Countless YouTube videos. But when it’s time to write from scratch the screen just stares back. It’s not because you’re bad at coding. It’s because no one taught you how JavaScript really works. When I started, I thought learning frameworks would make me “job ready.” React, Next.js, Node.js I tried them all. Still… nothing made sense. Then I realized something powerful: You don’t build confidence by jumping frameworks. You build it by mastering concepts. That’s where everything changes. Here’s what separates real devs from tutorial chasers 👇 ↳ Closures & Scope: Know how data lives and dies in memory. ↳ Promises & Async/Await: Control time — literally. ↳ Event Loop: The secret brain of JavaScript. ↳ Prototype & Inheritance: The difference between “code” and “craft.” ↳ DOM Manipulation: Turn your logic into life. ↳ Error Handling: Where real devs are born. Once you master these, frameworks become toys, not tools. You’ll stop searching for “how to fix this bug” and start saying, “I know why this happened.” That’s when you cross the line from learner → creator. #JavaScript #Learner #DigitalMarketing #FrontEndDevelopers #WebDevelopers

When I first started learning React, I honestly thought it would just be about creating components and rendering things on the screen. But the deeper I went, the more I realized — React isn’t just about syntax, it’s about thinking in components and building real, dynamic experiences. Over time, I’ve been following a roadmap that has helped me grow step by step: My React Roadmap So Far: 1️⃣ Fundamentals – Learning components, props, and state. 2️⃣ Hooks – Using useState, useEffect, and now experimenting with custom hooks. 3️⃣ Data Flow – Understanding how components talk to each other (props drilling and beyond). 4️⃣ React Router – Learning routing, loaders, actions, and redirects. I’ve built pages that actually work and respond smoothly. 5️⃣ Forms and Actions – Handling form submissions and data using <Form> and action functions. 6️⃣ Clean Project Structure – Writing code that’s organized, reusable, and easy to maintain. 7️⃣ User Experience Enhancements – Using loaders, navigation feedback, and error handling to make things feel complete. Each step hasn’t just taught me how to code , it’s taught me how to think like a developer. I’m currently diving deeper into state management and API integrations — connecting front-end logic with real data. It’s been challenging, but the progress feels amazing. If you’re also learning React, here’s my advice: ✨ Don’t rush. ✨ Keep building. ✨ Break things. ✨ Then fix them again, that’s where the real learning happens. #ReactJS #FrontendDevelopment #LearningJourney #WebDevelopment #ReactRouter #JavaScript #CodingInPublic

⚛️ React Learning Series – Day 8 Building Reusable Logic with Custom Hooks By now, we’ve explored React’s built-in hooks like useState(), useEffect(), useContext(), and useReducer(). But what if you find yourself using the same logic in multiple components — like fetching data or handling form inputs? That’s where Custom Hooks shine. 🌟 🔹 What Are Custom Hooks? A custom hook is simply a JavaScript function that starts with use and lets you reuse stateful logic. Here’s an example 👇 import { useState, useEffect } from "react"; function useFetch(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then(res => res.json()) .then(setData); }, [url]); return data; } Now you can use it anywhere: const users = useFetch("https://lnkd.in/gNiygD_6"); Just like that — you’ve built a reusable, self-contained logic block! 🔁 🔹 Why It’s Important ✅ Keeps components clean and focused on UI ✅ Makes logic reusable and easier to maintain ✅ Improves readability by hiding repetitive code ✅ Encourages modular architecture in large apps In short — custom hooks = cleaner code, less repetition, and smarter reusability. #ReactJS #WebDevelopment #Frontend #JavaScript #ReactHooks #CustomHooks #CleanCode #LearnToCode #SoftwareEngineering #TechCommunity #ProgrammingLife

⚛️ React Learning Series – Day 8 Building Reusable Logic with Custom Hooks By now, we’ve explored React’s built-in hooks like useState(), useEffect(), useContext(), and useReducer(). But what if you find yourself using the same logic in multiple components — like fetching data or handling form inputs? That’s where Custom Hooks shine. 🌟 🔹 What Are Custom Hooks? A custom hook is simply a JavaScript function that starts with use and lets you reuse stateful logic. Here’s an example 👇 import { useState, useEffect } from "react"; function useFetch(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then(res => res.json()) .then(setData); }, [url]); return data; } Now you can use it anywhere: const users = useFetch("https://lnkd.in/gNiygD_6"); Just like that — you’ve built a reusable, self-contained logic block! 🔁 🔹 Why It’s Important ✅ Keeps components clean and focused on UI ✅ Makes logic reusable and easier to maintain ✅ Improves readability by hiding repetitive code ✅ Encourages modular architecture in large apps In short — custom hooks = cleaner code, less repetition, and smarter reusability. #ReactJS #WebDevelopment #Frontend #JavaScript #ReactHooks #CustomHooks #CleanCode #LearnToCode #SoftwareEngineering #TechCommunity #ProgrammingLife

🌟 Day 14 of My #100DaysOfCodeChallenge — Building an Interactive Dictionary App! 📚💻 I created an English Dictionary App using HTML, CSS, and JavaScript, which fetches live word meanings, examples, and pronunciation using a free Dictionary API. At first, I only knew that “API” means connecting to an external source, but today I truly understood how it works! 😍 Here’s how the project functions and what I learned 👇 🔹 How It Works: The user types a word and clicks “Search.” JavaScript sends a fetch() request to the Dictionary API. The API sends back a JSON response with the word’s meaning, example, and sound URL. JavaScript reads this data and updates the HTML content dynamically using DOM manipulation — showing the meaning, part of speech, and even playing the pronunciation audio! If the word is invalid, it shows a proper error message — no crash, no confusion! 🔹 Key Learnings: ✅ fetch() & async/await: helped me understand how to handle real-time data asynchronously. ✅ JSON structure: taught me how to extract specific data like “meaning” or “example” from a complex nested object. ✅ Error handling: learned to use conditions like if (data[0].meanings) to avoid breaking the app. ✅ Optional chaining (?.): very useful for accessing deep properties safely. ✅ Event listeners: connected button clicks and “Enter” key actions for better user experience. This project showed me how JavaScript brings logic, interactivity, and intelligence into a web page. It was not just about coding — it was about learning how the web thinks and responds! 🧠💡 Git - https://lnkd.in/gDJ9jrFJ ✨ #100DaysOfCode #JavaScript #FrontendDevelopment #WebDevelopment #APIIntegration #CodingJourney #AsyncAwait #CodeNewbie #LearnCoding #SoftwareEngineer #ProgrammingLife #BuildInPublic #TechLearning #DeveloperCommunity #DictionaryApp #CodingMotivation #DailyCodeChallenge #JSDeveloper #SoftwareDevelopment #WebApps Saurabh Shukla

When I first heard experienced developers talk about 𝗔𝗣𝗜𝘀, I used to think it was one of those complicated parts of programming that I’d struggle to understand. But once I started learning, I realized it’s not as scary as it sounds. An 𝗔𝗣𝗜 simply helps different applications talk to each other. For example, when you 𝗳𝗲𝘁𝗰𝗵 𝗱𝗮𝘁𝗮 from a website, that’s your browser using an API to get information from another source. This week, I’ve been learning how to use 𝗳𝗲𝘁𝗰𝗵() together with async and await in JavaScript. These tools make it easier to get data from an API without freezing the whole page. It’s like telling JavaScript, “Go get the data, and I’ll keep things running until you’re back.” Understanding this opened my eyes to how websites load 𝗹𝗶𝘃𝗲 𝗱𝗮𝘁𝗮 like weather updates or user profiles without needing to refresh. #JavaScript #WebDevelopment #CodingJourney #LearnInPublic #FrontendDeveloper #AsyncJavaScript #API #DeveloperLife #TechJourney

My JavaScript Learning Journey – The Fetch API Today, I explored how to make network requests in JavaScript using the Fetch API. It’s a modern, promise-based way to fetch resources from a server, replacing the older XMLHttpRequest method.The Fetch API makes handling HTTP requests much simpler and more readable! Here’s a quick example: // Fetching data from an API fetch('https://lnkd.in/gJpEnSbz') .then(response => response.json()) .then(data => { console.log('Fetched Posts:', data); }) .catch(error => { console.error('Error fetching data:', error); }); This code:Sends an HTTP GET request to fetch sample postsParses the response as JSONLogs the data or handles errors gracefullyIt’s amazing how just a few lines can make web apps more dynamic and interactive! #JavaScript #FetchAPI #WebDevelopment #JSLearning #CodingJourney #FrontendDevelopment #MERNStack #AsyncProgramming #WebDev #CodeNewbie #LearnInPublic #APIs #DeveloperLife