The Real-Time EmailValidation Blueprint

import React, { useState, useCallback } from 'react';
import { useDebounce } from 'use-debounce';
import { validateEmail } from '@any-xyz/email-check-api';

const EmailInput = () => {
  const [email, setEmail] = useState('');
  const [validation, setValidation] = useState(null);
  const [debouncedEmail] = useDebounce(email, 300);

  const validateEmailRealTime = useCallback(async (emailToCheck) => {
    if (!emailToCheck) return;

    try {
      const startTime = performance.now();
      const result = await validateEmail(emailToCheck, {
        timeout: 100,
        fastMode: true,
        parallelChecks: true
      });
      const endTime = performance.now();

      setValidation({
        ...result,
        responseTime: Math.round(endTime - startTime)
      });
    } catch (error) {
      setValidation({ isValid: false, error: error.message });
    }
  }, []);

  React.useEffect(() => {
    validateEmailRealTime(debouncedEmail);
  }, [debouncedEmail, validateEmailRealTime]);

  return (
    <div className="relative">
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className={`w-full px-4 py-2 border rounded-lg ${
          validation?.isValid === false ? 'border-red-500' :
          validation?.isValid === true ? 'border-green-500' :
          'border-gray-300'
        }`}
        placeholder="Enter your email"
      />

      {validation && (
        <div className="mt-2 text-sm">
          {validation.isValid ? (
            <span className="text-green-600 flex items-center gap-1">
              ✓ Valid email ({validation.responseTime}ms)
            </span>
          ) : (
            <span className="text-red-600 flex items-center gap-1">
              ✗ {validation.reason || 'Invalid email'}
            </span>
          )}
        </div>
      )}
    </div>
  );
};

const express = require('express');
const { EmailValidator } = require('@any-xyz/email-check-api');

const app = express();
const validator = new EmailValidator({
  timeout: 50,
  concurrency: 100,
  cacheSize: 10000
});

// Middleware for real-time validation
const validateEmailMiddleware = async (req, res, next) => {
  const { email } = req.body;

  if (!email) return next();

  try {
    const startTime = process.hrtime.bigint();

    const result = await Promise.race([
      validator.validateFast(email),
      new Promise((_, reject) =>
        setTimeout(() => reject(new Error('Timeout')), 100)
      )
    ]);

    const endTime = process.hrtime.bigint();
    const responseTime = Number(endTime - startTime) / 1000000;

    req.emailValidation = {
      ...result,
      responseTime: Math.round(responseTime)
    };

    next();
  } catch (error) {
    res.status(400).json({
      error: 'Email validation failed',
      message: error.message,
      responseTime: '>100ms'
    });
  }
};

// Registration endpoint
app.post('/api/register', validateEmailMiddleware, async (req, res) => {
  const { email, password } = req.body;
  const validation = req.emailValidation;

  if (!validation.isValid) {
    return res.status(400).json({
      error: 'Invalid email',
      reason: validation.reason,
      responseTime: validation.responseTime
    });
  }

  // Proceed with user creation
  const user = await createUser({ email, password });

  res.json({
    success: true,
    user: {
      id: user.id,
      email: user.email
    },
    validation: {
      responseTime: validation.responseTime,
      confidence: validation.confidence
    }
  });
});

// Optimize for performance
app.listen(3000, () => {
  console.log('Server running with real-time validation');
});