Loading page
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 .
격리된 샌드박스를 띄워 서버에서 바로 실행하세요 — 로컬 설정 불필요.
이 제품을 AI IDE, 웹 빌더 또는 클라우드 IDE로 바로 가져오세요.
Download your licensed source snapshot from the library, then follow the setup guide in your workspace.
아직 리뷰가 없습니다.
토론을 불러오는 중…
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)샌드박스 검증이 완료되었으며 감지된 실행 경로가 통과했습니다.
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
파이프라인 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.
검토일 2026년 8월 7일
전체 설치 가이드와 연동 프롬프트는 구매 후 열람할 수 있습니다.
Mobile App Templates & App Source Code
US$10.38
