📌 Project Abstract
APIChat is a full-stack web application developed to bridge arbitrary REST APIs with conversational interfaces. Users can specify any custom or enterprise REST endpoint and pass a 10-digit identifier (e.g., telephone number, student enrollment ID, shipment code). The backend validates the parameters, proxies the request to eliminate Cross-Origin Resource Sharing (CORS) rejections, measures roundtrip latency, and streams the structured payload into an interactive chat stream.
🏗️ System Architecture & Workflow
Frontend UI
HTML5 + CSS3 + ES6+
10-digit validation, Chat stream, Web Audio & Speech TTS
➔ HTTP REST (POST /api/proxy) ➔
Proxy Backend
Node.js + Express
CORS Bypass, Header Injection, Latency Clock & AbortController
➔ Remote Fetch ➔
Target Server
External or Mock API
JSON / XML / Text response payload
💡 Key Features Implemented
- ✅ Strict 10-Digit Validation: Real-time regex verification with visual digit counter and format guidance.
- ✅ Custom API Endpoint Flexibility: Query parameters, path tokens (
{number}), GET/POST methods, and custom Authorization/API Key headers.
- ✅ Full CORS Proxy Server: Solves the #1 issue in web APIs where browsers block requests due to origin mismatches.
- ✅ Conversational Chatbox UI: User messages show query parameters; Bot messages display status codes, latency, structured summary cards, and syntax-highlighted JSON.
- ✅ Built-in Mock Demonstrations: Telecom lookup, Student KYC registry, and SMS/OTP gateway for offline and viva evaluation.
- ✅ Speech Synthesis (TTS) & Export: Audio narration of API results and one-click JSON chat export.
🗣️ Likely Viva Questions & Ready Answers
Q1: Why do we need a backend proxy instead of calling the API directly from the browser?
Answer: Web browsers enforce the Same-Origin Policy. If a third-party API does not return Access-Control-Allow-Origin: * headers, the browser blocks the response. Our Node.js Express proxy acts as a server-to-server gateway that bypasses browser CORS restrictions cleanly and securely.
Q2: How does the application handle slow or unresponsive external APIs?
Answer: The server implements an AbortController with a 15-second timeout window. If the target server fails to reply within that threshold, the request is cleanly terminated and a 502 Gateway Timeout is rendered in the chatbox with debugging advice.
Q3: How are 10-digit numbers validated?
Answer: Dual-layer validation is applied: on the client side using HTML5 regex patterns ([0-9]{10}) and JS input sanitization, and on the server side using regular expressions to guard against injection or malformed data.