Dev: Form Validation Feature for Host Intake

[johnwroge]

🧩 Overview

This issue is for tracking engineering work related to building the Host Intake Profile flow from dashboard through to the completed About Me page. This includes creating all relevant pages and implementing frontend logic, layout, and validation.

---

More Info

The work involves building and connecting all the intake form pages starting from the host dashboard. This includes layout, routing, form steps, conditional questions, validation, and UI consistency. The goal is to provide a seamless, validated experience for hosts entering their information.

---

📐 Scope of Work

• Implement multiple form pages with validation
• Does not include database

---

🔧 Engineering Tasks

Steps to Implement:

• [X] Create dashboard for host
• [X] Create welcome page
• [X] Create Profile Overview page
• [X] Create all the listed forms with validation (see list of forms below)

List of forms:

1. Contact Information
2. Basic Information
3. Photos
4. Housing
5. Employment
6. Interests and Hobbies
7. References
8. Background
9. Interest in Being a Host
10. Preferences in a Guest
11. Strengths and Challenges
12. About Me

---

✅ Acceptance Criteria

• [X] All pages are accessible via the correct route structure
• [X] Conditional logic (e.g., reveal extra questions on "Yes") works across all forms
• [X] All form fields validate correctly before navigation
• [X] Text fields with minimum character requirements prevent early navigation
• [X] Pages render responsively and clearly for users
• [X] "Previous" and "Next" navigation between pages works as intended
• [X] No pages are visually broken or misaligned

---

🔄 Dependencies

• None blocking at this point, though later integration with backend services may be needed.

---

📦 Technical Notes

• Folder structure: Pages created in frontend/src/pages/host-dashboard/
• Form state is managed locally in each component (can later centralize with context or Redux if needed)
• Using Material UI for layout and components
• Validation is enforced using conditional logic in handleNextClick on each page

---

🧪 Testing Strategy

• Manual form walkthrough for each page
• Check for validation messages on empty inputs or invalid data
• Simulate conditional logic (e.g., selecting "Yes" to trigger follow-ups)
• Verify minimum character logic blocks "Next"
• Cross-browser layout check (e.g. Chrome & Safari)
• Responsiveness check at common breakpoints

---

🚩 Risks / Considerations

• Risk: Form state is not persisted between refreshes – may need localStorage or API integration
• Consideration: Future backend/API endpoints will be needed for data submission

---

🧵 Related Issues

• N/A

---

Action Items

• [X] Update this issue to align with Engineering Issue Template format
• [X] Complete all the steps as stated in the Engineering Tasks section above

---

📎 Resources

• Figma UI Reference: Link

---

Attachments/Screenshots (If Applicable):

• N/A

---