Enforce Team Size Limits (teamMin, teamMax) #405
Description
Enforce Team Size Limits (teamMin, teamMax)
Objective
Prevent the creation of teams that fall outside the hackathon's defined size constraints directly within the SubmissionForm. The minimum and maximum team size values configured by the organizer must be strictly enforced at the UI level — users must not be able to progress through the submission flow with an undersized team, and must not be able to invite more members than the defined maximum.
Technical Implementation
Target File
components/hackathons/submissions/SubmissionForm.tsx
Hook
- Use
useHackathonData()to retrieveteamMinandteamMaxfromcurrentHackathon - These values must be read directly from the hackathon context — no hardcoded defaults or fallbacks to arbitrary numbers
Enforcement Logic
Minimum Team Size — handleNext (Step 0)
- In the
handleNextfunction at Step 0, before allowing progression to the next step, check whether the current team is large enough - If
participationType === 'TEAM'andform.watch('teamMembers').length + 1 < currentHackathon.teamMin, block progression and surface a clear validation message explaining the minimum requirement - The
+ 1accounts for the submitting user themselves, who is implicitly a team member but may not appear in theteamMembersarray - The block must be enforced as an early return in
handleNext— do not allow the step to advance under any circumstance if the team is undersized - The validation message should be specific: tell the user how many more members they need to add, not just that their team is too small
Maximum Team Size — handleAddInvitee
- Disable the
handleAddInviteefunction and its associated button whenform.watch('teamMembers').length + 1 === currentHackathon.teamMax - The button must be visually disabled (not hidden) so the user understands the team is at capacity rather than encountering a missing control
- Attempting to invoke the add action programmatically while at capacity must also be a no-op — guard the function body, not just the button
UI State — Capacity Indicator
- Update the
Badgeor helper text near the "Invite Members" section to display the current team capacity in real time - Format: current member count vs. maximum — e.g.,
"3 / 5 members"— so users always know where they stand without having to count manually - The capacity indicator must update reactively as members are added or removed
- When the team reaches
teamMax, the badge or helper text should shift to a visually distinct state (e.g., a filled or warning color) to make it immediately clear that the team is full - When the team falls below
teamMin, consider a secondary indicator or helper text reminding the user of the minimum requirement before they can proceed
⚠️ Caution
This is a production environment — not a sandbox.
- Code must be performant, accessible, and clean
- No dummy data —
teamMinandteamMaxmust always be sourced fromuseHackathonData(); never hardcode size limits - AI-generated code will be scrutinized; poorly structured or "hallucinated" code will result in immediate issue closure
- Follow the existing design system: shadcn/ui, Tailwind, Framer Motion
Testing & Verification
Automated Tests
npm run lint # Ensure code quality
npm run build # Verify no breaking changes in routing or typesManual Verification
- Set
teamMinto 3 and attempt to proceed at Step 0 with only 1 invited member — confirm progression is blocked with a clear, specific validation message - Confirm the
+ 1for the submitting user is correctly applied — a solo user counts as 1 toward the minimum - Set
teamMaxto 4 and add members up to the limit — confirm the "Add Invitee" button is disabled at exactly 4 total members (including the submitting user) - Attempt to invoke
handleAddInviteeprogrammatically at capacity — confirm it is a no-op at the function level, not just the button - Verify the capacity badge/helper text updates in real time as members are added and removed
- Confirm the capacity indicator shifts to a visually distinct state when
teamMaxis reached - Set
participationTypeto'SOLO'— confirm team size enforcement logic is not applied and progression is unaffected - Test with
teamMin === teamMax(fixed team size) — confirm both minimum and maximum enforcement work correctly simultaneously - Provide video evidence