fix(i18n): add language switcher to Join Volunteer page header
Overview
This MR adds a language switcher to the Join Volunteer page and fixes incomplete localization on that page so content fully updates for English, Telugu, and Hindi.
What does this MR do and why?
The Join Volunteer page (/join-volunteer) had two issues:
- It did not have a language switcher in the header, unlike other public pages.
- Even after switching language, parts of the page remained in English due to missing locale keys and hardcoded/static text paths.
This caused a mixed-language UX and inconsistent behavior across pages.
This MR aligns Join Volunteer with the existing i18n pattern used elsewhere.
Changes Made
Files modified
src/pages/JoinVolunteerPage.tsxsrc/locales/te/translations.jsonsrc/locales/hi/translations.json
Key changes
- Added
LanguageSwitcherto Join Volunteer header (globe icon only). - Replaced hardcoded/static UI strings in
JoinVolunteerPage.tsxwith i18n keys. - Added missing Telugu/Hindi translation keys for Join Volunteer page sections:
- hero description
- why volunteer section descriptions
- role cards (title + description)
- date/location labels
- to-be-announced/no-camp-date labels
- action/status labels (
backToLogin,registering, etc.)
- Ensured locale JSON remains valid.
Technical Details
Root cause:
- Missing translation keys in
te/hilocale files for Join Volunteer page. - Some content relied on fallback English/default strings.
Fix approach:
- Centralized Join Volunteer copy under explicit keys (not fallback text).
- Added corresponding locale values in Telugu/Hindi.
- Kept existing i18n structure and
LanguageSwitchercomponent usage consistent with project patterns.
Type of Change
-
🐛 Bug fix (non-breaking change that fixes an issue) -
✨ New feature (non-breaking change that adds functionality) -
💥 Breaking change -
📝 Documentation update -
🎨 UI/UX improvement -
♻ ️ Refactor -
⚡ Performance improvement -
🧪 Test update -
🔧 Configuration change -
🚨 Security fix
Related Issues / References
Issue #300 (closed)
- Closes: Join Volunteer page missing language switcher and mixed-language rendering after locale switch
- Related to: i18n consistency across public/auth pages
Screenshots
AFTER
How to Set Up and Validate Locally
- Checkout branch:
git checkout feat/language-switcher - Install deps (if needed):
npm install - Run app:
npm run dev - Open:
http://localhost:5173/join-volunteer
- Validate:
- Globe language switcher appears in header
- Switch between English/Telugu/Hindi
- Entire page content updates to selected language (no mixed English)
Testing Done
-
Manual testing completed -
Unit tests added/updated
Test Cases Covered:
| Scenario | Expected Result | Status |
|---|---|---|
Language switcher visible on /join-volunteer
|
Globe icon shown in header | |
| Switch to Telugu | Page content shown in Telugu | |
| Switch to Hindi | Page content shown in Hindi | |
| Switch back to English | Page content shown in English | |
| Locale JSON integrity | JSON parses successfully |
Code Quality Checklist
Code Standards
-
Code follows project conventions -
No console.log() or debugger introduced by this MR -
No unused imports/vars introduced -
Reused existing LanguageSwitchercomponent -
i18n strings externalized for changed Join Volunteer content -
TypeScript-safe changes -
ESLint and Prettier checks pass (run full project check before merge)
React Best Practices
-
Hooks follow rules -
State management unchanged and appropriate -
No unnecessary event lifecycle changes introduced
Component Patterns
-
Existing UI component patterns preserved -
Responsive behavior preserved -
Accessibility preserved (language trigger has aria from shared component)
API & Data Fetching
-
No API contract changes
Error Handling
-
No new error paths introduced
Documentation
-
README.md updated (not required) -
.env.exampleupdated (not required) -
CHANGELOG.mdupdated (optional, if release process needs it)
Pipeline
Edited by Lakshmi pavani Challa




