Forem: Mahmud Rahman

Compare DocQR Tools to CamScanner

Mahmud Rahman — Mon, 23 Mar 2026 05:22:53 +0000

DocQR Tools and CamScanner are both Android apps that handle document-related tasks (especially scanning and PDF creation), but they target quite different user needs and philosophies in 2026.

Here's a clear side-by-side comparison based on their current positioning, features, and approach:

Aspect	DocQR Tools (by Bengal Bytes, launched ~March 2026)	CamScanner (IntSig / established leader)
Primary Focus	All-in-one lightweight utility suite (17–24+ tools)	Professional-grade document scanning + PDF management + OCR ecosystem
Core Scanning	Basic document → PDF via image import (gallery-based, quick multi-image to PDF)	Advanced camera scanning: edge detection, perspective correction, filters, batch mode, auto-capture
PDF Features	Image → PDF, basic creation/compression, possibly merge/split in pro version	Full PDF editing suite: annotate, sign, rearrange pages, compress, encrypt, convert (PDF ↔ Word/Excel/PPT)
OCR (Text Recognition)	Not prominently featured (likely absent or very basic if present)	Strong built-in OCR: extract text accurately, searchable PDFs, multi-language support
QR / Barcode Tools	Excellent: fast QR/barcode scanner, generator (custom QR, vCard, Wi-Fi, multiple barcode types like Code 128, UPC, EAN, PDF417)	Basic QR scanning (more of a side feature, not a focus)
Other Utilities	Calculator, notes, timer, password generator, invoice generator, unit converter, teleprompter, task breaker, image compressor, timezone converter, SEO tags (pro), etc. — true multi-tool app	Mostly document-centric: ID photo maker, some cloud sync, collaboration links, desktop companion app with offline editing
Offline Support	100% offline for almost all tools (big selling point)	Good offline scanning/editing, but many advanced features (OCR, conversion, sync) benefit from or require cloud
Ads & Monetization	Appears mostly free with minimal/no intrusive ads mentioned; possible pro upgrade for extra tools	Free version has heavy ads; premium subscription removes ads + unlocks full features
Privacy & Data	Emphasizes privacy-focused, offline-first design	History of privacy concerns (2019 malware incident); now stresses security but still cloud-reliant for many features
App Size & Performance	Lightweight, fast, modern UI (Flutter-based, dark mode)	Larger app, more feature-heavy, can feel busier/cluttered
Target User	People who want one app for everyday utilities + occasional quick scans & strong QR needs	Professionals, students, businesses needing high-quality scans, editable PDFs, OCR, and cross-device workflows
Maturity & Downloads	Very new (~10+ downloads shortly after launch, early promotion phase)	Mature product, tens/hundreds of millions of installs historically, well-known brand
Best For	Replacing 5–10 small utility apps, QR-heavy workflows, privacy-conscious users who want simplicity	Serious document digitization, needing clean scans from camera, text extraction, PDF editing on mobile/desktop

Quick Verdict

Choose DocQR Tools if you're tired of 10+ separate tiny apps and want a clean, offline, modern Swiss-army-knife toolset where QR/barcode handling + basic PDF creation is enough. It's especially appealing if privacy, speed, and not dealing with ads matter a lot to you. (And yes — the developer is actively promoting it right now!)
Choose CamScanner if document scanning is your main/daily need: you photograph a lot of paper, want polished results with automatic enhancements, need searchable text via OCR, or require advanced PDF editing/conversion features. It's more mature and powerful in the pure scanning domain.

In short: DocQR Tools is the broad multi-tool, while CamScanner remains the specialized scanning powerhouse. If your primary pain point is fragmented utility apps rather than professional-grade document scanning, DocQR Tools could be a refreshing lightweight alternative in 2026.

Try Now: https://play.google.com/store/apps/details?id=com.bengalbytes.docqr_tools

From Idea to Play Store: The Unfiltered Guide to Publishing Your First App (AdMob included!)

Mahmud Rahman — Tue, 17 Mar 2026 11:36:52 +0000

You have a fantastic idea and the coding skills to bring it to life, but the journey from executing flutter create to launching a live app on the Google Play Store can be challenging. Recently, I deployed my first app, DocQR Tools, an all-in-one utility kit, and the experience taught me valuable lessons that you won't easily find in the official documentation.

Here is the real, unfiltered guide for solo developers to build, monetize, and publish their first app.

1. The Build: Focus on the MVP

Don't fall into feature creep. For DocQR Tools, I wanted a QR scanner, a smart calculator, and various utilities. I focused strictly on core functionality and keeping the app lightweight (especially optimizing for low-end devices).
💡 Pro-tip: Constantly test on a physical Android device, not just the emulator.

2. Monetisation: Adding AdMob the Right Way

Everyone wants to earn from their hard work, but AdMob can be tricky for beginners.

The Reality: Don't spam ads. Place banner ads at the absolute bottom or top where they don't block UI interactions. Use Interstitial ads only between distinct page transitions.
The Hidden Trap: ALWAYS use AdMob test IDs during development. If you use real ad units and click them by mistake while testing, your account can be suspended for invalid traffic before you even launch.

3. The Closed Testing Marathon

Google Play now requires new personal accounts to run a closed test with 20 opt-in testers for 14 continuous days.

The Reality: Getting 12/20 people to opt-in daily is hard. Use communities on Reddit (like r/AndroidClosedTesting), Discord, or Facebook to find fellow developers willing to swap testing limits.
Engage: Actually collect their feedback. When applying for production access, Google will ask exactly how you gathered and implemented feedback. Have a changelog ready!

4. Navigating the Play Console Labyrinth

When preparing the release, the policy declarations can feel overwhelming.

Data Safety: Be painfully honest. If you use a third-party SDK (like AdMob), you are technically collecting diagnostic and device ID data. You must declare it!
Target Configurations: Android is moving towards 16 KB memory page sizes. Ensure your NDK, Flutter versions, and build configurations are updated to avoid future release restrictions.

5. Pressing 'Publish'

Submit your app for review. It can take up to 7 days for a new app. Don't panic if it sits in "In Review" status for days. That is completely normal.

Conclusion
Creating and launching DocQR Tools has been quite a journey, but witnessing real users download it makes every late-night debugging session worthwhile. To all new developers: keep pushing forward, respect the process, and celebrate the small victories!

DocQR Tools

17 powerful tools in one app! PDF creator, QR scanner, calculator, notes, timer & more.

Beautiful design • Dark mode • 100% Free

Give my app a try and put it to the test! Your feedback is invaluable, and I'm excited to see what you think!

Seeking Mutual Support for Android Closed Testing

Mahmud Rahman — Tue, 03 Mar 2026 17:36:45 +0000

Help Needed: 12 Testers for Google Play Closed Testing (14 Days) 🚀

Hi everyone,

I’m in the final stage of launching a new Android app on the Google Play Store. To meet current production access requirements, I need 12 testers to participate in a 14-day closed testing phase.

Finding 12 out of 20 consistent testers can be challenging for independent developers, so I’m proposing a "Test-for-Test" collaboration.

Here’s how we can help each other:
If you have an app currently in testing, I will gladly test yours in return. I’ll keep your app installed for the full 14 days and provide any feedback you need.

Let’s create a small support circle to help each other get our apps live. If you’re a fellow developer in a similar situation or someone willing to assist a developer, please comment below or send me a direct message. I’ll share the Google Group and opt-in links with you.

Let's support each other and grow together!

Join: https://groups.google.com/g/playconsole-closed-testing

I Built an AI Reply, Enhance & Translate Assistant, Browser Extension + Web App + Mobile (Open Source)

Mahmud Rahman — Wed, 18 Feb 2026 15:57:23 +0000

I Built an AI Reply, Enhance & Translate Assistant, Browser Extension + Web App + Mobile (Open Source)

Most developers have, at some point, written the same reply template for the tenth time that week. Or slowly rewritten a perfectly fine email into something that sounds more professional. Or copied text into Google Translate, copied the output back, and wondered why this is still a manual process in 2025.

I got tired of it. So I built something.

Smart Reply, Enhance & Translate is a full-stack AI tool suite — a browser extension, a React web app, and a Flutter mobile app — all backed by a single Node.js server that talks to LLMs via OpenRouter. The whole project is open source, and this post is a walkthrough of what it does, how it's built, and why I made some of the architectural decisions I did.

What It Does

The project has three modes, each available across all three client interfaces:

Smart Reply — you paste a message you've received, and the tool generates 4 context-aware reply suggestions. Useful for support tickets, emails, DMs, anything where you're responding to someone else.

Smart Enhance — you paste your own draft text and get 4 improved variations. Think grammar correction, better clarity, tighter structure, more natural flow. Like Grammarly, but generating alternatives instead of correcting inline.

Smart Translate — paste text, pick a target language, and get 4 translated variations in your chosen tone. The tool supports English, Spanish, French, German, Chinese, Arabic, Bengali, and more.

For all three modes, you can pick from 6 response formats: Professional, Friendly, Casual, Formal, Flirty, and Romantic. Each one changes not just vocabulary but the entire register and feel of the output.

Architecture Overview

smart-reply/
├── backend/           # Node.js + Express — the shared API layer
├── extension/         # Chrome/Firefox (Manifest V3) — vanilla JS
├── frontend/          # React + Zustand + Tailwind + Framer Motion
└── smart_reply_app/   # Flutter + Provider — Android

Three clients, one backend. Every client hits the same three endpoints, and the backend handles model selection, prompt construction, caching, and response formatting.

This was an intentional decision. I didn't want three separate AI integrations to maintain. The backend owns all the LLM logic, and the clients stay thin.

The Backend

The Express server exposes three endpoints:

POST /api/suggest-reply     — Smart Reply mode
POST /api/enhance-text      — Smart Enhance mode
POST /api/translate-text    — Smart Translate mode
GET  /health                — Health check

Each endpoint receives a text payload and a format string, constructs a structured prompt, calls OpenRouter, and returns an array of suggestions/enhancements/translations.

Model Selection Strategy

One thing I wanted to avoid was routing every request to the same model. Different operations benefit from different model strengths. In v0.4, the backend selects from a priority-ordered list of free OpenRouter models per operation type:

// Simplified — actual implementation uses a weighted selector
const models = {
  suggest:   ['xiaomi/mimo-v2-flash:free', 'tngtech/deepseek-r1t2-chimera:free', 'openai/gpt-oss-20b:free'],
  enhance:   ['tngtech/deepseek-r1t2-chimera:free', 'xiaomi/mimo-v2-flash:free', 'openai/gpt-oss-20b:free'],
  translate: ['openai/gpt-oss-20b:free', 'xiaomi/mimo-v2-flash:free', 'tngtech/deepseek-r1t2-chimera:free'],
};

The system is LLM-agnostic. If you have a paid OpenRouter key, you can swap in any model you want. The backend doesn't care.

The Caching System (v0.4)

This was the most meaningful engineering work in v0.4. Before it, every request hit OpenRouter — even if the user had just asked the exact same question 30 seconds ago.

The new caching layer uses SHA256 hashing to generate collision-resistant cache keys from the full prompt + model identifier. Entries expire after 5 minutes (TTL).

const cacheKey = sha256(prompt + modelId);

if (cache.has(cacheKey)) {
  return cache.get(cacheKey); // instant response
}

const result = await callOpenRouter(prompt, modelId);
cache.set(cacheKey, result, { ttl: 300 });
return result;

Why SHA256 and not just a string hash?

Simple string hashing produces collisions at scale. Two different prompts can generate the same hash, which means one user gets another user's cached response. SHA256 eliminates this entirely.

Results from v0.4:

Metric	Before	After
API Cache Hits	0%	~60%
Response Size	100%	~32%
Cache Key Collisions	High	0%
React Re-renders	High	−40–50%
Zombie Requests	Common	Eliminated

The Browser Extension

The extension uses Manifest V3 with vanilla JavaScript — no framework. This was deliberate. Extensions need to be small, fast, and predictable. A React bundle in an extension popup is overkill and adds startup latency.

Key extension features:

Direct text injection — click a suggestion and it inserts directly into the active text field (email composer, chat input, etc.)
Context menu integration — right-click selected text to translate it instantly
Keyboard shortcut — Ctrl+Shift+T triggers the translation flow without opening the popup
Auto-detection — the extension detects selected text on the page and pre-populates the input

The extension communicates with the backend via the user-configured API URL, stored in chrome.storage.sync. This means settings persist across devices when signed into Chrome.

The React Web App

The web frontend uses:

React for the component tree
Zustand for state management — lightweight, no boilerplate, perfect for this scale
Tailwind CSS for styling — utility-first, consistent, fast to iterate
Framer Motion for animations — the mode-switching transition and result card animations make the experience feel polished
Lucide React for icons

One detail I spent time on: the textarea auto-resizes as you type. It sounds trivial but it matters for long inputs — a fixed-height box that scrolls feels unfinished.

Keyboard shortcut Ctrl/Cmd + Enter submits the form, which keeps the interaction flow close to how developers already work.

The Flutter Mobile App

The mobile app uses Flutter with Provider for state management. It hits the same backend endpoints, so every feature available on web is available on mobile.

One configuration note: Android Emulators use 10.0.2.2 to refer to the host machine's localhost. Physical devices need the actual LAN IP of your dev machine.

// lib/utils/constants.dart
const String baseUrl = 'http://10.0.2.2:5006/api'; // emulator
// const String baseUrl = 'http://192.168.1.X:5006/api'; // physical device

Running It Locally

Backend (Option A — local):

cd backend
# Create .env with OPENROUTER_API_KEY and PORT=5006
npm install && npm start

Backend (Option B — Docker):

docker build -t smart-reply-backend ./backend
docker run -d -p 5006:5006 --env OPENROUTER_API_KEY=your_key smart-reply-backend

Web frontend:

cd frontend
# Create .env with VITE_API_ENDPOINT=http://localhost:5006/api
npm install && npm run dev

Browser extension: Load unpacked from chrome://extensions → select the extension/ folder.

Flutter app:

cd smart_reply_app
flutter pub get && flutter run

API Quick Reference

All endpoints accept JSON and return arrays of suggestions:

# Smart Reply
curl -X POST http://localhost:5006/api/suggest-reply \
  -H "Content-Type: application/json" \
  -d '{"message": "Can we push the deadline?", "format": "professional"}'

# Smart Enhance
curl -X POST http://localhost:5006/api/enhance-text \
  -H "Content-Type: application/json" \
  -d '{"text": "plz fix the bug its urgent", "format": "professional"}'

# Smart Translate
curl -X POST http://localhost:5006/api/translate-text \
  -H "Content-Type: application/json" \
  -d '{"text": "Good morning!", "format": "friendly", "language": "spanish"}'

Security (v0.4 Additions)

A few security hardening steps went in with v0.4 that are worth calling out:

Security headers — XSS protection, X-Frame-Options (clickjacking prevention), Content-Type enforcement
Strict input validation — all inputs are validated server-side before being passed to the LLM prompt
Request cancellation — in-flight requests are cancelled when a new request comes in, preventing race conditions and stale responses ("zombie requests")

What's Next

A few things I'm thinking about for future versions:

Streaming responses — returning suggestions one by one as they generate rather than waiting for the full array
A history panel in the web app — saved past suggestions with search
Firefox extension compatibility improvements (Manifest V3 support in Firefox is still a bit fragile)
More languages for translation
A Claude / Gemini / local model option alongside OpenRouter

Contributing

This is fully open source and contributions are welcome. The codebase is clean and reasonably well-organized, and the README covers everything you need to get started.

If you find a bug, want to add a language, improve the caching logic, or build out a new client, open an issue or a PR.

🔗 GitHub: github.com/mahmud-r-farhan/smart-reply

🌐 Live Demo: smart-reply-delta.vercel.app

Closing Thought

The most satisfying tools to build are the ones that remove friction from things you do every day. This project isn't trying to be a platform. It's trying to be genuinely useful in the 30 seconds you spend writing a reply you've written before.

If you find it useful, a ⭐ on GitHub goes a long way.

And if you've built something similar or have ideas for where this could go, drop a comment. I read them all.

Hogo: Ignite Your Node.js Performance with Atomic Request Coalescing

Mahmud Rahman — Mon, 12 Jan 2026 14:35:26 +0000

The "Thundering Herd" Problem

We've all been there. You have an expensive endpoint—maybe a complex database aggregation or a third-party API call. It takes 500ms to execute.

Suddenly, 100 users hit that endpoint at the exact same moment.

Without Hogo:

❌ Your database gets hammered with 100 simultaneous queries.
❌ Your event loop lags.
❌ Memory usage spikes as 100 response objects are buffered.
❌ Users wait 500ms + overhead.

Enter Hogo 🛡️

Hogo is a new zero-dependency Node.js framework that implements the SingleFlight pattern (made famous by Go) directly into its core.

It uses Atomic Coalescing to manage concurrent identical requests.

With Hogo:

✅ 1 database query executes.
✅ 99 requests "wait" for the result of the first one.
✅ All 100 users get the exact same response at the same time.
✅ CPU and memory usage remain flat.

How It Works

Hogo tracks "flights" based on the request method and URL. If a flight is already in the air (processing), subsequent identical requests attach themselves as passengers to that flight instead of launching their own.

import { Hogo } from 'hogo';

const app = new Hogo();

// This handler will run ONLY ONCE if 100 requests hit it simultaneously
app.get('/expensive-data', async (ship) => {
  const data = await db.heavyAggregation();
  return ship.json(data);
});

app.ignite(3000);

Benchmarks

In our tests simulating 1000 concurrent requests:

Traditional Framework: 1000 DB queries, High CPU spike.
Hogo: 1 DB query, Low CPU.

It's not just caching (which has TTLs and invalidation logic). It's live deduplication. If no one is asking, nothing is calculated. If 1000 people ask, it's calculated once.

Getting Started

Hogo is lightweight and has zero dependencies.

npm install hogo

Give it a try and let me know what you think!

🔗 NPM: https://www.npmjs.com/package/hogo
🔗 GitHub: https://github.com/hogo-js/hogo

Discover Realtime Location Tracker: An Open-Source PWA for Real-Time Device Monitoring and Communication

Mahmud Rahman — Thu, 01 Jan 2026 20:08:00 +0000

Hey devs! If you're into building apps that involve location services, real-time communication, or IoT-like tracking, I've got an exciting open-source project to share. It's called Realtime Location Tracker, created by Mahmud Rahman (GitHub: mahmud-r-farhan). This Progressive Web App (PWA) lets you monitor and track connected devices in real-time, complete with interactive maps, instant messaging, and even voice calls. Whether you're working on fleet management, delivery apps, team coordination, or personal safety tools, this project packs a punch.

What is Realtime Location Tracker?

At its core, this is a PWA designed to track the real-time locations of multiple devices. It uses GPS data to plot positions on an interactive map and supports features like emergency SOS alerts, live chat, and audio communication. The app is responsive, works offline (with limitations), and can be installed on desktops or mobiles just like a native app.

Key use cases include:

Fleet management and delivery tracking
Team coordination in the field
Personal location sharing with friends/family
Emergency response systems

The project emphasizes reliability as it scales, with updates pushing for actionable insights and user-friendly design. Mahmud describes it as a "game-changer" that turns simple monitoring into intelligent, confidence-boosting management.

Key Features

Here's a breakdown of the standout features:

Real-Time Tracking: Continuous GPS updates visualized on a Leaflet map. Devices appear as markers with pop-up details like battery level, platform, and connection status.
Device Management: Automatic device identification, custom icons, and a connection panel to oversee all active users.
Communication Tools:
- Live chat powered by WebSockets (Socket.IO) – send messages and even click them to zoom to the sender's location.
- Real-time audio calls via WebRTC, including a "megaphone" mode for broadcasting to all users.
Emergency SOS (Version 4.0+): Hold a button to send an alert with GPS coords, battery info, IP geolocation, and more. Receivers get audio alarms, vibrations (on mobile), and browser notifications.
PWA Capabilities: Installable, offline support with a fallback page, service worker caching, auto-updates, and push notifications.
Activity Logging: Server-side logs for connections, disconnections, and events.
Geofencing and Intelligent Monitoring: Recent updates add battery alerts to prevent disconnections and geofencing for location-based triggers.
Responsive UI: Dark/light themes, intuitive controls like Floating Action Buttons (FAB), and compatibility across devices.

These features make it more than just a tracker – it's a full-fledged communication hub.

Tech Stack

The project is built with a modern, lightweight stack that's easy to hack on:

Backend: Node.js (v18+), Express.js
Real-Time Comms: Socket.IO for messaging and location events
Mapping: Leaflet with OpenStreetMap (supports offline maps)
Audio: WebRTC for peer-to-peer voice
Frontend: HTML, CSS, JavaScript, EJS templates
PWA Essentials: Web App Manifest, Service Worker
Deployment: Docker and Docker Compose for easy containerization
Other Tools: npm, Git, GitHub Actions

No heavy frameworks here – it's vanilla JS with targeted libraries, making it performant and straightforward to extend.

How to Get Started

Setting up is a breeze. Here's the quick guide:

Clone the Repo:

   git clone https://github.com/mahmud-r-farhan/Realtime-Location-Tracker.git
   cd Realtime-Location-Tracker

Install Dependencies:

   npm install

Run the App:

   npm start

Open http://localhost:3007 in your browser, grant location permissions, and start tracking!

For production, use Docker:

docker build -t realtime-location-tracker .
docker run -p 3007:3007 realtime-location-tracker

Or Docker Compose: docker-compose up -d.

To test real-time features, open the app in multiple browsers or devices and invite others to join. Grant location access, and watch the magic happen on the map.

Demo and Visuals

Check out the live demo here: https://realtime-location-tracker-v9ow.onrender.com/. It's best experienced with multiple users – share the link and see real-time updates in action.

Mahmud also shared a demo video on LinkedIn: Watch the Demo. It showcases the updated UI, audio rooms, and tracking in motion.

Screenshots are available in the repo's public/assets/ folder, covering Android/iOS logs and more.

Why Contribute or Use This Project?

As an open-source project, it's licensed under terms that encourage collaboration (check LICENSE in the repo). If you're interested in contributing:

Follow CONTRIBUTING.md for guidelines.
Adhere to the CODE_OF_CONDUCT.md.
Report security issues via SECURITY.md.
Submit pull requests with tests and alignment to the core stack.

This is a great starting point for learning about WebSockets, WebRTC, PWAs, or location-based apps. Plus, with features like geofencing and IoT integration, it has real-world potential for customization.

Wrapping Up

Realtime Location Tracker is a solid example of how open-source can drive innovation in tracking and communication tech. Kudos to Mahmud Rahman for building and sharing this – it's pushing boundaries in real-time apps.

If this sparks your interest, star the repo on GitHub: https://github.com/mahmud-r-farhan/Realtime-Location-Tracker, fork it, and build something awesome. Drop your thoughts in the comments – have you built similar apps? What's your take on WebRTC for audio in PWAs?

🐻 Introducing Zustand Copilot: The Ultimate VS Code Extension for Zustand State Management

Mahmud Rahman — Fri, 26 Dec 2025 19:11:18 +0000

If you've been working with Zustand for state management in React, you know how elegant and powerful it is. But what if you could make your Zustand development experience even better?

Today, I'm excited to announce Zustand Copilot — a VS Code extension designed to be the definitive toolkit for Zustand v5+ development.

🤔 Why I Built This

After building dozens of React applications with Zustand, I found myself:

📝 Typing the same store boilerplate over and over
🔍 Constantly switching to docs for syntax reference
😓 Forgetting to use useShallow for multi-value selectors (hello, unnecessary re-renders!)
📁 Manually setting up the Slices Pattern for larger apps

Zustand Copilot solves all of these problems.

✨ Key Features

1. TypeScript-First Snippets

Just type a prefix and get production-ready code:

Prefix	What You Get
`zstore`	Complete store with devtools
`zslice`	Slice for the Slices Pattern
`zpersist`	Persisted store with localStorage
`zshallow`	useShallow selector (performance!)
`zasync`	Async store with loading states
`zimmer`	Immer-powered mutable updates

Example: Type zstore and get:

import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

export const useCounterStore = create<CounterState>()(
  devtools(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 }), false, 'increment'),
      decrement: () => set((state) => ({ count: state.count - 1 }), false, 'decrement'),
      reset: () => set({ count: 0 }, false, 'reset'),
    }),
    { name: 'CounterStore' }
  )
);

2. Smart Code Actions

Right-click on any store and get intelligent refactoring options:

Wrap with devtools — Add Redux DevTools integration instantly
Wrap with persist — Add localStorage persistence
Add useShallow — Optimize your selectors for performance
Extract to Slices Pattern — Modularize large stores

3. Real-Time Hover Documentation

Hover over any Zustand function and get:

📖 Detailed description
📝 TypeScript signature
💻 Usage examples
⚡ Performance tips
🔗 Links to official docs

4. Intelligent Auto-Imports

Start typing and get smart import suggestions for:

create, createStore, useStore
devtools, persist, immer
useShallow (with performance hints!)
StateCreator, StoreApi types

5. Command-Driven Store Generation

Use the Command Palette (Ctrl+Shift+P) to:

Create New Store — Interactive store generator
Create New Slice — Generate slice files
Generate Slices Pattern Store — Full project structure

⚡ Performance Best Practices Built-In

Zustand Copilot doesn't just help you write code faster — it helps you write better code.

useShallow Everywhere

// ❌ Bad: Creates new object on every render
const { name, age } = useStore((state) => ({ 
  name: state.name, 
  age: state.age 
}));

// ✅ Good: Shallow comparison prevents re-renders
const { name, age } = useStore(
  useShallow((state) => ({ 
    name: state.name, 
    age: state.age 
  }))
);

The extension will warn you when you forget useShallow and offer to add it automatically!

Slices Pattern for Scale

For large applications, the extension encourages the Slices Pattern:

src/stores/
├── index.ts           # Combined store
└── slices/
    ├── authSlice.ts   # Authentication
    ├── userSlice.ts   # User data
    └── settingsSlice.ts # Settings

Use the Zustand: Generate Slices Pattern Store command to scaffold this instantly.

🚀 Getting Started

Installation

Open VS Code
Press Ctrl+Shift+X to open Extensions
Search for "Zustand Copilot"
Click Install

Or install via CLI:

code --install-extension devplusfun.zustand-copilot

Quick Start

Create a new .ts or .tsx file
Type zstore and press Tab
Fill in the placeholders
Start building! 🐻

📊 Available Snippets

Snippet	Description
`zstore`	Basic store with devtools
`zslice`	Slice for Slices Pattern
`zpersist`	Persisted store
`zasync`	Async store with loading
`zimmer`	Immer middleware store
`zslices`	Combined slices store
`zshallow`	useShallow selector
`zselector`	Memoized selector
`zsubscribe`	Store subscription
`zgetstate`	Access state outside React
`zcontext`	Context pattern store
`zcomputed`	Computed properties
`zreset`	Store with reset
`zmiddleware`	Full middleware stack
`zactions`	Separate actions interface
`ztemporal`	Undo/redo with zundo

🛠 Configuration

Customize the extension in your VS Code settings:

{
  "zustandCopilot.autoImport.enabled": true,
  "zustandCopilot.hoverDocs.enabled": true,
  "zustandCopilot.codeActions.enabled": true,
  "zustandCopilot.defaultStorePath": "src/stores",
  "zustandCopilot.useShallowByDefault": true,
  "zustandCopilot.includeDevtools": true
}

🙏 Feedback Welcome!

This is just version 1.0.0, and I have big plans for future releases:

📊 Store visualization panel
🧪 Testing utilities
🔄 Redux → Zustand migration tools
📈 Performance analysis

What features would you like to see? Drop a comment below or open an issue on GitHub!

🔗 Links

📦 VS Code Marketplace
📖 Zustand Official Docs

If this extension helps your Zustand development, please ⭐ star the repo and leave a review on the marketplace! It really helps others discover it.

Happy coding! 🐻✨

Building an AI-Powered Resume Analyzer: My Journey with Resume Analiser

Mahmud Rahman — Mon, 22 Dec 2025 09:18:46 +0000

Hey dev.to community! 👋 I'm Mahmud Rahman Farhan, a full-stack JavaScript developer from Bangladesh. Over the past few months, I've been working on a project that's close to my heart (and super useful in today's job market): an AI-powered resume optimizer called Resume Analiser.

In a world where ATS (Applicant Tracking Systems) reject 75% of resumes before a human even sees them, tailoring your resume to each job description is crucial. That's why I built this tool – to help job seekers like you (and me!) personalize resumes quickly and effectively using AI.

Check out the GitHub repo here: https://github.com/mahmud-r-farhan/resume-analiser

And there's even a live demo: https://resumeanalizer.vercel.app/

What Does It Do?

Resume Analiser is your personal career copilot. Here's the flow:

Upload your PDF resume (text-based only for now – scanned PDFs coming soon via OCR!).
Paste the target job description.
Hit analyze – powered by AI models from OpenRouter.

You get back:

A premium analysis dashboard with:
- Executive summary
- Strengths in your resume
- Keyword gaps (super important for ATS!)
- ATS-friendly guidance
A dynamic fit score visualized as a cool gauge showing how well your resume matches the job.
An optimized, regenerated resume in Markdown format, tailored to the job.
Support for different templates: Classic, Modern, or Functional – regenerate with one click!
Easy exports: Copy Markdown, download as PDF, or save the full analysis.

It's all about making your resume stand out while beating those pesky ATS filters.

Tech Stack

I went with a modern, full-stack JavaScript setup:

Frontend: React + Vite for fast development, Tailwind CSS for styling, Framer Motion for smooth animations, and Sonner for toast notifications.
Backend: Node.js + Express.js for the API.
Database: MongoDB (optional, mainly for logging analyses).
AI Integration: OpenRouter.ai – flexible access to various LLMs (you can pick free or paid models).
Deployment: Frontend on Vercel (hence the live demo).

Everything is open-source under the MIT license, so feel free to fork and tweak!

Why I Built This

Job hunting can be brutal. I've applied to countless roles and seen great candidates get ghosted because their resume didn't have the "right" keywords. Tools like this exist (some paid ones are pricey), but I wanted something accessible, customizable, and built with open AI providers.

Plus, it was a great excuse to dive deeper into:

PDF parsing on the backend.
Prompt engineering for accurate resume analysis and regeneration.
Building a resilient UI that handles API rate limits gracefully.

Key Features in Action

Rich Markdown Rendering: The analysis and new resume look beautiful with highlighted sections.
Template Switching: Not happy with the layout? Switch and regenerate instantly.
Resilient Experience: Loading spinners, error handling for rate limits, and helpful tips throughout.

Limitations? Free AI models might throttle on heavy use, and image-based PDFs aren't supported yet (roadmap item!).

How to Run It Locally

Want to try it yourself or contribute?

git clone https://github.com/mahmud-r-farhan/resume-analiser.git
cd resume-analiser

# Backend
cd backend
npm install
# Add your .env (see README for keys, especially OPENROUTER_API_KEY)

npm run dev

# Frontend (in another terminal)
cd ../frontend
npm install
# Add .env for API endpoint

npm run dev

Open http://localhost:5173 and start optimizing!

Video tutorial[2]: https://youtu.be/6tqwrwDfaJY?si=dpa8KtZaRrZiucV7
Video tutorial[1]: https://youtu.be/bwddg9qh_vE?si=nqAqZJN-xHfQq6cE

What's Next?

Add OCR for scanned PDFs.
More templates and customization options.
User accounts for saving histories (using MongoDB more fully).
Maybe integrate more AI providers or fine-tuned prompts.

If you like the project, give it a star on GitHub ⭐ – it motivates me a ton (it's at 3 stars right now 😅).

I'd love feedback! Have you used similar tools? What features would you add? Drop a comment below.

Thanks for reading, and happy job hunting! 🚀

Regular Expressions Fast – JavaScript Regex (Beginner to Pro)

Mahmud Rahman — Thu, 18 Dec 2025 04:29:35 +0000

If the words regular expression make you nervous, good. That means you haven’t wasted years avoiding one of the most powerful tools in programming.

Regex is not magic. It’s just a compact language for finding, validating, extracting, and replacing text. Once you understand the rules, it becomes predictable and fast.

This article is beginner‑friendly, but it does not dumb things down. We’ll cover regex properly, with clean JavaScript examples and practical use cases.

What Is a Regular Expression?

A regular expression (regex) is a pattern used to match text.

In JavaScript, regex is mainly used with strings:

const text = "hello world";
text.match(/world/); // ['world']

You define regex patterns using:

/pattern/flags

Example:

/hello/i

hello → pattern
i → flag (case‑insensitive)

How Regex Works (Mental Model)

Regex works left to right, character by character.

Think of it like this:

The engine reads the string
Tries to match your pattern
Stops when it fails or succeeds

No mystery. Just rules.

Creating Regex in JavaScript

1. Literal syntax (most common)

const regex = /abc/;

2. Constructor syntax (dynamic patterns)

const word = "abc";
const regex = new RegExp(word);

Use the constructor only when patterns must be dynamic.

Common Regex Methods in JavaScript

`test()` → true / false

/abc/.test("abc123"); // true

`match()` → get matched result

"abc123".match(/abc/);

`replace()` → replace text

"hello world".replace(/world/, "JS");

`search()` → index of match

"hello".search(/e/); // 1

Characters and Literals

Basic matching:

/hello/   // matches "hello"

Regex is case‑sensitive by default.

/hello/i  // matches "Hello", "HELLO"

Special Characters (Meta Characters)

These characters have special meaning:

. ^ $ * + ? ( ) [ ] { } | \

To match them literally, escape with \\:

/\./  // matches a dot

Character Classes `[ ]`

Match one character from a set:

/[abc]/     // a OR b OR c
/[0-9]/     // any digit
/[a-z]/     // lowercase letters
/[A-Z]/     // uppercase letters

Negation:

/[^0-9]/    // NOT a digit

Shorthand Character Classes

Pattern	Meaning
`\d`	digit (0–9)
`\D`	not digit
`\w`	word char (a–z, A–Z, 0–9, _)
`\W`	not word
`\s`	whitespace
`\S`	not whitespace

Example:

/\d+/.test("123"); // true

Quantifiers (How Many?)

Quantifiers control repetition.

Symbol	Meaning
`*`	0 or more
`+`	1 or more
`?`	0 or 1
`{n}`	exactly n
`{n,}`	n or more
`{n,m}`	between n and m

Examples:

/a*/    // "", "a", "aaaa"
/a+/    // "a", "aaaa"
/a{2}/  // "aa"

Greedy vs Lazy Matching

Regex is greedy by default.

"<div>test</div>".match(/<.*>/);
// matches everything

Lazy version:

"<div>test</div>".match(/<.*?>/);

Add ? to make it lazy.

Anchors `^` and `$`

Anchors match positions, not characters.

/^hello/   // starts with hello
/world$/  // ends with world

Useful for validation.

Groups `( )`

Groups let you capture parts of a match.

const result = "2025-12-18".match(/(\d{4})-(\d{2})-(\d{2})/);

result[1]; // year
result[2]; // month
result[3]; // day

Non‑capturing group:

/(?:abc)+/

Alternation `|` (OR)

/cat|dog/

Matches either cat or dog.

Flags

Flag	Meaning
`g`	global
`i`	case‑insensitive
`m`	multiline
`s`	dot matches newline
`u`	unicode
`y`	sticky

Example:

/hello/gi

Lookaheads & Lookbehinds

Positive Lookahead

/\d(?=px)/  // digit followed by px

Negative Lookahead

/\d(?!px)/

Lookbehind (modern JS)

/(?<=\$)\d+/

Use sparingly. They reduce readability.

Common Real‑World Examples

Email Validation (simple)

/^[^\s@]+@[^\s@]+\.[^\s@]+$/

Phone Number

/^\+?\d{10,14}$/

Password (basic rules)

/^(?=.*[A-Z])(?=.*\d).{8,}$/

Performance Tips (Important)

Avoid .* when possible
Anchor your regex (^, $)
Keep patterns specific
Don’t overuse lookarounds

Bad regex will be slow.

Debugging Regex

Use tools:

Regex101
Regexr

Test small. Build step by step.

Final Advice (Brutally Honest)

Regex is not hard.

Unreadable regex is your fault, not regex’s.

If your pattern looks like line noise:

Break it
Comment it
Or don’t use regex at all

Use regex when it simplifies the problem, not to show off.

Cheat Sheet

.      any char
\d     digit
\w     word
\s     space
+      one or more
*      zero or more
?      optional
^      start
$      end
|      OR
()     group

If you master regex, text stops being messy.
It becomes structured.

And that skill pays forever.

Follow for more! @mahmud-r-farhan
Contact: https://gravatar.com/floawd

Connect MongoDB & PostgreSQL in Node.js

Mahmud Rahman — Thu, 13 Nov 2025 15:20:11 +0000

Connecting your database might sound simple, “paste the URI and go,” right?
However, as your app grows, a sloppy connection setup can lead to timeouts, hanging requests, or silent disconnections.
Let’s fix that from the start.

What You’ll Learn

How to connect Node.js with MongoDB (via Mongoose)
How to connect Node.js with PostgreSQL (via pg)
Proper async setup
Handle errors, timeouts, and disconnects
Write connection code you can actually reuse in production

MongoDB Connection (with Mongoose)

Mongoose is the go-to library for Node.js + MongoDB. It simplifies schema management and handles async connections.

1 Install dependencies

npm install mongoose

2 Create a connection file

Let’s call it db/mongo.js

import mongoose from "mongoose";

const MONGO_URI = process.env.MONGO_URI || "mongodb://localhost:27017/myapp";

export async function connectMongo() {
  try {
    // Set connection options
    const options = {
      useNewUrlParser: true,
      useUnifiedTopology: true,
      serverSelectionTimeoutMS: 5000, // Timeout after 5s
    };

    await mongoose.connect(MONGO_URI, options);
    console.log("✅ MongoDB connected successfully");
  } catch (err) {
    console.error("❌ MongoDB connection error:", err.message);
    process.exit(1);
  }

  // Handle runtime errors
  mongoose.connection.on("error", (err) => {
    console.error("⚠️ MongoDB connection error:", err);
  });

  mongoose.connection.on("disconnected", () => {
    console.warn("🔌 MongoDB disconnected");
  });
}

3 Use it in your app

import express from "express";
import { connectMongo } from "./db/mongo.js";

const app = express();

await connectMongo();

app.listen(3000, () => console.log("🚀 Server running on port 3000"));

PostgreSQL Connection (with `pg`)

PostgreSQL uses the official pg package. Simple and solid.

1 Install dependencies

npm install pg

2 Create a connection file

db/postgres.js

import pkg from "pg";
const { Pool } = pkg;

const POSTGRES_URI = process.env.POSTGRES_URI || "postgresql://user:password@localhost:5432/myapp";

const pool = new Pool({
  connectionString: POSTGRES_URI,
  idleTimeoutMillis: 5000, // Close idle clients after 5s
  connectionTimeoutMillis: 5000, // Timeout after 5s if cannot connect
});

pool.on("connect", () => console.log("✅ PostgreSQL connected successfully"));

pool.on("error", (err) => {
  console.error("❌ Unexpected PostgreSQL error:", err);
  process.exit(-1);
});

export async function query(text, params) {
  const client = await pool.connect();
  try {
    const res = await client.query(text, params);
    return res;
  } catch (err) {
    console.error("⚠️ Query error:", err.message);
    throw err;
  } finally {
    client.release();
  }
}

3 Use it in your app

import express from "express";
import { query } from "./db/postgres.js";

const app = express();

app.get("/", async (req, res) => {
  const result = await query("SELECT NOW()");
  res.send(result.rows);
});

app.listen(3000, () => console.log("🚀 Server running on port 3000"));

Quick Tips

Always wrap connections in async functions
Use env variables for credentials never hardcode them
Add timeouts so your app doesn’t hang forever
Use event listeners (on('error'), on('disconnected')) to handle runtime issues
For real projects, add a reconnection logic if needed

Example `.env` file

MONGO_URI=mongodb://localhost:27017/myapp
POSTGRES_URI=postgresql://user:password@localhost:5432/myapp

Wrap-Up

Connecting to a database isn’t just about making it work. It’s about ensuring stability, so your app remains operational even when the database restarts or the network experiences hiccups.

🚀 Unleash Your Browser's Hidden Superpowers: 3 Chrome DevTools Tricks to 10x Your Productivity

Mahmud Rahman — Thu, 06 Nov 2025 13:53:04 +0000

As developers, we practically live in the browser's console. It's our primary debugging battleground. But let's be honest: many of us stick to the basics, Inspect Element and the Console log.

Your familiar browser is hiding a suite of advanced tools that can transform your daily development life, making it faster, more insightful, and genuinely enjoyable.

Stop the tedious cycle of code-to-save-to reload." It's time to leverage Chrome DevTools' secret weapons!

1. 🎨 Design Mode: Your Browser is Now a Live Canvas

The Problem: You want to test a quick content change a different heading, a punchier call-to-action, or a slightly shorter paragraph. The typical workflow? Go to VS Code, edit the text, save the file, and refresh the browser. It's slow and disruptive to your flow.

The Superpower: Instantly edit any text on any webpage directly in the browser, just like you would in MS Word or Notepad.

How to Use It (The Trick):

Open your Console (Ctrl+Shift+J or Cmd+Option+J).
Paste and run this single line of JavaScript:
```
document.designMode = 'on'
```
That's it! Click on any text on the page and start typing.

💡 Real-World Use Case:

Rapid A/B Testing: Quickly mock up two different headline versions to visually compare which has a better impact before you commit to a single line of code.
Client Demos: Need to show a client exactly how a specific piece of text will look without deploying or making a commit? Edit it live in the meeting for instant feedback.

2. 🐢 Network Throttling: Stop Developing for Perfect Wi-Fi

The Problem: Your lightning-fast fiber optic connection at home or the office masks serious performance issues for users with slower internet. Your site might load in 1 second for you, but what is the experience for a user on a slow mobile connection?

The Superpower: Artificially simulate slow network conditions (like Slow 3G) directly in DevTools to experience your site like a remote user.

How to Use It (The Trick):

Open DevTools and navigate to the Network tab.
Look for the "No throttling" dropdown (usually near the top).
Click it and select an option like "Slow 3G" or "Fast 3G."
Reload your page. Watch the waterfall chart fill up and see exactly which assets are bogging down the load time.

💡 Real-World Use Case:

Identifying Critical Assets: You'll quickly see if a massive image or a non-critical third-party script is delaying the First Contentful Paint (FCP).
Performance Budgeting: Ensure your core user experience holds up even under adverse conditions, a crucial step in building truly resilient web applications.

3. 📸 Full Page Snapshot: Say Goodbye to Screenshot Extensions

The Problem: You need a high-resolution screenshot of an entire webpage, from the header to the footer, even the parts that require scrolling. This usually means installing a third-party browser extension.

The Superpower: Capture a full-page, high-fidelity image of the entire viewport—no scrolling, no extensions, no hassle.

How to Use It (The Trick):

Open DevTools.
Open the Command Menu by pressing Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (Mac).
Start typing: Screenshot
You will see several options:
- Capture full size screenshot: Captures the entire page (the one you want!).
- Capture node screenshot: Captures only a specific element you have selected in the Elements panel.

💡 Real-World Use Case:

Bug Reporting: Get a single, clean image of a layout issue on a long page for a colleague or QA team, providing all the context they need instantly.
Portfolio/Documentation: Easily create professional assets for your project documentation or personal portfolio with full-page fidelity.

🚀 BONUS: The Most Powerful Trick (Source Map Magic)

The Problem: You're debugging a minified, transpiled, or bundled JavaScript file in production. The code you see in DevTools is unreadable (a.b.c(d)) and completely unlike the beautiful, organised code you wrote. Setting breakpoints becomes a nightmare.

The Superpower: Transform that ugly production code back into your original, readable source code right within the browser, allowing you to debug with ease, even in a live environment.

How to Use It (The Trick):

Ensure your build process generates Source Maps (most modern build tools like Webpack, Rollup, Vite, and Create React App do this by default in development, and often include options for production).
Open DevTools and go to the Sources tab.
Navigate to your bundled JavaScript file (e.g., main.js, bundle.js).
If DevTools detects a source map, it will often automatically load your original files under a webpack:// or (no domain) folder structure.
If not, right-click inside the minified file editor and select "Add source map..." then point it to your .map file if it's served separately.
Voila! You can now set breakpoints, inspect variables, and step through your original, unminified code, even when running the production bundle.

💡 Real-World Use Case:

Production Debugging: When a bug only appears in a production environment (due to server configuration, CDN issues, etc.), Source Maps are your absolute best friend. You can connect DevTools to a remote device or use console.log with original line numbers for precise issue identification.
Understanding Third-Party Libraries: Explore the unminified source of libraries you're using without cloning their repositories.

Final Thought

Being a "smart developer" isn't just about writing clean code; it's about mastering your tools. These DevTools superpowers were right there, waiting for you. Integrating these few tricks into your daily workflow will make your job faster, more insightful, and definitely more interesting.

🚀 Smart Reply | Now Available on the Web 🌐

Mahmud Rahman — Sat, 01 Nov 2025 14:10:00 +0000

Tired of typing the same replies repeatedly? Now, you don’t even need an extension. Meet Smart Reply Web, an AI-powered tool that instantly suggests the perfect reply for any message you paste.

💡 What it does

✅ Paste any message — email, chat, or social DM

⚡ Instantly get a natural, AI-generated reply suggestion

🎯 Adjust tone — professional, casual, short & sweet

🔒 100% private — your own API key, your data, your control

🌍 Works right in your browser — no install, no hassle

👥 Who it’s for

• Freelancers replying to endless client messages

• Support teams tired of repetitive tickets

• Busy professionals who want to respond faster without sounding robotic

• No setup. No clutter. Just paste → get reply → copy → done.

🧠 Reply smarter. Save time. Focus on what matters.

👉 Try the web version now: https://smart-reply-delta.vercel.app/

👉 Github: https://github.com/mahmud-r-farhan/smart-reply

⚙️ Under the hood

React + Tailwind + Framer Motion = frontend

Node.js + Express = backend

Powered by OpenRouter AI models (supports free tiers)

Would you use Smart Reply in your daily workflow?

Let me know 👇

Forem: Mahmud Rahman

Compare DocQR Tools to CamScanner

Quick Verdict

From Idea to Play Store: The Unfiltered Guide to Publishing Your First App (AdMob included!)

1. The Build: Focus on the MVP

2. Monetisation: Adding AdMob the Right Way

3. The Closed Testing Marathon

4. Navigating the Play Console Labyrinth

5. Pressing 'Publish'

DocQR Tools

Seeking Mutual Support for Android Closed Testing

I Built an AI Reply, Enhance & Translate Assistant, Browser Extension + Web App + Mobile (Open Source)

I Built an AI Reply, Enhance & Translate Assistant, Browser Extension + Web App + Mobile (Open Source)

What It Does

Architecture Overview

The Backend

Model Selection Strategy

The Caching System (v0.4)

The Browser Extension

The React Web App

The Flutter Mobile App

Running It Locally

API Quick Reference

Security (v0.4 Additions)

What's Next

Contributing

Closing Thought

Hogo: Ignite Your Node.js Performance with Atomic Request Coalescing

The "Thundering Herd" Problem

Enter Hogo 🛡️

How It Works

Benchmarks

Getting Started

Discover Realtime Location Tracker: An Open-Source PWA for Real-Time Device Monitoring and Communication

What is Realtime Location Tracker?

Key Features

Tech Stack

How to Get Started

Demo and Visuals

Why Contribute or Use This Project?

Wrapping Up

🐻 Introducing Zustand Copilot: The Ultimate VS Code Extension for Zustand State Management

🤔 Why I Built This

✨ Key Features

1. TypeScript-First Snippets

2. Smart Code Actions

3. Real-Time Hover Documentation

4. Intelligent Auto-Imports

5. Command-Driven Store Generation

⚡ Performance Best Practices Built-In

useShallow Everywhere

Slices Pattern for Scale

🚀 Getting Started

Installation

Quick Start

📊 Available Snippets

🛠 Configuration

🙏 Feedback Welcome!

🔗 Links

Building an AI-Powered Resume Analyzer: My Journey with Resume Analiser

What Does It Do?

Tech Stack

Why I Built This

Key Features in Action

How to Run It Locally

What's Next?

Regular Expressions Fast – JavaScript Regex (Beginner to Pro)

What Is a Regular Expression?

How Regex Works (Mental Model)

Creating Regex in JavaScript

1. Literal syntax (most common)

2. Constructor syntax (dynamic patterns)

Common Regex Methods in JavaScript

test() → true / false

match() → get matched result

replace() → replace text

search() → index of match

Characters and Literals

Special Characters (Meta Characters)

Character Classes [ ]

`test()` → true / false

`match()` → get matched result

`replace()` → replace text

`search()` → index of match

Character Classes `[ ]`

Anchors `^` and `$`

Groups `( )`

Alternation `|` (OR)

PostgreSQL Connection (with `pg`)

Example `.env` file