Comments in main tsx

src/main.tsx

@@ -1,6 +1,7 @@
 import { Global, css } from "@emotion/react";
 import React, { useEffect } from "react";
 import ReactDOM from "react-dom/client";
+import { useTranslation } from "react-i18next";
 import { Router } from "wouter";
 import App from "./App";
 import { setupAxiosInterceptors } from "./api/AxiosService";
@@ -9,18 +10,39 @@ import useLocalStorage from "./hooks/useLocalStorage";
 import "./locales/localesConfig";
 import inDev from "./utils/inDev";
 import "/style.css"; // Global tailwind styles
-import { useTranslation } from "react-i18next";
 
+/**
+ * Sets up Axios interceptors for HTTP requests.
+ */
 setupAxiosInterceptors();
+
+/**
+ * Logs environment variables if in development mode.
+ */
 inDev(() => console.log(viteEnv));
+
+/**
+ * Global variables to manage the application's language state.
+ */
 export let language: string, setLanguage: (value: string) => void;
 
+/**
+ * _App component which is the main entry point of the application.
+ * Manages routing and global state like language.
+ *
+ * @returns The Router component wrapping the main App component.
+ */
 const _App = () => {
+	// Hook to manage language state in local storage
 	[language, setLanguage] = useLocalStorage("language", "eng");
 	const { i18n } = useTranslation();
+
+	// Effect to change language based on state
 	useEffect(() => {
 		i18n.changeLanguage(language);
 	}, [language]);
+
+	// Conditional rendering based on base path
 	if (main.base_path !== "/") {
 		return (
 			<Router base={main.base_path}>
@@ -36,7 +58,7 @@ const _App = () => {
 	}
 };
 
-// Hook react to the HTML element with id="root"
+// Mounting the application to the DOM
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
 	<React.StrictMode>
 		<Global