✦ Preact Auth Profile Onboarding

A polished profile setup flow with avatar upload, availability checks, international phone validation, preferences, and live preview.

---

✨ Highlights

• Four-stage Profile Setup: Covers identity, biographical details, preferences, and a final review.
• Live Profile Preview: Reflects avatar, name, handle, headline, skills, location, and visibility instantly.
• Avatar Upload: Previews local image files and guards against files larger than the demo limit.
• Username Availability: Simulates delayed availability checks and reserved-handle responses.
• International Phone Validation: Uses libphonenumber-js before advancing.
• Skill Selection: Supports a five-skill cap with clear selected states.
• Privacy Controls: Offers workspace, public, and private visibility choices.
• Notification Preferences: Uses semantic switches for digest, mention, and product updates.
• Draft Persistence: Restores profile progress from IndexedDB after a reload.
• Completion Score: Calculates profile readiness from meaningful fields.
• Responsive Preview: Stacks the profile card after the form on small screens while keeping a focused desktop preview rail.

🧱 Project Structure

public/
`-- favicon.svg
src/
|-- app.tsx
|-- main.tsx
|-- index.css
|-- components/
|   |-- profile-preview.tsx
|   `-- step-header.tsx
|-- domain/
|   `-- profile.ts
`-- services/
    `-- mock-profile-api.ts

🛠️ Tech Stack

• Preact 10 with Vite 8
• TypeScript 6
• Tailwind CSS 4
• Prettier 3
• Zod
• libphonenumber-js
• idb-keyval
• lucide-preact

📦 Included Demo Data

• alexmorgan is the prefilled available handle.
• admin, alex, and support demonstrate reserved username responses.
• The included profile values make every stage immediately testable without external data.

All identities, challenges, devices, and responses are synthetic and remain in the browser.

🚀 Local Development

npm install
npm run dev

Open http://localhost:5173.

🔌 Extension Notes & Nuances

• Username availability must be reserved atomically by a backend; a successful client check alone cannot guarantee ownership.
• Image uploads should use server-side MIME inspection, size limits, malware scanning, and image transformation.
• The local avatar is stored as a data URL for demonstration and should be replaced with object storage in production.
• Phone validation verifies number structure, not ownership; use a separate OTP flow when ownership matters.
• The interface is fully responsive and keeps the live preview visible without blocking the primary form.
• Mock calls include visible latency so loading, disabled, success, and failure states can be tested before connecting a real API.
• Replace functions in src/services/ with your HTTP client while preserving the domain contracts used by the UI.
• Authentication templates are reference implementations, not a substitute for a security review, threat model, and server enforcement.

🧪 Build & Checks

npm run format:check
npm run build
npm run preview
npm audit --omit=dev

🌐 Vercel Deployment

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

📄 License

MIT License. See LICENSE.