DEV Community: Reza Kheradmandi

Stop Building Backends for Simple Data Handoffs: Meet React State Warp

Reza Kheradmandi — Sat, 03 Jan 2026 12:12:01 +0000

The "Cross-Device" Problem

Have you ever been building a web application—maybe a registration form or an admin panel—and hit this specific roadblock?

The user needs to upload a photo, scan a document, or sign a canvas using their phone, but they are currently working on their desktop.

Usually, the "engineering" solution to this is surprisingly heavy:

Build an API endpoint to receive the file.
Set up a database or S3 bucket to store it temporarily.
Force the user to log in on their mobile device.
Implement a WebSocket or Polling mechanism to update the desktop UI when the upload is done.

That is a lot of infrastructure for a simple 30-second interaction. I wanted a better way.

So, I built React State Warp.

🚀 What is React State Warp?

React State Warp is a lightweight React Hook that creates a secure, peer-to-peer (P2P) wormhole between devices.

It allows you to generate a QR code on one device (Host), scan it with another (Client), and instantly sync React State between them.

Zero Backend: Powered by WebRTC (PeerJS). Data travels Device-to-Device.
Zero Database: Nothing is stored on a server.
Instant Sync: Text, JSON, and even Binary data sync in milliseconds.

🪄 The Magic: Syncing Files without a Server

The hardest part of P2P is usually handling binary data. Most libraries break when you try to send a JavaScript File object.

I implemented a custom serializer that automatically detects File, Blob, or Uint8Array in your state, converts them efficiently, chunks them if necessary, and reconstructs them on the receiving device as a valid File object.

This means you can do this:

// 📱 On Mobile:
<input type="file" onChange={(e) => send({ avatar: e.target.files[0] })} />

// 💻 On Desktop:
// 'data.avatar' instantly becomes a File object you can display!
<img src={URL.createObjectURL(data.avatar)} />

🛠️ How to use it

It is designed to be a "Headless" hook, meaning you have full control over the UI.

Install
```
npm install react-state-warp peerjs
```

Implement the Hook

import { useStateWarp } from 'react-state-warp';
import QRCode from 'react-qr-code';

function App() {
// Initialize state like standard useState
const { data, send, connectionLink, status } = useStateWarp({ 
    text: '', 
    file: null 
});

return (
    <div className="card">
    <h1>Status: {status}</h1>

    {/* Inputs are automatically synced */}
    <input 
        value={data.text} 
        onChange={(e) => send({ ...data, text: e.target.value })} 
        placeholder="Type here..." 
    />

    {/* Show QR Code for the other device to join */}
    {connectionLink && (
        <div className="qr-box">
        <QRCode value={connectionLink} />
        <p>Scan to join!</p>
        </div>
    )}
    </div>
);
}

🛡️ Handling the "Real World" (NATs & Firewalls)

One of the biggest pain points with WebRTC is connecting devices that are on different networks (e.g., WiFi vs. 4G).

React State Warp comes pre-configured with public Google STUN servers. This ensures that in 95% of cases, the connection punches through NATs and Firewalls automatically without you needing to configure ICE servers manually.

📦 Try the Demo

I included a complete "Identity Verification" playground in the repository. It simulates a real-world flow where a user starts a profile on Desktop and finishes verification on Mobile.

site: https://daxra.ir/docs/react-state-warp

I would love to hear your thoughts! If you find this useful or interesting, dropping a Star ⭐ on GitHub would mean the world to me.

Let me know what you think in the comments below! 👇

react #javascript #opensource #webdev #webrtc

Mastering Iranian Data Validation in Zod: From Regex to Enterprise Metadata

Reza Kheradmandi — Tue, 23 Dec 2025 07:53:22 +0000

If you are building a React, Next.js, or Node.js application for the Iranian market, you have definitely faced this challenge: Validating local data structures.

Things like National Code (Code Melli), Bank Cards, IBAN (Sheba), and Postal Codes follow complex algorithms (Luhn, ISO 7064, etc.).

Usually, developers handle this in two ways:

Copy-pasting complex Regex patterns (Error-prone).
Using heavy legacy libraries and manually connecting them to Zod using refine.

Neither is ideal for a modern TypeScript stack. That's why I built zod-ir, which is now officially part of the Zod Ecosystem.

Why zod-ir? (It's not just validation)

In the latest release (v1.5.4), zod-ir shifted focus from simple validation (true/false) to Smart Data Extraction.

Imagine a form where the user enters a landline number, and you automatically detect their Province and City. Or they enter a card number, and you instantly show their Bank Logo.

1. Installation

It has zero dependencies and works as a peer dependency to Zod.

npm install zod zod-ir

2. The "Smart" Validation

Here is a real-world example of a user registration schema. Notice how clean the code is:

import { z } from "zod";
import { 
  zMelliCode, 
  zIranianMobile, 
  zLandline, 
  zCardNumber,
  getLandlineInfo 
} from "zod-ir";

const UserSchema = z.object({
  // Validates National Code algorithm
  nationalId: zMelliCode({ message: "Invalid National Code" }),

  // Validates mobile prefixes (09xx)
  mobile: zIranianMobile(),

  // Validates Landline AND we can extract city later
  phone: zLandline(),

  // Validates Card Number (Luhn)
  card: zCardNumber(),
});

3. Extracting Metadata (The Cool Part)

Validation is boring. Let's get data!

Feature A: Auto-detect City from Landline Don't ask users for their city if they provided a phone number.

import { getLandlineInfo } from "zod-ir";

const info = getLandlineInfo("02122334455");

console.log(info);
/* Output:
{
  province: "Tehran",
  city: "Tehran",
  province_fa: "تهران",
  city_fa: "تهران"
}
*/

Feature B: Bank Information Get the bank name, color, and logo from a card number.

import { getBankInfo } from "zod-ir";

const bank = getBankInfo("6219861012345678");
// Returns: { name: "Saman", color: "#46a0e6", logo: "..." }

4. Enterprise Ready?

Yes. I designed zod-ir to address common enterprise concerns:

Standalone Usage: You don't HAVE to use Zod. All validators (like isMelliCode) are exported as pure functions for backend use.

Tree-Shakable: If you only import isIranianMobile, the heavy bank database won't be included in your bundle.

Type-Safe: First-class TypeScript support.

Conclusion
If you are using Zod, stop writing manual regex for Iranian data. zod-ir gives you validation, transformation, and metadata extraction in one lightweight package.

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

🔗 site: https://daxra.ir/docs/zod-ir