Feat/implement internalisation

package.json

@@ -48,6 +48,7 @@
     "dayjs": "^1.11.10",
     "dotenv": "^16.3.1",
     "framer-motion": "^11.0.3",
+    "i18next": "^24.2.3",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
@@ -56,6 +57,7 @@
     "react-fast-marquee": "^1.6.4",
     "react-helmet-async": "^2.0.4",
     "react-hook-form": "^7.49.3",
+    "react-i18next": "^15.4.1",
     "react-icons": "^4.10.1",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.26.2",

src/App.jsx

@@ -1,35 +1,46 @@
 import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Suspense } from "react";
-import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
+import { Suspense, useEffect } from "react";
+import { Route, Routes, useSearchParams } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import { BacktoTop } from "./components/shared";
 import "./styles/App.css";
 import "./styles/Globals.scss";
+import './utils/i18n';
 import routesConfig from "./utils/routesConfig.jsx";
+import i18next from "i18next";
+import { useTranslation } from "react-i18next";
 
 const App = () => {
   const queryClient = new QueryClient();
+  const [searchParams] = useSearchParams();
+  const lang = searchParams.get("lang");
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    i18next.changeLanguage(lang, (err) => {
+      if (err) return console.log('something went wrong loading', err);
+    });
+  }, [lang]);
 
   return (
     <QueryClientProvider client={queryClient}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <div className="app">
           <ToastContainer />
-          <Suspense fallback={"Loading . . ."}>
-            <Router>
-              <Routes>
-                {routesConfig.map((route, index) => (
-                  <Route
-                    key={index}
-                    exact
-                    path={route?.path}
-                    element={route?.element}
-                  />
-                ))}
-              </Routes>
-            </Router>
+          <Suspense fallback={t("loading")}>
+            <Routes>
+              {routesConfig.map((route, index) => (
+                <Route
+                  key={index}
+                  exact
+                  path={route?.path}
+                  element={route?.element}
+                />
+              ))}
+            </Routes>
           </Suspense>
           <BacktoTop />
         </div>

src/components/private/landing/Landing.jsx

@@ -4,10 +4,14 @@ import { useSelector } from "react-redux";
 import Vector from "../../../assets/pictures/Banner/Vector.png";
 import { Button, Navbar } from "../../shared";
 import "./Landing.scss";
+import { useTranslation } from "react-i18next";
+
+const USERS_AMOUNT = 300;
 
 const Landing = () => {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const isLoggedIn = useSelector(selectIsLoggedIn);
+  const { t } = useTranslation();
 
   useEffect(() => {
     const handleResize = () => {
@@ -28,37 +32,35 @@ const Landing = () => {
         <div className="landing_body">
           {windowWidth > 430 ? (
             <>
-              <h1>We connect NGOs,</h1>
+              <h1>{t("connect_ngo")},</h1>
               <h1>
-                Charities and <span>you.</span>
+                {t("charities_and_you")}
               </h1>
             </>
           ) : (
             <h1>
-              We connect NGOs, charities and <span>you.</span>
+              {t("we_connect_ngo")}
             </h1>
           )}
 
           {windowWidth > 430 ? (
             <p>
-              Welcome to <span>NgoWorld</span>, a platform to connect and
-              support NGOs, charities and you to build a better tomorrow.
+              {t('welcome_to_ngo_world')}
             </p>
           ) : (
             <p>
-              A platform for NGOs, charities, clubs and you to collaborate, grow
-              and build a better tomorrow.
+              {t("platform_for_ngos")}
             </p>
           )}
 
           <div className="landing_ctadiv">
             {isLoggedIn ? (
               <Button to="/clubs" className="landing_signup">
-                <span>Explore our clubs</span>
+                <span>{t("explore_our_clubs")}</span>
               </Button>
             ) : (
               <Button to="/auth/signup" className="landing_signup">
-                <span>Sign up Today !</span>
+                <span>{t("sign_up_today")}</span>
               </Button>
             )}
 
@@ -83,7 +85,7 @@ const Landing = () => {
                   alt=""
                 />
               </div>
-              <span>Trusted by 300+ users.</span>
+              <span>{t("trusted_by_users", { count: USERS_AMOUNT })}</span>
             </div>
           </div>
         </div>

src/components/shared/cards/club/ClubCard.jsx

@@ -1,8 +1,11 @@
 import { Link } from "react-router-dom";
 import clubBanner from "../../../../assets/pictures/Banner/clubbanner.jpg";
 import "./ClubCard.scss";
+import { useTranslation } from "react-i18next";
 
 const ClubCard = ({ club }) => {
+  const { t } = useTranslation();
+
   return (
     <div className="clubcard_parent">
       {/* Top Section */}
@@ -25,11 +28,11 @@ const ClubCard = ({ club }) => {
       <div className="clubcard_ctadiv">
         <div className="profile_numbers">
           <p className="counts followersCount">
-            <span>1.25k</span> Followers
+            <span>1.25k</span> {t("followers")}
           </p>
 
           <p className="counts EventsCount">
-            <span>231</span> Events
+            <span>231</span> {t("events")}
           </p>
         </div>
 

src/components/shared/cards/event/EventCard.jsx

@@ -2,14 +2,17 @@ import { FiLink } from "react-icons/fi";
 import { IoMdArrowUp } from "react-icons/io";
 import { RiTwitterXLine } from "react-icons/ri";
 import "./EventCard.scss";
+import { useTranslation } from "react-i18next";
 
 const EventCard = () => {
+  const { t } = useTranslation();
+
   return (
     <div className="eventcard_parent">
       <div className="eventcard_top">
         <div className="eventcard_name">
-          <h1>Food Marathon, 2025</h1>
-          <span>GodLike Club</span>
+          <h1>{t("food_marathon", { year: 2025 })}</h1>
+          <span>{t("godlike_club")}</span>
         </div>
 
         <div className="eventcard_links">
@@ -19,11 +22,7 @@ const EventCard = () => {
       </div>
 
       <p>
-        The Food Marathon 2025 is a dynamic NGO event uniting communities to
-        fight hunger and promote food security. Participants will engage in
-        exciting activities while contributing to sustainable food distribution
-        efforts. Together, we can bridge the gap between surplus and need,
-        creating a hunger-free future.
+        {t("the_food_marathon")}
       </p>
 
       <div className="eventcard_ctadiv">
@@ -42,7 +41,7 @@ const EventCard = () => {
               alt=""
             />
           </div>
-          <p>+300 Participated</p>
+          <p>+300 {t("participated")}</p>
         </div>
 
         <button className="eventcard_cta">

src/components/shared/cards/event/FeaturedEventCard.jsx

@@ -1,14 +1,17 @@
 import { FiLink } from "react-icons/fi";
 import { RiTwitterXLine } from "react-icons/ri";
 import "./FeaturedEventCard.scss";
+import { useTranslation } from "react-i18next";
 
 const FeaturedEventCard = () => {
+  const { t } = useTranslation();
+
   return (
     <div className="featured_eventcard_parent">
       <div className="featured_eventcard_top">
         <div className="featured_eventcard_name">
-          <h1>Food Marathon, 2025</h1>
-          <span>GodLike Club</span>
+          <h1>{t("food_marathon", { year: 2025 })}</h1>
+          <span>{t("godlike_club")}</span>
         </div>
 
         <div className="featured_eventcard_links">
@@ -18,11 +21,7 @@ const FeaturedEventCard = () => {
       </div>
 
       <p>
-        The Food Marathon 2025 is a dynamic NGO event uniting communities to
-        fight hunger and promote food security. Participants will engage in
-        exciting activities while contributing to sustainable food distribution
-        efforts. Together, we can bridge the gap between surplus and need,
-        creating a hunger-free future.
+        {t("the_food_marathon")}
       </p>
 
       <div className="featured_eventcard_ctadiv">
@@ -41,10 +40,10 @@ const FeaturedEventCard = () => {
               alt=""
             />
           </div>
-          <p>+300 Participated</p>
+          <p>+300 {t("participated")}</p>
         </div>
 
-        <button className="featured_eventcard_cta">Register Now</button>
+        <button className="featured_eventcard_cta">{t("register_now")}</button>
       </div>
     </div>
   );

src/components/shared/cards/event/FeaturedEventImage.jsx

@@ -1,9 +1,12 @@
+import { useTranslation } from "react-i18next";
 import "./FeaturedEventImage.scss";
 
 const FeaturedEventImage = () => {
+  const { t } = useTranslation();
+
   return (
     <div className="featured_eventimage_parent">
-      <div className="featured_tag">Featured</div>
+      <div className="featured_tag">{t("featured")}</div>
 
       <img
         src="https://devfolio.co/_next/image?url=https%3A%2F%2Fassets.devfolio.co%2Fcontent%2Fd8b04d5b9f8c4412a40fbe8574c9f1db%2Fcd09ca5b-0e7d-4e96-b282-1d22fc0896a2.png&w=1440&q=75"

src/components/shared/comingSoon/ComingSoon.jsx

@@ -1,17 +1,20 @@
+import { useTranslation } from "react-i18next";
 import ComingSoonLogo from "../../../assets/pictures/comingsoon.svg";
 import Button from "../buttons/globalbutton/Button";
 import "./ComingSoon.scss";
 
 const ComingSoon = ({ launchitem }) => {
+  const { t } = useTranslation();
+
   return (
     <div className="comingsoon_parent">
       <img src={ComingSoonLogo} alt="" />
-      <h1>Launching Soon !</h1>
+      <h1>{t("launching_soon")}</h1>
       <p>
-        We will let you know as soon as we launch our{" "}
+        {t("we_will_let_you_know")}{" "}
         {launchitem ? launchitem : "page"}
       </p>
-      <Button to="/auth/signup">Sign up to get notified</Button>{" "}
+      <Button to="/auth/signup">{t("sign_to_get_notified")}</Button>{" "}
     </div>
   );
 };

src/components/shared/footer/Footer.jsx

@@ -1,11 +1,16 @@
-import { footerLinks } from "@utils/footerLinksConfig";
+import { footerLinks as footerLinksInitial } from "@utils/footerLinksConfig";
 import { FaGithub, FaLinkedinIn, FaXTwitter } from "react-icons/fa6";
 import { Link } from "react-router-dom";
 import "react-toastify/dist/ReactToastify.css";
 import brand from "../../../assets/pictures/Navbar/MilanNavBrand.svg";
 import "./Footer.scss";
+import { useTranslation } from "react-i18next";
 
 const Footer = () => {
+  const { t } = useTranslation();
+
+  const footerLinks = footerLinksInitial(t);
+
   const icons = {
     FaLinkedinIn: FaLinkedinIn,
     FaXTwitter: FaXTwitter,
@@ -22,7 +27,7 @@ const Footer = () => {
 
           <div className="links_parent">
             <div className="product">
-              <h1>QUICK STARTS</h1>
+              <h1>{t("quick_starts")}</h1>
 
               {footerLinks?.quickStarts?.map((item, index) => {
                 return (
@@ -33,7 +38,7 @@ const Footer = () => {
               })}
             </div>
             <div className="dev">
-              <h1>RESOURCES</h1>
+              <h1>{t("resources")}</h1>
               {footerLinks?.resources?.map((item, index) => {
                 return item?.path.startsWith("http") ? (
                   <a
@@ -52,7 +57,7 @@ const Footer = () => {
               })}
             </div>
             <div className="policies">
-              <h1>POLICIES</h1>
+              <h1>{t("policies")}</h1>
               {footerLinks?.policies?.map((item, index) => {
                 return (
                   <Link key={index} to={item?.path} target="_blank">

src/components/shared/loading/Loading.jsx

@@ -1,15 +1,18 @@
 import React from "react";
 import "./Loading.scss";
+import { useTranslation } from "react-i18next";
 
 const Loading = () => {
+  const { t } = useTranslation();
+
   return (
     <div id="spinner-wrapper" className="text-center">
       <div
         id="spinner"
         className="spinner-border text-primary m-5"
         role="status"
       ></div>
-      <span className="visually-hidden">Loading...</span>
+      <span className="visually-hidden">{t("loading")}</span>
     </div>
   );
 };