SMTP Verification vs Real-Time Validation:
The 23ms Secret to 99.9% Accuracy

// Modern Real-Time Email Validation
import { validateEmail } from '@email-check/app';

class EmailValidator {
 constructor(apiKey) {
 this.client = new EmailCheckClient({
 apiKey: apiKey,
 timeout: 5000,
 retries: 3
 });
 }

 async validateEmailRealtime(email, options = {}) {
 const startTime = Date.now();

 try {
 // Single API call with comprehensive validation
 const result = await this.client.validate({
 email: email,
 timeout: options.timeout || 2000,
 includeDetails: true,
 riskAssessment: true,
 typoCorrection: true,
 disposableDetection: true
 });

 const responseTime = Date.now() - startTime;

 return {
 isValid: result.isValid,
 score: result.score, // 0-100 quality score
 risk: result.riskLevel, // low/medium/high
 details: {
 syntax: result.syntax,
 domain: result.domain,
 mailbox: result.mailbox,
 disposable: result.isDisposable,
 typoCorrected: result.typoCorrected,
 suggestion: result.suggestion
 },
 responseTime: responseTime, // typically 15-30ms
 auditId: result.auditId // for tracking and compliance
 };

 } catch (error) {
 throw new Error(`Validation failed: ${error.message}`);
 }
 }
}

// Usage in React component
import React, { useState } from 'react';

function EmailValidationForm() {
 const [email, setEmail] = useState('');
 const [validation, setValidation] = useState(null);
 const [isValidating, setIsValidating] = useState(false);

 const validator = new EmailValidator(process.env.EMAIL_CHECK_API_KEY);

 const handleEmailChange = async (e) => {
 const newEmail = e.target.value;
 setEmail(newEmail);

 if (newEmail && newEmail.includes('@')) {
 setIsValidating(true);
 setValidation(null);

 try {
 const result = await validator.validateEmailRealtime(newEmail, {
 timeout: 1000 // Fast response for UX
 });

 setValidation(result);

 // Show real-time feedback to user
 if (result.isValid && result.score > 80) {
 // Valid email - proceed
 } else if (result.typoCorrected) {
 // Show typo correction suggestion
 setEmail(result.suggestion);
 } else {
 // Show validation error
 }
 } catch (error) {
 setValidation({ isValid: false, error: error.message });
 } finally {
 setIsValidating(false);
 }
 }
 };

 return (
 <div>
 <input
 type="email"
 value={email}
 onChange={handleEmailChange}
 placeholder="Enter your email"
 className={`border px-4 py-2 rounded ${
 validation?.isValid ?'border-success/30' :
 validation?.isValid === false ?'border-error/30' :
'border-base-300'
 }`}
 />

 {isValidating && <span className="ml-2">Validating...</span>}

 {validation && (
 <div className="mt-2 text-sm">
 {validation.isValid ? (
 <span className="text-success">✓ Valid (Score: {validation.score}/100)</span>
 ) : (
 <span className="text-error">✗ {validation.error ||'Invalid email'}</span>
 )}
 </div>
 )}
 </div>
 );
}