Merge branch "feature/internationalization-i18n" into "develop"

Internationalization i18n

Author: levilevente

.github/workflows/workflow.yml

@@ -49,6 +49,8 @@ jobs:
 
       # 5. Build Test (Ensures the app actually compiles)
       - name: Build Production Bundle
+        env:
+          VITE_AGENT_API_BASE_URL: ${{ secrets.VITE_AGENT_API_BASE_URL }}
         run: yarn build
 
       # 6. Quick Bundle Size Report

package.json

@@ -16,10 +16,14 @@
         "axios": "^1.13.2",
         "bootstrap": "^5.3.8",
         "dompurify": "^3.3.1",
+        "i18next": "^25.7.2",
+        "i18next-browser-languagedetector": "^8.2.0",
+        "i18next-http-backend": "^3.0.2",
         "react": "^19.1.1",
         "react-bootstrap": "^2.10.10",
         "react-datepicker": "^8.9.0",
         "react-dom": "^19.1.1",
+        "react-i18next": "^16.5.0",
         "react-icons": "^5.5.0",
         "react-medium-image-zoom": "^5.4.0",
         "react-router": "^7.9.5",

public/locales/en/translation.json

@@ -0,0 +1,76 @@
+{
+  "galacticView": {
+    "title": "GalacticView",
+    "description": "GalacticView is built for space enthusiasts by space enthusiasts. Explore the wonders of the universe with us! You can create blog posts, share your favorite images, and stay updated with the latest space news.",
+    "copyright": "© 2025 GalacticView. All rights reserved."
+  },
+  "navigation": {
+    "epicData": "Epic Data",
+    "imageOfTheDay": "Image of the Day",
+    "blogPost": "Blog Post"
+  },
+  "epicDataPost": {
+    "title": "NASA's EPIC camera onboard the NOAA DSCOVR spacecraft",
+    "description": "The stunning \"Blue Marble\" images of the full, sunlit side of Earth are captured daily by the Earth Polychromatic Imaging Camera (EPIC) aboard NOAA's Deep Space Climate Observatory (DSCOVR) satellite. Positioned a million miles away, DSCOVR provides a unique, continuous view of our dynamic planet as it rotates, offering a fresh perspective on weather patterns, clouds, and natural landscapes.",
+    "cameraAndSatelliteTitle": "Camera and Satellite",
+    "cameraAndSatelliteDescription": "The Earth Polychromatic Imaging Camera (EPIC) is the instrument, and it is mounted on the Deep Space Climate Observatory (DSCOVR) satellite.",
+    "locationTitle": "Location",
+    "locationDescription": "The satellite is positioned about a million miles away, between the Earth and the sun, which allows it to capture the entire sunlit side of the planet.",
+    "imageCaptureTitle": "Image Capture",
+    "imageCaptureDescription": "EPIC takes multiple images of Earth's sunlit face each day, with each full-color image being a composite of three separate images.",
+    "card": {
+      "seeMore": "See More",
+      "itemsCount": "items for date",
+      "imageDate": "Images taken: "
+    }
+  },
+  "months": {
+    "january": "January",
+    "february": "February",
+    "march": "March",
+    "april": "April",
+    "may": "May",
+    "june": "June",
+    "july": "July",
+    "august": "August",
+    "september": "September",
+    "october": "October",
+    "november": "November",
+    "december": "December"
+  },
+  "footer": {
+    "home": "Home",
+    "explore": "Explore",
+    "blog": "Blog",
+    "aboutUs": "About Us",
+    "contact": "Contact",
+    "privacyPolicy": "Privacy Policy",
+    "termsOfService": "Terms of Service",
+    "helpCenter": "Help Center",
+    "followUs": "Follow Us",
+    "facebook": "Facebook",
+    "twitter": "Twitter",
+    "instagram": "Instagram"
+  },
+  "imageOfTheDay": {
+    "title": "Image of the Day",
+    "today": "TODAY",
+    "errorImage": "Media type not supported.",
+    "container": {
+      "loading": "Loading...",
+      "failed": "Failed to load image of the day."
+    },
+    "history": {
+      "title": "Search for images from the past",
+      "search": "Search for image"
+    },
+    "searchResults": {
+      "error": "Error FIX IT"
+    }
+  },
+  "agent": {
+    "welcome": "\uD83D\uDC4B How can I help you explore the cosmos today?",
+    "placeholder": "Ask me anything about space..."
+  },
+  "loading": "Loading..."
+}

src/components/AgentChatWidget.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import * as React from 'react';
 import { Button, Card, CloseButton, Form, InputGroup } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
 import { IoSend } from 'react-icons/io5';
 import TextareaAutosize from 'react-textarea-autosize';
 
@@ -10,6 +11,8 @@ import style from './AgentChatWidget.module.css';
 const MAX_MESSAGE_LENGTH = 512;
 
 function AgentChatWidget() {
+    const { t } = useTranslation();
+
     const [isOpen, setIsOpen] = useState(false);
     const [inputMessage, setInputMessage] = useState('');
     const { messages, isLoading, sendMessage } = useAgentChat();
@@ -58,7 +61,7 @@ function AgentChatWidget() {
                     </Card.Header>
                     <Card.Body className={style.cardBody}>
                         <div className={style.cardBodyWelcomeText}>
-                            {messages.length === 0 ? <p>👋 How can I help you explore the cosmos today?</p> : null}
+                            {messages.length === 0 ? <p>{t('agent.welcome')}</p> : null}
                         </div>
                         <div className={style.messagesContainer}>
                             {messages.map((msg) => (
@@ -80,7 +83,7 @@ function AgentChatWidget() {
                                     as={TextareaAutosize}
                                     minRows={1}
                                     maxRows={5}
-                                    placeholder={'Ask me anything about space...'}
+                                    placeholder={t('agent.placeholder')}
                                     className={style.chatInput}
                                     value={inputMessage}
                                     onChange={(e) => setInputMessage(e.target.value)}

src/components/FooterBar.tsx

@@ -1,36 +1,36 @@
+import { useTranslation } from 'react-i18next';
+
 import styles from './FooterBar.module.css';
 
 function FooterBar() {
+    const { t } = useTranslation();
+
     return (
         <footer className={styles.footerBar}>
             <div className={styles.firstDiv}>
                 <img src="/logo/logo-light.png" alt="App Logo" className={styles.logo} />
-                <h1>GalacticView </h1>
-                <p>
-                    GalacticView is built for space enthusiasts by space enthusiasts. Explore the wonders of the
-                    universe with us! You can create blog posts, share your favorite images, and stay updated with the
-                    latest space news.
-                </p>
-                <p>© 2025 GalacticView. All rights reserved.</p>
+                <h1>{t('galacticView.title')}</h1>
+                <p>{t('galacticView.description')}</p>
+                <p>{t('galacticView.copyright')}</p>
             </div>
             <div className={styles.secondDiv}>
                 <div>
-                    <p>Home</p>
-                    <p>Explore</p>
-                    <p>Blog</p>
-                    <p>About Us</p>
+                    <p>{t('footer.home')}</p>
+                    <p>{t('footer.explore')}</p>
+                    <p>{t('footer.blog')}</p>
+                    <p>{t('footer.aboutUs')}</p>
                 </div>
                 <div>
-                    <p>Contact</p>
-                    <p>Privacy Policy</p>
-                    <p>Terms of Service</p>
-                    <p>Help Center</p>
+                    <p>{t('footer.contact')}</p>
+                    <p>{t('footer.privacyPolicy')}</p>
+                    <p>{t('footer.termsOfService')}</p>
+                    <p>{t('footer.helpCenter')}</p>
                 </div>
                 <div>
-                    <p>Follow Us</p>
-                    <p>Facebook</p>
-                    <p>Twitter</p>
-                    <p>Instagram</p>
+                    <p>{t('footer.followUs')}</p>
+                    <p>{t('footer.facebook')}</p>
+                    <p>{t('footer.twitter')}</p>
+                    <p>{t('footer.instagram')}</p>
                 </div>
             </div>
         </footer>

src/components/NavigationBar.tsx

@@ -4,13 +4,16 @@ import Container from 'react-bootstrap/Container';
 import Image from 'react-bootstrap/Image';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
+import { useTranslation } from 'react-i18next';
 
 import { searchNasaLibrary } from '../api/nasaImageAndVideoLibrary.api.ts';
 import type { NasaImageAndVideoLibraryType } from '../types/NasaImageAndVideoLibraryType.ts';
 import style from './NavigationBar.module.css';
 import SearchResults from './search/SearchResults.tsx';
 
 function NavigationBar() {
+    const { t } = useTranslation();
+
     const [query, setQuery] = useState('');
     const [results, setResults] = useState<NasaImageAndVideoLibraryType | null>(null);
     const [showResults, setShowResults] = useState(false);
@@ -57,13 +60,13 @@ function NavigationBar() {
                 <Navbar.Collapse id="basic-navbar-nav">
                     <Nav className={`ms-auto ${style.navStyle}`}>
                         <Nav.Link href="/epicdata" className={style.navLinkStyle}>
-                            EpicData
+                            {t('navigation.epicData')}
                         </Nav.Link>
                         <Nav.Link href="/imageoftheday" className={style.navLinkStyle}>
-                            Image of the Day
+                            {t('navigation.imageOfTheDay')}
                         </Nav.Link>
                         <Nav.Link href="/blogpost" className={style.navLinkStyle}>
-                            Blogpost
+                            {t('navigation.blogPost')}
                         </Nav.Link>
                     </Nav>
                 </Navbar.Collapse>

src/components/epicdata/EpicDataCard.tsx

@@ -1,4 +1,5 @@
 import { Button, Card, Spinner } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
 
 import { useNasaEpicDataByDate } from '../../query/nasaEpicData.query.ts';
 import type { NasaEpicDataType } from '../../types/NasaEpicDataTypes.ts';
@@ -10,20 +11,24 @@ interface epicDataCardProps {
 }
 
 function EpicDataCard(props: epicDataCardProps) {
+    const { t } = useTranslation();
+
     const { date, isLoading } = props;
     const { data: dataOnDate = [] as NasaEpicDataType[] } = useNasaEpicDataByDate(date);
 
     return (
         <Card className={style.card}>
             <Card.Body className={style.epicDataCardBody}>
                 {isLoading ? <Spinner animation="border" /> : null}
-                <Card.Title>Images taken: {date}</Card.Title>
+                <Card.Title>
+                    {t('epicDataPost.card.imageDate')} {date}
+                </Card.Title>
                 <Card.Subtitle className="mb-2 text-muted">{dataOnDate[0]?.caption}</Card.Subtitle>
                 <Card.Text>
-                    {dataOnDate.length} items for date {date}
+                    {dataOnDate.length} {t('epicDataPost.card.itemsCount')} {date}
                 </Card.Text>
                 <Button variant="dark" href={`/epicdata/${date}`}>
-                    See more
+                    {t('epicDataPost.card.seeMore')}
                 </Button>
             </Card.Body>
         </Card>

src/components/imageoftheday/ImageOfTheDay.tsx

@@ -1,5 +1,6 @@
 import 'react-medium-image-zoom/dist/styles.css';
 
+import { useTranslation } from 'react-i18next';
 import Zoom from 'react-medium-image-zoom';
 
 import type { NasaApodDataType } from '../../types/NasaApodDataType.ts';
@@ -11,6 +12,8 @@ interface ImageOfTheDayProps {
 }
 
 function ImageOfTheDay(props: ImageOfTheDayProps) {
+    const { t } = useTranslation();
+
     const data = props.data;
     const today = new Date();
     const todayString = getUTCDateString(today);
@@ -20,8 +23,8 @@ function ImageOfTheDay(props: ImageOfTheDayProps) {
             <div className={style.leftDiv}>
                 {data?.date === todayString ? (
                     <>
-                        <p className={'section-tagline'}>TODAY</p>
-                        <h1>Image of the Day</h1>
+                        <p className={'section-tagline'}>{t('imageOfTheDay.today')}</p>
+                        <h1>{t('imageOfTheDay.title')}</h1>
                     </>
                 ) : (
                     <h2 className={'section-tagline'}>{data?.date}</h2>
@@ -44,7 +47,7 @@ function ImageOfTheDay(props: ImageOfTheDayProps) {
                         allowFullScreen
                     />
                 ) : (
-                    <p>Media type not supported.</p>
+                    <p>{t('imageOfTheDay.errorImage')}</p>
                 )}
             </div>
         </div>

src/components/imageoftheday/ImageOfTheDayContainer.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from 'react-i18next';
+
 import { useNasaApodData } from '../../query/nasaApodData.query';
 import ImageOfTheDay from './ImageOfTheDay.tsx';
 
@@ -6,11 +8,13 @@ interface ImageOfTheDayContainerProps {
 }
 
 function ImageOfTheDayContainer(props: ImageOfTheDayContainerProps) {
+    const { t } = useTranslation();
+
     const { date } = props;
     const { data, isLoading, isError } = useNasaApodData(date);
 
-    if (isLoading) return <p style={{ marginLeft: '10rem' }}>Loading...</p>;
-    if (isError) return <p style={{ marginLeft: '10rem' }}>Failed to load image of the day.</p>;
+    if (isLoading) return <p style={{ marginLeft: '10rem' }}>{t('imageOfTheDay.container.loading')}</p>;
+    if (isError) return <p style={{ marginLeft: '10rem' }}>{t('imageOfTheDay.container.failed')}</p>;
     if (!data) return null;
 
     return <ImageOfTheDay data={data} />;

src/components/imageoftheday/ImageOfTheDayHistory.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from 'react';
 import { Button } from 'react-bootstrap';
 import Form from 'react-bootstrap/Form';
 import DatePicker from 'react-datepicker';
+import { useTranslation } from 'react-i18next';
 
 import { toUTCDateOnly } from '../../utils/dateUtils.ts';
 import style from './ImageOfTheDayHistory.module.css';
@@ -13,6 +14,8 @@ interface Props {
 }
 
 function ImageOfTheDayHistory(props: Props) {
+    const { t } = useTranslation();
+
     const { setSearchedDate } = props;
     const todayUtc = useMemo(() => toUTCDateOnly(new Date()), []);
     const [date, setDate] = useState<Date>(todayUtc);
@@ -22,7 +25,7 @@ function ImageOfTheDayHistory(props: Props) {
         <>
             <Form.Group controlId="datePicker" className={style.formGroup}>
                 <Form.Label>
-                    <h3>Search for images from the past</h3>
+                    <h3>{t('imageOfTheDay.history.title')}</h3>
                 </Form.Label>
                 <div className={style.datePickerContainer}>
                     <DatePicker
@@ -40,7 +43,7 @@ function ImageOfTheDayHistory(props: Props) {
                         variant="dark"
                         onClick={() => setSearchedDate(date)}
                     >
-                        Search for image
+                        {t('imageOfTheDay.history.search')}
                     </Button>
                 </div>
             </Form.Group>