DEV Community: Mohammad Shahzeb Alam

From useEffect to TanStack Query: What Changed My Perspective

Mohammad Shahzeb Alam — Wed, 22 Jul 2026 14:48:29 +0000

When I first started learning data fetching in React, the dependency array in useEffect confused me more than the fetch request itself.

But after building a Meme Generator, it finally started making sense.

A few weeks later, I built another project using TanStack Query because I wanted to see how a different approach to server state felt in practice.

I wasn't trying to prove that one approach was better than the other. I simply wanted to compare what it actually felt like to build with both.

What surprised me wasn't just that I wrote less code—it was how differently I started thinking about data fetching.

2. The Experiment

Project 1 — Meme Generator

My first project was a simple Meme Generator. The idea was straightforward: fetch a list of meme templates from an API, display a random meme, and let users add their own top and bottom text.

To fetch the meme data, I used React's useEffect hook. It was my first experience working with APIs in React, and it helped me understand how to fetch data after a component renders and store it in state.

useEffect(() => {
  fetch("https://api.imgflip.com/get_memes")
    .then((res) => res.json())
    .then((data) => setAllMemes(data.data.memes));
}, []);

Besides data fetching, this project also introduced me to controlled components. As users typed into the input fields, the text updated on the meme image in real time, which was one of my favorite parts of building the project.

Project 2 — Movie Search App

After building my Meme Generator with useEffect, I wanted another project where I could compare a different approach to data fetching. This time, I built a Movie Search app using TanStack Query and React Router.

The app lets users search for movies, display the results, and navigate to a separate page for detailed information about each movie. It felt like a good project because it involved fetching data, searching, and working with dynamic routes—all things I'd likely use in real applications.

Instead of focusing on how TanStack Query worked internally, I wanted to see how it felt to build with it compared to useEffect.

const {
  data: movies,
  isLoading,
  isError,
} = useQuery({
  queryKey: ["movies", searchTerm],
  queryFn: fetchMovies,
});

One thing I also wanted to explore was how TanStack Query worked alongside React Router. After searching for a movie, users can open a dedicated details page for that movie, making the app feel more like a real-world project.

At this point, I had built one project with useEffect and another with TanStack Query. The real differences didn't become obvious until I started comparing the development experience.

3. What Actually Surprised Me

Discovery #1 — Less Boilerplate, More Focus

The first thing I noticed was how much repetitive code disappeared.

With useEffect, I had to manage loading states, error states, and the fetched data myself. In my Movie Search app, TanStack Query handled most of that for me. Instead of writing the same boilerplate every time I fetched data, I could focus on building the feature.

const {
  data: movies,
  isLoading,
  isError,
} = useQuery({
  queryKey: ["movies", searchTerm],
  queryFn: fetchMovies,
});

I didn't realize how much time I was spending writing the same patterns until I stopped having to write them.

Discovery #2 — Caching Finally Clicked

Caching was the feature that surprised me the most.

At first, I had heard people talk about caching, but I didn't really understand why it mattered.

While testing the app, I noticed that data I'd already fetched appeared instantly when I visited it again.

That was the moment caching finally clicked for me.

Instead of making another network request every time, TanStack Query reused the data it already had.

The difference wasn't dramatic in such a small project, but it helped me understand why caching becomes valuable as applications grow.

Discovery #3 — The Pattern Stayed Consistent

One thing I appreciated was that every data-fetching feature followed the same structure.

Whether I was fetching a list of movies or the details of a single movie, I used the same useQuery pattern:

define a queryKey
provide a queryFn
access data, isLoading, and isError

Once I understood that pattern, adding another API request felt much less intimidating.

4. What TanStack Query Didn't Replace

Before using TanStack Query, I expected it to completely change how I fetched data.

After building the project, I realized that wasn't the case.

I still needed:

An API to request data from.
A function that actually fetches the data (fetch in my project).
React fundamentals to build the UI.

For example, my fetchMovies function stayed almost the same:

const fetchMovies = async () => {
  const apiKey = import.meta.env.VITE_OMDB_API_KEY;

  const response = await fetch(
    `https://www.omdbapi.com/?apikey=${apiKey}&s=${searchTerm}`
  );

  const data = await response.json();

  return data.Search;
};

TanStack Query doesn't replace this function. It simply calls it whenever the query needs fresh data.

What changed was how I managed the server state around that request.

Instead of writing repetitive code for loading states, error handling, caching, and refetching, I could describe my data requirements with useQuery, and TanStack Query handled those concerns for me.

For me, TanStack Query doesn't replace React or the Fetch API. It builds on top of them by removing repetitive server-state management, allowing me to spend more time building the application instead of managing data fetching logic.

5. When I'd Still Use `useEffect`

After building this project, I don't think TanStack Query is something I'd use in every React application.

If I'm building a small application with just one or two API requests, I'd probably stick with useEffect.

For those projects, installing and configuring another library doesn't feel necessary. useEffect already does the job well, and it keeps the project simple.

I'd start considering TanStack Query when an application grows and managing server state becomes repetitive. Features like caching, loading states, error handling, and automatic refetching become much more valuable as the project becomes more complex.

For me, it isn't about replacing useEffect. It's about choosing the right tool for the size and needs of the project.

6. Looking Back

Building these two projects changed how I think about data fetching in React.

If I rebuilt my Meme Generator today, I probably wouldn't replace useEffect with TanStack Query.

The app only fetches the list of memes once when it loads:

useEffect(() => {
  fetch("https://api.imgflip.com/get_memes")
    .then((res) => res.json())
    .then((data) => setAllMemes(data.data.memes));
}, []);

For a simple project like this, useEffect is straightforward and gets the job done.

What has changed is how I'd approach larger applications.

If an app needs multiple API requests, caching, automatic refetching, or better server-state management, I'd seriously consider using TanStack Query.

Before building these two projects, I thought data fetching in React was mostly about making API requests.

Now I think it's more about deciding how to manage server state as an application grows.

This experiment didn't convince me that TanStack Query should replace useEffect.

Instead, it taught me that they solve different problems, and choosing the right one depends on what I'm building.

What I Learned Integrating AI Into My React App

Mohammad Shahzeb Alam — Fri, 17 Jul 2026 14:53:28 +0000

While building Chef Claude, a small React application where users enter the ingredients they have and receive an AI-generated recipe, I started wondering how this would actually work.

Should I store recipes somewhere in my code? Or use a recipe API?

Since every user could enter a different combination of ingredients, I couldn't rely on a fixed list of recipes.

That's when I thought of integrating AI into the app.

What I Was Building

The flow of Chef Claude was simple.

Users add ingredients based on what they have available. Every ingredient is stored in state, and after adding at least four ingredients, the "Get a Recipe" button appears.

When the user clicks the button, the ingredient list is sent to the AI model. The model uses those ingredients to generate a recipe and sends the response back.

But the response comes back as Markdown.

Displaying that raw response directly in the UI didn't look good, so I used react-markdown to render the Markdown properly in my React app.

Getting a Hugging Face Access Token

Before connecting my app to an AI model, I needed a Hugging Face access token.

Creating one only took a few minutes:

Create a Hugging Face account.
Open Access Tokens.
Create a new fine-grained token.
Enable inference permissions.
Copy the token.

Setting Up the Environment Variable

After getting my Hugging Face token, I needed to use it inside my React application.

Instead of hardcoding my API key directly into my React code, I stored it in a .env file to keep my configuration separate from the source code.

VITE_HF_ACCESS_TOKEN=YOUR_API_KEY

Then I accessed it inside my application using:

const token = import.meta.env.VITE_HF_ACCESS_TOKEN;

At first, I thought keeping my token in a .env file meant it was completely safe.

But after learning how Vite handles environment variables, I realized that wasn't true.

Since my React application needs the token to make the API request, Vite exposes VITE_ environment variables to the frontend during the build process. That also means the browser has access to them.

One thing that confused me was this: if my .env file wasn't part of my application code, then how was the browser still getting my API key?

After understanding how Vite builds the application, it finally clicked. The .env file helps keep my configuration separate from the source code, but VITE_ variables are still injected into the frontend because the browser needs them to make the API request.

That's when I realized my API key wasn't actually secret anymore.

While researching this, I also understood why backend applications are important. Instead of letting the browser call the Hugging Face API directly, the better approach is to keep the API key on the backend. The frontend sends the user's ingredients to the backend, the backend talks to the AI using the secret API key, and only the generated recipe is returned to the frontend.

Even though I haven't learned backend development yet, this was the moment I finally understood why developers keep saying that secret API keys should never live in the frontend.

One thing I learned: Keeping .env out of your source code and keeping an API key secret are two different things. If the frontend needs the key, the browser will eventually have access to it. That's why sensitive API keys should be kept on a backend or serverless function.

Connecting the Model

After setting up the API key, the next step was connecting my React application to an AI model.

import { HfInference } from "@huggingface/inference";

const SYSTEM_PROMPT = `
You are an assistant that receives a list of ingredients that a user has and suggests a recipe they could make with some or all of those ingredients. You don't need to use every ingredient they mention in your recipe. The recipe can include additional ingredients they didn't mention, but try not to include too many extra ingredients. Format your response in markdown to make it easier to render to a web page
`;

const hf = new HfInference(import.meta.env.VITE_HF_ACCESS_TOKEN);

export async function getRecipeFromMistral(ingredientsArr) {
    const ingredientsString = ingredientsArr.join(", ");

    const response = await hf.chatCompletion({
    // I'm using Qwen 2.5 7B Instruct, but you can replace it with any compatible Hugging Face model.
        model: "Qwen/Qwen2.5-7B-Instruct",
        messages: [
            { role: "system", content: SYSTEM_PROMPT },
            {
                role: "user",
                content: `I have ${ingredientsString}. Please give me a recipe I'd recommend!`,
            },
        ],
    });

    return response.choices[0].message.content;
}

Let's break down what each part is doing.

`HfInference`

Instead of manually sending HTTP requests to the Hugging Face API, the SDK provides a client that makes interacting with AI models much simpler.

`SYSTEM_PROMPT`

The system prompt tells the AI how it should behave.

In my project, I wanted the AI to act like a recipe assistant. It should take the user's ingredients, suggest a recipe, and return the response in Markdown so I could render it nicely in my UI.

Without a system prompt, the AI still responds, but it doesn't have clear instructions about the format or the type of answer I expect.

`ingredientsArr.join(", ")`

The ingredients entered by the user are stored as an array.

["Rice", "Egg", "Onion", "Tomato"]

Before sending them to the AI, I converted them into a single string using .join(", ").

Rice, Egg, Onion, Tomato

This creates a natural sentence that becomes part of the user's prompt.

`chatCompletion()`

This is the function provided by the Hugging Face SDK that sends my prompt to the selected AI model and returns its response.

In simple words, this is where my React application actually talks to the AI.

Returning the recipe

Finally, I return:

response.choices[0].message.content

This gives me the generated recipe, which I later render in my React application using react-markdown.

The Response Was Markdown

After connecting the AI model, I thought the hard part was over.

The user clicked the "Get a Recipe" button, the AI generated a recipe, and everything worked.

But there was one small problem.

The response didn't look good in the UI.

The AI was already returning a well-structured Markdown response, and when I rendered it directly, it looked like plain text instead of a nicely formatted recipe.

That's when I discovered react-markdown.

Instead of manually formatting the response, I used react-markdown to render the Markdown as React elements.

The difference was immediately noticeable. Headings, bullet points, and formatting started looking like a proper recipe instead of a block of text.

That small library made the final output look much better without adding much extra code.

Final Thoughts

When I started this project, I thought integrating AI simply meant sending a prompt and getting a response.

By the end, I realized there was much more involved—structuring prompts, handling responses, understanding how environment variables work, and presenting the AI's output in a way that feels polished to the user.

This project also reminded me that every library solves a specific problem. Instead of building everything from scratch, knowing when to use the right tool is just as important.

If you've built something similar or have suggestions, I'd love to hear them in the comments.

When Props Started Getting Messy: Learning React Context API

Mohammad Shahzeb Alam — Mon, 13 Jul 2026 10:37:05 +0000

When building React apps, passing props felt simple at first.

But as I started working with more components, it became confusing for me.

Sometimes I had to check where I passed a prop, which component needed it, and whether I was passing it through the right component.

While building Chef Claude, I started wondering how this would work in a much bigger app.

When Props Started Getting Messy

When passing props in a small app, it feels easy to manage. But as the app grows, passing props can start to feel messy.

While passing props, I had to keep a few things in mind. Sibling components can't directly pass props to each other. If they need to share state, the state can be moved to their closest common parent and then passed down through props.

Props drilling happens when data is passed through multiple component levels just to reach a component deeper in the tree.

The thing that confused me was knowing when to pass props, where to pass them, and how I should pass them. Sometimes it became difficult for me to track how the data was moving between components.

Then I Learned Context API

Then I learned about Context API and understood another way of sharing data between components.

Instead of passing the same data through multiple components, Context lets us share data from a Provider and access it in the components that need it.

Using useContext(), a component can access shared data without passing it through every intermediate component as props.

To understand how it actually works, I built a simple dark and light theme changer. I wanted to see how the data flows and how multiple components can access the same context.

import { createContext, useContext } from "react";

export const ThemeContext = createContext({
  themeMode: "light",
  darkTheme: () => {},
  lightTheme: () => {},
});

export const ThemeProvider = ThemeContext.Provider;

export default function useTheme() {
  return useContext(ThemeContext);
}

The thing that clicked for me was actually very small.

A small change in className was changing the theme of the entire page.

I didn't need to write a bunch of code for every component. The theme was shared through Context, and the components could use it where needed.

That's when Context API finally started making sense to me.

When I Would Still Use Props

After learning Context API, I understood that it doesn't mean I should stop using props.

If I only need to pass data from a parent to one child component, setting up Context doesn't make much sense to me. Props are already simple enough for that.

I would use Context when the same data needs to be shared across multiple components and passing it through several component levels starts getting messy.

For me, it is not about replacing props with Context.

It's about knowing when props are enough and when shared data needs a better place.

Final Takeaway

Before learning Context API, I often got confused about where state should live and how props should move between components.

Learning Context helped me understand that I don't always need to pass shared data through every component.

Props still have their place, and Context isn't a replacement for them. For me, the important part was learning when to use each.

Did you also struggle with passing props when learning React? When did Context API finally click for you?

React Dynamic Web Apps & Clean Form States

Mohammad Shahzeb Alam — Wed, 08 Jul 2026 14:50:45 +0000

While building Chef Claude, I realized React wasn't just helping me build a UI.

It completely changed the way I handled forms and dynamic data.

In vanilla JavaScript, I was writing a lot of code just to grab a value from a form and update the page.

Then I discovered useState and FormData, and things started to click.

The Problem

Chef Claude lets users enter ingredients and generates a recipe.

Before React, I would've selected the input manually, grabbed its value, and updated the DOM myself.

That works, but it quickly becomes messy as your app grows.

Here's the function I used to handle the form:

import React from "react";

function handleIngredientSubmit(event) {
  event.preventDefault();

  // Read the submitted value
  const formData = new FormData(event.currentTarget);
  const newIngredient = formData.get("ingredient");

  // Add the new ingredient to state
  setIngredients((prevIngredients) => [
    ...prevIngredients,
    newIngredient,
  ]);
}

FormData lets me read the submitted value directly from the form.

I could have used a controlled input with onChange, but for this project I only needed the value after the form was submitted.

Using FormData kept the code much simpler.

What Surprised Me

The thing that surprised me wasn't FormData.

It was how little code I had to write.

I expected to manage every input manually, but instead I could grab the submitted value and update my state.

Another thing that finally clicked for me was conditional rendering.

In Chef Claude, I didn't want to show the Generate Recipe button until the user had entered at least four ingredients.

Instead of writing multiple if...else statements, React let me describe that condition directly in the UI.

Before entering four ingredients

After entering four ingredients

The Generate Recipe button appears automatically because the condition is now true.

What I Learned

Before this project, I was still solving React problems the same way I'd solve them in vanilla JavaScript.

Building Chef Claude helped me understand that React already gives you cleaner ways to handle forms and dynamic UI. You just need to know when to use them.

Small things like useState, FormData, and conditional rendering removed a lot of repetitive code that I would've written in vanilla JavaScript.

Final Thoughts

This project made me stop thinking in vanilla JavaScript and start thinking the React way.

What React feature made things finally click for you?

Stop Writing Massive, Single-Page Codebases A Raw Look at React Components: and Props

Mohammad Shahzeb Alam — Thu, 02 Jul 2026 12:17:33 +0000

Before React, we used to render web pages using raw JavaScript and root.render. We had to make a single div inside our HTML file, and then write the entire project's code on that one page. It quickly became super cluttered and messy as the project grew.

React custom components completely fixed this headache for us developers. They let us break big, complex UI tasks into small, isolated pieces that we can bundle together and render easily.

Here is how the system scales step-by-step:

1 Custom Components & Fragments

jsx

function Page() { 
  return ( 
    <>
      <Header />
      <MainContent />
      <Footer /> 
    </> 
  );
}

Composability: Custom components give you the power to break a huge layout task down into smaller, manageable individual files (like <Header /> or <Footer />).
No Clutter: <></> are fragments. In React, these fragments let you group your child elements together without creating extra, useless <div> tags inside your final HTML markup.

2 Reusable Components & Props

jsx

import travelImg from "./assets/travel.png"

{props.Setup && <p>{props.Setup}</p>}

Dynamic Utility: Props let you reuse the same component multiple times with different data. You can design one single card layout, and pass different data into it wherever and whenever you want.
Reusability: Props turn hardcoded layout blocks into completely reusable assets.
Static Assets: You can directly import your assets (like images) right into your components and reuse them across your app easily.
Safe Rendering: Using the {props.Setup && <p>{props.Setup}</p>} conditional logic protects your UI. If a specific data piece is missing from the database, React skips the tag instead of throwing an error.

3 Props, Array Mapping & Spreading

jsx

export default function App() { 
  const travel = data.map((datas) => { 
    return ( 
      <Entry 
        key={datas.id} 
        {...datas} 
      /> 
    ); 
  }); 

  return (
    <> 
      <Header /> 
      {travel} 
    </>
  ); 
}

No More Hardcoding: Instead of manually writing out hardcoded text in your files, you can use the native JavaScript .map() method to pull data dynamically from an array file and render it through props.
The Spread Power Move: Using the spread method ({...datas}) directly inside your loop lets you pass properties cleanly.
How it Works: {...datas} unpacks the object. It takes all the key-value pairs inside that specific data block and automatically passes them down as individual props into your component, rendering your data instantly with minimal code boilerplate.

Summary

By using React, building web applications becomes incredibly straightforward. Passing JavaScript objects through props gives you full reusability over your custom components, completely changing how you manage data templates. Ultimately, React eliminates the manual copy-paste grind and makes life so much easier for developers building modern web apps.

Participate in These 15 Open-Source Events During Hacktoberfest and Win Exciting Swag 🎁

Mohammad Shahzeb Alam — Thu, 09 Oct 2025 10:43:58 +0000

What’s Hacktoberfest

It’s a month long Open-Source Event Organized by DigitalOcean where you can contribute to Open-Source throughout the October month whether you are Seasoned Contributor or Regular Contributor you can come and Contribute to Open-Source Whether you are a Programmer or not a Programmer you can Contribute to many cool Projects out There.

Here’s How you can Participate

Register on Hactoberfest Website
Find Repos With “Hacktoberfest” tag laballed
Make 6 Valid Contributions before 31st October
There’s a Website for good-first-issue where you can find begginer’s level issues to contribute to

Rewards:

Get 6 PR Merged the first 10,000 Contributors will get a Hacktoberfest T-shirt
After 6 PR Merged a Tree will be planted on your Name

It’s a great time to start your Open-Source journey in these Month Who Knows you will become a long-term Contributor

1. Hyperswitch Hacktoberfest

HyperSwitch is an open-source payment switch by Juspay that lets developers connect multiple payment gateways through one simple API. It helps make online payments faster, smarter, and more reliable. A perfect Hacktoberfest project if you’re curious about fintech and backend systems.

How to Participate

Go to thier Hacktoberfest page
Find the options to Contribute to
Go to github and find “Hacktoberfest” tag Laballed issues to Contribute

Rewards:

1 PR Merged Will get a T-shirt
3+ PR Merged Will get T-shirt and Hoodie

Contribute to HyperSwitch this Hacktoberfest and dive into the world of payments! It’s a great way to learn how modern fintech systems connect and power global transactions.

2. dodopayments Hacktoberfest

Dodo Payments helps businesses accept payments worldwide with one simple integration. It’s open, developer-friendly, and perfect for anyone who wants to explore fintech projects this Hacktoberfest.

How to Participate

Go to their Hacktoberfest page
Pick the Repo according to your Skills in the page
Go to github and find “Hacktoberfest” tag Laballed issues to Contribute

Rewards:

Major Contributors will recieve a swag pack T-shirt, Caps & Stickers
you will also get to mention in their Hall of Fame and get shout-outs across their Socials

Join Dodo Payments this Hacktoberfest to explore how global payments work. Contribute to docs, SDKs, or integrations and learn how fintech systems come together behind the scenes!

3. Appwrite Hacktoberfest Hackathon

Appwrite is hosting a fun Hacktoberfest-themed hackathon this October You can build anything a web app, mobile app, game, or something totally new. It’s all about fresh ideas, learning, and creating cool projects from scratch with Appwrite.

How to Participate

Register with your github account
Teams can have 1 member only
Build and deploy a project from scratch using Appwrite Cloud
Add project submission to these site

Rewards:

Top 5 Projects will recieve a Appwrite Swag kit
Swag kit includes Customized hoodie, T-shirt, Mouse pad, and Stickers

Join the Appwrite Hacktoberfest Hackathon and build something from scratch a web app, mobile app, or even a game. It’s all about fresh ideas, learning, and having fun creating with Appwrite!

4. CopilotKit Hacktoberfest

CopilotKit lets you easily add your own AI copilot to any app — like giving your users a built-in ChatGPT that understands your product. It’s open source, beginner-friendly, and a great project to explore this Hacktoberfest if you love building with AI.

How to Participate

Go t their Hactoberfest page
Project Setup - go to CONTRIBUTION.md to get started
Pick a Issue in github with “Hacktoberfest” tag Laballed
Open a PR after Completing the task
Post on X with @CopilotKit + #CopilotKitHacktoberfest - top liked Projects win

Rewards:

Every Merged PR will get a CopilotKit Hacktoberfest Certificate
Top 5 Projects by Twitter likes will win Copilotkit Swag

This Swag is from 2024 Hacktoberfest. Build your own AI copilot with CopilotKit this Hacktoberfest! It’s a fun way to explore AI integrations and create something truly interactive. Ready to start building?

5. Cloudinary Hacktoberfest

Cloudinary makes it super easy to upload, manage, and optimize images and videos for the web. They’re joining Hacktoberfest to welcome contributors to improve docs, demos, and SDKs - perfect if you love working with media and web projects.

How to Participate

Go to their Hacktoberfest page
There a lots of Repos choose the repos according to yours
Go to the repos and read the CONTRIBUTING guide
Pick a Issue in github with “Hacktoberfest” tag Laballed
Make a meaningful contributions don’t spam

Rewards:

30 swag kits for contributors based on first-come, first-served basis
Swag kit includes -
1 Cloudinary Hacktoberfest T-shirt
2 Cloudinary Hacktoberfest Stickers, 3 Cloudinary Stickers
1 Cloudinary Unicorn

Join Cloudinary this Hacktoberfest to explore how images and videos power the web. It’s a great chance to improve docs, demos, and tools while learning about media optimization!

6. Goose Hacktoberfest

Goose is an open-source AI agent that runs locally on your machine. It can edit files, run commands, integrate with APIs - basically automating parts of your dev workflow. Ideal for anyone curious about AI agents and wants to build cool tooling during Hacktoberfest.

How to Participate

Go to their Hacktoberfest Project Hub page
Pick the one of the issue to contribute to
You can only work on one issue at a time
You can directly assign the issue by yourself just comment .take in the issue
You can check leaderboard in these leaderboard page

Rewards:

Rewards on the basis of Points System
The More Points you have the more swag you are going to take home
Top 5 - Will get $100 gift card of their goose swag shop and $100 of LLM credits!
Top 6-10 - Will get $50 gift card of their goose swag shop and $50 of LLM credits!
Top 11-20: $25 of LLM credits!

Try out Goose this Hacktoberfest! It’s all about building local AI agents that can automate your dev tasks. Fun, hands-on, and perfect for anyone curious about AI + coding.

7. Flexprice Hacktoberfest

Flexprice is an open-source billing/usage-tracking tool made for AI and API-based teams. It helps you do things like charge by usage, give promo credits, control feature access — without building your own billing system. Great for anyone who hates spending too much time wrangling invoicing or pricing logic.

How to Participate

Join their Slack community and go to Hacktoberfest announcement page
Go to the repo and read the CONTRIBUTING guide
Pick the issue in github with with “Hacktoberfest” tag Laballed
Comment on issue “I’m on it”
Open a PR that passes checks & follows the template

Rewards:

Top 5 Contributors will get flexprice swag pack
Shoutout on our X, LinkedIn & Slack community

Join Flexprice this Hacktoberfest to explore how usage-based billing really works. It’s a great pick if you’re into APIs, SaaS, or building cool backend tools. Ready to contribute?

8. Robo.js Hacktoberfest

Robo.js is a framework for building Discord Bots, Discord Activities, and Web Apps—with batteries included. It streamlines your workflow via plugins, sensible defaults, and a smooth DX so you can ship faster.How to Participate

How to Participate

Go to Their announcement page
You can contribute by making Plugins, Video Content, Feature for Framework
Pick the issue in github with with “Hacktoberfest” tag Laballed
They have points system the more point you earn the swag will be yours

Rewards:

Top 3 contributors will recieve Robo.js Hacktoberfest 2025 T‑Shirt
For every meaningful contributions will get Free Discord Nitro
Alternative for top contributors will recieve $25 USD
The more number of contributors the more rewards will be stretch

This Swag is from 2023 Hacktoberfest Get creative with Robo.js this Hacktoberfest! Build smart automations, try out new ideas, and have fun bringing little coding bots to life. Ready to roll?

9. iTop Hacktoberfest

iTop is an open-source tool that helps teams manage IT assets and support tickets. It’s great for anyone curious about IT systems — plus, there are beginner-friendly doc and translation issues for Hacktoberfest!

How to Participate

This is Their official announcement page
The link of their full list of repos
Choose the project you’d like to contribute for
Create a Pull Request of the issue

Rewards:

iTop Hacktoberfest stickers
iTop insulated bottle after reaching 3 valid PRs
Combodo offers voucher for extensions for best contributor with 6 accepted PRs

This Hacktoberfest, give iTop a try! It’s a great way to explore how IT teams actually manage their systems and you’ll pick up some real-world skills along the way. Ready to jump in?

10. Ballerina Hacktoberfest

Ballerina is an open-source language for building cloud apps and APIs. It’s easy to learn and fun to explore during Hacktoberfest.

How to Participate

This is Their official announcement page
You can contribute both code & non-code contributions
Explore and pick the issues on their github page
Submit a PR on the issue you are working on
For non-code contributions publish your work & submit the URL here

Rewards:

Top Contributors Will recieve Amazon voucher according to credits you earn
A Swag pack for top contributors
Free vouchers for WSO2 & Certifications
USD $1000 worth credits for WSO2

Build something cool with Ballerina this Hacktoberfest! It’s simple to pick up and a fun way to explore cloud and API development. Ready to give it a shot?

11 Lamatic.ai Hacktoberfest

Lamatic.ai helps you build AI agents that can automate tasks and connect with your tools. It’s open-source and a fun pick if you want to tinker with AI projects this Hacktoberfest.

How to Participate

Make 4 valid PRs to any of the three repositories.
PRs must be valid and follow project guidelines.
Add hacktoberfest tag to PR title or description.
This is their official announcement page

Rewards:

Lamatic swag,T-shirt, stickers for active contributors
Top contributors will be featured on our Contributors Hall of Fame
Community spotlight for outstanding contributions

Try out Lamatic.ai this Hacktoberfest! It’s a fun way to experiment with AI agents and automation while making real open-source contributions. Ready to build something smart?

12. ServiceNow Hacktoberfest

ServiceNow is a platform that helps companies manage workflows — from IT support to HR tasks — all in one place. It’s a good project to explore if you’re into automation and enterprise tools.

How to Participate

You need to complete 6 PRs of main “Hacktoberfest” event
You need to Post a comment on this blog post detailing your contributions and sharing your experience
You will need a ServiceNow community account to comment register here

Rewards:

Contributors will recieve ServiceNow merch store codes. You can pick CreatorCon T-shirts & Other miscellaneous ServiceNow merch
Contributors will recieve a Community Badge

This Swag is from 2024. Join ServiceNow this Hacktoberfest to explore how automation powers real-world workflows. It’s a great way to learn, build, and contribute to something that helps teams work smarter!

13. QuestDB Hacktoberfest

QuestDB is an open-source database built for speed — perfect for handling real-time data and analytics. Great pick if you’re into performance, data, or backend projects this Hacktoberfest.

How to Participate

Contribute to open issues at one of the three participating repositories:
QuestDB Core
Web Console
Documentation
Pick the issue in github with with “Hacktoberfest” tag Laballed

Rewards:

T-shirts and Stickers for every contributor successfully contributed

Dive into QuestDB this Hacktoberfest! It’s perfect if you love speed, data, and building tools that handle real-time information. Ready to contribute?

14 devICT Hacktoberfest

devICT is a friendly developer community that runs open-source projects, meetups, and events. It’s a great place to learn, contribute, and connect with other devs during Hacktoberfest.

How to Participate

You need to make two pull requests to qualifying Wichita projects
Projects include devICT, Groover Labs, Lake Afton Public Observatory, MakeICT
Read their CONTRIBUTING guide
Pick the issue in github with with “Hacktoberfest” tag Laballed

Rewards:

Stickers for every contributors

15. LambdaTest Hacktoberfest

LambdaTest is a cloud platform that lets you test websites and apps across different browsers and devices. It’s a great pick for Hacktoberfest if you’re into QA, automation, or web development.

How to Participate

You need Have 3+ merged PRs into a LambdaTest project
You can start contributing by fixing bugs, improving documentation, or adding features.
Pick the issue in github with with “Hacktoberfest” tag Laballed
You need to submit your PRs

Rewards:

After 3 Contributions – Amazon Vouchers (up to $10) and a LambdaTest License (90 days).
After 5 Contributions or More – Amazon Vouchers (up to $20) and a LambdaTest License (90 days).

What’s Next ?

I have curated these 15 amazing open-source events you can contribute thus october!

Now it’s time to get started. Pick an event, dive in, and let’s make this Hacktober one to remember! 🎉

Which Open-source events you are most excited about?

I’d love to hear what you’re planning to dive into—drop a comment below and let me know!👇

Thanks For Reading These Article ❤️ and Also Share Your Thoughts in The Comments ☺️

Top Ubuntu Terminal Commands You Should Know

Mohammad Shahzeb Alam — Fri, 29 Aug 2025 19:44:09 +0000

Introduction

The Ubuntu Terminal make use of a Shell Program to Interpret and Execute Commands. Bash(Bourne Again Shell) is the Default and Most Commonly Used Shell in Ubuntu. If you Just Started Using Linux Ubuntu the Terminal Might Look Scary at First But It’s Not Scary Its The Best Thing In the Ubuntu.So Ubuntu Terminal gives Full Control of the System Helps you Work Faster.

Most Commonly Used Commands

There are Lots Commands In Ubuntu Terminal but We Will Discover the Most Commoonly Used Commands

pwd - Shows the current directory you are in

ls - List files and Folders in your directory

cd - Move between directories

mkdir - Make a new folder

touch – Create a new file

cp – Copy files or directories

mv – Move or rename files

rm – Delete files

sudo – Run commands as an admin

df -h – Check disk space

top – See running processes

clear - It will clear the terminal
exit - Close the terminal session

So, Learning Basics Commands Make you more Productive

Thanks For Reading These Article ❤️ and Also Share Your Thoughts in The Comments ☺️

Simple Guide to Setting Up Git and GitHub

Mohammad Shahzeb Alam — Wed, 27 Aug 2025 20:39:35 +0000

Introduction

Git is a Version Control System. It is a Tool that keep Track of your Code if you Changes Anything Git Will Recognise it Immediately and Change it Accordingly.

Github is a Online Hosting Service of your Git Repo. In Simple Word its a Cloud For Developers like you Store your Data in Cloud as Same Github Does for Us to Keep Track of Our Code and Collaborate With Others its Easy using Github.

Installation

If you are Using Windows

Go to Site git-scm.com
Download According to your OS
After Downloading Install Git
After Completing Installation Open Command Prompt In your System and Paste These Command

git --version

If you See a Version, Then Git Is Installed Successfully ✅

If you are Using MacOS or Linux Then Follow These

Open Terminal In your System
Then Copy these Commands and Paste it in your Terminal and Run

sudo apt update
sudo apt install git

After Installation Completed then Paste These Command

git --version

If you See a Version, Then Git Is Installed Successfully ✅

Making A Github Account

Go to These Site github.com
Now Sign Up Using your Details
Now Setup Everthing In Github

Your Github Account is Ready to use Now

Setting Up Git

Open your Terminal again
Now Configure your Git With Github Account

git config --global user.name "Your Name"
git config --global user.email "your@email.com"

Creating a First Repo

Open github.com
Now go to The Repositories Section
Click New Repo
Add Name of Repository

Click On Create Repository
Now It Will Show Like These

Now Open your Code Editor and Copy Paste These Commands

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your_github_username/Project.git
git push -u origin main

Pro Tip Always Use add . It Will add All Files of your Project

Congrats 🎉 now your project is live on GitHub!

Common Commands of Git

git status - Check changes
git log - See commit history
git pull - Get latest updates
git push - Upload changes

Git & Github Is The Main Foundation of Open Source Collabaration

Thanks For Reading These Article ❤️ and Also Share Your Thoughts in The Comments ☺️

Deploy Your Web Application on Vercel Quickly

Mohammad Shahzeb Alam — Tue, 26 Aug 2025 19:43:19 +0000

🚀 Deploy Your Web Application on Vercel Quickly

If you’ve just built your first project with React, Next.js, or even plain HTML/CSS/JS, the next exciting step is getting it live on the internet. That’s where Vercel comes in. It’s one of the easiest and fastest platforms to deploy web apps no complicated setup, no extra servers, and free hosting for hobby projects.

Step 1

Go to vercel.com
Create a Account On Vercel
Sign Up With your Github Account and Intergrate With it

Step 2

Push your Code to The Github If you Have’nt
If you Have’nt Pushed the Code to Github Then Copy These Commands and Push your Project

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/project-name.git
git push -u origin main

It Will Show you Like These In your Github Repo According to your Project

Step 3

Now Go to The vercel.com Website
Go to your Dashboard
on Vercel Dashboard, Click New Project
Now Choose your Github Repo
Vercel Will Auto-Detect your FrameWork you have Used in your Project
Now Click On Deploy

Step 4

Within a Seconds, Verel Will Deploy your Project
You will get a URL of your App like These
You can Also Choose your own Custom Domain if you Want

https://your-app.vercel.app

🎉 Congratulations! Your project is now live.

Why Vercel ▲

Free Hosting With SSL
Automatic Deployement From Github
Perfect For Frontend Apps, React, Next.JS

✅ And that’s it you’ve deployed your app on Vercel in just a few clicks

Thanks For Reading My Article ❤️ and Also Share Your Thoughts in The Comments ☺️

Setting Up a React Project with Vite Simplified ⚛︎

Mohammad Shahzeb Alam — Mon, 25 Aug 2025 19:03:35 +0000

Introduction

Vite is a Frontend Tool. It gives you a Pre ready Structured Folder and Files with all Dependencies Installed. Why Most of The Developers Prefers it Over CRA(Create React App) Cause It Gives Structured Folder Within a Seconds You Don’t Need to Manually Create Folders and Files and Install all The Dependencies and Also Don’t Have to Integrate The Packages of React And Babel .

Benefits of Using Vite

Lighting Fast Dev Server
Minimal Configuration
Moder Build System
Smaller & cleaner project structure

Prerequisites

Node.js Installed
Basic Understanding of React
Code Editor

Now Setting Up Project

First Open Terminal In your VS Code and Then Type These Command

npm create vite@latest my-vite-app

Now It Show You Bunch of Frameworks Choose React With JavaScript or TypeScript

cd my-vite-app
npm install

It Will Navigate to your Project Folder and Install all Dependencies Which Is Required For your Project

npm run dev

It Will Start The Dev server you Can Press CTRL and Click on The LocalHost It Will Open In Browser

👉 Boom! Your React app is live at http://localhost:5173/

Understanding The Structure Of Folder

index.html at root.
src/ - main React code.
main.jsx (entry point).
App.jsx (root component).

Thats All You Can Now Make Your Project As Per yours. I Recommend Always Use These Kind Of Tool To Accelarate Your Productivity. Vite is One Of Them The New Era Of Frontend Developement

Thanks For Reading My Article ❤️ and Also Share Your Thoughts in The Comments ☺️

React Basics: An Introduction for Beginners

Mohammad Shahzeb Alam — Sun, 24 Aug 2025 17:23:20 +0000

What Is React ⚛︎

React is JavaScript Library Used For Building Web Apps. It Was Created by Meta In 2013

Why React ⚛︎

React is Fast and Efficient For Web Apps
Huge Ecosystem and Community
Its Easy to Learn If you Know JavaScript
You don’t Have to Write Markup in HTML File You Can Write in JSX File
Its Composable - Which Can Create Reuable and Interchangeable For Web Apps It Can Create Complex Systems

React is Declarative

Declarative What does That Means Actually let’s First Understand Imperative

Imperative - Its Means How to Do Something let’s Understand From an Example If you go to Restaurant and You Tell The Manager That there is a table In the Corner Go Check the Table And Book it For Me.

Declarative - its Means Just Tell Something It Will Work You Don’t Gonna Know How These Work is Done So, again Lets Understand These Through an Similar Example Suppose if You Go to a Restaurant then Directly Tell The Manager to Book The Table For You You Don’t Know How The Work is Going on Under The Hood So Same Works In React You Just Tell The React To Make These Happen and It Will Happen You Don’t Know What Compexity is Going On Under The Hood .

Let’s Learn Now How To Code In React From Basics

in HTML If You Want To Show Hello World in div How You Gonna Make It Like These

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h1>Hello World</h1>
    </div>
</body>
</html>

In Your Browser It Will Look Like These Inside Div Hello World Is there

But using JavaScript You Can Write These Like These

const h1 = document.createElement("h1")
h1.textContent = "Hello World"
h1.className = "header"
document.getElementById("root").append(h1)

But In React

You Have to Attach src in HTML File To Use React Like These

 <!-- React and ReactDOM from unpkg -->
 <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
 <!-- Babel compiler (so you can write JSX directly in the browser) -->
 <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

In These Script Tag React DOM Is Doing The rendering Work Taking Your Component From React and Change Into JavaScript

Another Script Tag Babel Its Reloads The Browser After Bundling Your Files

Now You Can Write Like These

import { createRoot } from "react-dom/client"

const root = createRoot(document.getElementById("root"))
root.render(
<h1>Hello World</h1>
)

So Basically These is The Basic Way Of Doing The Same Usinge createRoot You Can Select The root Element From The div Inside The HTML.

render Means appending The Element in The div

There are More Ways of Doing These But These is the Basics Of React If you are Starting to Learn React

This Is It I Have Tried To Cover The Basics React

Thanks For Reading My Article ❤️ and Also Share Your Thoughts in The Comments ☺️

Must-Have VS Code Extensions for Developers 🛠️

Mohammad Shahzeb Alam — Thu, 21 Aug 2025 19:24:27 +0000

Why Extensions

Without extensions, VS Code is just a text editor. Extensions Supercharges Your Productivity. With extensions, it becomes a super editor

There Are Lots Of Extensions In The Market Which Make You More Productive

Productivity & Workflow

Tabnine / GitHub Copilot - AI code completion.
CodeSnap - Take beautiful code screenshots for sharing

Code Quality & Linting

ESLint - Keeps JavaScript/TypeScript code clean.
Prettier - Automatic code formatting.

Styling & UI Enhancements

Material Icon Theme - Adds icons for files/folders.
Dracula Official - Themes for VS Code

Debugging & Testing

Debugger for Chrome (Frontend debugging).
Thunder Client - For testing APIs directly in your VS Code

DEV Community: Mohammad Shahzeb Alam

From useEffect to TanStack Query: What Changed My Perspective

2. The Experiment

Project 1 — Meme Generator

Project 2 — Movie Search App

3. What Actually Surprised Me

Discovery #1 — Less Boilerplate, More Focus

Discovery #2 — Caching Finally Clicked

Discovery #3 — The Pattern Stayed Consistent

4. What TanStack Query Didn't Replace

5. When I'd Still Use useEffect

6. Looking Back

What I Learned Integrating AI Into My React App

What I Was Building

Getting a Hugging Face Access Token

Setting Up the Environment Variable

Connecting the Model

HfInference

SYSTEM_PROMPT

ingredientsArr.join(", ")

chatCompletion()

Returning the recipe

The Response Was Markdown

Final Thoughts

When Props Started Getting Messy: Learning React Context API

When Props Started Getting Messy

Then I Learned Context API

When I Would Still Use Props

Final Takeaway

React Dynamic Web Apps & Clean Form States

The Problem

What Surprised Me

Before entering four ingredients

After entering four ingredients

What I Learned

Final Thoughts

Stop Writing Massive, Single-Page Codebases A Raw Look at React Components: and Props

Participate in These 15 Open-Source Events During Hacktoberfest and Win Exciting Swag 🎁

What’s Hacktoberfest

Here’s How you can Participate

Rewards:

1. Hyperswitch Hacktoberfest

How to Participate

Rewards:

2. dodopayments Hacktoberfest

How to Participate

Rewards:

3. Appwrite Hacktoberfest Hackathon

How to Participate

Rewards:

4. CopilotKit Hacktoberfest

How to Participate

Rewards:

5. Cloudinary Hacktoberfest

How to Participate

Rewards:

6. Goose Hacktoberfest

How to Participate

Rewards:

7. Flexprice Hacktoberfest

How to Participate

Rewards:

8. Robo.js Hacktoberfest

How to Participate

Rewards:

9. iTop Hacktoberfest

How to Participate

Rewards:

10. Ballerina Hacktoberfest

How to Participate

Rewards:

11 Lamatic.ai Hacktoberfest

How to Participate

Rewards:

12. ServiceNow Hacktoberfest

How to Participate

Rewards:

13. QuestDB Hacktoberfest

How to Participate

Rewards:

5. When I'd Still Use `useEffect`

`HfInference`

`SYSTEM_PROMPT`

`ingredientsArr.join(", ")`

`chatCompletion()`