A
Anonymous

Application Form - Copy this React, Tailwind Component to your project

const-handleSubmit-=-async-(e:-React.FormEvent)-=>-{-e.preventDefault();-if-(!supabase)-{-console.error("Supabase-client-not-initialized");-return;-}-const-errors-=-validateForm();-console.log("Validation-Errors:",-errors);-setFormErrors(errors);-if-(Object.keys(errors).length-===-0-&&-!fileError)-{-try-{-setIsUploading(true);-//-Insert-app-data-into-Supabase-const-{-data:-appData,-error:-appError-}-=-await-supabase-.from("Applications")-.insert({-app_name:-formData.name,-company_name:-formData.developer,-description:-formData.description,-android_app_url:-formData.androidUrl,-ios_app_url:-formData.iosUrl,-web_app_url:-formData.webUrl,-launch_date:-new-Date().toISOString(),-votes:-0,-})-.select()-.single();-if-(appError)-{-console.error("Application-Insert-Error:",-appError);-throw-appError;-}-//-Upload-screenshots-for-(const-file-of-formData.screenshots)-{-console.log("Uploading-file:",-file.name);-const-{-error:-uploadError-}-=-await-supabase.storage-.from("app-screenshots")-.upload(`${appData.id}/${file.name}`,-file);-if-(uploadError)-{-console.error("Upload-Error:",-uploadError);-throw-uploadError;-}-const-{-error:-screenshotError-}-=-await-supabase-.from("Screenshots")-.insert({-file_name:-file.name,-app_id:-appData.id,-});-if-(screenshotError)-{-console.error("Screenshot-Insert-Error:",-screenshotError);-throw-screenshotError;-}-}-//-Clear-form-state-setFormData({-name:-"",-developer:-"",-description:-"",-androidUrl:-"",-iosUrl:-"",-webUrl:-"",-screenshots:-[],-});-previews.forEach((url)-=>-URL.revokeObjectURL(url));-setPreviews([]);-setFormErrors({});-setFileError("");-setSubmissionStatus("App-submitted-successfully!");-setTimeout(()-=>-setSubmissionStatus(""),-3000);-//-Fetch-updated-apps-fetchApps(supabase);-}-catch-(error)-{-console.error("Error-submitting-app:",-error);-setSubmissionStatus("Failed-to-submit-app.-Please-try-again.");-setTimeout(()-=>-setSubmissionStatus(""),-3000);-}-finally-{-setIsUploading(false);-}-}-};

Prompt
Component Preview

About

ApplicationForm - Easily submit app data with validation, file uploads, and error handling, professionally built with React and Tailwind. Copy now for free!

Share

Last updated 1 month ago