Loading page
bởi 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 .
Khởi chạy sandbox cách ly và chạy phía máy chủ — không cần cài đặt cục bộ.
Đưa sản phẩm này thẳng vào AI IDE, trình tạo web hoặc cloud IDE của bạn.
Kết nối Tetrees với AI IDE tương thích để liệt kê sản phẩm bạn sở hữu và nhận ZIP đã xác minh mà không cấp quyền tải lên của người bán.
Chưa có đánh giá.
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)Lần kiểm định sandbox đã hoàn tất và đường chạy được phát hiện đã đạt yêu cầu.
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
Quy trình 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.
Đã đánh giá 7 thg 8, 2026
Hướng dẫn cài đặt đầy đủ và prompt tích hợp sẽ mở khóa sau khi mua.
Mobile App Templates & App Source Code
10,38 US$
