Application Form

File: apps/landing/src/app/components/ApplicationForm.tsx Route: /opportunities/:id/apply

---

Overview

A multi-section application form that collects candidate information, uploads resumes/cover letters to Supabase Storage, and submits the application via a Supabase Edge Function.

---

Form Sections

Personal Information

Field	HTML Element	Validation
First Name	<input>	Required
Last Name	<input>	Required
Phone (country code + number)	<select> + <input>	Required, pattern validated
Email	<input type="email">	Required, email format
Location	<input>	Required

Resume and Cover Letter

Field	HTML Element	Validation
Resume	<input type="file">	Required, max 3.5MB, PDF/DOC/DOCX
Cover Letter	<input type="file">	Optional, max 3.5MB, PDF/DOC/DOCX

Professional Links

Field	HTML Element	Validation
LinkedIn URL	<input type="url">	Optional, URL format
Portfolio URL	<input type="url">	Optional, URL format

Additional Questions

Field	HTML Element	Options
Work Authorized	Radio buttons	Yes / No
Needs Sponsorship	Radio buttons	Yes / No
Open to Relocation	Radio buttons	Yes / No
Why Interested	<textarea>	Optional
Reference Consent	Radio buttons	Yes / No

---

File Upload Flow

1. User selects file via <input type="file">
2. On form submit, files are uploaded to Supabase Storage bucket applications
3. File paths are stored and passed to the Edge Function submit-application

---

Consolidation Note

This form is the largest consolidation opportunity in the codebase. It uses raw HTML elements throughout instead of the shared component library:

Raw Element	Should Be
<input>	Input from shared UI
<select>	Select / SelectTrigger / SelectContent / SelectItem
<textarea>	Textarea from shared UI
<label>	Label from shared UI
Radio <input type="radio">	RadioGroup / RadioGroupItem
<button>	Button from shared UI

All styling is done via inline Tailwind classes that approximate — but don’t exactly match — the shared components’ styles. Migrating to shared components would:

1. Ensure consistent focus rings, error states, and disabled states
2. Reduce CSS duplication
3. Make future design token updates automatically propagate