New Files

client/package.json

@@ -22,10 +22,13 @@
     "@types/react-dom": "^18.3.0",
     "axios": "^1.7.7",
     "dayjs": "^1.11.13",
+    "i18next": "^25.6.0",
+    "i18next-browser-languagedetector": "^8.2.0",
     "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
+    "react-i18next": "^16.0.1",
     "react-router-dom": "^6.26.2",
     "web-vitals": "^2.1.4"
   },

client/src/i18n.ts

@@ -0,0 +1,28 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import en from './locales/en/translation.json';
+import hi from './locales/hi/translation.json';
+
+// i18n instance is initialized once for the whole app
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: { translation: en },
+      hi: { translation: hi },
+    },
+    fallbackLng: 'en',
+    supportedLngs: ['en', 'hi'],
+    interpolation: { escapeValue: false },
+    detection: {
+      order: ['querystring', 'localStorage', 'navigator', 'htmlTag'],
+      caches: ['localStorage'],
+    },
+  });
+
+export default i18n;
+
+

client/src/index.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { StyledEngineProvider } from '@mui/material/styles';
 import { secrets } from './config/secrets';
 import './styles.css';
+import './i18n';
 import { PreferencesProvider } from './context/PreferencesContext';
 import { ApiProvider } from '@/context/ApiContext';
 import { LocalizationProvider } from '@mui/x-date-pickers';

client/src/locales/en/translation.json

@@ -0,0 +1,22 @@
+{
+  "nav": {
+    "preferences": "Preferences",
+    "support": "Support",
+    "logout": "Logout"
+  },
+  "preferences": {
+    "noPreference": "No preference",
+    "selectFloor": "Select preferred floor",
+    "selectDuration": "Select preferred meeting duration",
+    "selectCapacity": "Select preferred room capacity",
+    "titlePlaceholder": "Add preferred title",
+    "save": "Save",
+    "saved": "Saved successfully!"
+  },
+  "home": {
+    "newEvent": "New Event",
+    "myEvents": "My Events"
+  }
+}
+
+

client/src/locales/hi/translation.json

@@ -0,0 +1,22 @@
+{
+  "nav": {
+    "preferences": "पसंद",
+    "support": "सहायता",
+    "logout": "लॉग आउट"
+  },
+  "preferences": {
+    "noPreference": "कोई प्राथमिकता नहीं",
+    "selectFloor": "पसंदीदा मंज़िल चुनें",
+    "selectDuration": "पसंदीदा मीटिंग अवधि चुनें",
+    "selectCapacity": "पसंदीदा कक्ष क्षमता चुनें",
+    "titlePlaceholder": "पसंदीदा शीर्षक जोड़ें",
+    "save": "सहेजें",
+    "saved": "सफलतापूर्वक सहेजा गया!"
+  },
+  "home": {
+    "newEvent": "नया इवेंट",
+    "myEvents": "मेरे इवेंट"
+  }
+}
+
+

client/src/pages/Home/TopNavigationBar.tsx

@@ -2,6 +2,7 @@ import { Box, IconButton, styled, SxProps, Theme, ToggleButton, ToggleButtonGrou
 import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
 import { useNavigate } from 'react-router-dom';
 import { ROUTES } from '@/config/routes';
+import { useTranslation } from 'react-i18next';
 
 const TopBar = styled(Box)(({ theme }) => ({
   paddingTop: theme.spacing(1.5),
@@ -55,6 +56,7 @@ interface TopNavigationBarProps {
 
 const TopNavigationBar = ({ sx, tabIndex, handleTabChange }: TopNavigationBarProps) => {
   const navigate = useNavigate();
+  const { t } = useTranslation();
 
   const handleChange = (_: React.SyntheticEvent | null, newValue: number) => {
     if (newValue !== null) {
@@ -83,10 +85,10 @@ const TopNavigationBar = ({ sx, tabIndex, handleTabChange }: TopNavigationBarPro
       >
         <StyledToggleButtonGroup value={tabIndex} exclusive onChange={handleChange} aria-label="event tabs" fullWidth={true}>
           <StyledToggleButton value={0} aria-label="new event" fullWidth={true}>
-            New Event
+            {t('home.newEvent', 'New Event')}
           </StyledToggleButton>
           <StyledToggleButton value={1} aria-label="my events" fullWidth={true}>
-            My Events
+            {t('home.myEvents', 'My Events')}
           </StyledToggleButton>
 
         </StyledToggleButtonGroup>

client/src/pages/Settings/PreferenceView.tsx

@@ -5,6 +5,7 @@ import { usePreferences } from '@/context/PreferencesContext';
 import { createDropdownOptions, isChromeExt, populateDurationOptions, populateRoomCapacity, renderError } from '@/helpers/utility';
 import { Box, Button, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 import EventSeatRoundedIcon from '@mui/icons-material/EventSeatRounded';
@@ -14,6 +15,7 @@ import TitleIcon from '@mui/icons-material/Title';
 import { useApi } from '@/context/ApiContext';
 
 export default function PreferenceView() {
+  const { t } = useTranslation();
   // Form state
   const [formData, setFormData] = useState({
     floor: '',
@@ -40,7 +42,7 @@ export default function PreferenceView() {
   useEffect(() => {
     const init = (floors: string[], capacities: string[]) => {
       const floorOptions = createDropdownOptions(floors);
-      floorOptions.unshift({ text: 'No preference', value: '' });
+      floorOptions.unshift({ text: t('preferences.noPreference'), value: '' });
 
       setFloorOptions(floorOptions);
       setRoomCapacityOptions(createDropdownOptions(capacities));
@@ -95,7 +97,7 @@ export default function PreferenceView() {
       duration: Number(formData.duration),
     });
 
-    toast.success('Saved successfully!');
+    toast.success(t('preferences.saved'));
   };
 
   return (
@@ -127,7 +129,7 @@ export default function PreferenceView() {
             sx={{ borderTopLeftRadius: 10, borderTopRightRadius: 10, height: '60px' }}
             id="floor"
             value={formData.floor}
-            placeholder={'Select preferred floor'}
+            placeholder={t('preferences.selectFloor')}
             options={floorOptions}
             onChange={handleInputChange}
             icon={
@@ -147,7 +149,7 @@ export default function PreferenceView() {
             value={formData.duration}
             options={durationOptions}
             onChange={handleInputChange}
-            placeholder={'Select preferred meeting duration'}
+            placeholder={t('preferences.selectDuration')}
             icon={
               <HourglassBottomRoundedIcon
                 sx={[
@@ -162,7 +164,7 @@ export default function PreferenceView() {
           <Dropdown
             sx={{ height: '60px', borderBottomLeftRadius: 15, borderBottomRightRadius: 15 }}
             id="seats"
-            placeholder={'Select preferred room capacity'}
+            placeholder={t('preferences.selectCapacity')}
             value={formData.seats + ''}
             options={roomCapacityOptions}
             onChange={handleInputChange}
@@ -189,7 +191,7 @@ export default function PreferenceView() {
               />
             }
             id="title"
-            placeholder="Add preferred title"
+            placeholder={t('preferences.titlePlaceholder')}
             onChange={handleInputChange}
           />
         </Box>
@@ -222,7 +224,7 @@ export default function PreferenceView() {
           ]}
         >
           <Typography variant="h6" fontWeight={700}>
-            Save
+            {t('preferences.save')}
           </Typography>
         </Button>
       </Box>

client/src/pages/Settings/index.tsx

@@ -8,9 +8,13 @@ import { useState } from 'react';
 import { chromeBackground, isChromeExt } from '@helpers/utility';
 import { styled, ToggleButton, ToggleButtonGroup } from '@mui/material';
 import ExitToAppRoundedIcon from '@mui/icons-material/ExitToAppRounded';
+import LanguageIcon from '@mui/icons-material/Language';
+import { MenuItem, Select } from '@mui/material';
+import i18n from '@/i18n';
 import PreferenceView from '@/pages/Settings/PreferenceView';
 import SupportView from '@/pages/Settings/SupportView';
 import LogoutView from '@/pages/Settings/LogoutView';
+import { useTranslation } from 'react-i18next';
 
 const TopBar = styled(Box)(({ theme }) => ({
   paddingTop: theme.spacing(1.5),
@@ -57,6 +61,8 @@ const StyledToggleButton = styled(ToggleButton)(({ theme }) => ({
 export default function Settings() {
   const [tabIndex, setTabIndex] = useState(0);
   const navigate = useNavigate();
+  const { t } = useTranslation();
+  const [language, setLanguage] = useState(i18n.language || 'en');
 
   const handleTabChange = (_: React.SyntheticEvent | null, newValue: number) => {
     if (newValue !== null) {
@@ -68,6 +74,12 @@ export default function Settings() {
     navigate(ROUTES.home);
   };
 
+  const handleLanguageChange = (event: any) => {
+    const newLang = event.target.value;
+    setLanguage(newLang);
+    i18n.changeLanguage(newLang);
+  };
+
   if (!open) {
     return <></>;
   }
@@ -119,28 +131,41 @@ export default function Settings() {
           >
             <StyledToggleButtonGroup sx={{ mx: 0 }} value={tabIndex} exclusive onChange={handleTabChange} aria-label="event tabs" fullWidth={true}>
               <StyledToggleButton value={0} aria-label="new event" fullWidth={true}>
-                Preferences
+                {t('nav.preferences')}
               </StyledToggleButton>
               <StyledToggleButton value={1} aria-label="my events" fullWidth={true}>
-                Support
+                {t('nav.support')}
               </StyledToggleButton>
             </StyledToggleButtonGroup>
           </Box>
-          {/* logout icon */}
+          {/* language + logout */}
           <Box
             sx={[
               (theme) => ({
                 borderRadius: 100,
-                backgroundColor: tabIndex === 2 ? theme.palette.grey[100] : 'white',
-                p: 1,
+                backgroundColor: 'white',
+                px: 1,
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
                 textAlign: 'center',
+                gap: 1,
                 ml: 0,
               }),
             ]}
           >
+            <LanguageIcon fontSize="small" />
+            <Select
+              size="small"
+              value={language}
+              onChange={handleLanguageChange}
+              variant="standard"
+              disableUnderline
+              sx={{ minWidth: 60 }}
+            >
+              <MenuItem value="en">EN</MenuItem>
+              <MenuItem value="hi">HI</MenuItem>
+            </Select>
             <IconButton aria-label="settings" sx={{ mr: 0, backgroundColor: 'white' }} onClick={() => handleTabChange(null, 2)}>
               <ExitToAppRoundedIcon
                 fontSize="small"