Forem: Mohammed jobair Hossain

🚀 AI Prompts for Modern Web Development

Mohammed jobair Hossain — Fri, 10 Apr 2026 14:44:13 +0000

🐛 Debugging & Error Handling

Skip manual searching for cryptic errors.

Standard:

Why am I getting this error in my React component?
[insert error message + relevant code block]

Edge Case:

I'm getting a hydration error in Next.js 13 when using useEffect.
Here's the component, how can I fix it?

🎨 UI Component Scaffolding

Generate accessible and reusable UI components.

Standard UI:

Create a reusable React component for a dropdown menu with support
for keyboard navigation and accessibility. Use Tailwind CSS for styling.

Quick Layout:

Give me a React component for a tab layout using Tailwind.

✍️ Contextual UX Content

Replace Lorem Ipsum with meaningful product content.

Pricing Copy:

Write placeholder text for a pricing section with 3 plans:
Free, Pro, and Enterprise. Keep it short and product-focused.

Social Proof:

Give me 5 example user testimonials for a productivity SaaS app.

🧠 Technical Concepts & Logic

Understand frameworks and architecture faster.

Comparison:

What's the difference between useMemo and useCallback in React?
Give examples.

Architecture:

How does Next.js handle server-side props in App Router?

🧹 Code Quality & Refactoring

Improve readability and reduce technical debt.

Structure:

Refactor this React component for better readability
and separation of concerns.

Clean Code:

Rewrite this function with early returns and type safety in mind.

⚙️ Workflow Automation

Automate repetitive development tasks.

Commit Messages:

Write a concise commit message for this change:

- Refactored useEffect logic in Dashboard
- Fixed loading state bug
- Added fallback UI

🧩 Component Generation

Go from a vague idea to a production-ready component.

Basic Prompt:

Create a responsive login component in React.

Better Prompt (Recommended):

Create a responsive login form using React + Tailwind.

Requirements:
- Email + password fields
- Real-time validation
- Loading state for submit
- "Remember me" checkbox
- Accessible labels
- TypeScript
- Keep component under 120 lines

🔌 API Integration

Generate typed API layers and hooks from raw data.

Generate TypeScript types from this JSON.

Then create:
- api/users.ts for API calls
- useUsers() React hook with loading + error states
- Abort controller for cleanup

🔄 Refactoring

Systematically improve existing code.

Refactor this component:

- Convert to a React Server Component (if possible)
- Reduce unnecessary re-renders
- Improve readability
- Use meaningful variable names
- Extract repeated logic
- Preserve existing functionality

📱 UI/UX Improvement

Improve responsiveness and accessibility in one pass.

Responsiveness:

Improve responsiveness using Tailwind:
- Add sm/md/lg breakpoints
- Add spacing for better visual hierarchy
- Improve alignment and readability
- Add skeleton UI for loading states

Accessibility:

Improve accessibility:
- Add ARIA labels
- Keyboard navigation support
- Focus outlines

🎯 Tailwind & Styling

Clean up and optimize your utility classes.

Optimize Tailwind:

Optimize the Tailwind classes for readability.
Group related classes and remove redundant ones.

Convert CSS → Tailwind:

Convert this CSS file into Tailwind utility classes.

🗂️ Multi-File Feature Prompting

Scaffold entire features across multiple files.

Example — Notifications Feature:

Create a Notifications feature using TypeScript.

Files:
1. components/NotificationIcon.tsx
2. components/NotificationList.tsx
3. store/notifications.ts (Zustand)
4. services/notifications.ts
5. hooks/useNotifications.ts

Requirements:
- Mark as read
- Optimistic UI
- Real-time updates
- Accessible UI

🧪 Advanced Debugging

Get root cause analysis and multiple fix options.

Here is the error and the file.

1. Explain the root cause.
2. Propose 2 possible fixes.
3. Give me the corrected final code.

🏗️ End-to-End Feature Prompting

Build complete, production-ready features in a single prompt.

Example — User Profile Feature:

Build a complete User Profile feature.

Include:
- ProfileView page
- EditProfile form
- API service
- useProfile hook
- Validation schema
- Responsive layout
- Skeleton UI for loading
- Error boundary

Stack: React, TypeScript, Tailwind

🧰 Universal Prompt Template

A reusable structure for any AI coding task.

[Task]
What you want to build or solve

[Tech Stack]
React / Angular / Next.js / Tailwind / TypeScript

[Requirements]
- Clear bullet points
- Constraints (performance, readability, line limits)
- Styling (responsive, spacing, accessibility)
- Behavior (loading, errors, state)

[Input Code]
Paste relevant code (if any)

[Output Format]
Define expected output (files, components, structure)

💡 Tips for Better Prompts

Be specific — the more context you give, the better the output.
Define constraints — line limits, file structure, and tech stack all help narrow the scope.
Specify behavior — always mention loading states, error handling, and edge cases.
Iterate — treat AI output as a first draft; refine with follow-up prompts.

Built for developers working with React, Next.js, TypeScript, and Tailwind CSS.

Building an Express API with Logging and Rate Limiting

Mohammed jobair Hossain — Mon, 11 Aug 2025 15:41:37 +0000

When building an API, two important things often get overlooked by beginners: logging and rate limiting.
In this blog, we’ll explore why they matter, and how to add them to a Node.js Express server.

1. Why Logging Matters

Logging is like your app’s diary — it keeps track of important events, errors, and activity happening in your application.

In production, logs can help you:

Debug issues quickly.
Track suspicious activity.
Monitor server performance.

const { createLogger, format, transports } = require("winston");

const logger = createLogger({
  level: "info",
  format: format.combine(
    format.timestamp(),
    format.printf(({ level, message, timestamp }) => {
      return `${timestamp} [${level.toUpperCase()}]: ${message}`;
    })
  ),
  transports: [
    new transports.Console(),
    new transports.File({ filename: "logs/server.log" })
  ]
});

module.exports = logger;

2. Why Rate Limiting Matters

Rate limiting prevents a single user (or bot) from overwhelming your server with too many requests.

It helps protect against:

Brute force attacks
DDoS (Distributed Denial-of-Service) attempts
Server overload

const rateLimit = require("express-rate-limit");
const logger = require("./logger");

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  limit: 10, // Max 10 requests per IP
  standardHeaders: true,
  legacyHeaders: false,
  handler: (req, res) => {
    logger.info(`Rate limit exceeded for IP: ${req.ip}`);
    res.status(429).send({
      error: "Too many requests, please try again later.",
      rateLimit: {
        limit: 10,
        remaining: 0,
        resetTime: new Date(Date.now() + 15 * 60 * 1000).toISOString()
      }
    });
  }
});

module.exports = limiter;

📌 This allows 10 requests per IP every 15 minutes. When the limit is exceeded, it logs the IP and returns a 429 error.

3. Putting It All Together

We’ll build a small Express server that uses both logging and rate limiting.

const express = require("express");
const limiter = require("./limiter");
const logger = require("./logger");

const app = express();

// Apply rate limiter to all routes
app.use(limiter);

// Basic route
app.get("/", (req, res) => {
  logger.info(`Request to / from IP: ${req.ip}`);
  res.send("Hello, World!");
});

// Start server
const PORT = 3000;
app.listen(PORT, () => {
  logger.info(`Server is running on http://localhost:${PORT}`);
});

🔍 Data Cleaning Techniques Using SQL

Mohammed jobair Hossain — Mon, 21 Apr 2025 03:57:09 +0000

Data cleaning is a critical step in the data preparation process. Whether it is analytics, business intelligence, or data engineering, clean data ensures more precise and reliable insights.

1️⃣ Convert Text to Lower/Upper Case
Ensure consistency in categorical fields like names or categories.

-- Convert to lowercase
SELECT LOWER(column_name) AS cleaned_column FROM table_name;

-- Convert to uppercase
SELECT UPPER(column_name) AS cleaned_column FROM table_name;

2️⃣ Remove Extra Spaces from Text Fields Trim leading/trailing spaces using TRIM()

SELECT TRIM(column_name) AS cleaned_column FROM table_name;

3️⃣ Convert Date Strings to a Consistent Format
Transform text-based dates into a usable date format:

SELECT STR_TO_DATE(column_name, '%m/%d/%Y') AS formatted_date FROM table_name;

4️⃣Identify & Manage Outliers

Filter numeric values within a defined range:

SELECT * FROM table_name 
WHERE column_name BETWEEN lower_limit AND upper_limit;

5️⃣ Remove Special Characters

Strip out unwanted symbols using regular expressions:

SELECT REGEXP_REPLACE(column_name, '[^a-zA-Z0-9 ]', '') AS cleaned_column 
FROM table_name;

6️⃣ Standardize Categorical Values

Unify inconsistent text representations:

UPDATE table_name
SET column_name = 'Male'
WHERE column_name IN ('M', 'male');

7️⃣ Replace NULLs with Default Values

SELECT COALESCE(column_name, 'DefaultValue') AS column_name 
FROM table_name;

8️⃣ Delete Duplicate Rows

WITH CTE AS (
    SELECT *,
           ROW_NUMBER() OVER (PARTITION BY column1, column2 ORDER BY id) AS row_num
    FROM table_name
)
DELETE FROM table_name
WHERE id IN (
    SELECT id FROM CTE WHERE row_num > 1
);

💡 Clean data = better insights.
SQL makes it easy to standardize, validate, and transform your data—right where it lives.

If you found this helpful, feel free to share or drop a comment with your favorite data cleaning tip! 💬

Releases New Tools

Mohammed jobair Hossain — Mon, 24 Jun 2024 07:02:39 +0000

htmx 2.0

This release ends support for Internet Explorer and tightens up some defaults, but does not change most of the core functionality or the core API of the library.
Electron 31
It includes upgrades to Chromium 126.0.6478.36, V8 12.6, and Node 20.14.0.
Relay 17
Improved correctness checking and validation; Additional editor features; Experimental features exploring error handling and nullability
ESLint 9.5
This release adds some new features and fixes several bugs found in the previous release.
Serverless Framework v4
With Serverless Framework V.4, they've significantly accelerated innovation while avoiding breaking changes

Latest JavaScript Tool Releases: PM2 5.4, Melange 4.0, Neutralinojs 5.2, and More!

Mohammed jobair Hossain — Thu, 06 Jun 2024 05:10:04 +0000

✅ ReleasesKnip 5.17.0 – Finds and removes unused files, dependencies and exports. Now with more.
✅ PM2 5.4 – Popular Node.js-based process manager for production.
✅ Melange 4.0 – OCaml compiler for JavaScript developers.
✅ Neutralinojs 5.2 – Lightweight cross-platform desktop app framework.
✅ Billboard.js 3.12 – The popular chart library gets funnel charts.
✅ Peaks.js 3.4 – BBC-created audio waveform UI component.
✅ Happy DOM 14.12 – JS implementation of a web browser sans UI.
✅ Retire.js 5.0 – Scans for JS libraries with known vulnerabilities.
✅ React Native Boilerplate 4.2 – A starter template for RN apps.
✅ RE:DOM 4.1 – Tiny library for creating user interfaces.
✅ AlaSQL.js 4.4 – Isomorphic JavaScript SQL database.
✅ is-what 5.0 – Simple, small JS type check functions.
✅ FxTS 1.0 – Functional programming library.