feat: Add Implementation for the Signup Form with Theme Integration

[Saqib-Rafique]

This PR introduces the initial implementation of the Signup Form using React, TypeScript, and Material UI. It includes complete form creation, synchronous and asynchronous validations, and UX safeguards such as debounce and throttle to simulate real-world signup behavior.

• Features Implemented

  • Signup Form UI (Material UI)
  • Structured, responsive form layout
  • Profile image upload with preview and validation
  • Clean spacing and accessible input components
  • Light/Dark mode support (persisted)
  • Synchronous Validations
  • Required field checks
  • Email format validation
  • Pakistan phone number validation
  • Password length validation
  • Confirm password matching
  • Field-level error messages
  • Asynchronous Username Validation
  • Username availability check using a fake async API
  • Debounced input handling to prevent excessive checks
  • Throttled Signup Submission
  • Prevents rapid or accidental multiple submissions
  • Displays user-friendly feedback when throttled
  • Throttle resets after successful signup for a smooth next flow
  • Async Signup Flow Simulation
  • Fake API submission using Promises and timeouts
  • Loading state (Creating account…)
  • Success message and automatic scroll-to-top on completion
  • Validation messages cleared appropriately
  • Success and warning states do not overlap

• Technical Notes

  • Debounce and throttle logic extracted into reusable utility functions
  • Strict TypeScript typing (no any)
  • Clean separation of concerns for maintainability

Demo
https://github.com/user-attachments/assets/dd0bb0a9-a47e-4275-8f31-e6b4ad1655f0

[Usama-Bin-Khalid-98]

This comp isn't doing anything we can use Appshell directly in the main file

[Saqib-Rafique]

Agreed, AppShell is currently lightweight. I kept it for structural clarity and future extensibility, but I'm happy to inline it into App.tsx if preferred.