Muhammad Athar

Muhammad Athar is the founder and engineer behind DesignDev.io. With a background in full-stack development, he built and runs the platform the other writers publish on — which means he's usually the first person to actually implement everything they cover. His articles fill the gaps: the concepts that appear without explanation in advanced tutorials, the "wait, what does that actually do?" moments that intermediate developers hit when reading senior-level content. If Alex Chen writes the pattern and you want to understand the primitive underneath it, Muhammad's article is the next one to read.

12 posts

Posts by this author

Sort by:

Publishing Your First React Component to npm — the Complete Setup

Most tutorials stop at "it works on my machine." This one doesn't. Publishing to npm is where your library becomes real — installable, versioned, and usable by anyone. Here's the complete setup, including the fields most developers get wrong in package.json and how to inspect what you're actually shipping before it goes live.

How to structure a UI library that scales — folders, exports, and naming conventions

The folder structure you pick on day one is the one you'll live with across 40 components. Get it wrong and you'll be fighting your own codebase by article 10. Get it right and adding a new component takes five minutes and follows a pattern every contributor can learn in one sitting.

Setting Up a React Component Library with Vite, TypeScript, and Tailwind v4

Before you write a single component, the project needs to be set up correctly — or you'll be fighting the build config the entire series. This article covers everything: Vite in library mode, TypeScript strict config, Tailwind v4, CVA, and a working entry point you can build and inspect.

Why I'm Building My Own React UI Library — and Why You Should Too

Most developers have installed shadcn/ui or MUI, grabbed the components they needed, and moved on. That works — until it doesn't. This series is about building a React UI library from scratch, shipping it to npm, and actually understanding what you've built.

The Testing Pyramid: What Is It Really?

If you've been reading Mira Halsted's testing series and kept seeing references to "the testing pyramid" and "test budget" without a clear picture of what they actually mean in a real project — this is that picture. With a real component suite you can use to see each layer in action.

Server State Management and How TanStack Query Fits In

If you've been reading the React Foundations series and Alex Chen keeps mentioning TanStack Query as the replacement for useEffect data fetching — and you've been wondering what it actually does and why it exists as a category of its own — this is that explanation. With a real user profile card you can build today.

React.memo, What Is It Actually Doing?

If you've been reading the React Foundations series and seen React.memo appear in performance-related articles without a clear explanation of what it actually wraps and why — this is that explanation. With a real notification feed component you can build today.

useRef: The Hook That Remembers Without Re-Rendering

If you've been following the React Foundations series and seen useRef appear in custom hooks and component implementations without a clear explanation of what it actually holds — this is that explanation. With a real autosaving text editor widget you can build and use today.

Make Use of useMemo Like You Mean It

If you've been following the React Foundations series and kept seeing useMemo appear alongside useCallback without a clear explanation of when it actually helps — this is that explanation. With a real filterable product list you can build and use today.

Did You Know useCallback Can Actually Do This?

If you've been reading the React Foundations series and kept seeing useCallback appear in custom hooks and effect dependency arrays without a clear explanation of what it actually does — this is that explanation. With a real dropdown component you can build today.

Showing 1 - 10 of 12 posts