FE-03: Add multilingual localization support using react-i18nextAdd multilingual localization support

package.json

@@ -18,12 +18,14 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.2.2",
     "framer-motion": "^12.38.0",
+    "i18next": "^26.3.0",
     "leaflet": "^1.9.4",
     "lucide-react": "^1.16.0",
     "posthog-js": "^1.376.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-hot-toast": "^2.6.0",
+    "react-i18next": "^17.0.8",
     "react-leaflet": "^5.0.0",
     "react-router-dom": "^7.14.0",
     "tailwindcss": "^4.2.2"

src/components/Navbar.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { useState, useRef, useEffect } from 'react';
 import { usePostHog } from 'posthog-js/react';
@@ -14,6 +15,7 @@ export default function Navbar() {
   const [profile, setProfile] = useState<UserProfile | null>(null);
   const [loggedIn, setLoggedIn] = useState(isAuthenticated());
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const { t, i18n } = useTranslation();
 
   useEffect(() => {
     let ignore = false;
@@ -53,9 +55,9 @@ export default function Navbar() {
   };
 
   const links = [
-    { to: '/', label: 'HOME' },
-    { to: '/scanner', label: 'SCANNER' },
-    { to: '/map', label: 'TRUST_MAP' },
+    { to: '/', label: t('home') },
+    { to: '/scanner', label: t('scanner') },
+    { to: '/map', label: t('trustMap') },
   ];
 
   return (
@@ -92,6 +94,15 @@ export default function Navbar() {
 
         {/* Auth Button & Theme Toggle */}
         <div className="flex items-center gap-2 sm:gap-4">
+          <select
+            value={i18n.language}
+            onChange={(e) => i18n.changeLanguage(e.target.value)}
+            className="bg-surface-low border border-outline-variant/30 px-2 py-1 text-xs"
+>
+            <option value="en">EN</option>
+            <option value="hi">HI</option>
+            <option value="bn">BN</option>
+          </select>
           {/* Theme Toggle Button */}
           <button
             type="button"

src/i18n/index.ts

@@ -0,0 +1,21 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import en from "./locales/en.json";
+import hi from "./locales/hi.json";
+import bn from "./locales/bn.json";
+
+i18n.use(initReactI18next).init({
+  resources: {
+    en: { translation: en },
+    hi: { translation: hi },
+    bn: { translation: bn }
+  },
+  lng: "en",
+  fallbackLng: "en",
+  interpolation: {
+    escapeValue: false
+  }
+});
+
+export default i18n;

src/i18n/locales/bn.json

@@ -0,0 +1,8 @@
+{
+  "home": "হোম",
+  "scanner": "স্ক্যানার",
+  "trustMap": "ট্রাস্ট ম্যাপ",
+  "signin": "সাইন ইন / সাইন আপ",
+  "results": "ফলাফল",
+  "logout": "লগ আউট"
+}

src/i18n/locales/en.json

@@ -0,0 +1,8 @@
+{
+  "home": "HOME",
+  "scanner": "SCANNER",
+  "trustMap": "TRUST MAP",
+  "signin": "SIGN IN / SIGN UP",
+  "results": "RESULTS",
+  "logout": "LOGOUT"
+}

src/i18n/locales/hi.json

@@ -0,0 +1,8 @@
+{
+  "home": "होम",
+  "scanner": "स्कैनर",
+  "trustMap": "ट्रस्ट मैप",
+  "signin": "साइन इन / साइन अप",
+  "results": "परिणाम",
+  "logout": "लॉग आउट"
+}

src/main.tsx

@@ -4,7 +4,8 @@ import posthog from 'posthog-js'
 import { PostHogProvider } from 'posthog-js/react'
 import './index.css'
 import App from './App.tsx'
-import { initTheme } from './lib/theme';
+import { initTheme } from './lib/theme'
+import "./i18n";
 
 // Initialize theme before rendering the app to prevent flicker
 initTheme();