Forem: Md .Rakibul Islam

🚨 Simplifying Incident Tracking for Enterprise Projects

Md .Rakibul Islam — Wed, 05 Nov 2025 03:56:09 +0000

In our organization, we manage multiple live projects across different servers — both private and public. With so many environments running simultaneously, things can get complex fast.
One major challenge we faced was identifying server incidents — when a server goes down or an unexpected issue occurs, developers often struggle to quickly trace and diagnose the problem, especially for local or internal servers.
💡 To solve this, we built a smart incident monitoring and notification system.
Whenever an incident occurs:
✅ It’s automatically logged
✅ An instant notification is sent to the respective team members
✅ The system provides clear project status updates and the reason for downtime
Now, our teams can easily track all live enterprise projects and respond faster — no more guesswork or manual checks.
This solution not only improved uptime visibility but also made our internal workflow much more efficient. ⚙️
hashtag#DevOps hashtag#IncidentManagement hashtag#ServerMonitoring hashtag#Automation hashtag#TeamProductivity hashtag#SoftwareEngineering hashtag#Innovation

Multi-Type Barcode Generator 😊

Md .Rakibul Islam — Tue, 04 Nov 2025 04:53:42 +0000

In many organizations, we often handle multiple projects that involve different kinds of people, programs, or product management. At times, we need to generate barcodes or QR codes for things like product details, website links, or event access — and that’s where this project comes in!
🎯 Introducing the Barcode Generator — a simple, fast, and versatile web tool that allows you to:
✅ Generate 18 different types of codes (QR, EAN, UPC, Code128, and more)
✅ View your generation history
✅ Explore sample codes for quick testing
💡 Whether you’re working with product data, event systems, or digital assets — this tool makes barcode creation effortless and accessible.
🔗 Try it out here: https://barcode-generator-aci-mis.netlify.app/
hashtag#BarcodeGenerator hashtag#WebApp hashtag#JS hashtag#Developer hashtag#ProductivityTools hashtag#TechInnovation

🔥 Progressive Web App (PWA) Setup Guide for Next.js 15 — Complete Step-by-Step Walkthrough

Md .Rakibul Islam — Wed, 29 Oct 2025 06:24:46 +0000

🚀 Progressive Web App (PWA) Setup Guide for Next.js 15

This comprehensive, production-ready guide walks you through configuring a fully functional Progressive Web App (PWA) in Next.js 15 — covering manifest setup, service workers, middleware fixes, and install prompts across Android, iOS, and desktop browsers.

🧭 Table of Contents

Prerequisites
Installation
Manifest Configuration
Next.js Configuration
Middleware Configuration
Service Worker Registration
Install Prompt Component
Layout Integration
Testing
Troubleshooting

🧩 Prerequisites

Make sure you have:

A Next.js 15.x project set up
Node.js 18+ installed
Basic understanding of React hooks

⚙️ Step 1: Installation

Install the required PWA dependency:

npm install next-pwa

📄 Step 2: Manifest Configuration

Create a new file:
public/manifest.json

{
  "name": "Your App Name",
  "short_name": "App Short Name",
  "description": "Your app description",
  "id": "/",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait-primary",
  "background_color": "#ffffff",
  "theme_color": "#6366F1",
  "lang": "en",
  "dir": "ltr",
  "categories": ["productivity", "business"],
  "icons": [
    { "src": "/icon192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "/icon512_maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" },
    { "src": "/icon512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }
  ]
}

🧠 Note:

All icons should live inside your /public folder.

File	Size	Purpose
icon192.png	192x192	Required
icon512_maskable.png	512x512	Maskable icon
icon512.png	512x512	Primary icon

⚙️ Step 3: Next.js Configuration

Edit next.config.mjs:

import withPWAInit from 'next-pwa';

const isDev = process.env.NODE_ENV === 'development';

const withPWA = withPWAInit({
  dest: 'public',
  register: false, // Manual registration
  skipWaiting: true,
  disable: false,
  sw: 'sw.js',
  scope: '/',
  swcMinify: !isDev,
  buildExcludes: [/middleware-manifest\.json$/],
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
      handler: 'CacheFirst',
      options: {
        cacheName: 'google-fonts-cache',
        expiration: { maxEntries: 4, maxAgeSeconds: 365 * 24 * 60 * 60 }
      },
    },
    {
      urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'images-cache',
        expiration: { maxEntries: 64, maxAgeSeconds: 24 * 60 * 60 }
      },
    },
  ],
});

export default withPWA({
  reactStrictMode: true,
  output: 'standalone',
});

✅ Key Settings Explained:

disable: false → PWA active in both dev & prod

runtimeCaching → adds caching strategies for fonts, images, etc.

🧱 Step 4: Middleware Configuration

By default, Next.js middleware may block your PWA files.
Fix that by editing src/middleware.js:

import { NextResponse } from 'next/server';
import { cookies } from "next/headers";

export async function middleware(request) {
  const url = request.nextUrl.clone();

  // Allow PWA core files
  const pwaFiles = ['/manifest.json', '/sw.js', '/workbox'];
  if (pwaFiles.some(file => url.pathname.includes(file))) {
    return NextResponse.next();
  }

  // Example auth logic
  const cookieStore = await cookies();
  const token = cookieStore.get('accessToken');
  const isLoggedIn = Boolean(token);

  if (!isLoggedIn && url.pathname !== '/sign-in') {
    url.pathname = '/sign-in';
    return NextResponse.redirect(url);
  }

  if (isLoggedIn && url.pathname === '/sign-in') {
    url.pathname = '/';
    return NextResponse.redirect(url);
  }

  return NextResponse.next();
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico|public|images).*)',
  ],
};

⚠️ Without this, manifest.json and sw.js will be blocked, breaking your PWA.

🧠 Step 5: Service Worker Registration

Create:
src/components/ui/pwa-service-worker-register.jsx

'use client';

import { useEffect } from 'react';

export default function PWAServiceWorkerRegister() {
  useEffect(() => {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker
        .register('/sw.js', { scope: '/' })
        .then(reg => console.log('SW registered:', reg))
        .catch(err => console.error('SW registration failed:', err));

      navigator.serviceWorker.addEventListener('controllerchange', () => {
        if (window.confirm('New version available! Reload?')) {
          window.location.reload();
        }
      });
    }
  }, []);

  return null;
}

📲 Step 6: Install Prompt Component

Create:
src/components/ui/pwa-install-prompt.jsx

'use client';

import { useEffect, useState } from 'react';
import { toast } from 'sonner';

export default function PWAInstallPrompt() {
  const [deferredPrompt, setDeferredPrompt] = useState(null);
  const [showInstall, setShowInstall] = useState(false);
  const [isStandalone, setIsStandalone] = useState(false);
  const [isIOS, setIsIOS] = useState(false);

  useEffect(() => {
    setIsIOS(/iPad|iPhone|iPod/.test(navigator.userAgent));
    setIsStandalone(window.matchMedia('(display-mode: standalone)').matches);

    const handleBeforeInstall = (e) => {
      e.preventDefault();
      setDeferredPrompt(e);
      setShowInstall(true);
    };

    window.addEventListener('beforeinstallprompt', handleBeforeInstall);
    return () => window.removeEventListener('beforeinstallprompt', handleBeforeInstall);
  }, []);

  if (isStandalone) return null;

  if (isIOS) {
    return (
      <div className="fixed bottom-4 right-4 bg-indigo-600 text-white p-4 rounded-lg shadow-lg max-w-sm">
        <h3 className="font-semibold mb-2">Install this App</h3>
        <p className="text-sm mb-3">Tap the share icon → “Add to Home Screen”</p>
      </div>
    );
  }

  if (showInstall) {
    return (
      <button
        onClick={async () => {
          deferredPrompt.prompt();
          const { outcome } = await deferredPrompt.userChoice;
          toast[outcome === 'accepted' ? 'success' : 'info'](`User ${outcome} install`);
          setShowInstall(false);
        }}
        className="fixed bottom-4 right-4 bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-2"
      >
        📲 Install App
      </button>
    );
  }

  return null;
}

🧩 Step 7: Layout Integration

Edit src/app/layout.jsx:

import "./globals.css";
import PWAServiceWorkerRegister from "@/components/ui/pwa-service-worker-register";
import PWAInstallPrompt from "@/components/ui/pwa-install-prompt";

export const metadata = {
  title: "Your App Name",
  description: "Your app description",
  manifest: "/manifest.json",
  icons: {
    icon: "/icon512.png",
    apple: "/icon512_maskable.png",
  },
};

export const viewport = {
  themeColor: "#6366F1",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <meta name="theme-color" content="#6366F1" />
        <link rel="manifest" href="/manifest.json" />
        <link rel="apple-touch-icon" href="/icon512_maskable.png" />
      </head>
      <body>
        <main>{children}</main>
        <PWAInstallPrompt />
        <PWAServiceWorkerRegister />
      </body>
    </html>
  );
}

🧪 Step 8: Testing

Run your app and open DevTools → Application Tab

✅ Manifest Tab: Shows your app name, start URL, and icons
✅ Service Workers Tab: Shows “activated and running”
✅ Console: Logs should include

Then check:

http://localhost:3000/manifest.json → should load JSON

http://localhost:3000/sw.js → should load the service worker file

🏗 Step 9: Production Build

npm run build && npm run start

Verify:

sw.js is present in /public
Site served over HTTPS
Install prompt works in production

🧯 Step 10: Troubleshooting

🧠 Note:

These are common PWA setup issues and how to resolve them.

Issue	Common Cause	Solution
Manifest not loading	Middleware blocking	See Step 4
SW not registering	Disabled or wrong path	Check `next.config.mjs`
Install button missing	Already installed or invalid manifest	Clear cache + fix manifest
PWA files blocked	Middleware redirect	Allow `/sw.js` & `/manifest.json`

✅ PWA Checklist

next-pwa installed
manifest.json configured
Icons (192, 512) created
Middleware allowing PWA files
Service worker registered
Install prompt visible
PWA installable on Chrome/Android/iOS

🌐 Browser Support

Platform	Support
Chrome / Edge	✅ Full
Firefox	⚠️ Limited
Safari	⚠️ Limited (no install prompt API)
Chrome Android	✅ Full
iOS Safari	⚠️ Manual add to home screen

📚 References

🧩 Summary

By following this guide, you’ve built a fully functional, installable PWA in Next.js 15 — complete with:

Manifest setup
Middleware exception handling
Manual SW registration
Cross-platform install prompts

You can now deploy a production-ready PWA with offline caching, installability, and better UX — all without extra complexity.

💡 If this helped you, drop a ❤️ or share your experience building PWAs in Next.js 15!

Git commands: Boost your productivity with git

Md .Rakibul Islam — Thu, 11 Jan 2024 07:58:34 +0000

Welcome everyone!

When I first started using Git, I have to admit, I was a bit intimidated. I had heard so much about it and knew it was an essential tool for any developer, but I didn't know where to begin. I struggled with understanding the basic commands and couldn't seem to wrap my head around the whole concept of version control.

I started by going through online tutorials, reading documentation, and experimenting with different commands. I would spend hours trying to understand the different branches, commits, and merge conflicts, but I was determined to make it work. And eventually, with a lot of practice and patience, it clicked.

I hope that by sharing my experience, I can help others who may be struggling with Git at the beginning. I know it can be overwhelming, but trust me, it's worth it. With the right mindset, patience and resources, you too can master Git and improve your workflow.

This guide is designed for both beginners and advanced users who want to master the art of Git and improve their workflow. Whether you are a new developer just starting out with version control or an experienced professional looking to optimize your Git skills, this guide has something for everyone. We will cover essential Git commands, advanced techniques, and helpful hacks that will help you work more efficiently and effectively with Git. So let's dive in and discover the full power of Git!

What is git?

**
Git is a powerful version control system that allows developers to keep track of the changes made to their code. It allows developers to collaborate on projects, revert to previous versions of the code, and branch out to experiment with new features without affecting the main codebase.

One of the most important aspects of Git is being able to check the status of your files, including which files have been modified, added, or deleted. Developers can use git status command for that. Another important aspect of Git is being able to view the commit history, including when and who made the changes, and what changes were made. Developers can use git log command for that.

Git is widely used in software development and has become an industry standard for managing source code. It's also widely used in data science and machine learning projects.

For example, a software development team is working on a project. Each member of the team can clone the repository, make changes to their local copies, and push those changes back to the central repository. This allows the team to work on the project simultaneously without conflicts. Git also allows team members to easily revert to previous versions of the code or branch off to experiment with new features without affecting the main codebase.

In data science, git is useful for versioning the data, code and experiment. For example, as a data scientist, you could use git to version control your Jupyter notebooks and Python scripts, as well as the data you're using for your analysis. This allows you to easily reproduce your results and collaborate with other data scientists on the same project. Additionally, you can use git to version control your machine learning models and experiment with different versions of your model.

In summary, git is a powerful version control system that is widely used in software development and data science to manage source code and other files. It allows developers and data scientists to collaborate on projects, revert to previous versions of the code, and branch out to experiment with new features without affecting the main codebase.

Cheatsheet

view file status

git status

view short status

git status --short

view in machine readable format

git status --porcelain

The --porcelain option causes git status to display the status in a machine-readable format, which is intended to be easy to parse by scripts and other automated tools.

Viewing the Commit History

view git logs

git log

view logs in single line

git log --oneline

view n numbers of logs

git log -n

single line & n number of logs

git log --oneline -n

log with patch changes

git log --patch

showing stats

git log --stat

stats: how many files were changed, and how many lines in those files were added and removed. It also puts a summary of the information at the end.

sort stats

git log --shortstat

graphical view

git log --graph

logs without merge commits

git log --no-merges

showing references with dates

git log --pretty=reference

View git history of specific line

git log --pretty=short -u -L <start line>,<end line>:<file path>

Search for code within Git history

git log -S "CodeSnippet or searchString"

Search for commit message within Git history

git log --grep=<pattern>

TO BE CONTINUED

REACT IMAGE EDITORS

Md .Rakibul Islam — Mon, 18 Dec 2023 11:32:29 +0000

Here is my latest npm package for editing images with React.

https://www.npmjs.com/package/@babu60089/react-image-editors

Prime react data table backend pagination with lazy loading

Md .Rakibul Islam — Thu, 16 Nov 2023 06:27:46 +0000

While employing PrimeReact, I encountered challenges related to the backend pagination of their data table. During these instances, I resorted to employing front-end pagination as a workaround. However, I have since developed a streamlined solution for backend pagination using my custom functions. The PrimeReact documentation lacked clarity on fetching data with a personalized style, prompting me to construct a dedicated function. Below, I outline the step-by-step process for implementing this solution.

*Step 1: Define your necessary states Here, i use my own style *

import data table from prime react into your react component
import {Column} from "primereact/column"; import {DataTable} from "primereact/datatable";

*Step2: fetch data with your UseEffect function *

*Final Step: Show your data into prime react data table *

*Here is my full code : *

`import React, {useEffect, useRef, useState} from "react";
import {Column} from "primereact/column";
import {DataTable} from "primereact/datatable";
import {baseUrl, checkAvailability} from "../../Helper/helper";
import useData from "../../hooks/useData";
import "./Clients.css";

const Clients = () => {
const {token} = useData().store;
const [loading, setLoading] = useState(false);
const {authPermissions} = useData().permissions;
const [first, setFirst] = useState(1);
const [rows, setRows] = useState(12);
const [clientData, setClientData] = useState()
const [totalRecords, setTotalRecords] = useState(0);

useEffect(() => {
    //permination setup
    const IsGetClient = checkAvailability(authPermissions, "get-client-list");
    if (!IsGetClient) {
        return;
    }
    //make a options which i send with fetch function
    const options = {
        method: "GET",
        headers: new Headers({'content-type': 'application/json', Authorization: `Bearer ${token}`}),
    };
    const fetchRange = (page, pageSize) => {
        setLoading(true)
        let pages = (page / pageSize) + 1
        fetch(`https://sltm.selopia.com/api/clients?page=${pages.toFixed(0)}&per_page=${pageSize}`, options).then((response) =>
            response.json()).then(data => {
            console.log(data);
            setClientData(data?.data)
            setTotalRecords(data?.data?.total)
            setLoading(false);
        });
    }

    fetchRange(first, rows);
}, [authPermissions, first, rows]);

return (
    <div>
        <DataTable
            value={clientData?.data}
            lazy
            first={first}
            dataKey="id"
            paginator
            rows={rows}
            totalRecords={totalRecords}
            loading={loading}
            onPage={(e) => {
                setFirst(e.first);
                setRows(e.rows);
            }}
            // rowsPerPageOptions={[10, 20, 50, 100, 200, 500, 1000, 1309]}

            tableStyle={{minWidth: '50rem'}}>

            <Column field="id" header="ID"></Column>
            <Column field="company" header="Company"></Column>
            <Column field="phone_no" header="Phone"></Column>

        </DataTable>
    </div>
);

};
export default Clients;

Exploring React's Top Useful Hooks with Code Examples

Md .Rakibul Islam — Sun, 12 Nov 2023 08:58:26 +0000

Introduction
React Hooks are functions that allow functional components in React to use state, lifecycle methods, and other React features that were previously only available in class components. They simplify state management and side effect handling, making code more concise and readable. Hooks promote reusability of component logic through custom hooks, eliminate the need for class components, and provide a consistent way to handle component lifecycle events. They offer a more modern and intuitive approach to building components in React, officially supported by the React team for improved code organization and maintainability.

1. useState
Explain the basics of useState and how it's used for managing component state.

2. useEffect
Discuss the versatility of useEffect for handling side effects in functional components.

3. useContext
Explore how useContext facilitates the sharing of values like themes or user authentication throughout the component tree.

4. useReducer
Discuss the benefits of useReducer for managing complex state logic in a more centralized way.

5. useRef
Explain how useRef can be used to interact with DOM elements or persist values across renders without causing re-renders.

6. useCallback
Explain how useCallback can optimize performance by memoizing callback functions, preventing unnecessary re-renders.

7. useMemo
Discuss how useMemo can optimize performance by memoizing the result of expensive computations.

8. useLayoutEffect
Differentiate between useEffect and useLayoutEffect, emphasizing the use of the latter for interactions that require the DOM to be painted before continuing.

Conclusion
Summarize the additional hooks, highlighting their specific use cases and advantages. Encourage readers to explore these hooks further to enhance their React development skills. Also, mention the importance of staying updated with the React ecosystem as new hooks and patterns may emerge over time.

Make a Invoice with Tailwind CSS

Md .Rakibul Islam — Wed, 31 May 2023 07:13:23 +0000