DEV Community: JAKER HOSSAIN

Building a Centralized Action for Large-Scale SaaS with Next.js

JAKER HOSSAIN — Thu, 04 Dec 2025 08:49:27 +0000

Learn how to implement a centralized mutation system for multi-tenant SaaS using Next.js Server Actions. Explore RBAC, multi-subdomain handling, cache revalidation, and scalable API patterns for secure, maintainable backend architecture.

A. Architecture Overview

In large SaaS projects, handling server actions individually in every module creates:

1- Code duplication
2- Inconsistent authorization checks
3- Cache invalidation issues
4 -Multi-tenant subdomain problems

The centralized mutation engine consolidates all API mutations into one reusable function. It handles authentication, authorization, shop/subdomain context, request payloads, fetch execution, and cache revalidation.

B. Core Utilities

logger – Structured logging for debugging and monitoring.

resolveModelName – Converts route names like saved-attribute → saved_attribute.

hasPermission & parseAccessRules – Implements RBAC to check if a user can perform a specific action.

getBaseUrlWithSubdomain – Resolves the correct API base URL based on the shop subdomain.

C. Authentication Handling

if (requireAuth) {
  accessToken = cookieStore.get("accessToken")?.value;
  if (!accessToken) return { message: "You are not authorized to perform this action!" };
}

-Validates JWT access token.
-Immediately stops unauthorized requests.

D. Shop / Subdomain Context

if (requireShopId) {
  subdomain = cookieStore.get("shopSubdomain")?.value;
  if (!subdomain) return { message: "Shop identifier not found!" };
}

-Supports multi-tenant SaaS using shop subdomains.
-Injects x-app-identifier for API requests.

E. Role-Based Access Control (RBAC)

const rulesRaw = cookieStore.get("accessRules")?.value;
const rules = parseAccessRules(rulesRaw);
const model = resolveModelName(route.split("/")[1]);
const action = methodToAction[method];
if (!hasPermission(rules, model, action)) return { success: false, message: "Permission denied" };

-Maps HTTP methods → CRUD actions.
-Validates permissions dynamically.
-Ensures consistent security across the SaaS.

F. Dynamic Payload Handling

let body: string | undefined = undefined;
if (method === "DELETE" && ids?.length) body = JSON.stringify({ ids });
else if (method !== "DELETE" && data) body = data;

-Supports single ID deletion, bulk deletion, and POST/PUT payloads.

G. Fetch Execution

const response = await fetch(url, { method, headers, body, cache: "no-store" });
const result = await response.json();

-Executes server-side mutations with fresh data (no-store).
-Centralizes API interaction logic.

H. Cache Revalidation

paths.forEach(path => typeof path === "string" && revalidatePath(path));
tags.forEach(tag => typeof tag === "string" && revalidateTag(tag));

-Automatically revalidates Next.js paths or tags after mutation.
-Ensures UI always reflects latest backend data.

I. Error Handling & Logging

catch (error) {
  logger(error);
  return { success: false, message: "An error occurred during the mutation." };
}

-Standardizes error handling.
-Logs all server-side errors for monitoring.

J. Benefits

Reusability – Single mutation handler for all models.
Security – Global RBAC enforcement.
Multi-Tenant Ready – Handles shop-specific subdomains.
Consistency – Unified logging, error handling, and cache revalidation.
Scalability – Easy to extend as SaaS grows.

K. Usage Example

await mutation({
  route: "/customer",
  method: "POST",
  data: JSON.stringify({ name: "John Doe" }),
  pathToRevalidate: "/customers",
  tagsToRevalidate: ["customer-list"],
});

-Handles authentication, RBAC, payload, and cache invalidation in one call.

                 ┌────────────────────┐
                 │  Client / Frontend │
                 │ (React / Next.js)  │
                 └─────────┬──────────┘
                           │
                           ▼
                 ┌────────────────────┐
                 │  Server Action Call│
                 │   mutation(params) │
                 └─────────┬──────────┘
                           │
             ┌─────────────┴─────────────┐
             │                           │
             ▼                           ▼
   ┌───────────────────┐        ┌───────────────────┐
   │  AUTHENTICATION   │        │ SHOP / SUBDOMAIN  │
   │ check JWT token   │        │ get shopidentifier│
   │ from cookies      │        │ from cookies      │
   └─────────┬─────────┘        └─────────┬─────────┘
             │                           │
             └─────────────┬─────────────┘
                           ▼
                 ┌────────────────────┐
                 │ ROLE-BASED ACCESS  │
                 │ CONTROL (RBAC)     │
                 │ hasPermission()    │
                 │ parseAccessRules() │
                 └─────────┬──────────┘
                           ▼
                 ┌────────────────────┐
                 │  Construct Headers │
                 │ - Authorization    │
                 │ - x-app-identifier │
                 └─────────┬──────────┘
                           ▼
                 ┌─────────────────────┐
                 │   Determine Payload │
                 │  - DELETE ids array │
                 │  - POST / PUT data  │
                 └─────────┬─────────  ┘
                           ▼
                 ┌────────────────────┐
                 │     FETCH Request  │
                 │   method, headers, │
                 │       body         │
                 └─────────┬──────────┘
                           ▼
                 ┌────────────────────┐
                 │  Response Handling │
                 │ - parse JSON       │
                 │ - log errors       │
                 └─────────┬──────────┘
                           ▼
             ┌─────────────┴─────────────┐
             │                           │
             ▼                           ▼
   ┌───────────────────┐        ┌──────────────────┐
   │ PATH REVALIDATION │        │ TAG REVALIDATION │
   │ revalidatePath()  │        │ revalidateTag()  │
   └─────────┬─────────┘        └────────┬─────────┘
             │                           │
             └─────────────┬─────────────┘
                           ▼
                 ┌─────────────────────┐
                 │      CLIENT UI      │
                 │  Updated with fresh │
                 │      data           │
                 └─────────────────────┘

M. Takeaways

Centralized server actions reduce boilerplate and improve maintainability.
RBAC ensures consistent security across all API mutations.
Subdomain-aware multi-tenant architecture supports SaaS scalability.
Automatic cache revalidation guarantees UI always displays fresh data.

Implementing a centralized mutation engine in a large-scale SaaS project dramatically improves code maintainability, security, and scalability. By consolidating authentication, role-based access control (RBAC), multi-tenant subdomain handling, payload management, and cache revalidation into a single server action, developers can:

-Eliminate repetitive code across multiple endpoints.

-Enforce consistent security with dynamic permission checks.

-Support multi-tenant architectures efficiently via subdomain-aware API calls.

-Ensure UI consistency by automatically revalidating Next.js paths and tags.

-Scale easily as the SaaS grows, adding new models or endpoints without breaking existing logic.

In essence, this approach creates a robust, maintainable, and secure foundation for handling server-side mutations in any complex SaaS ecosystem. It’s a best-practice architecture that balances developer efficiency, security, and performance, making your backend easier to manage and your frontend more reliable.

👨‍💻 About the Author
Name: JAKER HOSSAIN
Username: @jackfd120
Role: Senior Frontend Developer
Portfolio: https://www.poranfolio.space/

Simplifying Query Parameters in Next.js 14/15 with React Query and TypeScript

JAKER HOSSAIN — Thu, 19 Jun 2025 08:43:47 +0000

Take control of query parameters using TypeScript-powered utilities like queryExtractor, paramsExtractor, and fetchData. A real-world guide to scaling your dynamic pages in React & Next.js

📌 Overview
If you're building a modern frontend application with Next.js App Router (14/15), you’re likely dealing with query params for:

Search
Filter (price range, brand, category, color)
Sort
Pagination

This article will walk you through how to parse, build, and use query parameters using powerful, reusable TypeScript utilities like:

🔍 paramsExtractor
🔧 queryExtractor
⚙️ fetchData

🧠 Why This Approach?
✅ Next.js 14 compatible — works with App Router and server components
✅ Type-safe and reusable
✅ Easily composable with filters, pagination, and API queries
✅ Works seamlessly with React Query or server-side fetching
✅ Clean and maintainable for long-term scaling

🧩 Example: Category Page in Next.js

const CategoryPage = async ({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | string[]> | undefined>;
}) => {
  const { filter } = await paramsExtractor({
    searchParam: searchParams,
  });

  const stringifiedQuery = queryExtractor({
    sortBy: filter?.sortBy,
    extra: {
      "variants.sellingPrice[gte]": filter?.min_price,
      "variants.sellingPrice[lte]": filter?.max_price,
      "variants.variantName": filter?.color_name
        ? filter.color_name.split(",").map((b) => b.trim())
        : [],
      "brand.brandName": filter?.brandNames
        ? filter.brandNames.split(",").map((b) => b.trim())
        : [],
      "category.categoryName": filter?.categoryNames
        ? filter.categoryNames.split(",").map((b) => b.trim())
        : [],
    },
  });

  const productsData = await fetchData({
    route: "/product",
    query: stringifiedQuery,
    limit: 18,
    tags: ["/product"],
  });

  // render your component using productsData
};

🧩 What Is paramsExtractor?
If you haven’t read it yet, check out the full breakdown of paramsExtractor. It's a utility that parses searchParams from Next.js and returns a normalized object with:

Cleaned values
Mapped keys
Optional conversion to array, number, or string
Proper defaults

Perfect for server-side usage in dynamic routes like /category?brand=Apple,Samsung&sortBy=price.

🔧 queryExtractor: Build Clean Query Strings
This utility transforms a QueryOptions object into a query string with support for:

Defaults
Nested filtering (e.g., variants.sellingPrice[gte])
Arrays
Optional values

⚡ fetchData: Data Fetching Made Clean
fetchData is an abstraction over fetch (or Axios) with a powerful config API:

await fetchData({
  route: "/product",
  query: "category=Phone&brand=Apple",
  limit: 18,
  tags: ["/product"],
});

More on this utility in the official guide 👉 read now

🧵 Connect Everything
With these 3 pieces, your Next.js dynamic page becomes scalable and maintainable:

paramsExtractor: Server-side param parsing
queryExtractor: Build structured queries
fetchData: Fetch paginated, sorted, and filtered data from the backend

All of this while keeping TypeScript and React Query (or fetch) integration seamless.

🔧 Using queryExtractor as a Standalone Utility
📦 Step 1: Add the Utility Function
Here’s the complete code for queryExtractor:

export interface QueryOptions {
  searchTerm?: string;
  sortBy?: string;
  sortOrder?: "asc" | "desc";
  page?: number;
  limit?: number;
  extra?: Record<string, any>;
}

export const queryExtractor = ({
  searchTerm,
  sortBy = "created_at",
  sortOrder = "desc",
  page = 1,
  limit = 10,
  extra = {},
}: QueryOptions): string => {
  const query = new URLSearchParams();

  if (searchTerm?.trim()) query.set("searchTerm", searchTerm.trim());
  query.set("sortBy", sortBy);
  query.set("sortOrder", sortOrder);
  query.set("page", Math.max(1, page).toString());
  query.set("limit", Math.max(1, limit).toString());

  Object.entries(extra).forEach(([key, value]) => {
    if (value !== undefined && value !== null) {
      if (Array.isArray(value)) {
        value.forEach((val) => {
          if (val !== "") query.append(key, String(val));
        });
      } else {
        query.append(key, String(value));
      }
    }
  });

  return query.toString();
};

✅ Step 2: Basic Example

import { queryExtractor } from "./queryExtractor";

const queryString = queryExtractor({
  searchTerm: "laptop",
  sortBy: "price",
  sortOrder: "asc",
  page: 2,
  limit: 20,
  extra: {
    "brand": ["HP", "Dell"],
    "category": "Electronics",
    "price[gte]": 1000,
    "price[lte]": 3000,
  },
});

console.log(queryString);

// Output:
// searchTerm=laptop&sortBy=price&sortOrder=asc&page=2&limit=20&brand=HP&brand=Dell&category=Electronics&price[gte]=1000&price[lte]=3000

💡Pro Tips

Supports arrays (e.g. brand=HP&brand=Dell)
Ignores empty/null/undefined values
Safe defaults for sortBy, sortOrder, page, and limit
Can be reused anywhere: backend services, Node.js CLI tools, etc.

🏁 Final Thoughts
This setup:

✅ Makes query management clean and DRY
✅ Enhances developer experience with strong typing
✅ Scales easily with complex filters
✅ Plays nicely with Next.js App Router
✅ Perfect for dynamic category/product/search pages

👨‍💻 About the Author
Name: JAKER HOSSAIN
Username: @jackfd120
Role: Senior Frontend Developer
Portfolio: https://www.poranfolio.space/

I write about scalable frontend architecture, modern React/Next.js patterns, and TypeScript best practices.
If you liked this post, feel free to follow or reach out via my portfolio!

What is React.js and Why You Should Learn It in 2025

JAKER HOSSAIN — Thu, 29 May 2025 14:49:02 +0000

React.js is a popular JavaScript library for building modern, dynamic, and high-performance user interfaces (UI). It was developed by Facebook (now Meta) in 2013 and has since become the most widely used frontend library in the world.

One of React’s core strengths is its component-based architecture, which allows developers to break down the UI into reusable, manageable components. This leads to cleaner, more scalable code.

✨ Why Learn React.js?
React offers several advantages that make it a top choice for frontend development:

✅ Fast, Dynamic, and Interactive UI: React utilizes a virtual DOM to efficiently update only the parts of the UI that have changed.
✅ Build Single Page Applications (SPAs): Create seamless, fast-loading web apps that feel like native applications.
✅ Cross-Platform App Development with React Native: Use the same skills to build both web and mobile apps.
✅ High Demand in Job & Freelance Markets: React developers are in huge demand across freelancing platforms and tech companies.
✅ Perfect Fit with Backend APIs: Easily connect React to REST APIs built with Node.js, Django, Flask, or FastAPI.

🔥 Why React.js is Essential to Learn in 2025

Most In-Demand Frontend Skill
React continues to top the charts in JavaScript framework rankings. Tech giants like Google, Facebook, Netflix, Airbnb, and Instagram all rely on React in production.
High Salary Opportunities
React developers command high salaries — even 6-figure USD salaries are common in the USA, Europe, or remote-first companies.
One Codebase for Web & Mobile
With React Native, you can use the same JavaScript and React knowledge to build native mobile apps for both Android and iOS.
Perfect Match with Backend Technologies
React works flawlessly with any backend — whether it’s Node.js, Django REST Framework, or FastAPI — making it ideal for full-stack development.
Dominates Freelancing Platforms
On Fiverr, Upwork, and Freelancer, React is one of the most requested skills for web application projects.

👨‍💻 Career Opportunities as a React.js Developer
Whether you want to freelance or land a full-time role, here are some paths React.js can lead you to:

Frontend Developer — Work in product-based or SaaS companies
Full-Stack Developer — MERN (MongoDB, Express, React, Node), PERN, or DJR (Django + React)
Mobile App Developer — With React Native
UI/UX-Oriented Web Developer
Freelance Web Application Specialist
JAMstack Developer — Combine React with Headless CMS (e.g., Contentful, Strapi)

📘 Where to Start? Recommended Learning Resources
📚 Books:
The Road to React — Robin Wieruch
Learning React — Alex Banks & Eve Porcello
Fullstack React — Anthony Accomazzo

🎓 Online Courses:
freeCodeCamp — React Full Course
Udemy — React — The Complete Guide by Maximilian Schwarzmüller
Scrimba — Learn React for Free

🎥 YouTube Channels:
Learn with Sumit — One of the best React playlists in Bangla
Codevolution, The Net Ninja, Traversy Media — Great React tutorials in English

📌 Sources:

ReactJS Official Documentation
GitHub Stars & Trends
Stack Overflow & Developer Surveys
ChatGPT research synthesis

React.js isn’t just a trend — it’s a career-changing skill. Whether you’re building complex applications, starting freelancing, or diving into full-stack development, React is the key to unlocking those doors in 2025.

✍️ Written by: JAKER HOSSAIN
Frontend Developer at expertsquad.net
Contact: https://www.poranfolio.space/

Frontend Developer Resume: Tips, Structure & What Gets Interviews

JAKER HOSSAIN — Sun, 04 May 2025 15:30:11 +0000

A practical, no-fluff guide to crafting a frontend developer resume that stands out — with examples, formatting advice, and real-world insights for junior to mid-level developers.

🧠 Why This Post?
Most frontend developers spend hours perfecting their portfolios and GitHub repos, but struggle to present their skills effectively on a resume. This post breaks down exactly what to include, how to structure your resume, and what mistakes to avoid.

📦 What This Guide Covers

The must-have sections of a frontend resume
How to structure your content
Project description examples that get noticed
Formatting & keyword tips
Final export & sharing strategies

🧱 Resume Structure: Section-by-Section Breakdown
🔹 1. Header
Should contain:

-Full Name
-Job Title (e.g., Frontend Developer)
-Location (City, Country — optional)
-GitHub, Portfolio, LinkedIn
-Email

✅ Example:
Jane Doe Frontend Developer 📍 Berlin, Germany 🌐 janedoe.dev | 🐙 github.com/janedoe | 🔗 linkedin.com/in/janedoe 📧 jane.doe@gmail.com

🔹 2. Professional Summary
A concise snapshot of who you are, what you do, and what you bring to the table.

✅ Example:
Frontend Developer with 2+ years of experience building responsive, performant web applications using React, Next.js, and modern CSS frameworks. Passionate about clean code, UI/UX, and shipping accessible user interfaces.

🔹 3. Skills
Categorize your tools, frameworks, and languages.

✅ Example:
🧠 Languages: HTML5, CSS3, JavaScript (ES6+), TypeScript ⚙️ Frameworks: React.js, Next.js, Redux, Tailwind CSS, Bootstrap 🔧 Tools: Git, GitHub, VS Code, Figma, Chrome DevTools 🌐 Others: REST APIs, Responsive Design, Web Performance, SEO Basics

🔹 4. Projects (Core Section)
Select 3–5 key projects. Show what the project is, what you used, and what impact you had.

✅ Example:

🛒 E-Shop — E-Commerce Web App  
🔗 [Live Demo](https://eshop.com) | [GitHub](https://github.com/eshop/eshop)

- Developed a responsive e-commerce frontend with React and Tailwind CSS.
- Implemented dynamic filters for price, brand, and rating.
- Optimized loading time using lazy loading and image compression.

🔹 5. Experience
Include job roles or internships. Use bullet points to describe contributions.

✅ Example:

Frontend Developer  
TechNova Agency | Remote | Jan 2023 – Present
- Collaborated with backend engineers to deliver fully functional admin dashboards.
- Reduced initial page load by 50% using code splitting and performance optimization.
- Built and maintained a design system using Storybook.

🔹 6. Education & Certifications
List your formal education and relevant certifications.

🎓 B.Sc. in Computer Science  
XYZ University, 2021  

📜 Certifications:  
- The Complete JavaScript Course (Udemy)  
- Responsive Web Design – freeCodeCamp

🔹 7. Optional Sections
Include these if applicable:

🛠 Open Source Contributions
📝 Technical Blogs
🏆 Awards / Hackathons
🌍 Languages

🎨 Resume Formatting Best Practices

Stick to one page
Use consistent formatting
Highlight tools & outcomes over responsibilities
Avoid long paragraphs — stick to bullets
Use action verbs: built, developed, implemented, optimized
Export as a PDF

⚠️ Mistakes to Avoid
❌ Listing every tech you've ever heard of
❌ Projects with no context or links
❌ Overused phrases like "hardworking team player"
❌ Spelling and grammar mistakes
❌ Generic, unfocused summaries

✍️ Final Thoughts
Your resume is your first impression in the hiring process. It should clearly show what you've built, what tools you know, and what problems you've solved.

Focus on outcomes, be concise, and keep improving it as you grow. A great resume doesn’t need to be flashy — just clear, honest, and focused on what matters.

💬 Got Questions?
Have your own tips? Need feedback on your resume or portfolio? Feel free to drop a comment below or connect via GitHub or LinkedIn. Let’s grow together! 🚀

Front-end Developer vs Front-end Engineer: What's the Real Difference?

JAKER HOSSAIN — Sun, 27 Apr 2025 09:14:15 +0000

In today’s fast-evolving tech world, job titles often blur together, and one of the most common areas of confusion is the difference between a Frontend Developer and a Frontend Engineer. While both work on the "front" of applications that users interact with, the roles aren't always identical. Understanding the distinction can help you better define your career path, hire the right talent, or navigate tech discussions with more confidence.

In this article, we'll break down the true differences between a frontend developer and a frontend engineer — from skills to responsibilities, and even mindsets.

What is a Frontend Developer?

A Frontend Developer is primarily responsible for bringing visual designs to life and ensuring a great user experience. They translate UI/UX designs into fully functional web pages or applications.

Core Responsibilities:

Implementing responsive and accessible web interfaces.
Building pages using HTML, CSS, and JavaScript.
Working with frontend frameworks like React, Vue, or Angular.
Ensuring cross-browser compatibility.
Integrating with backend APIs to display dynamic content.
Collaborating with designers to match the intended user experience.

Focus Areas:

Visual design to code translation.
User interactivity and basic animations.
Mobile-first and responsive development.
Performance tuning at a basic level (e.g., image optimization).

In short: A frontend developer ensures that users have a beautiful, functional, and responsive experience.

What is a Frontend Engineer?

A Frontend Engineer carries out all the duties of a frontend developer, but with a deeper technical focus. Their work doesn't stop at implementing designs — they also architect systems, optimize performance, and solve complex engineering challenges.

Core Responsibilities:

Designing scalable frontend architectures.
Managing complex application states (e.g., using Redux, Zustand, or custom state managers).
Performance optimization beyond surface-level tweaks (e.g., lazy loading, code splitting, bundle analysis).
Implementing advanced testing strategies (unit tests, integration tests, end-to-end tests).
Working with build tools (Webpack, Vite, Rollup) and CI/CD pipelines.
Deep debugging (network issues, memory leaks, performance bottlenecks).
Security awareness (XSS, CSRF prevention, secure authentication flows).

Focus Areas:

Application performance and scalability.
Code maintainability and best practices.
Setting up frontend infrastructure and tooling.
Engineering for future-proofing (e.g., reusable design systems).

In short: A frontend engineer thinks beyond the page — they design systems that are scalable, efficient, and maintainable

Frontend Developer vs Frontend Engineer: A Head-to-Head Comparison

(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjc500nxtnno6ku8hguv.png)

Why Does This Distinction Matter?

For Developers: Knowing the difference helps you plan your growth. If you want to deepen your technical expertise and have a bigger impact on system architecture, aiming to become a frontend engineer might be your next step.
For Hiring Managers: Setting the right expectations when hiring ensures you get the right skillset for the job at hand.
For the Industry: Clearer role definitions lead to more efficient teams and better communication between departments.

Final Thoughts At many companies — especially startups — the titles "Frontend Developer" and "Frontend Engineer" are used interchangeably. The real key lies in the depth of technical expertise and architectural ownership expected from the role.

If you’re starting out, focus on mastering the fundamentals as a frontend developer. As you grow, dig deeper into engineering best practices and system design to transition into a frontend engineer role.

Remember: It's not just about what you build — it's about how well you build it.

✍️ Written by: JAKER HOSSAIN
Frontend Developer at expertsquad.net

7 Essential JavaScript Interview Questions for Beginners (With Solutions & Explanations)

JAKER HOSSAIN — Tue, 22 Apr 2025 13:13:36 +0000

JavaScript is one of the most in-demand programming languages today. Whether you're preparing for your first job interview or brushing up on your fundamentals, mastering the basics is essential.

In this article, I've compiled 10 beginner-level JavaScript interview questions, complete with solutions and explanations, to help you build confidence and deepen your understanding.

Let’s dive in! 👇

Question 1: What are the different ways to declare variables in JavaScript?
☑️Solution:

var name = "Alice";  // function-scoped
let age = 25;        // block-scoped
const country = "USA"; // block-scoped, constant

💡 Explanation:

var is function-scoped and allows redeclaration.
let is block-scoped and allows reassignment but not redeclaration.
const is block-scoped and does not allow reassignment or redeclaration.

Question 2: What is the difference between == and ===?
☑️Solution:

'5' == 5    // true (loose equality)
'5' === 5   // false (strict equality)

💡 Explanation:

== checks for value only and performs type coercion.
=== checks for both value and type, making it more reliable.

Question 3: What are the primitive data types in JavaScript?
☑️Solution:

let str = "Hello";      // String
let num = 42;           // Number
let isOnline = true;    // Boolean
let nothing = null;     // Null
let notDefined;         // Undefined
let id = Symbol('id');  // Symbol
let bigInt = 9007199254740991n; // BigInt

💡 Explanation:
JavaScript has 7 primitive types: String, Number, Boolean, null, undefined, Symbol, and BigInt. These are immutable and stored by value.

Question 4: How do you check the type of a variable?
☑️Solution:

typeof "hello";  // "string"
typeof 42;       // "number"
typeof null;     // "object" (quirky behavior!)

Question 5: What is the DOM?
☑️Solution:

document.getElementById("app").innerText = "Hello World!";

The DOM (Document Object Model) is a way JavaScript can interact with HTML and CSS.

Question 6: What’s the difference between var, let, and const?
☑️Solution:

(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h00m833c53b7a3kxt0rg.png)

Question 7: How does JavaScript compare different types?
☑️Solution:

'5' == 5          // true
'5' === 5         // false
null == undefined // true
null === undefined // false

🚀Reusable React Input Component for Tags & Colors – Built with TypeScript

JAKER HOSSAIN — Sun, 20 Apr 2025 13:48:21 +0000

Want to allow users to add and manage color names like tags—complete with a tiny preview bubble?

In this post, we’ll build a reusable, responsive, and accessible color picker input field using:

⚛️ React (TypeScript)
🎨 Tailwind CSS
💡 Keyboard support for Enter and Space to add colors
🏷️ Inline tag-style preview with removable color bubbles

Perfect for eCommerce dashboards, product editors, or any UI requiring dynamic color variants.

✅ Pros
⚡ Fully reusable component – Just pass variants and setVariants state.
🎨 Color bubble preview – Visually shows added colors.
🧠 Prevents duplicate entries – Smart check before adding.
⌨️ Keyboard-friendly – Add colors via Enter or Space.
🔥 Styled with Tailwind CSS – Clean, responsive design out of the box.
🧩 TypeScript support – Strong typing for better DX.

⚠️ Cons
❌ No color validation (you can enter invalid color names like blaaaack)
🧪 Doesn’t use native — it's text-based
🗂️ Doesn’t support hex codes or color pickers (unless extended)

🛠️ Tip: You can improve it by adding color name validation or integrating a color picker library like react-colorful.

💡 Why You Should Use This
If you’re building a dashboard, admin panel, or storefront editor that needs customizable product variants (like colors), this component:

1- Saves time by being ready to drop into any project.
2- Makes UX delightful by allowing instant color tagging.
3- Promotes code reuse with a clean, state-managed approach.

"use client";
import React, { useState, KeyboardEvent } from "react";

interface Variant {
  variantName: string;
}

interface CustomInputColorPickUpProps {
  label?: string;
  variants: Variant[];
  setVariants: (variants: Variant[]) => void;
  placeholder?: string;
}

const CustomInputColorPickUp = ({
  label,
  variants,
  setVariants,
  placeholder = "Color Name",
}: CustomInputColorPickUpProps) => {
  const [colorInput, setColorInput] = useState<string>("");

  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>): void => {
    if ((e.key === "Enter" || e.key === " ") && colorInput.trim()) {
      e.preventDefault();

      const normalizedInput = colorInput.trim().toLowerCase();

      const isDuplicate = variants?.some(
        (variant) => variant.variantName.toLowerCase() === normalizedInput
      );

      if (!isDuplicate) {
        setVariants([...variants, { variantName: colorInput.trim() }]);
      }

      setColorInput("");
    }
  };

  const handleRemove = (variantName: string) => {
    setVariants(variants.filter((v) => v.variantName !== variantName));
  };

  return (
    <div className="flex flex-col gap-2.5 w-full">
      {label && (
        <label
          htmlFor={label.toLowerCase()}
          className="text-black-50 text-base"
        >
          {label}
        </label>
      )}
      <div className="border border-black-10 rounded-md px-5 py-2 flex items-center gap-2 overflow-x-auto scrollbar-x-remove">
        {variants.map((variant, index) => (
          <div
            key={index}
            className="flex items-center rounded-sm bg-black-10 px-2"
          >
            <div
              style={{
                width: "13px",
                height: "13px",
                backgroundColor: variant.variantName,
                borderRadius: "50%",
                marginRight: "5px",
              }}
            />
            <span className="text-[15px]">
              {variant.variantName || "Not Specified"}
            </span>
            <button
              type="button"
              onClick={() => handleRemove(variant.variantName)}
              className="ml-2 text-lg"
            >
              &times;
            </button>
          </div>
        ))}
        <input
          type="text"
          value={colorInput}
          onChange={(e) => setColorInput(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder={placeholder}
          className="outline-none border-none w-full min-w-[150px]"
        />
      </div>
    </div>
  );
};

export default CustomInputColorPickUp;

☑️Use Case:

"use client";
import React, { useState } from "react";
import CustomInputColorPickUp from "@/components/CustomInputColorPickUp";

const ProductColorInputSection = () => {
  const [colorVariants, setColorVariants] = useState([
    { variantName: "red" },
    { variantName: "blue" },
  ]);

  return (
    <div className="max-w-md mx-auto mt-10">
      <CustomInputColorPickUp
        label="Product Colors"
        variants={colorVariants}
        setVariants={setColorVariants}
        placeholder="Type a color and press Enter"
      />

      <pre className="mt-5 bg-gray-100 p-3 rounded text-sm">
        {JSON.stringify(colorVariants, null, 2)}
      </pre>
    </div>
  );
};

export default ProductColorInputSection;

🧾 Conclusion (Note)
This reusable input component in React TypeScript is tailored for my specific use case — managing and displaying color variants dynamically. However, it’s fully customizable. Whether you want to use it for color tags, general tag inputs, or even more complex data entries, feel free to tweak the logic, styling, or structure based on your needs.

The goal is to give you a solid foundation for building flexible and reusable input components in modern React projects.

Happy coding! 💻✨

Build a Reusable, Flexible Modal Component in React with Portal Support

JAKER HOSSAIN — Mon, 14 Apr 2025 12:29:08 +0000

Would you be interested in setting up your modals in a React + Next.js project?

In this post, I’ll walk you through a fully-featured and reusable Modal component that:

1- Supports multiple entry/exit animation alignments,
2- Handles back navigation when closed,
3- Works across small and large devices selectively,
4- Uses React Portals to render outside the component tree, and
5- Is styled using Tailwind CSS for rapid development.

No more rewriting modals from scratch every time! Let’s build one you can plug into any project. 👇

✅ Why Use This Modal Component?
This component is modular, responsive, animated, and portable — making it ideal for use in real-world web apps and dashboards.

Use cases:
1- Displaying forms, filters, or dynamic content without page reloads.
2- Creating full-screen mobile modals.
3- Conditionally showing modals on different screen sizes.
4- Enhancing UX with entry/exit animations.

import React, { useState, useEffect, Dispatch, SetStateAction } from "react";
import { createPortal } from "react-dom";
import { useRouter } from "next/navigation";

const Modal = ({
  show,
  setShow,
  children,
  alignment,
  className,
  isIntercepting = false,
  showCancelBtnINSmallDevice = false,
  isOnlySmallDevice = false,
  isOnlyLargeDevice = false,
}: {
  show: boolean;
  setShow: Dispatch<SetStateAction<boolean>>;
  children: React.ReactNode;
  alignment: "left" | "center" | "right" | "top" | "bottom";
  className?: string;
  isIntercepting?: boolean;
  showCancelBtnINSmallDevice?: boolean;
  isOnlySmallDevice?: boolean;
  isOnlyLargeDevice?: boolean;
}) => {
  const [animate, setAnimate] = useState(false);
  const redirect = useRouter();

  let appearAnimation;
  let disappearAnimation;

  if (alignment === "left") {
    appearAnimation = "translate-x-0";
    disappearAnimation = "-translate-x-1/2";
  } else if (alignment === "center") {
    appearAnimation = "scale-1";
    disappearAnimation = "scale-0";
  } else if (alignment === "right") {
    appearAnimation = "translate-x-0";
    disappearAnimation = "translate-x-1/2";
  } else if (alignment === "top") {
    appearAnimation = "translate-y-[-227px]";
    disappearAnimation = "-translate-y-[100%]";
  } else if (alignment === "bottom") {
    appearAnimation = "translate-y-[227px]";
    disappearAnimation = "translate-y-[100%]";
  }

  useEffect(() => {
    if (show) {
      setAnimate(true);
    } else {
      setAnimate(false);
    }
  }, [show]);

  const handleClose = (e: React.MouseEvent) => {
    e.stopPropagation();
    setAnimate(false);
    if (isIntercepting) {
      redirect.back();
    }
    setTimeout(() => setShow(false), 300);
  };

  return createPortal(
    <div
      className={`fixed inset-0 z-50 backdrop-blur-sm bg-black-transparent transition-opacity duration-300 ease-in-out flex items-center 
      ${animate ? "opacity-100" : "opacity-0"}
      ${alignment === "right" && "justify-end"} 
      ${alignment === "center" && "justify-center"} 
      ${isOnlySmallDevice && "md:hidden"} 
      ${isOnlyLargeDevice && "hidden md:flex"}`}
      onClick={handleClose}
    >
      <div
        className={` relative shadow-black-50 drop-shadow-2xl bg-white lg:p-5 duration-300 ease-in-out
         ${alignment !== "center" && "h-full md:h-[calc(100%-16px)] md:m-2"}
           ${animate ? appearAnimation : disappearAnimation} ${className}`}
        onClick={(e) => e.stopPropagation()}
      >
        {/* close handler */}
        <button
          className={`hover:rotate-90 transition-all duration-200 absolute top-5 right-5 lg:top-6 lg:right-6 text-black hover:text-[#ff4b4b] font-bold z-50 ${
            showCancelBtnINSmallDevice ? "block" : "hidden"
          }`}
          onClick={handleClose}
        >
          &#10005;
        </button>
        {/* children */}
        {children}
      </div>
    </div>,
    document.body
  );
};

export default Modal;

🎯 Key Features:
✅ Fully reusable with props for control
✅ Device-based rendering (show only on mobile or desktop)
✅ Multiple alignment-based animations (left, center, right, top, bottom)
✅ Portal rendering with createPortal for proper stacking
✅ Interceptable close behavior (router.back() support)
✅ Tailwind CSS-based transitions & styling
✅ Clean separation of logic and UI control

💡 How It Works (in short):
1- show: Boolean toggle for modal visibility.
2- alignment: Determines the animation direction (like slide in from left, right, or scale in center).
3- isIntercepting: Useful for routing scenarios — goes back in history on close.
4- isOnlySmallDevice, isOnlyLargeDevice: Control modal visibility by device size.
5- createPortal: Ensures the modal is placed outside the component tree (document.body).

✅ Pros:
🎨 Highly customizable
📱 Responsive: Tailored for mobile and desktop experiences
🚀 Lightweight and performant
🧩 Easy to integrate in any layout
🔁 Reusable across routes and pages
🧠 Intuitive API for developers

🧪 Example Usage:

const [showModal, setShowModal] = useState(false);

<Modal
  show={showModal}
  setShow={setShowModal}
  alignment="right"
  isIntercepting={true}
  showCancelBtnINSmallDevice={true}
>
  <div>Your modal content here...</div>
</Modal>

🔚 Final Thoughts
Modals are everywhere — from e-commerce to admin dashboards. But building them to be smooth, responsive, and reusable is often overlooked.

This Modal component gives you that flexibility out of the box, plus portal rendering and optional router integration. Add it to your component library and speed up your future builds.

Create Reusable Toaster Notifications in React with Custom Animations

JAKER HOSSAIN — Sun, 02 Mar 2025 09:05:18 +0000

Learn how to build a reusable toaster component in React that supports different notification types like success, error, and warning. It includes features like smooth fade-out animations, progress bars, and customizable positions. This is a quick and effective way to improve user experience in your web applications by providing non-intrusive notifications.

📢 Key Features:

🎉 Customizable Notification Types: Choose from success, error, warning, and info.
🚀 Smooth Animations: Includes slide-in and fade-out animations.
📍 Position Control: Place the notification at any corner of the screen.
⏳ Progress Bar: Visualize the time remaining before the notification disappears.
⏲️ Adjustable Duration: Set how long the notification stays visible.

"use client";
import { IconX } from "@tabler/icons-react";
import React, { useEffect, useState } from "react";
import styles from "./Toaster.module.css";

const Toaster = ({
  message,
  duration = 3,
  onClose,
  type = "success",
  position = "top-right",
  toasterStyle,
  progressBarStyle,
}: {
  message: string;
  duration?: number;
  onClose?: () => void;
  type?: "success" | "error" | "warning" | "info";
  position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
  toasterStyle?: string;
  progressBarStyle?: string;
}) => {
  const [isVisible, setIsVisible] = useState(false);
  const [isFading, setIsFading] = useState(false);

  useEffect(() => {
    setIsVisible(true);

    const fadeTimer = setTimeout(() => {
      setIsFading(true);
    }, (duration - 0.5) * 1000);

    const closeTimer = setTimeout(() => {
      setIsVisible(false);
      if (onClose) onClose();
    }, duration * 1000);

    return () => {
      clearTimeout(fadeTimer);
      clearTimeout(closeTimer);
    };
  }, [duration, onClose]);

  const handleClose = () => {
    setIsFading(true);
    setTimeout(() => {
      setIsVisible(false);
      if (onClose) onClose();
    }, 500);
  };

  if (!isVisible) return null;

  return (
    <div
      className={`${styles.toaster} ${styles[type]} ${styles[position]} ${
        isFading ? styles["fade-out"] : ""
      } fixed rounded-md px-3 py-2 flex items-center justify-between gap-x-2  ${toasterStyle}`}
    >
      <span className="text-xs md:text-sm">{message}</span>
      <span
        onClick={handleClose}
        className="cursor-pointer transition-opacity ease-in hover:opacity-70"
      >
        <IconX className="w-4 h-4" />
      </span>
      <div
        className={`${styles["progress-bar"]} ${progressBarStyle}`}
        style={{ animationDuration: `${duration - 0.5}s` }}
      ></div>
    </div>
  );
};

export default Toaster;

.toaster {
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transform: translateX(150%);
  animation: slideIn 0.5s ease-out forwards;
  position: fixed;
  min-width: 250px;
  max-width: 400px;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fade-out {
  animation: fadeOut 0.5s ease-in forwards;
}

.top-right {
  top: 10px;
  right: 10px;
}
.top-left {
  top: 10px;
  left: 10px;
}
.bottom-right {
  bottom: 10px;
  right: 10px;
}
.bottom-left {
  bottom: 10px;
  left: 10px;
}

.success {
  background-color: #22c55e;
  color: white;
}
.error {
  background-color: #ef4444;
  color: white;
}
.warning {
  background-color: #f59e0b;
  color: white;
}
.info {
  background-color: #3b82f6;
  color: white;
}

.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: white;
  animation: progress linear forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(150%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

Toaster notifications are a great way to keep users informed without interrupting their experience. By building a customizable toaster system in React, you can easily adapt it to fit your app's design and user needs. With features like smooth animations, customizable positions, progress bars, and adjustable durations, this simple component can significantly enhance your web application's user experience. Try implementing it in your next project for non-intrusive, yet effective notifications.

JavaScript Date Utility: Convert, Format & Display Dates

JAKER HOSSAIN — Thu, 13 Feb 2025 10:44:44 +0000

The getFormattedDate utility function simplifies date formatting in JavaScript and TypeScript applications. It ensures reliable date conversion while offering multiple format options, including dd/MM/yyyy, MM/dd/yyyy, yyyy/MM/dd, and yyyy/dd/MM. Additionally, it supports a full date style that displays the month name for improved readability (e.g., "15 October 2024").

import { allMonths } from "@/constants/months.constants";

export const getFormattedDate = (
  date: string | Date,
  format?: "dd/MM/yyyy" | "MM/dd/yyyy" | "yyyy/MM/dd" | "yyyy/dd/MM",
  fullDate: boolean = false
): string => {
  // <= Ensure the input is a Date object =>
  const dateObj = typeof date === "string" ? new Date(date) : date;

  if (isNaN(dateObj.getTime())) {
    throw new Error("Invalid date");
  }

  const day = dateObj.getDate().toString().padStart(2, "0");
  const month = (dateObj.getMonth() + 1).toString().padStart(2, "0");
  const year = dateObj.getFullYear();

  // <= handle full date style =>
  if (fullDate) {
    return `${day} ${allMonths[dateObj.getMonth()]} ${year}`;
  }

  // <= Handle custom format =>
  switch (format) {
    case "dd/MM/yyyy":
      return `${day}/${month}/${year}`;
    case "MM/dd/yyyy":
      return `${month}/${day}/${year}`;
    case "yyyy/MM/dd":
      return `${year}/${month}/${day}`;
    case "yyyy/dd/MM":
      return `${year}/${day}/${month}`;
    default:
      throw new Error("Unsupported format");
  }
};

<== Use case ==>
const exampleDate = "2024-02-10T12:30:00Z"
getFormattedDate(exampleDate, "dd/MM/yyyy")

# To get full date, you can use fullDate true.

*Key Features:
*✅ Flexible Formatting Options – Supports various date formats to match different regional preferences.
✅ Enhanced Readability – The fullDate option provides a user-friendly date format with the month's full name.
✅ Reliable Date Conversion – Ensures that string inputs are properly converted into valid Date objects.
✅ Error Handling – Prevents issues with invalid dates by throwing an explicit error message.
✅ SEO & UX Improvement – Well-formatted dates enhance user experience and improve content readability, which is crucial for SEO.

Perfect for use in e-commerce platforms, booking systems, blogs, and dashboards, this utility optimizes date display while keeping code clean and efficient. 🚀

All credit goes to SHARIFUL ISLAM and thanks for making it, it's amazing and enhances code readability.

Next.js Path Extractor: Custom Hook for URL Paths & Query Parameters

JAKER HOSSAIN — Wed, 05 Feb 2025 04:36:08 +0000

Introducing usePathExtractor – a custom React hook for Next.js that simplifies extracting and managing URL paths, query parameters, and active route states. It helps developers efficiently work with dynamic routing, making navigation handling more intuitive.

"use client";

import { usePathname, useSearchParams } from "next/navigation";
import { useMemo } from "react";

export const usePathExtractor = () => {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const queryParams = useMemo(() => {
    const params: Record<string, string | string[]> = {};
    searchParams.forEach((value, key) => {
      if (params[key]) {
        params[key] = Array.isArray(params[key])
          ? [...params[key], value]
          : [params[key], value];
      } else {
        params[key] = value;
      }
    });
    return params;
  }, [searchParams]);

  const fullUrl = useMemo(() => {
    if (typeof window !== "undefined") {
      return window.location.href;
    }
    return "";
  }, []);

  const basePath = useMemo(() => {
    return pathname.split("/").slice(0, 2).join("/");
  }, [pathname]);

  const isActiveRoute = (route: string) => {
    return pathname.startsWith(route);
  };

  return {
    pathname,
    fullUrl,
    basePath,
    queryParams,
    isActiveRoute,
  };
};

Benefits:
✅ Effortless Query Parameter Extraction – Converts search params into an easily accessible object.
✅ Retrieve Full URL – Get the complete URL directly from the hook.
✅ Base Path Management – Extract the main route without extra logic.
✅ Active Route Detection – Easily check if a route is currently active.

Perfect for building dynamic dashboards, filtering systems, and improving navigation handling in Next.js projects! 🚀

Resolving npm Execution Policy Error in PowerShell: A Step-by-Step Guide for Developers

JAKER HOSSAIN — Thu, 23 Jan 2025 15:10:31 +0000

When running npm commands in PowerShell, developers might encounter an error message similar to the following:

== PHOTO (Describe issue by photo) ==

== TEXT (Describe issue by text) ==
npm : File C:\Program Files\nodejs\npm.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170. At line:1 char:1 + npm run dev + ~~~ + CategoryInfo : SecurityError: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess

Solution
To resolve this issue, follow these steps:

1. Open PowerShell as Administrator:

Press Win + X and select Windows PowerShell (Admin). This ensures you have the necessary permissions to change the execution policy.

2. Check the Current Execution Policy:

In the PowerShell window, type the following command and press Enter:

powershell
Get-ExecutionPolicy
If the result is Restricted, it means script execution is disabled on your system.

3. Set the Execution Policy to RemoteSigned:

To change the execution policy, type the following command and press Enter:

powershell
Set-ExecutionPolicy RemoteSigned
You might be prompted to confirm the change. Type Y and press Enter to confirm. The RemoteSigned policy allows scripts created on your local computer to run, and scripts downloaded from the internet must be signed by a trusted publisher.

4. Verify the New Execution Policy:

To ensure the new policy is set correctly, type the following command and press Enter:

powershell
Get-ExecutionPolicy
The result should now be RemoteSigned.

5. Run Your npm Command Again:

With the execution policy set to RemoteSigned, you can now run your npm command without encountering the execution policy error:

powershell
npm run dev

_If you encounter an error about execution policies when running npm commands in PowerShell, it is likely because the script execution is disabled. To fix this, follow these steps:

Open PowerShell as Administrator.

Check the Current Execution Policy by typing Get-ExecutionPolicy.

Set the Execution Policy to RemoteSigned by typing Set-ExecutionPolicy RemoteSigned and confirming the change.

Verify the New Execution Policy by typing Get-ExecutionPolicy again.

Run Your npm Command Again without encountering the error._