Feat/437 zod form validation expert registration

[JoyLight00]

Description

Closes #437

This PR introduces robust schema-based form validation for the Expert Registration flow using Zod and React Hook Form (@hookform/resolvers/zod). It ensures all expert profiles meet strict data integrity requirements before on-chain registration or database ingestion, while providing live feedback and rate calculation tools for onboarding experts.

---

Key Changes

1. Enhanced Zod Validation Schema (src/utils/validation.ts)

• Display Name: Strict length bounds (2–60 chars), regex sanitization against special/malicious characters.
• Professional Headline / Title: Optional 3–80 characters.
• Bio: Enforces 20–1000 characters to ensure meaningful profile descriptions.
• Skill Tags: Validates 1–10 tags with comma-separated parsing and whitespace trimming.
• Per-Second Streaming Rate: Enforces valid numeric rate bounded between 0.0001 and 10.0 XLM/s.
• URLs (Portfolio, GitHub, Twitter): Enforces valid URL format (http:// or https://) and domain verification for GitHub URLs.
• Rate Helper Utilities: Added calculateMinuteRate(), calculateHourlyRate(), and parseTags() for UI conversions.

2. Interactive Registration Form Component (src/components/profile/RegistrationForm.tsx)

• Integrated with react-hook-form in onChange mode for real-time validation feedback.
• Real-Time Rate Calculator: Automatically converts per-second XLM rates into per-minute (XLM/min) and per-hour (XLM/hr) estimates.
• Interactive Tag Manager: Quick-add suggestion pills for common skills (Soroban, Rust, Smart Contracts, WebRTC, etc.) with tag deletion badges and tag counter limits.
• Connected Wallet Payout Indicator: Displays the active connected Stellar address designated to receive streaming escrow payments.
• Accessible error states with warning icons and field-level error messages.

3. Dedicated Route & Unit Testing

• New Route (src/app/register-expert/page.tsx): Full expert registration page with responsive hero and platform benefit pillars.
• Unit Test Suite (tests/validation.spec.ts): 8 comprehensive unit test cases covering valid full/minimal payloads, edge cases, negative rates, URL validation, and rate converters.
• NPM Script: Added "test:validation": "npx tsx tests/validation.spec.ts" to package.json.

---

Test Plan & Verification

Automated Tests

Run the validation test suite:

npm run test:validation

[vercel]

@Luluameh is attempting to deploy a commit to the luluameh's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 280d1791-6c91-46fc-ae9a-193f82169e60

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}