Loading page
by Muhammad Usman
TypeScript contact form that integrates with Resend API for email delivery. Features client-side validation, retry logic for failed requests, rate limiting handling, and graceful error states with user-friendly feedback. Built with React, Tailwind CSS, and includes support for optional fields like phone and subject selection.
A production-ready contact form component built with React and TypeScript. This single-page form captures user inquiries (name, email, phone, subject, message) and submits them to a backend API with comprehensive error handling, validation, and retry logic. Includes success/warning states and graceful degradation for network failures.
npm install
Create a .env file with:
VITE_API_BASE_URL=https://your-api-domain.com
The form will POST to {VITE_API_BASE_URL}/api/contact.
npm run dev
Starts Vite dev server at http://localhost:5173.
npm run build
Outputs optimized production build to .
Spin up an isolated sandbox and run it server-side — no local setup.
Push this product straight into your AI IDE, web builder or cloud IDE.
Connect Tetrees to a compatible AI IDE, list products you own, and request the verified ZIP without exposing seller upload controls.
No reviews yet.
Sign in to join the discussion
Loading discussion…
dist/npm run typecheck
npm run lint
npm run lint:fix
/api/contactRequest Body:
{
"full_name": "string (required)",
"email": "string (required, valid email)",
"phone": "string (optional)",
"subject": "string (optional)",
"message": "string (required, min 10 chars)"
}
Success Response (200):
{
"success": true,
"submission_id": "string"
}
Validation Error (422):
{
"errors": {
"full_name": "error message",
"email": "error message",
"message": "error message"
}
}
Rate Limited (429):
{
"error": "Too many requests"
}
Delivery Warning (502):
{
"success": true,
"submission_id": "string"
}
Other Errors:
{
"success": false,
"error": "error message"
}
App.tsx — Root component that renders ContactFormContactForm.tsx — Main form component with state management, validation, and API integrationField.tsx (inline) — Reusable labeled field wrapper with error displaytypes.ts (referenced) — TypeScript interfaces for form state and propsindex.html)The sandbox audition completed and the detected runnable path passed.
This React web app completed archive review. Structure, dependency manifests, documentation, functional source, and common risk patterns were checked by the Tetrees verification pipeline; runtime phases are stated separately. Final verified scores after isolated runtime evidence: overall 8.2 and security 9.
Deterministic AVCP artifact review
Pipeline avcp-2026-08-04.1 · SHA-256 f6f6249ba5b3e73c…
This version-scoped review deterministically inspects the submitted archive for structure, dependencies, documentation, functional source, and common malicious or high-risk signals. Build and test phases are reported as passed only after an isolated sandbox audition. It is not a guarantee of perfect security.
Reviewed Aug 7, 2026
The full install guide and integration prompts unlock after purchase.
Mobile App Templates & App Source Code
$10.38
