feat: added the food_preferences to the camp_signup page
Overview
This MR introduces food preference selection for volunteers during the Medical Camp registration and "Join Camp" processes. It allows volunteers to specify their dietary needs (Breakfast, Lunch, and Veg/Non-Veg preference) directly in the UI.
What does this MR do and why?
To improve logistics and meal planning at medical camps, it is essential to know the food requirements of volunteers. This change adds:
- Options to opt for Breakfast and Lunch.
- Selection of food type (Veg/Non-Veg) when Lunch is selected.
- Proper integration with the signup and camp-joining API payloads.
Changes Made
-
Frontend Pages:
-
src/pages/VolunteerRegisterPage.tsx: Added food preference section to the registration form. -
src/pages/JoinVolunteerPage.tsx: Integrated food preferences for authenticated users joining a camp.
-
-
Types:
-
src/types/api.ts: UpdatedSignupSchemaandCampSignupRequestto include food preference fields.
-
-
I18n:
- Added translation keys for food-related labels in
en,hi, andtelocales.
- Added translation keys for food-related labels in
-
Tests:
- Updated
tests/pages/VolunteerRegisterPage.test.tsxandtests/pages/JoinVolunteerPage.test.tsxto cover the new fields and interactions.
- Updated
-
Documentation:
- Updated
CHANGELOG.md.
- Updated
Technical Details
-
State Management: Added
food_type,opt for breakfast, andopt for lunchto the form state inVolunteerRegisterPageandJoinVolunteerPage. -
UI Components: Utilized
Switchfor opting in/out andButtontoggles for food type selection. - Conditional Rendering: The "Food Type" selection only appears when "Opt for Lunch" is enabled to keep the UI clean.
- API Payload: The registration and join camp requests now include the dietary preferences as optional fields.
Type of Change
-
🐛 Bug fix (non-breaking change that fixes an issue) -
✨ New feature (non-breaking change that adds functionality) -
💥 Breaking change (fix or feature that would cause existing functionality to change) -
📝 Documentation update -
🎨 UI/UX improvement -
♻ ️ Refactor (no functional changes) -
⚡ Performance improvement -
🧪 Test update -
🔧 Configuration change -
🚨 Security fix
Related Issues / References
Screenshots or Screen Recordings
/home/saikrishna-bikkumalla/Videos/Screencasts/Screencast from 2026-03-21 23-52-44.webm
| Before | After |
|---|---|
| (No food options) | (Food Preferences) |
How to Set Up and Validate Locally
- Pull this branch / checkout MR
- Install dependencies:
bun install - Run development server:
bun dev - Navigate to the Volunteer Registration page (
/register). - Select "Opt for Breakfast" and "Opt for Lunch".
- Observe the "Food Type" toggle appearing.
- Complete the registration and verify the network request payload contains:
{ "opt for breakfast": true, "opt for lunch": true, "food_type": "Veg" }
Testing Done
-
Manual testing completed -
Unit tests added/updated
Test Cases Covered:
| Scenario | Expected Result | Status |
|---|---|---|
| Select Breakfast/Lunch | Switches toggle correctly | |
| Select Lunch | Food Type selection appears | |
| Unselect Lunch | Food Type selection disappears | |
| Submit registration | Payload includes food preferences |
Code Quality Checklist
Code Standards
-
Code follows project conventions (naming, structure, formatting) -
No console.log() or debugger statements left in code -
No unused imports, variables, or functions -
No duplicate code and use of existing components for reusability -
i18n check passed with no hardcoded strings in codebase for i18n support -
TypeScript types are properly defined (no anyunless justified) -
ESLint and Prettier checks pass bun run lint
React Best Practices
-
Components are properly split and single-responsibility -
Hooks follow rules (no conditional hooks, proper dependencies) -
State management is appropriate (local vs global state) -
No unnecessary re-renders (memoization used where needed) -
Event handlers are properly cleaned up
Component Patterns
-
shadcn/ui components used correctly -
Tailwind classes follow utility-first approach -
Responsive design considered (mobile-first if applicable) -
Accessibility attributes included (aria-*, role, etc.) -
Icons from lucide-react used consistently
API & Data Fetching
-
TanStack Query used for server state (if applicable) -
Loading and error states handled -
API types defined in src/types/api.ts -
Axios interceptors handle auth tokens correctly -
Use of Zod for data validations
Error Handling
-
Errors are caught and handled gracefully -
User-friendly error messages displayed -
Errors are being toasted properly -
Network failures handled appropriately
Documentation
-
README.md updated (if setup steps changed) -
.env.exampleupdated (if new env vars added) -
CHANGELOG.md updated (if applicable)
Known Limitations / Technical Debt
- None identified at this stage.
Additional Notes
- The food type selection is currently only linked to Lunch opting. If breakfast type is needed in the future, it can be extended.
MR Acceptance Checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Edited by Mohana Sri Bhavitha