Gouranga Das Samrat

  The source of this image is Chat GPT based on writing! Are you preparing for front-end developer interviews and looking for practical, hands-on ways to improve your HTML, CSS, and React skills? Whether you’re a beginner aiming to build confidence or an experienced developer brushing up on UI skills, small, targeted challenges can make a huge difference. In this article, I’ll walk you through some of the best free and low-cost resources that offer real-world front-end tasks — perfect for interview prep, portfolio building, and daily practice. 1. Frontend Mentor frontendmentor.io Frontend Mentor is one of the most popular platforms for hands-on HTML, CSS, and JavaScript challenges. You get beautifully designed templates (in Figma or image formats) and are asked to bring them to life using clean code. The platform offers difficulty levels ranging from newbie to expert, and it’s perfect for practicing responsiveness and semantic HTML. Bonus : You can even filter for React-based ...

  I’m debugging a React app for a client who insists the page should update “instantly” when users click a button. I’m knee-deep in state variables, loading flags, try-catch blocks, and a mental breakdown. My useEffect Looks like a spaghetti monster mated with a JSON dump. Then it hits me: Why the hell am I writing this boilerplate over and over again? That night, I built the one hook that changed everything: useAsync() . Edited by me The Nightmare That Birthed a Hook You’ve probably lived this too. Fetching data? Here comes a mess of: const [ data , setData] = useState( null ); const [loading, setLoading] = useState( false ); const [error, setError] = useState( null ); useEffect(() => { setLoading(true); fetch(url) .then((res) => res.json()) .then(setData) .catch(setError) .finally(() => setLoading(false)); }, [url]); Gross. Repetitive. Bug prone. So I ripped it out. Abstracted it. And gave it a new home: Say Hello to useAsync() Here’s what it...

  It’s 4 AM. I’m knee-deep in spaghetti code. My useEffect dependencies are screaming, the UI flickers like a cheap horror movie, and some mystery re-render is haunting my app every time I breathe. Classic React chaos. Ever been there? I was a decent developer. But React humbled me. Hard. Turns out, knowing useState And slapping on some JSX doesn’t mean you know what the hell you’re doing. It means you started . But to ship maintainable, scalable apps? You need patterns. Real ones. Here are 7 React patterns that slapped sense into me — and might just save your sanity too. Edited by me 1. The “Component as Function, Not Dumpster” Pattern You know what I’m talking about. That one component that does everything . Fetches data, renders UI, handles logic, scrolls the page, makes your coffee… Stop. Please. A component should do one thing well, not ten things poorly. The Fix: Extract. Abstract. Repeat. // Bad function UserProfile ( ) { const [data, setData] = useState ( null ); u...

It’s the only language I’ve used where [] == ![] it's true and where you can, typeof null and somehow get 'object' . But despite all its quirks (and there are many), there are a few core concepts that make life with JS not just easier, but saner. This isn’t some computer science flex. These are practical concepts that, once you understand them, make you write better, cleaner, and less buggy code. 1. Hoisting  Before you rage at your variables being undefined , understand this: JS hoists variable and function declarations to the top of their scope. But —  and this is important  —  only the declarations , not the assignments. Why? Because JS reads it like: This is also why let and const behave differently — they’re hoisted too, but live in the “Temporal Dead Zone” until declared. 2. Closures Closures are like little memory vaults for your functions. They allow functions to remember variables from the scope they were created in, even after that scope has gone. Why care? T...

  Google quietly released a local AI agent that builds apps, debugs code, parses your repo, and fetches real-time data, right inside your terminal. And it’s completely free. This year, the most revolutionary developer tools I’ve used didn’t come with a splashy launch or billion-dollar hype. It came as a simple CLI: Gemini CLI, a terminal-based AI agent built on top of Google’s Gemini 2.5 Pro model . At first glance, it looks like a lightweight alternative to Claude Code. But after just 10 minutes of use, it became clear: this isn’t just a convenient utility. It’s a powerful local AI development assistant that can analyze, automate, and accelerate almost every part of your software workflow. And best of all? It’s fully open-source under the Apache 2.0 license It gives you up to 1,000 free requests per day It integrates with your local filesystem, IDE, and the web And it runs entirely in your terminal , no browser needed In this guide, I’ll show you what Gemini CLI is, how it works...