feat: Add base setup for Internationalization(i18n)

apps/web/src/i18n/index.ts

@@ -0,0 +1,15 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import Backend from "i18next-http-backend"; 
+
+i18n
+  .use(LanguageDetector) // detects browser language
+  .use(initReactI18next)// passes i18n down to react-i18next
+  .use(Backend) // loads translations asynchoronusly from /locales/{{lng}}/{{ns}}.json
+  .init({
+    fallbackLng: "en", // fallback language
+    debug: true,
+  });
+
+export default i18n;

apps/web/src/i18n/locales/en/translation.json

@@ -0,0 +1,5 @@
+{
+  "welcome": "Welcome",
+  "login": "Login",
+  "logout": "Logout"
+}

apps/web/src/i18n/locales/es/translation.json

@@ -0,0 +1,5 @@
+{
+  "welcome": "Bienvenido",
+  "login": "Iniciar sesión",
+  "logout": "Cerrar sesión"
+}

apps/web/src/main.tsx

@@ -2,9 +2,13 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
+import "@/i18n"
+import { Suspense } from 'react'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <Suspense fallback={<div>Loading...</div>}>
+      <App />
+    </Suspense>
   </StrictMode>,
 )