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 retrieve teamMin and teamMax from currentHackathon
- 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
handleNext function at Step 0, before allowing progression to the next step, check whether the current team is large enough
- If
participationType === 'TEAM' and form.watch('teamMembers').length + 1 < currentHackathon.teamMin, block progression and surface a clear validation message explaining the minimum requirement
- The
+ 1 accounts for the submitting user themselves, who is implicitly a team member but may not appear in the teamMembers array
- 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
handleAddInvitee function and its associated button when form.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
Badge or 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 —
teamMin and teamMax must always be sourced from useHackathonData(); 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 types
Manual Verification
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.tsxHook
useHackathonData()to retrieveteamMinandteamMaxfromcurrentHackathonEnforcement Logic
Minimum Team Size —
handleNext(Step 0)handleNextfunction at Step 0, before allowing progression to the next step, check whether the current team is large enoughparticipationType === 'TEAM'andform.watch('teamMembers').length + 1 < currentHackathon.teamMin, block progression and surface a clear validation message explaining the minimum requirement+ 1accounts for the submitting user themselves, who is implicitly a team member but may not appear in theteamMembersarrayhandleNext— do not allow the step to advance under any circumstance if the team is undersizedMaximum Team Size —
handleAddInviteehandleAddInviteefunction and its associated button whenform.watch('teamMembers').length + 1 === currentHackathon.teamMaxUI State — Capacity Indicator
Badgeor helper text near the "Invite Members" section to display the current team capacity in real time"3 / 5 members"— so users always know where they stand without having to count manuallyteamMax, 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 fullteamMin, consider a secondary indicator or helper text reminding the user of the minimum requirement before they can proceedteamMinandteamMaxmust always be sourced fromuseHackathonData(); never hardcode size limitsTesting & Verification
Automated Tests
Manual Verification
teamMinto 3 and attempt to proceed at Step 0 with only 1 invited member — confirm progression is blocked with a clear, specific validation message+ 1for the submitting user is correctly applied — a solo user counts as 1 toward the minimumteamMaxto 4 and add members up to the limit — confirm the "Add Invitee" button is disabled at exactly 4 total members (including the submitting user)handleAddInviteeprogrammatically at capacity — confirm it is a no-op at the function level, not just the buttonteamMaxis reachedparticipationTypeto'SOLO'— confirm team size enforcement logic is not applied and progression is unaffectedteamMin === teamMax(fixed team size) — confirm both minimum and maximum enforcement work correctly simultaneously