feat: implement multi-step community signup flow with validation and API integration#21
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the SignUpPage into a comprehensive multi-step form utilizing react-hook-form and zod for validation. It introduces a modular architecture with dedicated components for each step, a custom hook for form logic, and an API utility for handling submissions and logo uploads. Review feedback suggests improving code maintainability by replacing hardcoded magic numbers—specifically the post-state transition timeout and the file size limit—with constants, and adopting the best practice of throwing Error instances instead of plain objects in the API layer.
| useEffect(() => { | ||
| if (post !== "email") return; | ||
| const id = setTimeout(() => setPost("pending"), 3500); | ||
| return () => clearTimeout(id); | ||
| }, [post]); |
There was a problem hiding this comment.
The useEffect hook for transitioning the post state relies on a hardcoded timeout of 3500ms. This magic number should be defined as a constant to improve maintainability and clarity.
| if (!res.ok) { | ||
| throw { status: res.status, data: json }; | ||
| } |
There was a problem hiding this comment.
The error handling logic throws a plain object. It is better practice to throw an Error instance or a custom error class to maintain a consistent error stack trace.
| if (!res.ok) { | |
| throw { status: res.status, data: json }; | |
| } | |
| if (!res.ok) { | |
| throw new Error(json.message || "Signup failed"); | |
| } |
| if (file.size > 2 * 1024 * 1024) { | ||
| setUploadError("File must be under 2MB."); | ||
| if (fileRef.current) fileRef.current.value = ""; | ||
| return; | ||
| } |
There was a problem hiding this comment.
The file size validation uses a hardcoded limit of 2MB. This should be defined as a constant to ensure consistency if the limit needs to be updated in the future.
|
@Pranavkale11 fix these issue that Gemini suggest you |
🚀 UI & Form Improvements (Production-Ready Guidelines)1. 🎨 Improve Left Section (Signup Page)
Issues
Requirements
Expected OutcomeA visually attractive, modern, and theme-consistent left section that enhances user engagement. 2. 🔗 URL Input Component
Requirements
Validation Rules
Suggested Validation Logic
3. 🌍 Country DropdownRequirements
Why
Action
4. 📱 Contact Phone InputRequirements
Behavior
ExampleValidation
5. 🌐 Social ComponentUI Improvements
Validation Requirements (IMPORTANT)Current issue: Correct Validation Rules
Accept:Reject:RecommendationUse robust validation:
new URL(value)6. ⭐ Review Component FixIssueRequirements
Production Guidelines✔ Error Handlingtry {
// API call
} catch (error) {
console.error(error);
showToast("Failed to load reviews");
}✔ Use Existing Components
✔ If Not AvailableCreate reusable components: Example: Custom Dropdown
🧠 Engineering Principles (IMPORTANT)✔ Consistency
✔ Validation-first approach
✔ Reusability
✔ Clean Code
🏁 Final SummaryYou need to:
|
2 participants
#2
Overview
This PR implements a multi-step community signup flow aligned with the backend schema.
The goal was to create a smooth, user-friendly onboarding experience while keeping the implementation scalable and production-ready.
Features
Fixes & Improvements
Testing
Notes