Add initial project configuration files and PasswordForDownload component for secure file access

Currently supports the following languages:
- English
- Hindi
- Marathi
- French

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "Backend"]
+	path = Backend
+	url = https://git.kska.io/notkshitij/SkycrateBackend.git

.idea/Skycrate.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/Skycrate.iml" filepath="$PROJECT_DIR$/.idea/Skycrate.iml" />
+    </modules>
+  </component>
+</project>

.idea/workspace.xml

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="84d52a67-ccf5-4630-9c18-40f188300c16" name="Changes" comment="" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="ProjectColorInfo"><![CDATA[{
+  "customColor": "",
+  "associatedIndex": 6
+}]]></component>
+  <component name="ProjectId" id="30mRMsttilCy5M4kqMOoyd9XSWz" />
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "kotlin-language-version-configured": "true"
+  }
+}]]></component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="84d52a67-ccf5-4630-9c18-40f188300c16" name="Changes" comment="" />
+      <created>1754230731355</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1754230731355</updated>
+    </task>
+    <servers />
+  </component>
+</project>

0-INFO.md

@@ -0,0 +1,29 @@
+# Info
+
+---
+
+## Work distribution
+
+- Design: Kapil
+- Frontend: Ombase, Shriniwas, Dinesh, Lalit, Shivani, Pracheta, Vaibhavi
+- Backend: Vedang, Sonali, Lalit
+- DBMS: Lalit
+- HDFS: Sonali, Prajakta, Poonam
+- Deployment: Kshitij, Sahil
+
+---
+
+## Description
+
+In this mini project, we'll be creating something similar to Google Drive. There shall be 3 pages, landing, login/registration and main page where all the files uploaded by the user will be shown. Kapil is supposed to design the UI and send it over by Sunday. Based on this design, people in the frontend department shall work on the pages.
+
+Landing page is basically a home page containing small description of the project, features etc. Login/registration page will ask for username/password. Lalit is expected to implement it using MySQL/MongoDB, i.e. he is responsible for user authentication. Once the user is authenticated, they shall be redirected to the main page where they can view their files, and upload/delete them.
+
+Vedang is responsible to developing the backend code in Java for encrypting the uploaded files and decrypting the downloaded files. These files will be stored in Hadoop File System (HDFS) which shall be handled by Sonali, Prajakta and Poonam.
+
+We are planning to make this a good enough project so that we can maybe open source it and make it a part of our resume. Therefore it is important that y'all work sahi se and finish your stuff by the deadlines. We are expected to finish the entire project ✨ before IN-SEM exam ✨
+
+While you are working on the project, note down the things you are doing so that we can provide it to the people doing the documentation.
+
+---
+

Frontend/.env

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:8081

Frontend/.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+package-lock.json
 
 # Editor directories and files
 .vscode/*
@@ -22,3 +23,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+#########
+
+.vite/

Frontend/Dockerfile

@@ -0,0 +1,28 @@
+## FRONTEND ##
+
+# Base image
+FROM node:22
+
+# Metadata
+LABEL maintainer="kshitijka"
+LABEL version=1.0
+LABEL description="Skycrate is a web based file management system that uses Hadoop as filesystem."
+
+# Update & upgrade & rm
+RUN apt-get update && apt-get upgrade -y && rm -rf /var/lib/apt/lists/* && npm install -g http-server
+
+# Create non-root user
+RUN useradd -s /bin/bash skycrateFront
+
+# Create work dir
+RUN mkdir /app
+RUN chown -R skycrateFront:skycrateFront /app
+COPY ./dist/ /app
+WORKDIR /app
+
+# Switch user
+USER skycrateFront
+
+EXPOSE 8080
+
+CMD ["http-server", "/app"]

Frontend/index.html

@@ -8,7 +8,7 @@
   <link href="/src/styles.css" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet" />
 
-  <title>Drive-thru</title>
+  <title>Skycrate</title>
 
 </head>
 

Frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "drive-thru",
+  "name": "Skycrate",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -10,26 +10,28 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.0.9",
+    "@reduxjs/toolkit": "^2.8.2",
+    "@tailwindcss/vite": "^4.1.11",
+    "i18next": "^25.2.1",
     "lucide-react": "^0.476.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "prop-types": "^15.8.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-hot-toast": "^2.5.2",
+    "react-i18next": "^15.5.3",
     "react-icons": "^5.5.0",
-    "react-router-dom": "^7.2.0"
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.6.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "@vitejs/plugin-react": "^4.3.4",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.21.0",
-    "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
+    "@types/react": "^19.1.8",
+    "@vitejs/plugin-react": "^4.6.0",
+    "eslint": "^9.29.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^15.15.0",
-    "postcss": "^8.5.3",
-    "tailwindcss": "^4.0.9",
-    "vite": "^6.2.0"
+    "vite": "^6.3.5"
   }
 }

Frontend/src/App.jsx

@@ -1,5 +1,6 @@
 import "./App.css";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import LanguageSwitcher from './components/LanguageSwitcher'; // Language switcher dropdown menu
 import Login from "./pages/Authentication/Login";
 import SignUp from "./pages/Authentication/SignUp";
 import DrivethruLandingPage from "./pages/UserPages/DrivethruLandingPage";
@@ -9,6 +10,7 @@ import NotFoundPage from "./pages/UserPages/NotFoundPage";
 function App() {
   return (
     <Router>
+      <LanguageSwitcher />
       <Routes>
         <Route path="/" element={<DrivethruLandingPage />} />
         <Route path="/login" element={<Login />} />

Frontend/src/components/FileList.jsx

@@ -0,0 +1,237 @@
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { useDispatch, useSelector } from "react-redux";
+import { setCurrentPath } from "../store/pathSlice";
+import PasswordForDownload from "./PasswordForDownload";
+import {
+  FileText,
+  FileVideo,
+  FileImage,
+  FileAudio,
+  FileArchive,
+  FileSpreadsheet,
+  FileType2,
+  FileCode2,
+  Presentation,
+  Folder,
+  Download,
+  Trash2,
+  ArrowLeft,
+} from "lucide-react";
+
+const API_URL = import.meta.env.VITE_API_URL;
+
+const FileList = ({ initialPath }) => {
+  const username = localStorage.getItem("username") || "";
+  const userRoot = `/${username}`;
+
+  const [currentPath, setCurrentPathState] = useState(
+    () => initialPath || userRoot
+  );
+  const [files, setFiles] = useState([]);
+  const [showDownloadModal, setShowDownloadModal] = useState(false);
+  const [downloadFilename, setDownloadFilename] = useState("");
+  const dispatch = useDispatch();
+  const isUploading = useSelector((state) => state.upload.isUploading);
+
+  const getType = (entry) =>
+    entry.trim().startsWith("📁") ? "Folder" : "File";
+  const getName = (entry) => entry.trim().replace(/^📁\s*|^📄\s*/, "");
+  const isFile = (entry) => getType(entry) === "File";
+
+  const getIcon = (name, type) => {
+    if (type === "Folder")
+      return <Folder className="text-yellow-500 w-5 h-5 mr-2" />;
+    const ext = name.split(".").pop().toLowerCase();
+    switch (ext) {
+      case "txt":
+        return <FileText className="text-gray-700 w-5 h-5 mr-2" />;
+      case "mp4":
+      case "mkv":
+        return <FileVideo className="text-purple-500 w-5 h-5 mr-2" />;
+      case "jpg":
+      case "jpeg":
+      case "png":
+      case "gif":
+        return <FileImage className="text-pink-500 w-5 h-5 mr-2" />;
+      case "mp3":
+      case "wav":
+        return <FileAudio className="text-indigo-500 w-5 h-5 mr-2" />;
+      case "zip":
+      case "rar":
+      case "tar":
+      case "gz":
+        return <FileArchive className="text-red-500 w-5 h-5 mr-2" />;
+      case "csv":
+      case "xls":
+      case "xlsx":
+        return <FileSpreadsheet className="text-green-500 w-5 h-5 mr-2" />;
+      case "ppt":
+      case "pptx":
+        return <Presentation className="text-orange-500 w-5 h-5 mr-2" />;
+      case "js":
+      case "html":
+      case "css":
+      case "java":
+      case "py":
+      case "cpp":
+        return <FileCode2 className="text-blue-500 w-5 h-5 mr-2" />;
+      default:
+        return <FileType2 className="text-gray-500 w-5 h-5 mr-2" />;
+    }
+  };
+
+  const fetchFiles = async () => {
+    try {
+      const res = await fetch(
+        `${API_URL}/api/hdfs/listFiles?hdfsPath=${encodeURIComponent(
+          currentPath
+        )}`
+      );
+      const data = await res.json();
+      const filtered = data.filter(
+        (entry) => entry.match(/^ */)[0].length === 0
+      );
+      setFiles(filtered);
+    } catch (err) {
+      console.error("Failed to fetch files:", err);
+      setFiles([]);
+    }
+  };
+
+  const deleteFileOrFolder = async (name, type, e) => {
+    e.stopPropagation();
+    try {
+      const hdfsPath = `${currentPath}/${name}`;
+      const endpoint =
+        type === "File"
+          ? `${API_URL}/api/hdfs/deleteFile?hdfsPath=${encodeURIComponent(
+              hdfsPath
+            )}`
+          : `${API_URL}/api/hdfs/deleteFolder?hdfsPath=${encodeURIComponent(
+              hdfsPath
+            )}`;
+      const resp = await fetch(endpoint, { method: "DELETE" });
+      if (!resp.ok) console.error("Deletion failed:", await resp.text());
+      fetchFiles();
+    } catch (err) {
+      console.error("Failed to delete:", err);
+    }
+  };
+
+  useEffect(() => {
+    dispatch(setCurrentPath(currentPath));
+    fetchFiles();
+  }, [currentPath, dispatch, isUploading]);
+
+  const handleOpenFolder = (folderName) => {
+    setCurrentPathState((prev) => `${prev}/${folderName}`);
+  };
+
+  const goBack = () => {
+    if (currentPath === userRoot) return;
+    const parts = currentPath.split("/").filter(Boolean);
+    parts.pop();
+    setCurrentPathState(parts.length === 0 ? userRoot : `/${parts.join("/")}`);
+  };
+
+  // open modal instead of direct download
+  const openDownloadModal = (name, e) => {
+    e.stopPropagation();
+    setDownloadFilename(name);
+    setShowDownloadModal(true);
+  };
+
+  return (
+    <>
+      <div className="relative overflow-x-auto rounded-2xl shadow-lg border border-blue-200">
+        <div className="flex items-center justify-between px-6 py-4 bg-blue-100 text-black font-semibold text-sm">
+          <span className="truncate max-w-[80%]">Path: {currentPath}</span>
+          {currentPath !== userRoot && (
+            <button
+              onClick={goBack}
+              className="flex items-center gap-1 text-blue-600 hover:underline text-sm"
+            >
+              <ArrowLeft className="w-4 h-4" />
+              Go Back
+            </button>
+          )}
+        </div>
+
+        <table className="w-full text-sm text-left text-black">
+          <thead className="text-xs uppercase bg-blue-50 text-blue-800 border-b border-blue-200">
+            <tr>
+              <th className="px-6 py-3">Name</th>
+              <th className="px-6 py-3">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {files.length === 0 ? (
+              <tr>
+                <td colSpan="2" className="px-6 py-4 text-gray-500 text-center">
+                  No files found.
+                </td>
+              </tr>
+            ) : (
+              files.map((entry, idx) => {
+                const name = getName(entry);
+                const type = getType(entry);
+                // const hdfsPath = `${currentPath}/${name}`;
+                return (
+                  <tr
+                    key={idx}
+                    onClick={
+                      type === "Folder"
+                        ? () => handleOpenFolder(name)
+                        : undefined
+                    }
+                    className={`even:bg-blue-50 odd:bg-white border-b border-blue-100 transition hover:bg-blue-100 ${
+                      type === "Folder" ? "cursor-pointer" : ""
+                    }`}
+                  >
+                    <td className="px-6 py-4 font-medium flex items-center">
+                      {getIcon(name, type)}
+                      {name}
+                    </td>
+                    <td className="px-6 py-4 space-x-3">
+                      {isFile(entry) && (
+                        <button
+                          onClick={(e) => openDownloadModal(name, e)}
+                          className="text-blue-600 hover:underline inline-flex items-center"
+                        >
+                          <Download className="w-4 h-4 mr-1" />
+                          Download
+                        </button>
+                      )}
+                      <button
+                        onClick={(e) => deleteFileOrFolder(name, type, e)}
+                        className="text-red-600 hover:underline inline-flex items-center"
+                      >
+                        <Trash2 className="w-4 h-4 mr-1" />
+                        Delete
+                      </button>
+                    </td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {showDownloadModal && (
+        <PasswordForDownload
+          filename={downloadFilename}
+          onDownload={fetchFiles}
+          onClose={() => setShowDownloadModal(false)}
+        />
+      )}
+    </>
+  );
+};
+
+FileList.propTypes = {
+  initialPath: PropTypes.string,
+};
+
+export default FileList;

Frontend/src/components/FileUploadModal.jsx

@@ -0,0 +1,194 @@
+import { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import PropTypes from "prop-types";
+import { setIsUploading } from "../store/UploadStatusSlice";
+
+const FileUploadModal = ({ show, onClose, onUploadSuccess }) => {
+  const currentPath = useSelector((state) => state.path.currentPath);
+  const dispatch = useDispatch();
+  const [file, setFile] = useState(null);
+  const [uploading, setUploading] = useState(false);
+  const [uploadMessage, setUploadMessage] = useState("");
+  const [newFolderName, setNewFolderName] = useState("");
+  const [creatingFolder, setCreatingFolder] = useState(false);
+  const [folderMessage, setFolderMessage] = useState("");
+  const username = localStorage.getItem("username");
+  const API_URL = import.meta.env.VITE_API_URL;
+
+  useEffect(() => {
+    const handleEsc = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleEsc);
+
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [onClose]);
+
+  const isFolderNameValid = (name) => {
+    return /^[a-zA-Z0-9-_ ]+$/.test(name); // disallow special chars like / \ * ? etc.
+  };
+
+  const uploadFileToHDFS = async () => {
+    if (!file) {
+      setUploadMessage("⚠️ Please select a file before uploading.");
+      return;
+    }
+    const formData = new FormData();
+
+    formData.append("file", file);
+    formData.append("hdfsPath", currentPath);
+    formData.append("uploadedFileName", file.name);
+    formData.append("username", username);
+
+    try {
+      setUploading(true);
+      setUploadMessage("⏳ Uploading file...");
+      const response = await fetch(`${API_URL}/api/files/upload`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+        body: formData,
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        setUploadMessage(`❌ Upload failed: ${errorText}`);
+      } else {
+        setUploadMessage("✅ File uploaded successfully!");
+        dispatch(setIsUploading(true)); // Dispatch the action to set isUploading to true
+        onUploadSuccess(); // Call the onUploadSuccess prop to notify the parent
+        setTimeout(() => {
+          setUploadMessage("");
+          onClose();
+        }, 1000);
+      }
+    } catch (err) {
+      console.error(err);
+      setUploadMessage("❌ An error occurred during upload.");
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const createFolder = async () => {
+    if (!newFolderName.trim()) {
+      setFolderMessage("⚠️ Please enter a folder name.");
+      return;
+    }
+    if (!isFolderNameValid(newFolderName.trim())) {
+      setFolderMessage("❌ Folder name contains invalid characters.");
+      return;
+    }
+
+    try {
+      setCreatingFolder(true);
+      setFolderMessage("⏳ Creating folder...");
+      const folderPath =
+        currentPath === "/" ? "" : currentPath.replace(/\/$/, "");
+      const newFolderPath = `${folderPath}/${newFolderName}`;
+      console.log(newFolderPath);
+      const response = await fetch(
+        `${API_URL}/api/hdfs/createFolder?hdfsPath=${newFolderPath}`,
+        { method: "POST" }
+      );
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        setFolderMessage(`❌ Folder creation failed: ${errorText}`);
+      } else {
+        setFolderMessage("✅ Folder created successfully!");
+        dispatch(setIsUploading(true)); // Dispatch the action to set isUploading to true
+        onUploadSuccess(currentPath); // Call the onUploadSuccess prop after folder creation too
+        setNewFolderName("");
+        setTimeout(() => {
+          setFolderMessage("");
+          onClose();
+        }, 1000);
+      }
+    } catch (err) {
+      console.error(err);
+      setFolderMessage("❌ An error occurred during folder creation.");
+    } finally {
+      setCreatingFolder(false);
+    }
+  };
+
+  if (!show) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black opacity-40" onClick={onClose} />
+      <div className="relative bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4">
+        <div className="flex items-center justify-between px-6 py-4 border-b">
+          <h2 className="text-xl font-semibold text-gray-800">Manage HDFS</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-600 hover:text-gray-900"
+          >
+            ✕
+          </button>
+        </div>
+        <div className="p-6 space-y-8">
+          {/* File Upload Section */}
+          <div className="bg-gray-50 p-4 rounded-lg shadow-inner">
+            <h3 className="text-lg font-medium text-gray-700 mb-3">
+              Upload File
+            </h3>
+            <input
+              type="file"
+              onChange={(e) => setFile(e.target.files[0])}
+              className="w-full mb-3 text-sm text-gray-600 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
+            />
+            {file && (
+              <p className="text-sm text-gray-700 mb-2">
+                Selected file: <strong>{file.name}</strong>
+              </p>
+            )}
+            {uploadMessage && (
+              <p className="text-sm text-gray-600 mb-3">{uploadMessage}</p>
+            )}
+            <button
+              onClick={uploadFileToHDFS}
+              disabled={uploading}
+              className="w-full py-2 rounded-lg bg-blue-600 text-white font-medium hover:bg-blue-700 disabled:opacity-50"
+            >
+              {uploading ? "⏳ Uploading..." : "Upload File"}
+            </button>
+          </div>
+
+          {/* Create Folder Section */}
+          <div className="bg-gray-50 p-4 rounded-lg shadow-inner">
+            <h3 className="text-lg font-medium text-gray-700 mb-3">
+              Create Folder
+            </h3>
+            <input
+              type="text"
+              placeholder="Folder name"
+              value={newFolderName}
+              onChange={(e) => setNewFolderName(e.target.value)}
+              className="w-full mb-3 px-3 py-2 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-200"
+            />
+            {folderMessage && (
+              <p className="text-sm text-gray-600 mb-3">{folderMessage}</p>
+            )}
+            <button
+              onClick={createFolder}
+              disabled={creatingFolder}
+              className="w-full py-2 rounded-lg bg-green-600 text-white font-medium hover:bg-green-700 disabled:opacity-50"
+            >
+              {creatingFolder ? "⏳ Creating..." : "Create Folder"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+FileUploadModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onUploadSuccess: PropTypes.func.isRequired,
+};
+
+export default FileUploadModal;

Frontend/src/components/Footer.jsx

@@ -8,15 +8,17 @@ import {
   Phone,
   MapPin,
 } from "lucide-react";
+import { useTranslation } from "react-i18next"; // for multilinguality
 
 const Footer = () => {
+  const { t } = useTranslation(); // for multilinguality
   const [email, setEmail] = useState("");
 
   //Currently storing user email in localstorage
   const handleSubscribe = () => {
     if (email.trim() !== "") {
       localStorage.setItem("subscribedEmail", email);
-      alert("You have successfully subscribed!");
+      alert(t("subscribe_success")); 
       setEmail("");
     }
   };
@@ -42,22 +44,38 @@ const Footer = () => {
                   />
                 </svg>
               </div>
-              <h3 className="text-2xl font-bold text-white">Drive-thru</h3>
+              <h3 className="text-2xl font-bold text-white">{t("footer_brand")}</h3>
             </div>
             <p className="text-white/90">
-              Your secure cloud storage solution for all your digital needs.
+              {t("footer_tagline")}
             </p>
             <div className="flex space-x-4">
-              <a href="https://facebook.com" target="_blank" rel="noopener noreferrer">
+              <a
+                href="https://facebook.com"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <Facebook className="w-5 h-5 text-white cursor-pointer hover:text-cyan-200 transition-all duration-200 transform hover:scale-110" />
               </a>
-              <a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
+              <a
+                href="https://twitter.com"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <Twitter className="w-5 h-5 text-white cursor-pointer hover:text-cyan-200 transition-all duration-200 transform hover:scale-110" />
               </a>
-              <a href="https://instagram.com" target="_blank" rel="noopener noreferrer">
+              <a
+                href="https://instagram.com"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <Instagram className="w-5 h-5 text-white cursor-pointer hover:text-cyan-200 transition-all duration-200 transform hover:scale-110" />
               </a>
-              <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">
+              <a
+                href="https://linkedin.com"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <Linkedin className="w-5 h-5 text-white cursor-pointer hover:text-cyan-200 transition-all duration-200 transform hover:scale-110" />
               </a>
             </div>
@@ -65,14 +83,14 @@ const Footer = () => {
 
           {/* Quick Links */}
           <div>
-            <h4 className="font-semibold text-white mb-4">Quick Links</h4>
+            <h4 className="font-semibold text-white mb-4">{t("footer_quick_links")}</h4>
             <ul className="space-y-2">
               <li>
                 <a
                   href="#about"
                   className="text-white/90 hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
                 >
-                  About Us
+                  {t("footer_about_us")}
                 </a>
               </li>
               <li>
@@ -80,7 +98,7 @@ const Footer = () => {
                   href="#features"
                   className="text-white/90 hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
                 >
-                  Features
+                  {t("footer_features")}
                 </a>
               </li>
               <li>
@@ -88,7 +106,7 @@ const Footer = () => {
                   href="#howItWorks"
                   className="text-white/90 hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
                 >
-                  How It Works
+                  {t("footer_how_it_works")}
                 </a>
               </li>
             </ul>
@@ -96,42 +114,42 @@ const Footer = () => {
 
           {/* Contact Info */}
           <div>
-            <h4 className="font-semibold text-white mb-4">Contact</h4>
+            <h4 className="font-semibold text-white mb-4">{t("footer_contact")}</h4>
             <ul className="space-y-2">
               <li className="flex items-center text-white/90 hover:text-white group transition-colors duration-200">
                 <Mail className="w-4 h-4 mr-2 group-hover:text-cyan-200" />
-                support@drivethru.com
+                {t("footer_email")}
               </li>
               <li className="flex items-center text-white/90 hover:text-white group transition-colors duration-200">
                 <Phone className="w-4 h-4 mr-2 group-hover:text-cyan-200" />
-                +91 3628206234
+                {t("footer_phone")}
               </li>
               <li className="flex items-center text-white/90 hover:text-white group transition-colors duration-200">
                 <MapPin className="w-4 h-4 mr-2 group-hover:text-cyan-200" />
-                123 Cloud Street, Digital City
+                {t("footer_address")}
               </li>
             </ul>
           </div>
 
           {/* Newsletter */}
           <div>
-            <h4 className="font-semibold text-white mb-4">Stay Updated</h4>
+            <h4 className="font-semibold text-white mb-4">{t("footer_newsletter_title")}</h4>
             <p className="text-white/90 mb-4">
-              Get exclusive tips, updates on new features, and special offers directly in your inbox.
+              {t("footer_newsletter_desc")}
             </p>
             <div className="space-y-4">
               <input
                 type="email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                placeholder="Enter your email"
+                placeholder={t("footer_newsletter_placeholder")}
                 className="w-full px-4 py-2 rounded-md bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:bg-white/20 transition-all duration-200 outline-none focus:ring-2 focus:ring-white/30"
               />
               <button
                 onClick={handleSubscribe}
                 className="w-full px-4 py-2 rounded-md bg-white text-blue-600 font-medium hover:bg-opacity-90 transition-all duration-200 transform hover:scale-105"
               >
-                Subscribe to Newsletter
+                {t("footer_newsletter_button")}
               </button>
             </div>
           </div>
@@ -141,16 +159,25 @@ const Footer = () => {
 
         {/* Bottom Section */}
         <div className="flex flex-col md:flex-row justify-between items-center text-white/90 text-sm">
-          <p>© {new Date().getFullYear()} Drive-Thru. All rights reserved.</p>
+          <p>© {new Date().getFullYear()} {t("footer_brand")}. {t("footer_rights")}</p>
           <div className="flex gap-4 mt-4 md:mt-0">
-            <a href="#" className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block">
-              Privacy Policy
+            <a
+              href="#"
+              className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
+            >
+              {t("footer_privacy_policy")}
             </a>
-            <a href="#" className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block">
-              Terms of Service
+            <a
+              href="#"
+              className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
+            >
+              {t("footer_terms_of_service")}
             </a>
-            <a href="#" className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block">
-              Cookie Policy
+            <a
+              href="#"
+              className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
+            >
+              {t("footer_cookie_policy")}
             </a>
           </div>
         </div>

Frontend/src/components/LanguageSwitcher.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const languages = [
+  { code: 'en', label: 'English' },
+  { code: 'hi', label: 'Hindi (हिंदी)' },
+  { code: 'mr', label: 'Marathi (मराठी)' },
+  { code: 'fr', label: 'French (Français)' },
+  // Add more languages as needed
+];
+
+function LanguageSwitcher() {
+  const { i18n } = useTranslation();
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: '1rem',
+        right: '1rem',
+        zIndex: 1000,
+        background: 'rgba(255,255,255,0.95)',
+        borderRadius: '4px',
+        padding: '0.25em 0.5em',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
+      }}
+    >
+      <select
+        value={i18n.language}
+        onChange={e => i18n.changeLanguage(e.target.value)}
+        style={{
+          border: '1px solid #ccc',
+          borderRadius: '4px',
+          padding: '0.25em 2em 0.25em 0.5em', // More right padding for arrow
+          minWidth: '100px',
+          appearance: 'auto', // Use browser default arrow
+          background: '#fff',
+        }}
+
+        aria-label="Select language"
+      >
+        {languages.map(lang => (
+          <option key={lang.code} value={lang.code}>
+            {lang.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+export default LanguageSwitcher;
+

Frontend/src/components/PasswordForDownload.jsx

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import PropTypes from "prop-types";
+
+const API_URL = import.meta.env.VITE_API_URL;
+
+const PasswordForDownload = ({ filename, onDownload, onClose }) => {
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleDownload = async () => {
+    if (!password) {
+      setError("Password is required");
+      return;
+    }
+    setLoading(true);
+    setError("");
+    try {
+      const response = await fetch(`${API_URL}/api/files/download`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+        body: JSON.stringify({ filename, password }),
+      });
+
+      if (!response.ok) {
+        const msg = await response.text();
+        throw new Error(msg);
+      }
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      window.URL.revokeObjectURL(url);
+
+      onDownload();
+      onClose();
+    } catch (err) {
+      console.error(err);
+      setError(`Download failed: ${err.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+      <div className="bg-white p-6 rounded-lg w-80">
+        <h3 className="text-lg font-semibold mb-4">Enter Password</h3>
+        <input
+          type="password"
+          className="w-full border border-gray-300 rounded px-3 py-2 mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        {error && <p className="text-red-500 text-sm mb-2">{error}</p>}
+        <div className="flex justify-end space-x-2">
+          <button
+            onClick={onClose}
+            disabled={loading}
+            className="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleDownload}
+            disabled={loading}
+            className={`px-4 py-2 text-white rounded ${
+              loading ? "bg-gray-400" : "bg-blue-600 hover:bg-blue-700"
+            }`}
+          >
+            {loading ? "Downloading..." : "Download"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+PasswordForDownload.propTypes = {
+  filename: PropTypes.string.isRequired,
+  onDownload: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default PasswordForDownload;

Frontend/src/components/Sidebar.jsx

@@ -1,136 +1,122 @@
-import { Link } from "react-router-dom";
+import { useState, useEffect, useRef } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { toast } from "react-hot-toast";
+import { useTranslation } from "react-i18next"; // for multilinguality
 
 const Sidebar = () => {
+  const { t } = useTranslation(); // for multilinguality
+  const navigate = useNavigate(); // Hook for programmatic navigation
+  const [userMenuOpen, setUserMenuOpen] = useState(false);
+  const menuRef = useRef();
+
+  // Show loading toast and perform logout
+  const handleLogout = () => {
+    const loadingToast = toast.loading(t("sidebar_logging_out"));
+
+    // Simulate a delay (for example, network request)
+    setTimeout(() => {
+      // Remove the token from localStorage
+      localStorage.removeItem("token");
+      localStorage.removeItem("username");
+      localStorage.removeItem("expiresIn");
+
+      // Redirect user to the homepage
+      navigate("/");
+
+      // Show success toast after logout
+      toast.update(loadingToast, {
+        render: t("sidebar_logged_out"),
+        type: "success",
+        isLoading: false,
+        autoClose: 2000,
+      });
+    }, 1500);
+  };
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        setUserMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
   return (
     <>
-      <nav className="fixed top-0 z-50 h-[60px]  w-full bg-white border-b border-gray-200  ">
-        <div className="p-[15px] h-full lg:px-5 lg:pl-3 ">
-          <div className="flex h-full items-center justify-between">
-            <div className="flex items-center justify-start rtl:justify-end">
-              <button
-                data-drawer-target="logo-sidebar"
-                data-drawer-toggle="logo-sidebar"
-                aria-controls="logo-sidebar"
-                type="button"
-                className="inline-flex items-center p-2 text-lg text-white rounded-lg sm:hidden hover:bg-[#37A0EA] focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-[#37A0EA] dark:focus:ring-gray-600"
-              >
-                <span className="sr-only">Open sidebar</span>
-                <svg
-                  className="w-6 h-6"
-                  aria-hidden="true"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clipRule="evenodd"
-                    fillRule="evenodd"
-                    d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"
-                  ></path>
-                </svg>
-              </button>
-              <Link to="/" className="flex ms-2 md:me-24">
-                <img
-                  src="./image.png"
-                  className="h-8 me-3"
-                  alt="Drive-thru Logo"
+      <nav className="fixed top-0 z-50 h-[60px] w-full bg-white border-b border-gray-200">
+        <div className="p-[15px] h-full lg:px-5 lg:pl-3 flex items-center justify-between">
+          {/* Left Section - Logo & Toggle */}
+          <div className="flex items-center">
+            <button
+              data-drawer-target="logo-sidebar"
+              data-drawer-toggle="logo-sidebar"
+              aria-controls="logo-sidebar"
+              type="button"
+              className="inline-flex items-center p-2 text-lg text-white rounded-lg sm:hidden hover:bg-[#37A0EA] focus:outline-none"
+            >
+              <span className="sr-only">{t("sidebar_open_sidebar")}</span>
+              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  clipRule="evenodd"
+                  fillRule="evenodd"
+                  d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"
                 />
-                <span className="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white">
-                  Drive-thru
-                </span>
-              </Link>
-            </div>
+              </svg>
+            </button>
+            <Link to="/" className="flex ms-2 md:me-24">
+              <img src="./image.png" className="h-8 me-3" alt="Skycrate Logo" />
+              <span className="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap">
+                {t("sidebar_brand")}
+              </span>
+            </Link>
+          </div>
 
-            <div className="flex items-center">
-              {" "}
-              <div className="flex items-center justify-end mr-40 ">
-                <input
-                  type="text"
-                  placeholder="Search..."
-                  className="w-full  border  border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          {/* Right Section - Search & User Menu */}
+          <div className="flex items-center">
+            {/* Search Bar */}
+            <div className="flex items-center justify-end mr-40"></div>
+
+            {/* User Profile & Dropdown */}
+            <div className="relative ms-3">
+              <button
+                type="button"
+                onClick={() => setUserMenuOpen((o) => !o)}
+                className="flex text-lg bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300"
+              >
+                <span className="sr-only">{t("sidebar_open_user_menu")}</span>
+                <img
+                  className="w-8 h-8 rounded-full"
+                  src="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+                  alt={t("sidebar_user_photo")}
                 />
-                <button
-                  type="button"
-                  className="ml-2 px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                >
-                  Search
-                </button>
-              </div>
-              <div className="flex items-center ms-3">
-                <div>
-                  <button
-                    type="button"
-                    className="flex text-lg bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
-                    aria-expanded="false"
-                    data-dropdown-toggle="dropdown-user"
-                  >
-                    <span className="sr-only">Open user menu</span>
-                    <img
-                      className="w-8 h-8 rounded-full"
-                      src="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
-                      alt="user photo"
-                    />
-                  </button>
-                </div>
+              </button>
+
+              {userMenuOpen && (
                 <div
-                  className="z-50 hidden my-4 text-base list-none bg-[#1877F2] divide-y divide-gray-100 rounded-sm shadow-sm dark:bg-gray-700 dark:divide-gray-600"
-                  id="dropdown-user"
+                  ref={menuRef}
+                  className="z-50 absolute right-0 mt-2 w-48 bg-[#1877F2] divide-y divide-gray-100 rounded-sm shadow-sm"
                 >
                   <div className="px-4 py-3" role="none">
-                    <p
-                      className="text-lg text-white dark:text-white"
-                      role="none"
-                    >
-                      Neil Sims
-                    </p>
-                    <p
-                      className="text-lg font-medium text-white truncate dark:text-gray-300"
-                      role="none"
-                    >
-                      Drive-thru@Drive-thru.com
+                    <p className="text-lg text-white" role="none">
+                      {localStorage.getItem("username")}
                     </p>
                   </div>
                   <ul className="py-1" role="none">
                     <li>
-                      <Link
-                        to="#"
-                        className="block px-4 py-2 text-lg text-white hover:bg-[#37A0EA] dark:text-gray-300 dark:hover:bg-[#37A0EA] dark:hover:text-white"
+                      <button
+                        onClick={handleLogout}
+                        className="w-full text-left px-4 py-2 text-lg text-white hover:bg-[#37A0EA]"
                         role="menuitem"
                       >
-                        Dashboard
-                      </Link>
-                    </li>
-
-                    <li>
-                      <Link
-                        to="#"
-                        className="block px-4 py-2 text-lg text-white hover:bg-[#37A0EA] dark:text-gray-300 dark:hover:bg-[##37A0EA] dark:hover:text-white"
-                        role="menuitem"
-                      >
-                        Settings
-                      </Link>
-                    </li>
-                    <li>
-                      <Link
-                        to="#"
-                        className="block px-4 py-2 text-lg text-white hover:bg-[#37A0EA] dark:text-gray-300 dark:hover:bg-[#37A0EA] dark:hover:text-white"
-                        role="menuitem"
-                      >
-                        Earnings
-                      </Link>
-                    </li>
-                    <li>
-                      <Link
-                        to="#"
-                        className="block px-4 py-2 text-lg text-white hover:bg-[#37A0EA] dark:text-gray-300 dark:hover:bg-[#37A0EA] dark:hover:text-white"
-                        role="menuitem"
-                      >
-                        Sign out
-                      </Link>
+                        {t("sidebar_logout")}
+                      </button>
                     </li>
                   </ul>
                 </div>
-              </div>
+              )}
             </div>
           </div>
         </div>
@@ -138,167 +124,28 @@ const Sidebar = () => {
 
       <aside
         id="logo-sidebar"
-        className="fixed top-0 left-0 z-40 w-64 h-screen pt-[60px] transition-transform -translate-x-full bg-[##1877F2] border-r border-gray-200 sm:translate-x-0 dark:bg-[#1877F2] dark:border-gray-700"
+        className="fixed top-0 left-0 z-40 w-64 h-screen pt-[60px] transition-transform -translate-x-full bg-[#1877F2] border-r border-gray-200 sm:translate-x-0"
         aria-label="Sidebar"
       >
-        <div className="h-full px-3 pb-4 overflow-y-auto bg-[#1877F2] dark:bg-[#1877F2] custom-scrollbar">
+        <div className="h-full px-3 pb-4 overflow-y-auto bg-[#1877F2] custom-scrollbar">
           <ul className="space-y-2 font-medium">
             <li>
               <Link
                 to="#"
-                className="flex items-center p-2 mt-5 pt-4 pb-4 text-white rounded-lg dark:text-white hover:bg-[#37A0EA] dark:hover:bg-[#37A0EA] group"
+                className="flex items-center p-2 mt-5 pt-4 pb-4 text-white rounded-lg hover:bg-[#37A0EA] group"
               >
                 <svg
-                  className="w-5 h-5 text-white transition duration-75 dark:text-gray-400 group-hover:text-white dark:group-hover:text-white"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
+                  className="w-5 h-5"
                   viewBox="0 0 24 24"
+                  fill="currentColor"
                 >
                   <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z" />
                 </svg>
-
-                <span className="ms-3">Starred</span>
-              </Link>
-            </li>
-            <li>
-              <Link
-                to="#"
-                className="flex items-center p-2 pt-4 pb-4 text-white rounded-lg dark:text-white hover:bg-[#37A0EA] dark:hover:bg-[#37A0EA] group"
-              >
-                <svg
-                  className="w-5 h-5"
-                  viewBox="0 0 20 17"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M2.31763 16.0834C1.93846 16.0834 1.60669 15.9372 1.32231 15.6449C1.03794 15.3527 0.895752 15.0248 0.895752 14.6615V2.33856C0.895752 1.97519 1.03794 1.64737 1.32231 1.3551C1.60669 1.06282 1.93846 0.916687 2.31763 0.916687H8.97674L10.3986 2.33856H18.4322C18.7956 2.33856 19.1234 2.4847 19.4157 2.77697C19.7079 3.06925 19.8541 3.39707 19.8541 3.76044V14.6615C19.8541 15.0248 19.7079 15.3527 19.4157 15.6449C19.1234 15.9372 18.7956 16.0834 18.4322 16.0834H2.31763ZM9.4033 13.0026H16.9866V12.5524C16.9866 11.8888 16.6509 11.3477 15.9795 10.9291C15.308 10.5104 14.3799 10.3011 13.195 10.3011C12.0101 10.3011 11.0819 10.5104 10.4105 10.9291C9.73903 11.3477 9.4033 11.8888 9.4033 12.5524V13.0026ZM13.195 8.87919C13.6689 8.87919 14.0757 8.70935 14.4154 8.36968C14.7551 8.03001 14.9249 7.6232 14.9249 7.14924C14.9249 6.67528 14.7551 6.26847 14.4154 5.9288C14.0757 5.58913 13.6689 5.41929 13.195 5.41929C12.721 5.41929 12.3142 5.58913 11.9745 5.9288C11.6349 6.26847 11.465 6.67528 11.465 7.14924C11.465 7.6232 11.6349 8.03001 11.9745 8.36968C12.3142 8.70935 12.721 8.87919 13.195 8.87919Z"
-                    fill="white"
-                  />
-                </svg>
-
-                <span className="flex-1 ms-3 whitespace-nowrap">
-                  Shared with me
-                </span>
-              </Link>
-            </li>
-            <li>
-              <Link
-                to="#"
-                className="flex items-center p-2 pt-4 pb-4 text-white rounded-lg dark:text-white hover:bg-[#37A0EA] dark:hover:bg-[#37A0EA] group"
-              >
-                <svg
-                  className="w-5 h-5"
-                  fill="currentColor"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                >
-                  <path d="M5 3h2v18H5V3zm6 6h2v12h-2V9zm6-4h2v16h-2V5z" />
-                </svg>
-
-                <span className="flex-1 ms-3 whitespace-nowrap">
-                  Statistics
-                </span>
-              </Link>
-            </li>
-            <li>
-              <Link
-                to="#"
-                className="flex items-center p-2 pt-4 pb-4 text-white rounded-lg dark:text-white hover:bg-[#37A0EA] dark:hover:bg-[#37A0EA] group"
-              >
-                <svg
-                  className="w-5 h-5 text-white dark:text-white"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M3 6a2 2 0 0 1 2-2h5.532a2 2 0 0 1 1.536.72l1.9 2.28H3V6Zm0 3v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9H3Z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-
-                <span className="flex-1 ms-3 whitespace-nowrap">My files</span>
-              </Link>
-            </li>
-            <li>
-              <Link
-                to="#"
-                className="flex items-center p-2 pt-4 pb-4 text-white rounded-lg dark:text-white hover:bg-[#37A0EA] dark:hover:bg-[#37A0EA] group"
-              >
-                <svg
-                  className="w-5 h-5"
-                  viewBox="0 0 20 19"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M8.19471 18.9791L7.72075 15.9932C7.42058 15.8826 7.10461 15.7325 6.77284 15.5429C6.44106 15.3534 6.14879 15.1559 5.89601 14.9505L3.09966 16.2302L0.895752 12.3437L3.45513 10.4716C3.42353 10.3294 3.40378 10.1675 3.39588 9.98579C3.38798 9.8041 3.38403 9.64217 3.38403 9.49998C3.38403 9.35779 3.38798 9.19586 3.39588 9.01417C3.40378 8.83249 3.42353 8.67055 3.45513 8.52837L0.895752 6.65623L3.09966 2.76977L5.89601 4.04946C6.14879 3.84408 6.44106 3.64659 6.77284 3.45701C7.10461 3.26743 7.42058 3.12524 7.72075 3.03045L8.19471 0.020813H12.5551L13.0291 3.00675C13.3293 3.11734 13.6492 3.26348 13.9889 3.44516C14.3285 3.62685 14.6168 3.82828 14.8538 4.04946L17.6502 2.76977L19.8541 6.65623L17.2947 8.48097C17.3263 8.63896 17.3461 8.80879 17.354 8.99048C17.3619 9.17216 17.3658 9.34199 17.3658 9.49998C17.3658 9.65797 17.3619 9.82385 17.354 9.99764C17.3461 10.1714 17.3263 10.3373 17.2947 10.4953L19.8541 12.3437L17.6502 16.2302L14.8538 14.9505C14.601 15.1559 14.3127 15.3573 13.9889 15.5548C13.665 15.7523 13.3451 15.8984 13.0291 15.9932L12.5551 18.9791H8.19471ZM10.3749 12.5807C11.228 12.5807 11.9548 12.2805 12.5551 11.6802C13.1555 11.0798 13.4556 10.3531 13.4556 9.49998C13.4556 8.64686 13.1555 7.92012 12.5551 7.31977C11.9548 6.71942 11.228 6.41925 10.3749 6.41925C9.52179 6.41925 8.79506 6.71942 8.19471 7.31977C7.59436 7.92012 7.29419 8.64686 7.29419 9.49998C7.29419 10.3531 7.59436 11.0798 8.19471 11.6802C8.79506 12.2805 9.52179 12.5807 10.3749 12.5807Z"
-                    fill="white"
-                  />
-                </svg>
-
-                <span className="flex-1 ms-3 whitespace-nowrap">Settings</span>
-              </Link>
-            </li>
-            <li>
-              <Link
-                to="#"
-                className="flex items-center p-2 pt-4 pb-4 text-white rounded-lg dark:text-white hover:bg-[#37A0EA] dark:hover:bg-[#37A0EA] group"
-              >
-                <svg
-                  className="w-5 h-5 text-white dark:text-white self-center"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M8.586 2.586A2 2 0 0 1 10 2h4a2 2 0 0 1 2 2v2h3a1 1 0 1 1 0 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a1 1 0 0 1 0-2h3V4a2 2 0 0 1 .586-1.414ZM10 6h4V4h-4v2Zm1 4a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Zm4 0a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-
-                <span className="flex-1 ms-3 whitespace-nowrap">Trash</span>
+                <span className="ms-3">{t("sidebar_starred")}</span>
               </Link>
             </li>
+            {/* ...additional sidebar items... */}
           </ul>
-          <div className="mt-6 p-4 rounded-lg  text-white">
-            {/* Cloud Icon + Title */}
-            <div className="flex items-center">
-              <svg
-                className="w-7 h-7 text-white dark:text-white"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                fill="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path d="M13.383 4.076a6.5 6.5 0 0 0-6.887 3.95A5 5 0 0 0 7 18h3v-4a2 2 0 0 1-1.414-3.414l2-2a2 2 0 0 1 2.828 0l2 2A2 2 0 0 1 14 14v4h4a4 4 0 0 0 .988-7.876 6.5 6.5 0 0 0-5.605-6.048Z" />
-                <path d="M12.707 9.293a1 1 0 0 0-1.414 0l-2 2a1 1 0 1 0 1.414 1.414l.293-.293V19a1 1 0 1 0 2 0v-6.586l.293.293a1 1 0 0 0 1.414-1.414l-2-2Z" />
-              </svg>
-
-              <span className="ml-2 font-semibold">My Storage</span>
-            </div>
-            {/* Usage Text & Progress Bar */}
-            <p className="mt-2 text-lg">Used: of 100GB</p>
-            <div className="w-full bg-white rounded-full h-2 mt-2">
-              <div
-                className="bg-blue-500 h-2 rounded-full"
-                style={{ width: "24%" }}
-              ></div>
-            </div>
-          </div>
         </div>
       </aside>
     </>

Frontend/src/i18n.js

@@ -0,0 +1,30 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import en from './locales/en.json';
+import hi from './locales/hi.json';
+import mr from './locales/mr.json';
+import fr from './locales/fr.json';
+// import more languages as needed
+
+const resources = {
+  en: { translation: en },
+  hi: { translation: hi },
+  mr: { translation: mr },
+  fr: { translation: fr },
+  // add other languages here
+};
+
+i18n
+  .use(initReactI18next)
+  .init({
+    resources,
+    lng: 'en', // default language
+    fallbackLng: 'en',
+    //interpolation: {
+    //  escapeValue: false, // not needed for React
+    //},
+  });
+
+export default i18n;
+

Frontend/src/locales/en.json

@@ -0,0 +1,94 @@
+{
+  "dashboard": "Dashboard",
+  "failed_to_load_files": "Failed to load files. Please try again later.",
+
+  "skycrate": "Skycrate",
+  "hero_subtitle": "Store, Access & Share Your Files — Anytime, Anywhere!",
+  "hero_desc": "A simple, secure, and fast cloud storage solution for all your files. Upload, organize, and access with ease.",
+  "get_started": "Get Started",
+  "login": "Login",
+  "key_features": "Key Features",
+  "feature_easy_upload_title": "Easy Upload & Access",
+  "feature_easy_upload_desc": "Drag & drop, instant access.",
+  "feature_secure_title": "Secure & Private",
+  "feature_secure_desc": "End-to-end encryption.",
+  "feature_sharing_title": "Seamless Sharing",
+  "feature_sharing_desc": "Share files with one click.",
+  "feature_access_anywhere_title": "Access Anywhere",
+  "feature_access_anywhere_desc": "Works on all devices.",
+  "how_it_works": "How It Works",
+  "how_create_account_title": "Create an account",
+  "how_create_account_desc": "Sign up in seconds.",
+  "how_upload_files_title": "Upload files",
+  "how_upload_files_desc": "Drag & drop or select from your device.",
+  "how_manage_files_title": "Manage files",
+  "how_manage_files_desc": "Rename, move, or delete easily.",
+  "how_access_anytime_title": "Access anytime",
+  "how_access_anytime_desc": "Open files from any device.",
+
+  "not_found_title": "Page Not Found",
+  "not_found_description": "Sorry, we couldn't find the page you were looking for. It may have been moved or deleted.",
+  "go_home": "Go Home",
+
+  "login_title": "Log in",
+  "email_placeholder": "Enter your email",
+  "password_placeholder": "Enter your password",
+  "forgot_password": "Forgot password?",
+  "logging_in": "Logging In...",
+  "login": "Login",
+  "dont_have_account": "Don’t have an account?",
+  "sign_up": "Sign up",
+  "login_successful": "Login successful!",
+  "login_failed": "Login failed.",
+  "an_error_occurred": "An error occurred. Please try again.",
+  "logging_in_toast": "Logging in...",
+
+  "signup_title": "Sign Up",
+  "first_name": "First Name",
+  "last_name": "Last Name",
+  "email_placeholder": "Enter your email",
+  "password_placeholder": "Enter your password",
+  "confirm_password_placeholder": "Confirm your password",
+  "signing_up": "Signing Up...",
+  "sign_up": "Sign Up",
+  "already_have_account": "Already have an account?",
+  "login": "Login",
+  "passwords_do_not_match": "Passwords do not match.",
+  "registering": "Registering...",
+  "signup_failed": "Signup failed.",
+  "folder_creation_failed": "Failed to create user folder.",
+  "signup_success": "Successfully registered and folder created!",
+  "an_error_occurred": "An error occurred. Please try again.",
+
+  "footer_brand": "Skycrate",
+  "footer_tagline": "Your secure cloud storage solution for all your digital needs.",
+  "footer_quick_links": "Quick Links",
+  "footer_about_us": "About Us",
+  "footer_features": "Features",
+  "footer_how_it_works": "How It Works",
+  "footer_contact": "Contact",
+  "footer_email": "support@drivethru.com",
+  "footer_phone": "+91 3628206234",
+  "footer_address": "123 Cloud Street, Digital City",
+  "footer_newsletter_title": "Stay Updated",
+  "footer_newsletter_desc": "Get exclusive tips, updates on new features, and special offers directly in your inbox.",
+  "footer_newsletter_placeholder": "Enter your email",
+  "footer_newsletter_button": "Subscribe to Newsletter",
+  "subscribe_success": "You have successfully subscribed!",
+  "footer_rights": "All rights reserved.",
+  "footer_privacy_policy": "Privacy Policy",
+  "footer_terms_of_service": "Terms of Service",
+  "footer_cookie_policy": "Cookie Policy",
+
+  "sidebar_logging_out": "Logging out...",
+  "sidebar_logged_out": "Logged out successfully!",
+  "sidebar_open_sidebar": "Open sidebar",
+  "sidebar_brand": "Skycrate",
+  "sidebar_open_user_menu": "Open user menu",
+  "sidebar_user_photo": "User Photo",
+  "sidebar_logout": "Log out",
+  "sidebar_starred": "Starred"
+
+
+}
+

Frontend/src/locales/fr.json

@@ -0,0 +1,92 @@
+{
+  "dashboard": "Tableau de bord",
+  "failed_to_load_files": "Échec du chargement des fichiers. Veuillez réessayer plus tard.",
+
+  "skycrate": "Skycrate",
+  "hero_subtitle": "Stockez, accédez et partagez vos fichiers — à tout moment, partout !",
+  "hero_desc": "Une solution de stockage cloud simple, sécurisée et rapide pour tous vos fichiers. Téléchargez, organisez et accédez facilement.",
+  "get_started": "Commencer",
+  "login": "Connexion",
+  "key_features": "Fonctionnalités clés",
+  "feature_easy_upload_title": "Téléversement et accès faciles",
+  "feature_easy_upload_desc": "Glissez-déposez, accès instantané.",
+  "feature_secure_title": "Sécurisé et privé",
+  "feature_secure_desc": "Chiffrement de bout en bout.",
+  "feature_sharing_title": "Partage sans effort",
+  "feature_sharing_desc": "Partagez des fichiers en un clic.",
+  "feature_access_anywhere_title": "Accès partout",
+  "feature_access_anywhere_desc": "Fonctionne sur tous les appareils.",
+  "how_it_works": "Comment ça marche",
+  "how_create_account_title": "Créer un compte",
+  "how_create_account_desc": "Inscrivez-vous en quelques secondes.",
+  "how_upload_files_title": "Téléverser des fichiers",
+  "how_upload_files_desc": "Glissez-déposez ou sélectionnez depuis votre appareil.",
+  "how_manage_files_title": "Gérer les fichiers",
+  "how_manage_files_desc": "Renommez, déplacez ou supprimez facilement.",
+  "how_access_anytime_title": "Accès à tout moment",
+  "how_access_anytime_desc": "Ouvrez des fichiers depuis n'importe quel appareil.",
+
+  "not_found_title": "Page non trouvée",
+  "not_found_description": "Désolé, nous n'avons pas pu trouver la page que vous cherchiez. Elle a peut-être été déplacée ou supprimée.",
+  "go_home": "Accueil",
+
+  "login_title": "Connexion",
+  "email_placeholder": "Entrez votre e-mail",
+  "password_placeholder": "Entrez votre mot de passe",
+  "forgot_password": "Mot de passe oublié ?",
+  "logging_in": "Connexion...",
+  "login": "Connexion",
+  "dont_have_account": "Vous n'avez pas de compte ?",
+  "sign_up": "S'inscrire",
+  "login_successful": "Connexion réussie !",
+  "login_failed": "Échec de la connexion.",
+  "an_error_occurred": "Une erreur s'est produite. Veuillez réessayer.",
+  "logging_in_toast": "Connexion en cours...",
+
+  "sign_up": "S'inscrire",
+  "first_name": "Prénom",
+  "last_name": "Nom de famille",
+  "email_placeholder": "Entrez votre e-mail",
+  "password_placeholder": "Entrez votre mot de passe",
+  "confirm_password_placeholder": "Confirmez votre mot de passe",
+  "already_have_account": "Vous avez déjà un compte ?",
+  "login": "Connexion",
+  "signing_up": "Inscription...",
+  "passwords_do_not_match": "Les mots de passe ne correspondent pas.",
+  "registering": "Enregistrement...",
+  "signup_failed": "Échec de l'inscription.",
+  "failed_create_folder": "Échec de la création du dossier utilisateur.",
+  "signup_success": "Inscription réussie et dossier créé !",
+  "an_error_occurred": "Une erreur s'est produite. Veuillez réessayer.",
+
+  "footer_brand": "Skycrate",
+  "footer_tagline": "Votre solution de stockage cloud sécurisée pour tous vos besoins numériques.",
+  "footer_quick_links": "Liens rapides",
+  "footer_about_us": "À propos",
+  "footer_features": "Fonctionnalités",
+  "footer_how_it_works": "Comment ça marche",
+  "footer_contact": "Contact",
+  "footer_email": "support@drivethru.com",
+  "footer_phone": "+91 3628206234",
+  "footer_address": "123 Rue du Cloud, Ville Digitale",
+  "footer_newsletter_title": "Restez informé",
+  "footer_newsletter_desc": "Recevez des conseils exclusifs, des mises à jour sur les nouvelles fonctionnalités et des offres spéciales directement dans votre boîte de réception.",
+  "footer_newsletter_placeholder": "Entrez votre e-mail",
+  "footer_newsletter_button": "S'abonner à la newsletter",
+  "subscribe_success": "Vous vous êtes abonné avec succès !",
+  "footer_rights": "Tous droits réservés.",
+  "footer_privacy_policy": "Politique de confidentialité",
+  "footer_terms_of_service": "Conditions d'utilisation",
+  "footer_cookie_policy": "Politique relative aux cookies",
+
+  "sidebar_logging_out": "Déconnexion...",
+  "sidebar_logged_out": "Déconnecté avec succès !",
+  "sidebar_open_sidebar": "Ouvrir la barre latérale",
+  "sidebar_brand": "Skycrate",
+  "sidebar_open_user_menu": "Ouvrir le menu utilisateur",
+  "sidebar_user_photo": "Photo de l'utilisateur",
+  "sidebar_logout": "Se déconnecter",
+  "sidebar_starred": "Favoris"
+
+
+}

Frontend/src/locales/hi.json

@@ -0,0 +1,92 @@
+{
+  "dashboard": "डैशबोर्ड",
+  "failed_to_load_files": "फ़ाइलें लोड करने में विफल। कृपया बाद में पुनः प्रयास करें।",
+
+  "skycrate": "Skycrate",
+  "hero_subtitle": "अपनी फ़ाइलें संग्रहित करें, एक्सेस करें और साझा करें — कभी भी, कहीं भी!",
+  "hero_desc": "आपकी सभी फ़ाइलों के लिए एक सरल, सुरक्षित और तेज़ क्लाउड स्टोरेज समाधान। अपलोड करें, व्यवस्थित करें और आसानी से एक्सेस करें।",
+  "get_started": "शुरू करें",
+  "login": "लॉगिन",
+  "key_features": "मुख्य विशेषताएं",
+  "feature_easy_upload_title": "सरल अपलोड और एक्सेस",
+  "feature_easy_upload_desc": "ड्रैग और ड्रॉप करें, त्वरित एक्सेस पाएं।",
+  "feature_secure_title": "सुरक्षित और निजी",
+  "feature_secure_desc": "एंड-टू-एंड एन्क्रिप्शन।",
+  "feature_sharing_title": "बिना रुकावट साझाकरण",
+  "feature_sharing_desc": "एक क्लिक में फ़ाइलें साझा करें।",
+  "feature_access_anywhere_title": "कहीं से भी एक्सेस करें",
+  "feature_access_anywhere_desc": "सभी डिवाइस पर कार्य करता है।",
+
+  "how_it_works": "यह कैसे कार्य करता है",
+  "how_create_account_title": "खाता बनाएं",
+  "how_create_account_desc": "कुछ ही सेकंड में साइन अप करें।",
+  "how_upload_files_title": "फ़ाइलें अपलोड करें",
+  "how_upload_files_desc": "ड्रैग और ड्रॉप करें या डिवाइस से चुनें।",
+  "how_manage_files_title": "फ़ाइलें प्रबंधित करें",
+  "how_manage_files_desc": "आसानी से नाम बदलें, स्थानांतरित करें या हटाएं।",
+  "how_access_anytime_title": "कभी भी एक्सेस करें",
+  "how_access_anytime_desc": "किसी भी डिवाइस से फ़ाइलें खोलें।",
+
+  "not_found_title": "पृष्ठ नहीं मिला",
+  "not_found_description": "क्षमा करें, हम वह पृष्ठ नहीं ढूंढ सके जिसे आप खोज रहे थे। यह हटाया गया हो सकता है या स्थानांतरित कर दिया गया हो।",
+  "go_home": "मुख्य पृष्ठ पर जाएं",
+
+  "login_title": "लॉग इन करें",
+  "email_placeholder": "अपना ईमेल दर्ज करें",
+  "password_placeholder": "अपना पासवर्ड दर्ज करें",
+  "forgot_password": "पासवर्ड भूल गए?",
+  "logging_in": "लॉग इन किया जा रहा है...",
+  "login": "लॉगिन",
+  "dont_have_account": "कोई खाता नहीं है?",
+  "sign_up": "साइन अप करें",
+  "login_successful": "सफलतापूर्वक लॉगिन हुआ!",
+  "login_failed": "लॉगिन विफल रहा।",
+  "an_error_occurred": "एक त्रुटि हुई। कृपया पुनः प्रयास करें।",
+  "logging_in_toast": "लॉग इन किया जा रहा है...",
+
+  "signup_title": "साइन अप करें",
+  "first_name": "पहला नाम",
+  "last_name": "अंतिम नाम",
+  "email_placeholder": "अपना ईमेल दर्ज करें",
+  "password_placeholder": "अपना पासवर्ड दर्ज करें",
+  "confirm_password_placeholder": "अपना पासवर्ड पुष्टि करें",
+  "signing_up": "साइन अप किया जा रहा है...",
+  "sign_up": "साइन अप करें",
+  "already_have_account": "पहले से ही खाता है?",
+  "login": "लॉगिन",
+  "passwords_do_not_match": "पासवर्ड मेल नहीं खा रहे हैं।",
+  "registering": "पंजीकरण किया जा रहा है...",
+  "signup_failed": "साइन अप विफल रहा।",
+  "folder_creation_failed": "यूज़र फ़ोल्डर बनाने में विफल।",
+  "signup_success": "सफलतापूर्वक पंजीकरण हुआ और फ़ोल्डर बनाया गया!",
+  "an_error_occurred": "एक त्रुटि हुई। कृपया पुनः प्रयास करें।",
+
+  "footer_brand": "Skycrate",
+  "footer_tagline": "आपकी सभी डिजिटल आवश्यकताओं के लिए सुरक्षित क्लाउड स्टोरेज समाधान।",
+  "footer_quick_links": "त्वरित लिंक",
+  "footer_about_us": "हमारे बारे में",
+  "footer_features": "विशेषताएं",
+  "footer_how_it_works": "यह कैसे कार्य करता है",
+  "footer_contact": "संपर्क करें",
+  "footer_email": "support@drivethru.com",
+  "footer_phone": "+91 3628206234",
+  "footer_address": "123 क्लाउड स्ट्रीट, डिजिटल सिटी",
+  "footer_newsletter_title": "अपडेट प्राप्त करें",
+  "footer_newsletter_desc": "विशेष सुझाव, नई सुविधाओं के अपडेट और ऑफ़र सीधे अपने इनबॉक्स में पाएं।",
+  "footer_newsletter_placeholder": "अपना ईमेल दर्ज करें",
+  "footer_newsletter_button": "न्यूज़लेटर की सदस्यता लें",
+  "subscribe_success": "आपने सफलतापूर्वक सदस्यता ली है!",
+  "footer_rights": "सभी अधिकार सुरक्षित।",
+  "footer_privacy_policy": "गोपनीयता नीति",
+  "footer_terms_of_service": "सेवा की शर्तें",
+  "footer_cookie_policy": "कुकी नीति",
+
+  "sidebar_logging_out": "लॉग आउट किया जा रहा है...",
+  "sidebar_logged_out": "सफलतापूर्वक लॉग आउट हुआ!",
+  "sidebar_open_sidebar": "साइडबार खोलें",
+  "sidebar_brand": "Skycrate",
+  "sidebar_open_user_menu": "उपयोगकर्ता मेनू खोलें",
+  "sidebar_user_photo": "उपयोगकर्ता फोटो",
+  "sidebar_logout": "लॉग आउट",
+  "sidebar_starred": "चिह्नित"
+}

Frontend/src/locales/mr.json

@@ -0,0 +1,92 @@
+{
+  "dashboard": "डॅशबोर्ड",
+  "failed_to_load_files": "फायली लोड करण्यात अयशस्वी. कृपया नंतर पुन्हा प्रयत्न करा.",
+
+  "skycrate": "Skycrate",
+  "hero_subtitle": "तुमच्या फायली साठवा, प्रवेश मिळवा आणि शेअर करा — कधीही, कुठेही!",
+  "hero_desc": "सर्व फायलींसाठी एक साधे, सुरक्षित आणि जलद क्लाऊड स्टोरेज सोल्यूशन. अपलोड करा, व्यवस्थापित करा आणि सहजपणे वापरा.",
+  "get_started": "सुरुवात करा",
+  "login": "लॉगिन",
+  "key_features": "मुख्य वैशिष्ट्ये",
+  "feature_easy_upload_title": "सोपे अपलोड आणि प्रवेश",
+  "feature_easy_upload_desc": "ड्रॅग आणि ड्रॉप, त्वरित प्रवेश.",
+  "feature_secure_title": "सुरक्षित आणि खाजगी",
+  "feature_secure_desc": "संपूर्ण एन्क्रिप्शन.",
+  "feature_sharing_title": "सुलभ शेअरिंग",
+  "feature_sharing_desc": "एक क्लिकमध्ये फायली शेअर करा.",
+  "feature_access_anywhere_title": "कोठूनही प्रवेश",
+  "feature_access_anywhere_desc": "सर्व डिव्हाइसेसवर कार्यरत.",
+
+  "how_it_works": "हे कसे कार्य करते",
+  "how_create_account_title": "खाते तयार करा",
+  "how_create_account_desc": "काही सेकंदांत साइन अप करा.",
+  "how_upload_files_title": "फायली अपलोड करा",
+  "how_upload_files_desc": "ड्रॅग आणि ड्रॉप करा किंवा तुमच्या डिव्हाइसमधून निवडा.",
+  "how_manage_files_title": "फायली व्यवस्थापित करा",
+  "how_manage_files_desc": "नाव बदला, हलवा किंवा हटवा.",
+  "how_access_anytime_title": "कधीही प्रवेश करा",
+  "how_access_anytime_desc": "कोणत्याही डिव्हाइसवरून फायली उघडा.",
+
+  "not_found_title": "पृष्ठ सापडले नाही",
+  "not_found_description": "क्षमस्व, तुम्ही शोधत असलेले पृष्ठ आम्हाला सापडले नाही. कदाचित ते हलवले गेले असेल किंवा हटवले गेले असेल.",
+  "go_home": "मुख्य पृष्ठावर जा",
+
+  "login_title": "लॉग इन करा",
+  "email_placeholder": "तुमचा ईमेल टाका",
+  "password_placeholder": "तुमचा पासवर्ड टाका",
+  "forgot_password": "पासवर्ड विसरलात?",
+  "logging_in": "लॉग इन करत आहे...",
+  "login": "लॉग इन",
+  "dont_have_account": "अजून खाते नाही?",
+  "sign_up": "साइन अप",
+  "login_successful": "यशस्वीरित्या लॉग इन झाले!",
+  "login_failed": "लॉग इन अयशस्वी.",
+  "an_error_occurred": "त्रुटी आली. कृपया पुन्हा प्रयत्न करा.",
+  "logging_in_toast": "लॉग इन होत आहे...",
+
+  "signup_title": "साइन अप करा",
+  "first_name": "पहिले नाव",
+  "last_name": "आडनाव",
+  "email_placeholder": "तुमचा ईमेल टाका",
+  "password_placeholder": "तुमचा पासवर्ड टाका",
+  "confirm_password_placeholder": "तुमचा पासवर्ड पुन्हा टाका",
+  "signing_up": "साइन अप करत आहे...",
+  "sign_up": "साइन अप",
+  "already_have_account": "आधीच खाते आहे?",
+  "login": "लॉग इन",
+  "passwords_do_not_match": "पासवर्ड जुळत नाहीत.",
+  "registering": "नोंदणी करत आहे...",
+  "signup_failed": "साइन अप अयशस्वी.",
+  "folder_creation_failed": "वापरकर्त्याची फोल्डर तयार करण्यात अयशस्वी.",
+  "signup_success": "यशस्वीरित्या नोंदणी झाली आणि फोल्डर तयार झाला!",
+  "an_error_occurred": "त्रुटी आली. कृपया पुन्हा प्रयत्न करा.",
+
+  "footer_brand": "Skycrate",
+  "footer_tagline": "तुमच्या सर्व डिजिटल गरजांसाठी सुरक्षित क्लाऊड स्टोरेज सोल्यूशन.",
+  "footer_quick_links": "त्वरित दुवे",
+  "footer_about_us": "आमच्याबद्दल",
+  "footer_features": "वैशिष्ट्ये",
+  "footer_how_it_works": "हे कसे कार्य करते",
+  "footer_contact": "संपर्क",
+  "footer_email": "support@drivethru.com",
+  "footer_phone": "+९१ ३६२८२०६२३४",
+  "footer_address": "१२३ क्लाऊड स्ट्रीट, डिजिटल सिटी",
+  "footer_newsletter_title": "अपडेट मिळवा",
+  "footer_newsletter_desc": "विशेष टिप्स, नवीन वैशिष्ट्यांवरील अपडेट्स आणि खास ऑफर्स तुमच्या इनबॉक्समध्ये मिळवा.",
+  "footer_newsletter_placeholder": "तुमचा ईमेल टाका",
+  "footer_newsletter_button": "न्यूजलेटरची सदस्यता घ्या",
+  "subscribe_success": "तुमची सदस्यता यशस्वीरित्या घेतली गेली आहे!",
+  "footer_rights": "सर्व हक्क राखीव.",
+  "footer_privacy_policy": "गोपनीयता धोरण",
+  "footer_terms_of_service": "सेवेच्या अटी",
+  "footer_cookie_policy": "कुकी धोरण",
+
+  "sidebar_logging_out": "लॉग आउट करत आहे...",
+  "sidebar_logged_out": "यशस्वीरित्या लॉग आउट झाले!",
+  "sidebar_open_sidebar": "साइडबार उघडा",
+  "sidebar_brand": "Skycrate",
+  "sidebar_open_user_menu": "वापरकर्ता मेनू उघडा",
+  "sidebar_user_photo": "वापरकर्त्याचा फोटो",
+  "sidebar_logout": "लॉग आउट",
+  "sidebar_starred": "आवडते"
+}

Frontend/src/main.jsx

@@ -1,10 +1,18 @@
+import './i18n'; // for multilingual functionality
+
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.jsx";
+import { Provider } from "react-redux";
+import { store } from "./store/store";
 
-createRoot(document.getElementById("root")).render(
+const container = document.getElementById("root");
+const root = createRoot(container);
+root.render(
   <StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </StrictMode>
 );

Frontend/src/pages/Authentication/Login.jsx

@@ -1,91 +1,184 @@
-import React from "react";
-import { FcGoogle } from "react-icons/fc";
-import { FiEye, FiEyeOff } from "react-icons/fi";
-import { Link } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { FiEye, FiEyeOff, FiLoader } from "react-icons/fi";
+import { Link, useNavigate } from "react-router-dom";
+import toast, { Toaster } from "react-hot-toast"; // Import React Hot Toast
+import { useTranslation } from "react-i18next"; // for multilinguality
+
+const API_URL = import.meta.env.VITE_API_URL; // Using .env variable
 
 const Login = () => {
-  const [showPassword, setShowPassword] = React.useState(false);
+  const { t } = useTranslation(); // for multilinguality
+  const navigate = useNavigate(); // For navigation
 
-  const togglePassword = () => {
-    setShowPassword(!showPassword);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState({});
+
+  // Redirect if already logged in
+  useEffect(() => {
+    if (localStorage.getItem("token")) {
+      navigate("/dashboard");
+    }
+  }, [navigate]);
+
+  const togglePassword = () => setShowPassword((prev) => !prev);
+
+  const validate = () => {
+    const errs = {};
+    if (!email.trim()) errs.email = t("email_required");
+    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
+      errs.email = t("invalid_email");
+    if (!password) errs.password = t("password_required");
+    return errs;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const validation = validate();
+    if (Object.keys(validation).length) {
+      setErrors(validation);
+      return;
+    }
+
+    setLoading(true);
+    const toastId = toast.loading(t("logging_in_toast"));
+
+    try {
+      const response = await fetch(`${API_URL}/api/auth/login`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password }),
+      });
+      const data = await response.json();
+      toast.dismiss(toastId);
+
+      if (response.ok) {
+        localStorage.setItem("token", data.token);
+        localStorage.setItem("expiresIn", data.expiresIn);
+        // fetch username asynchronously
+        fetch(`${API_URL}/api/hdfs/getUsernameByEmail?email=${email}`)
+          .then((res) => res.text())
+          .then((username) => localStorage.setItem("username", username))
+          .catch((err) => console.error("Error fetching username:", err));
+
+        toast.success(t("login_successful"));
+        navigate("/dashboard");
+      } else {
+        toast.error(data.message || t("login_failed"));
+      }
+    } catch (error) {
+      toast.dismiss(toastId);
+      console.error(error);
+      toast.error(t("an_error_occurred"));
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
-    <div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
-      <div className="w-full max-w-md bg-white rounded-4xl shadow-lg p-8">
-        <h1 className="text-2xl font-bold mb-6 text-gray-900 text-center">
-          Log in
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+      <Toaster position="top-right" />
+      <div className="w-full max-w-sm bg-white rounded-2xl shadow-lg p-8">
+        <h1 className="text-2xl font-bold text-gray-800 mb-6 text-center">
+          {t("login_title")}
         </h1>
-        <button className="flex items-center justify-center w-full py-3 mb-4 border border-gray-300 rounded-lg hover:bg-gray-50">
-          <FcGoogle className="text-xl mr-2" />
-          <span className="text-gray-700 font-medium">
-            Continue with Google
-          </span>
-        </button>
-        <div className="flex items-center my-4">
-          <div className="flex-grow border-t border-gray-300" />
-          <span className="px-2 text-gray-500 text-sm">
-            Or login with email
-          </span>
-          <div className="flex-grow border-t border-gray-300" />
-        </div>
-        <div className="mb-4">
-          <div className="flex items-center">
+        <form onSubmit={handleSubmit} noValidate className="space-y-5">
+          {/* Email Field */}
+          <div>
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
+              {t("email_placeholder")}
+            </label>
             <input
               type="email"
               id="email"
-              placeholder="Enter your email"
-              className="w-full border border-gray-300 rounded-l-lg px-4 py-4 focus:outline-none focus:border-blue-500"
+              value={email}
+              onChange={(e) => {
+                setEmail(e.target.value);
+                setErrors((prev) => ({ ...prev, email: undefined }));
+              }}
+              className={`w-full border ${
+                errors.email ? "border-red-500" : "border-gray-300"
+              } rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500`}
+              placeholder={t("email_placeholder")}
+              required
             />
+            {errors.email && (
+              <p className="text-red-500 text-xs mt-1">{errors.email}</p>
+            )}
           </div>
-          <div className="mb-6">
-            <Link
-              to="#!"
-              className="text-sm text-blue-600 hover:underline inline-block text-center"
-            >
-              Login via OTP
-            </Link>
-          </div>
-        </div>
-        <div className="mb-1">
+
+          {/* Password Field */}
           <div className="relative">
+            <label
+              htmlFor="password"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
+              {t("password_placeholder")}
+            </label>
             <input
               type={showPassword ? "text" : "password"}
               id="password"
-              placeholder="Enter your password"
-              className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:border-blue-500 pr-10"
+              value={password}
+              onChange={(e) => {
+                setPassword(e.target.value);
+                setErrors((prev) => ({ ...prev, password: undefined }));
+              }}
+              className={`w-full border ${
+                errors.password ? "border-red-500" : "border-gray-300"
+              } rounded-lg px-4 py-2 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500`}
+              placeholder={t("password_placeholder")}
+              required
             />
             <button
               type="button"
               onClick={togglePassword}
-              className="absolute right-2 top-2 text-gray-500 hover:text-gray-700"
+              className="absolute right-3 top-8 text-xl text-gray-500 hover:text-gray-700"
             >
               {showPassword ? <FiEyeOff /> : <FiEye />}
             </button>
+            {errors.password && (
+              <p className="text-red-500 text-xs mt-1">{errors.password}</p>
+            )}
           </div>
-        </div>
-        <div className="mb-6 ">
-          <Link
-            to="#!"
-            className="text-sm text-blue-600 hover:underline inline-block"
-          >
-            Forgot password?
-          </Link>
-        </div>
-        <button className="w-full py-3 bg-gradient-to-r from-[#1877F2] to-[#0E458C] hover:from-[#0E458C] hover:to-[#1877F2] text-white font-semibold rounded-full shadow-md transition duration-300">
-          Login
-        </button>
-        <div className="text-center mt-6">
-          <p className="text-gray-700">
-            Don’t have an account?{" "}
-            <Link
-              to="/signup"
-              className="text-emerald-500 hover:underline font-medium"
-            >
-              Sign up
+
+          {/* Forgot & Submit */}
+          <div className="flex items-center justify-between">
+            <Link to="#!" className="text-sm text-blue-600 hover:underline">
+              {t("forgot_password")}
             </Link>
-          </p>
-        </div>
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className={`w-full flex justify-center items-center py-3 ${
+              loading
+                ? "bg-gray-400 cursor-not-allowed"
+                : "bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900"
+            } text-white font-semibold rounded-lg shadow-md transition duration-300`}
+          >
+            {loading ? (
+              <FiLoader className="animate-spin text-lg" />
+            ) : (
+              t("login")
+            )}
+          </button>
+        </form>
+
+        <p className="text-center mt-6 text-gray-600">
+          {t("dont_have_account")}{" "}
+          <Link
+            to="/signup"
+            className="text-green-600 hover:underline font-medium"
+          >
+            {t("sign_up")}
+          </Link>
+        </p>
       </div>
     </div>
   );

Frontend/src/pages/Authentication/SignUp.jsx

@@ -1,81 +1,248 @@
-import React, { useState } from "react";
-import { FcGoogle } from "react-icons/fc";
-import { FiEye, FiEyeOff } from "react-icons/fi";
-import { Link } from "react-router-dom";
+import { useState } from "react";
+import { FiEye, FiEyeOff, FiLoader } from "react-icons/fi";
+import { Link, useNavigate } from "react-router-dom";
+import toast, { Toaster } from "react-hot-toast";
+import { useTranslation } from "react-i18next"; // for multilinguality
+
+const API_URL = import.meta.env.VITE_API_URL;
 
 const SignUp = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const [formData, setFormData] = useState({
+    firstname: "",
+    lastname: "",
+    username: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+  });
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState({});
+
+  const validate = () => {
+    const errs = {};
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email))
+      errs.email = t("invalid_email");
+    if (formData.password.length < 8) errs.password = t("password_too_short");
+    if (formData.password !== formData.confirmPassword)
+      errs.confirmPassword = t("passwords_do_not_match");
+    if (formData.username.length < 3) errs.username = t("username_too_short");
+    return errs;
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+    setErrors((prev) => ({ ...prev, [name]: undefined }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const validation = validate();
+    if (Object.keys(validation).length) {
+      setErrors(validation);
+      return;
+    }
+
+    setLoading(true);
+    const toastId = toast.loading(t("registering"));
+
+    try {
+      const signupRes = await fetch(`${API_URL}/api/auth/register`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          firstname: formData.firstname,
+          lastname: formData.lastname,
+          email: formData.email,
+          password: formData.password,
+          username: formData.username,
+          fullname: `${formData.firstname} ${formData.lastname}`,
+        }),
+      });
+      const signupData = await signupRes.json();
+
+      if (!signupRes.ok) {
+        toast.error(signupData.message || t("signup_failed"), { id: toastId });
+        return;
+      }
+
+      const folderRes = await fetch(
+        `${API_URL}/api/hdfs/createFolder?hdfsPath=/${formData.username}`,
+        { method: "POST" }
+      );
+
+      if (!folderRes.ok) {
+        toast.error(t("failed_create_folder"), { id: toastId });
+      } else {
+        toast.success(t("signup_success"), { id: toastId });
+      }
+
+      setTimeout(() => navigate("/login"), 1500);
+    } catch (error) {
+      console.error(error);
+      toast.error(t("an_error_occurred"), { id: toastId });
+    } finally {
+      setLoading(false);
+    }
+  };
 
   return (
     <div className="min-h-screen bg-gray-100 flex items-center justify-center p-6">
+      <Toaster position="top-right" />
       <div className="w-full max-w-md bg-white rounded-2xl shadow-lg p-8">
-        <h1 className="text-2xl font-bold text-gray-900  mb-6">Sign Up</h1>
+        <h1 className="text-2xl font-bold text-gray-900 mb-6">
+          {t("sign_up")}
+        </h1>
+        <form className="space-y-4" onSubmit={handleSubmit} noValidate>
+          {/* Name Fields */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                {t("first_name")}
+              </label>
+              <input
+                type="text"
+                name="firstname"
+                value={formData.firstname}
+                onChange={handleChange}
+                className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                required
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                {t("last_name")}
+              </label>
+              <input
+                type="text"
+                name="lastname"
+                value={formData.lastname}
+                onChange={handleChange}
+                className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                required
+              />
+            </div>
+          </div>
 
-        {/* Form Fields */}
-        <div className="space-y-4">
-          <input
-            type="text"
-            placeholder="First Name"
-            className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
-          />
-          <input
-            type="text"
-            placeholder="Last Name"
-            className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
-          />
-          <input
-            type="email"
-            placeholder="Enter your email"
-            className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
-          />
+          {/* Username Field */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              {t("username")}
+            </label>
+            <input
+              type="text"
+              name="username"
+              placeholder={t("Enter your username")}
+              value={formData.username}
+              onChange={handleChange}
+              className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              required
+            />
+            {errors.username && (
+              <p className="text-red-500 text-xs mt-1">{errors.username}</p>
+            )}
+          </div>
+
+          {/* Email Field */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              {t("email_placeholder")}
+            </label>
+            <input
+              type="email"
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              required
+            />
+            {errors.email && (
+              <p className="text-red-500 text-xs mt-1">{errors.email}</p>
+            )}
+          </div>
 
           {/* Password Field */}
           <div className="relative">
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              {t("password_placeholder")}
+            </label>
             <input
               type={showPassword ? "text" : "password"}
-              placeholder="Enter your password"
-              className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10"
+              name="password"
+              value={formData.password}
+              onChange={handleChange}
+              className="w-full border border-gray-300 rounded-lg px-4 py-2 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              required
             />
             <button
               type="button"
-              onClick={() => setShowPassword(!showPassword)}
-              className="absolute right-3 top-3 text-gray-500 hover:text-gray-700"
+              onClick={() => setShowPassword((v) => !v)}
+              className="absolute right-3 top-9 text-xl text-gray-500 hover:text-gray-700"
             >
               {showPassword ? <FiEyeOff /> : <FiEye />}
             </button>
+            {errors.password && (
+              <p className="text-red-500 text-xs mt-1">{errors.password}</p>
+            )}
           </div>
 
           {/* Confirm Password Field */}
           <div className="relative">
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              {t("confirm_password_placeholder")}
+            </label>
             <input
               type={showConfirmPassword ? "text" : "password"}
-              placeholder="Confirm your password"
-              className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10"
+              name="confirmPassword"
+              value={formData.confirmPassword}
+              onChange={handleChange}
+              className="w-full border border-gray-300 rounded-lg px-4 py-2 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              required
             />
             <button
               type="button"
-              onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-              className="absolute right-3 top-3 text-gray-500 hover:text-gray-700"
+              onClick={() => setShowConfirmPassword((v) => !v)}
+              className="absolute right-3 top-9 text-xl text-gray-500 hover:text-gray-700"
             >
               {showConfirmPassword ? <FiEyeOff /> : <FiEye />}
             </button>
+            {errors.confirmPassword && (
+              <p className="text-red-500 text-xs mt-1">
+                {errors.confirmPassword}
+              </p>
+            )}
           </div>
-        </div>
 
-        {/* Sign Up Button */}
-        <button className="w-full mt-6 py-3 bg-gradient-to-r from-[#10B981] to-[#07533A] hover:from-[#0E458C] hover:to-[#1877F2] text-white font-semibold rounded-lg shadow-md transition duration-300">
-          Sign Up
-        </button>
+          {/* Sign Up Button */}
+          <button
+            type="submit"
+            disabled={loading}
+            className={`w-full mt-4 py-3 flex justify-center items-center ${
+              loading
+                ? "bg-gray-400 cursor-not-allowed"
+                : "bg-gradient-to-r from-[#10B981] to-[#07533A] hover:from-[#0E458C] hover:to-[#1877F2]"
+            } text-white font-semibold rounded-lg shadow-md transition duration-300`}
+          >
+            {loading ? (
+              <FiLoader className="animate-spin text-xl" />
+            ) : (
+              t("sign_up")
+            )}
+          </button>
+        </form>
 
-        {/* Redirect to Login */}
         <p className="text-center mt-4 text-gray-700">
-          Already have an account?{" "}
+          {t("already_have_account")}{" "}
           <Link
             to="/login"
             className="text-blue-500 hover:underline font-medium"
           >
-            Login
+            {t("login")}
           </Link>
         </p>
       </div>

Frontend/src/pages/UserPages/Dashboard.jsx

@@ -1,19 +1,88 @@
-import React from "react";
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next"; // for multilinguality
 import Sidebar from "../../components/Sidebar";
+import FileList from "../../components/FileList";
+import FileUploadModal from "../../components/FileUploadModal";
+import { FiPlus } from "react-icons/fi";
 
 const Dashboard = () => {
+  const { t } = useTranslation(); // for multilinguality
+  const [files, setFiles] = useState([]);
+  const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
+  const [error, setError] = useState("");
+  const navigate = useNavigate();
+  const API_URL = import.meta.env.VITE_API_URL;
+
+  const isUserLoggedIn = () => {
+    const token = localStorage.getItem("token");
+    const username = localStorage.getItem("username");
+    const expiresIn = localStorage.getItem("expiresIn");
+
+    if (!token || !username || !expiresIn) return false;
+
+    const expiryTime = new Date(expiresIn).getTime();
+    const now = new Date().getTime();
+
+    if (now > expiryTime) {
+      localStorage.clear();
+      return false;
+    }
+
+    return true;
+  };
+
+  const fetchFiles = async () => {
+    try {
+      const response = await fetch(`${API_URL}/api/hdfs/listFiles?hdfsPath=/`);
+      const data = await response.json();
+      setFiles(data);
+    } catch (error) {
+      console.error("Failed to fetch files:", error);
+      setError(t("failed_to_load_files"));
+    }
+  };
+
+  useEffect(() => {
+    if (!isUserLoggedIn()) {
+      navigate("/login");
+    } else {
+      fetchFiles();
+    }
+    // eslint-disable-next-line
+  }, [navigate]);
+
   return (
     <>
       <Sidebar />
       <div className="p-4 sm:ml-64">
         <div className="p-4 border-2 border-gray-200 border-dashed rounded-lg mt-14">
-          <h1 className="text-2xl font-bold mb-4">Dashboard</h1>
-          <p>
-            This is your custom dashboard body. Place your widgets, charts,
-            stats, or other components here.
-          </p>
+          <div className="w-full flex justify-between items-center">
+            <h1 className="text-2xl font-bold mb-4">{t("dashboard")}</h1>
+            <button
+              onClick={() => setIsUploadModalOpen(true)}
+              className="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 text-center"
+              type="button"
+            >
+              <FiPlus className="text-2xl" />
+            </button>
+          </div>
+          {error ? (
+            <p className="text-red-500">{error}</p>
+          ) : (
+            <FileList files={files} />
+          )}
         </div>
       </div>
+
+      <FileUploadModal
+        show={isUploadModalOpen}
+        onClose={() => setIsUploadModalOpen(false)}
+        onUploadSuccess={() => {
+          fetchFiles();
+          setIsUploadModalOpen(false);
+        }}
+      />
     </>
   );
 };

Frontend/src/pages/UserPages/DrivethruLandingPage.jsx

@@ -1,88 +1,176 @@
 import Footer from "../../components/Footer";
-import React from "react"
-import { useState, useEffect } from "react"
-
+import React, { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next"; // for multilinguality
 
 const DrivethruLandingPage = () => {
+  const { t } = useTranslation(); // for multilinguality
+
   const features = [
     {
-      title: "Easy Upload & Access",
-      description: "Drag & drop, instant access.",
+      title: t("feature_easy_upload_title"),
+      description: t("feature_easy_upload_desc"),
       icon: (
-        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
+         <svg
+          className="w-6 h-6"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
+          />
         </svg>
-      )
+      ),
     },
     {
-      title: "Secure & Private",
-      description: "End-to-end encryption.",
+      title: t("feature_secure_title"),
+      description: t("feature_secure_desc"),
       icon: (
-        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+        <svg
+          className="w-6 h-6"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+          />
         </svg>
-      )
+      ),
     },
     {
-      title: "Seamless Sharing",
-      description: "Share files with one click.",
+      title: t("feature_sharing_title"),
+      description: t("feature_sharing_desc"),
       icon: (
-        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
+        <svg
+          className="w-6 h-6"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
+          />
         </svg>
-      )
+      ),
     },
     {
-      title: "Access Anywhere",
-      description: "Works on all devices.",
+      title: t("feature_access_anywhere_title"),
+      description: t("feature_access_anywhere_desc"),
       icon: (
-        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h.5A2.5 2.5 0 0020 5.5v-1.65" />
+        <svg
+          className="w-6 h-6"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h.5A2.5 2.5 0 0020 5.5v-1.65"
+          />
         </svg>
-      )
-    }
+      ),
+    },
   ];
 
   const howItWorks = [
     {
-      title: "Create an account",
-      description: "Sign up in seconds.",
+      title: t("how_create_account_title"),
+      description: t("how_create_account_desc"),
       icon: (
-        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+        <svg
+          className="w-6 h-6"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+          />
         </svg>
-      )
+      ),
     },
     {
-      title: "Upload files",
-      description: "Drag & drop or select from your device.",
+      title: t("how_upload_files_title"),
+      description: t("how_upload_files_desc"),
       icon: (
-        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+        <svg
+          className="w-6 h-6"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+          />
         </svg>
-      )
+      ),
     },
     {
-      title: "Manage files",
-      description: "Rename, move, or delete easily.",
+      title: t("how_manage_files_title"),
+      description: t("how_manage_files_desc"),
       icon: (
-        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+       <svg
+          className="w-6 h-6"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+          />
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+          />
         </svg>
-      )
+      ),
     },
     {
-      title: "Access anytime",
-      description: "Open files from any device.",
+      title: t("how_access_anytime_title"),
+      description: t("how_access_anytime_desc"),
       icon: (
-        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        <svg
+          className="w-6 h-6"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+          />
         </svg>
-      )
-    }
+      ),
+    },
   ];
 
+
   // UseEffect and handle....click function to handle set and handle the animation of features..
   const [activeIndex, setActiveIndex] = useState(0);
   const [isPaused, setIsPaused] = useState(false);
@@ -94,7 +182,7 @@ const DrivethruLandingPage = () => {
       }, 3000);
       return () => clearInterval(interval);
     }
-  }, [isPaused]);
+  }, [isPaused, features.length]);
 
   // Handle user interaction
   const handleFeatureClick = (index) => {
@@ -113,7 +201,7 @@ const DrivethruLandingPage = () => {
       }, 3000);
       return () => clearInterval(interval);
     }
-  }, [isPaused1]);
+  }, [isPaused1, howItWorks.length]);
 
   const handleFeatureClick1 = (index) => {
     setActiveIndex1(index);
@@ -124,61 +212,81 @@ const DrivethruLandingPage = () => {
   return (
     <div className="min-h-screen overflow-x-hidden bg-white">
       {/* Hero Section */}
-      <div id="about" className="bg-gradient-to-r from-blue-50 to-white min-h-[90vh] flex items-center relative">
+      <div
+        id="about"
+        className="bg-gradient-to-r from-blue-50 to-white min-h-[90vh] flex items-center relative"
+      >
         <div className="container mx-auto px-4 md:px-6 lg:px-8 relative z-10">
           <div className="flex flex-col md:flex-row items-center gap-8 lg:gap-12">
-
             {/* Left Side - Text Content */}
-            <div className="w-full md:w-1/2 text-center md:text-left order-1 md:order-1">
+            <div className="w-full  md:w-1/2 text-center md:text-left order-1 md:order-1">
               <div className="flex justify-center md:justify-start items-center mb-6 lg:mb-8">
                 <div className="text-cyan-400 mr-2 md:mr-3">
-                  <svg className="w-10 md:w-12 h-10 md:h-12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M12 2L2 12L12 22L22 12L12 2Z" stroke="currentColor" strokeWidth="3" fill="none" />
+                  <svg
+                    className="w-10 md:w-12 h-10 md:h-12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 2L2 12L12 22L22 12L12 2Z"
+                      stroke="currentColor"
+                      strokeWidth="3"
+                      fill="none"
+                    />
                   </svg>
                 </div>
-                <h1 className="text-4xl md:text-5xl font-bold text-black">Drive-thru</h1>
+                <h1 className="text-4xl md:text-5xl font-bold text-black">
+                  {t("skycrate")}
+                </h1>
               </div>
 
               <h2 className="text-xl md:text-2xl font-bold mb-4 md:mb-6 text-black">
-                Store, Access & Share Your Files — Anytime, Anywhere!
+                {t("hero_subtitle")}
               </h2>
 
               <p className="text-gray-800 mb-6 md:mb-10 text-base md:text-lg">
-                A simple, secure, and fast cloud storage solution for all your files. Upload, organize, and access with ease.
+                {t("hero_desc")}
               </p>
 
               {/* Buttons */}
               <div className="flex flex-col sm:flex-row justify-center md:justify-start space-y-4 sm:space-y-0 sm:space-x-4">
-                <button className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium rounded-full px-6 py-4 md:px-8 md:py-6 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl">
-                  Get Started
-                </button>
-                <button className="bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-full px-6 py-4 md:px-8 md:py-6 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl">
-                  Login
-                </button>
+                <Link
+                  to="/signup"
+                  className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium rounded-full px-6 py-4 md:px-8 md:py-6 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl"
+                >
+                  {t("get_started")}
+                </Link>
+                <Link
+                  to="/login"
+                  className="bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-full px-6 py-4 md:px-8 md:py-6 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl"
+                >
+                  {t("login")}
+                </Link>
               </div>
             </div>
-
             {/* Right Side - Image */}
             <div className="w-full md:w-1/2 flex justify-center order-2 md:order-1">
               <div className="relative p-4 bg-gradient-to-r from-blue-50 to-emerald-50 rounded-2xl max-w-xs sm:max-w-lg md:max-w-md lg:max-w-lvh">
                 <img
                   src="/Dashboard.png"
-                  alt="Drive-thru Dashboard Interface"
+                  alt="Skycrate Dashboard Interface"
                   className="w-full rounded-xl shadow-2xl transition-shadow duration-300"
                 />
                 <div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 to-emerald-500/5 rounded-2xl pointer-events-none"></div>
               </div>
             </div>
-
           </div>
         </div>
       </div>
 
       {/* Features Section */}
-      <div id="features" className="w-full max-w-5xl mx-auto p-6 sm:p-8 bg-gray-100 rounded-lg shadow-lg">
-        <h2 className="text-3xl font-bold text-center mb-8">Key Features</h2>
+      <div
+        id="features"
+        className="w-full max-w-5xl  mx-auto p-6 sm:p-8 bg-gray-100 rounded-lg shadow-lg"
+      >
+        <h2 className="text-3xl font-bold text-center mb-8">{t("key_features")}</h2>
         <div className="flex flex-col-reverse md:flex-row items-center gap-8 lg:gap-12">
-
           {/* Left Side - Image */}
           <div className="w-full md:w-1/2 flex justify-center">
             <img
@@ -194,8 +302,11 @@ const DrivethruLandingPage = () => {
               {features.map((feature, index) => (
                 <div
                   key={index}
-                  className={`p-5 border-2 rounded-lg cursor-pointer transition-all duration-500 ${index === activeIndex ? "border-blue-500 bg-white shadow-lg scale-105" : "border-gray-300"
-                    }`}
+                  className={`p-5 border-2 rounded-lg cursor-pointer transition-all duration-500 ${
+                    index === activeIndex
+                      ? "border-blue-500 bg-white shadow-lg scale-105"
+                      : "border-gray-300"
+                  }`}
                   onClick={() => handleFeatureClick(index)}
                 >
                   <div className="flex items-center space-x-4">
@@ -215,18 +326,23 @@ const DrivethruLandingPage = () => {
       </div>
 
       {/* How It Works Section */}
-      <div id="howItWorks" className="w-full max-w-5xl mx-auto p-6 sm:p-8 bg-gray-100 rounded-lg shadow-lg">
-        <h2 className="text-3xl font-bold text-center mb-8">How It Works</h2>
+      <div
+        id="howItWorks"
+        className="w-full max-w-5xl mx-auto p-6 sm:p-8 bg-gray-100 rounded-lg shadow-lg"
+      >
+        <h2 className="text-3xl font-bold text-center mb-8">{t("how_it_works")}</h2>
         <div className="flex flex-col md:flex-row items-center gap-8 lg:gap-12">
-
           {/* Left Side - Feature List */}
           <div className="w-full md:w-1/2">
             <div className="space-y-6">
               {howItWorks.map((howItWork, index) => (
                 <div
                   key={index}
-                  className={`p-5 border-2 rounded-lg cursor-pointer transition-all duration-500 ${index === activeIndex1 ? "border-blue-500 bg-white shadow-lg scale-105" : "border-gray-300"
-                    }`}
+                  className={`p-5 border-2 rounded-lg cursor-pointer transition-all duration-500 ${
+                    index === activeIndex1
+                      ? "border-blue-500 bg-white shadow-lg scale-105"
+                      : "border-gray-300"
+                  }`}
                   onClick={() => handleFeatureClick1(index)}
                 >
                   <div className="flex items-center space-x-4">
@@ -259,4 +375,4 @@ const DrivethruLandingPage = () => {
   );
 };
 
-export default DrivethruLandingPage;
+export default DrivethruLandingPage;

Frontend/src/pages/UserPages/NotFoundPage.jsx

@@ -1,242 +1,25 @@
 import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next"; // for multilinguality
 
 const NotFoundPage = () => {
+  const { t } = useTranslation(); // for multilinguality
+
   return (
     <div className="flex flex-col items-center justify-center h-screen bg-gray-100 p-4">
-      {/* Placeholder SVG - Replace this with your SVG */}
-      <svg
-        className="w-auto max-w-[16rem] h-40 text-gray-800 dark:text-white"
-        aria-hidden="true"
-        width="682"
-        height="382"
-        viewBox="0 0 682 382"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M532 191C532 296.486 446.486 382 341 382C235.514 382 150 296.486 150 191C150 85.5136 235.514 0 341 0C446.486 0 532 85.5136 532 191Z"
-          fill="#d6e2fb"
-        />
-        <path
-          d="M532 191C532 296.486 446.486 382 341 382C235.514 382 150 296.486 150 191C150 85.5136 235.514 0 341 0C446.486 0 532 85.5136 532 191Z"
-          fill="url(#paint0_linear_383_360)"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M348.517 327.448C328.006 327.448 310.402 322.258 295.703 311.878C293.314 310.167 291.014 308.333 288.804 306.376L288.8 306.4L288.258 305.888C287.243 304.974 286.248 304.033 285.272 303.067L272.5 291L274.745 290.579C269.788 283.553 265.522 275.581 261.947 266.662C254.141 246.898 250.238 223.107 250.238 195.288C250.321 167.469 254.266 143.803 262.072 124.288C269.961 104.69 281.213 89.7427 295.828 79.4457C310.526 69.1486 328.089 64 348.517 64C364.303 64 378.377 67.0741 390.741 73.2224L384 66L393.3 70.9L408.502 85.1863C419.683 95.0351 428.503 108.069 434.963 124.288C442.852 143.886 446.797 167.552 446.797 195.288C446.797 223.19 442.852 247.023 434.963 266.786C427.157 286.467 415.905 301.498 401.207 311.878C386.592 322.258 369.029 327.448 348.517 327.448ZM348.517 288.46C364.461 288.46 377.042 280.613 386.26 264.918C395.56 249.14 400.211 225.93 400.211 195.288C400.211 175.026 398.093 158.003 393.858 144.218C389.623 130.433 383.644 120.053 375.921 113.077C368.198 106.019 359.064 102.49 348.517 102.49C332.657 102.49 320.117 110.378 310.9 126.156C301.682 141.851 297.032 164.895 296.949 195.288C296.866 215.633 298.9 232.74 303.052 246.607C307.288 260.475 313.266 270.938 320.989 277.997C328.712 284.972 337.888 288.46 348.517 288.46ZM483.574 275.256L467.6 260.2L483.574 238.51L591.818 67.4873H605.769L633.3 52.5L649.366 67.4873V237.265L666 222.3L682.001 237.265V275.256H649.366V322.59H605.271L589.3 307.6L605.271 275.256H483.574ZM603.776 119.803H605.769V237.265H530.908V235.272L603.776 119.803ZM16 238.51L0 260.2L16 275.256H137.697L121.7 307.6L137.697 322.59H181.792V275.256H214.427V237.265L198.4 222.3L181.792 237.265V67.4873L165.8 52.5L138.195 67.4873H124.244L16 238.51ZM138.195 119.803H136.202L63.3334 235.272V237.265H138.195V119.803Z"
-          fill="#111928"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M332.517 312.448C312.006 312.448 294.402 307.258 279.703 296.878C265.088 286.415 253.836 271.343 245.947 251.662C238.141 231.898 234.238 208.107 234.238 180.288C234.321 152.469 238.266 128.802 246.072 109.288C253.961 89.6901 265.213 74.7427 279.828 64.4457C294.526 54.1486 312.089 49 332.517 49C352.946 49 370.509 54.1486 385.207 64.4457C399.905 74.7427 411.157 89.6901 418.963 109.288C426.852 128.886 430.797 152.552 430.797 180.288C430.797 208.19 426.852 232.023 418.963 251.786C411.157 271.467 399.905 286.498 385.207 296.878C370.592 307.258 353.029 312.448 332.517 312.448ZM467.574 260.256V223.51L575.818 52.4873H589.769H606.461H633.366V222.265H666.001V260.256H633.366V307.59H589.271V260.256H467.574ZM587.776 104.803H589.769V222.265H514.908V220.272L587.776 104.803ZM0 223.51V260.256H121.697V307.59H165.792V260.256H198.427V222.265H165.792V52.4873H138.886H122.195H108.244L0 223.51ZM122.195 104.803H120.202L47.3334 220.272V222.265H122.195V104.803Z"
-          fill="#2563eb"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M332.517 312.448C312.006 312.448 294.402 307.258 279.703 296.878C265.088 286.415 253.836 271.343 245.947 251.662C238.141 231.898 234.238 208.107 234.238 180.288C234.321 152.469 238.266 128.802 246.072 109.288C253.961 89.6901 265.213 74.7427 279.828 64.4457C294.526 54.1486 312.089 49 332.517 49C352.946 49 370.509 54.1486 385.207 64.4457C399.905 74.7427 411.157 89.6901 418.963 109.288C426.852 128.886 430.797 152.552 430.797 180.288C430.797 208.19 426.852 232.023 418.963 251.786C411.157 271.467 399.905 286.498 385.207 296.878C370.592 307.258 353.029 312.448 332.517 312.448ZM467.574 260.256V223.51L575.818 52.4873H589.769H606.461H633.366V222.265H666.001V260.256H633.366V307.59H589.271V260.256H467.574ZM587.776 104.803H589.769V222.265H514.908V220.272L587.776 104.803ZM0 223.51V260.256H121.697V307.59H165.792V260.256H198.427V222.265H165.792V52.4873H138.886H122.195H108.244L0 223.51ZM122.195 104.803H120.202L47.3334 220.272V222.265H122.195V104.803Z"
-          fill="url(#paint1_linear_383_360)"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M332.517 312.448C312.006 312.448 294.402 307.258 279.703 296.878C265.088 286.415 253.836 271.343 245.947 251.662C238.141 231.898 234.238 208.107 234.238 180.288C234.321 152.469 238.266 128.802 246.072 109.288C253.961 89.6901 265.213 74.7427 279.828 64.4457C294.526 54.1486 312.089 49 332.517 49C352.946 49 370.509 54.1486 385.207 64.4457C399.905 74.7427 411.157 89.6901 418.963 109.288C426.852 128.886 430.797 152.552 430.797 180.288C430.797 208.19 426.852 232.023 418.963 251.786C411.157 271.467 399.905 286.498 385.207 296.878C370.592 307.258 353.029 312.448 332.517 312.448ZM467.574 260.256V223.51L575.818 52.4873H589.769H606.461H633.366V222.265H666.001V260.256H633.366V307.59H589.271V260.256H467.574ZM587.776 104.803H589.769V222.265H514.908V220.272L587.776 104.803ZM0 223.51V260.256H121.697V307.59H165.792V260.256H198.427V222.265H165.792V52.4873H138.886H122.195H108.244L0 223.51ZM122.195 104.803H120.202L47.3334 220.272V222.265H122.195V104.803Z"
-          fill="url(#paint2_linear_383_360)"
-        />
-        <path
-          opacity="0.4"
-          d="M682 275.2L666 260.2V222.3L682 237.3V275.2Z"
-          fill="url(#paint3_linear_383_360)"
-        />
-        <path
-          opacity="0.4"
-          d="M649.3 275.2L633.4 260.3V307.6L649.4 322.6L649.3 275.2Z"
-          fill="url(#paint4_linear_383_360)"
-        />
-        <path
-          opacity="0.4"
-          d="M214.5 275.2L198.5 260.2V222.3L214.5 237.3V275.2Z"
-          fill="url(#paint5_linear_383_360)"
-        />
-        <path
-          opacity="0.4"
-          d="M181.8 275.2L165.9 260.3V307.6L181.9 322.6L181.8 275.2Z"
-          fill="url(#paint6_linear_383_360)"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M331.25 231.499C327.923 231.463 320.017 230.73 312.998 228C311.867 227.56 310.665 227.049 309.401 226.512C300.605 222.773 288.801 217.757 276.998 226.5C263.498 236.5 273.998 264 289.998 263.5C297.371 263.27 304.424 262.827 310.964 262.416C318.51 261.943 325.372 261.512 331.25 261.5C337.128 261.512 343.99 261.943 351.536 262.416C358.076 262.827 365.129 263.27 372.502 263.5C388.502 264 399.002 236.5 385.502 226.5C373.699 217.757 361.895 222.773 353.099 226.512C351.835 227.049 350.633 227.56 349.502 228C342.483 230.73 334.577 231.463 331.25 231.499Z"
-          fill="white"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M309.009 227.432C300.15 223.667 288.886 218.938 277.593 227.304C271.353 231.926 270.511 240.735 273.375 248.595C276.242 256.466 282.588 262.731 289.966 262.501C297.321 262.271 304.359 261.829 310.9 261.419L310.924 261.417C318.452 260.945 325.339 260.512 331.247 260.5L331.251 260.5C337.159 260.512 344.046 260.945 351.574 261.417L351.598 261.419C358.14 261.829 365.178 262.271 372.532 262.501C379.91 262.731 386.257 256.466 389.124 248.595C391.988 240.735 391.146 231.926 384.906 227.304C373.613 218.938 362.349 223.667 353.49 227.432L353.481 227.436C352.223 227.971 351.009 228.487 349.864 228.932C342.697 231.719 334.663 232.463 331.26 232.499L331.249 232.499L331.239 232.499C327.836 232.463 319.801 231.719 312.635 228.932C311.489 228.487 310.275 227.971 309.018 227.436L309.009 227.432ZM309.684 225.546L309.791 225.592C311.059 226.13 312.246 226.635 313.36 227.068C320.224 229.738 327.992 230.463 331.249 230.499C334.506 230.463 342.274 229.738 349.139 227.068C350.253 226.635 351.44 226.13 352.708 225.592L352.814 225.546C361.54 221.837 373.833 216.612 386.096 225.697C393.357 231.074 394.014 241.015 391.003 249.28C387.996 257.535 381.092 264.769 372.47 264.5C365.082 264.269 358.015 263.825 351.479 263.415L351.473 263.415C343.918 262.941 337.09 262.512 331.249 262.5C325.409 262.512 318.58 262.941 311.026 263.415L311.019 263.415C304.483 263.825 297.417 264.269 290.029 264.5C281.407 264.769 274.503 257.535 271.495 249.28C268.484 241.015 269.142 231.074 276.402 225.697C288.666 216.612 300.958 221.837 309.684 225.546Z"
-          fill="#111928"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M414.28 128.976C413.714 127.716 412.234 127.154 410.975 127.72C405.121 130.35 395.947 135.089 387.352 140.806C378.867 146.45 370.511 153.327 366.792 160.327L366.568 160.748C366.068 161.689 366.395 162.858 367.311 163.404L367.719 163.647C376.372 168.806 396.069 180.378 405.343 185.217C406.567 185.855 408.077 185.381 408.716 184.157C409.355 182.932 408.88 181.422 407.656 180.784C400.466 177.033 386.793 169.102 377.07 163.375C388.24 162.748 405.225 162.695 419.009 165.452C420.363 165.722 421.68 164.844 421.951 163.49C422.222 162.137 421.344 160.819 419.99 160.549C404.454 157.441 385.272 157.77 374.019 158.557C377.788 153.981 383.647 149.276 390.122 144.969C398.452 139.428 407.378 134.817 413.024 132.281C414.283 131.715 414.846 130.235 414.28 128.976Z"
-          fill="#111928"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M360.732 110.845C359.542 111.545 359.144 113.077 359.844 114.267C364.217 121.7 371.757 126.032 375.093 127.33C376.38 127.83 377.829 127.193 378.329 125.906C378.83 124.619 378.192 123.17 376.905 122.67C374.242 121.634 367.782 117.899 364.154 111.732C363.454 110.542 361.922 110.145 360.732 110.845Z"
-          fill="#111928"
-        />
-        <path
-          d="M402.898 197.971C402.169 192.657 399.252 190 396.974 190C390.594 190 393.328 196.199 390.139 204.613C386.949 213.026 387.86 223.211 397.885 221.882C407.91 220.554 403.809 204.613 402.898 197.971Z"
-          fill="white"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M401.286 191.353C400.054 189.873 398.497 189 396.974 189C395.218 189 393.889 189.43 392.945 190.404C392.042 191.336 391.642 192.621 391.379 193.958C391.219 194.768 391.1 195.629 390.974 196.541C390.664 198.781 390.31 201.339 389.204 204.258C387.567 208.575 386.926 213.472 388.103 217.201C388.698 219.09 389.777 220.724 391.469 221.777C393.159 222.828 395.344 223.228 398.017 222.874C400.84 222.5 402.734 221.065 403.896 219.013C405.026 217.018 405.434 214.5 405.493 211.942C405.581 208.076 404.862 203.785 404.319 200.545C404.148 199.521 403.994 198.602 403.889 197.835C403.503 195.026 402.53 192.849 401.286 191.353ZM399.748 192.632C400.714 193.793 401.563 195.602 401.907 198.107C402.026 198.971 402.191 199.961 402.372 201.038C402.91 204.257 403.577 208.242 403.493 211.896C403.438 214.32 403.048 216.451 402.156 218.027C401.296 219.545 399.943 220.601 397.754 220.891C395.414 221.201 393.726 220.826 392.525 220.079C391.326 219.332 390.497 218.143 390.01 216.6C389.022 213.466 389.521 209.064 391.074 204.967C392.267 201.821 392.674 198.884 392.992 196.592C393.109 195.748 393.214 194.992 393.341 194.345C393.59 193.08 393.903 192.289 394.381 191.796C394.819 191.345 395.54 191 396.974 191C397.729 191 398.769 191.456 399.748 192.632Z"
-          fill="#111928"
-        />
-        <path
-          d="M411.698 245.714C410.877 239.238 407.596 236 405.033 236C397.856 236 400.932 243.555 397.343 253.809C393.755 264.063 394.78 276.476 406.058 274.857C417.337 273.238 412.723 253.809 411.698 245.714Z"
-          fill="white"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M409.812 237.82C408.456 236.054 406.733 235 405.033 235C403.055 235 401.588 235.528 400.563 236.674C399.589 237.763 399.152 239.268 398.859 240.881C398.683 241.844 398.551 242.878 398.41 243.982C398.06 246.721 397.656 249.89 396.4 253.479C394.568 258.711 393.868 264.606 395.166 269.065C395.82 271.313 397.004 273.261 398.875 274.522C400.753 275.788 403.197 276.278 406.2 275.846C409.367 275.392 411.456 273.655 412.728 271.222C413.97 268.845 414.426 265.831 414.492 262.735C414.59 258.055 413.789 252.87 413.179 248.924C412.985 247.668 412.81 246.537 412.69 245.589C412.262 242.212 411.184 239.606 409.812 237.82ZM408.226 239.038C409.34 240.489 410.313 242.74 410.706 245.84C410.837 246.878 411.022 248.075 411.223 249.38C411.83 253.307 412.587 258.209 412.492 262.693C412.429 265.668 411.988 268.32 410.956 270.295C409.953 272.213 408.389 273.512 405.916 273.867C403.28 274.245 401.367 273.79 399.993 272.864C398.612 271.933 397.649 270.44 397.086 268.506C395.949 264.6 396.53 259.161 398.287 254.14C399.618 250.337 400.069 246.813 400.426 244.025C400.559 242.986 400.679 242.049 400.826 241.238C401.11 239.681 401.473 238.656 402.054 238.007C402.582 237.416 403.422 237 405.033 237C405.897 237 407.095 237.565 408.226 239.038Z"
-          fill="#111928"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M251.22 128.976C251.786 127.716 253.266 127.154 254.525 127.72C260.379 130.35 269.553 135.089 278.148 140.806C286.633 146.45 294.989 153.327 298.708 160.327L298.932 160.748C299.432 161.689 299.105 162.858 298.189 163.404L297.781 163.647C289.128 168.806 269.431 180.378 260.157 185.217C258.933 185.855 257.423 185.381 256.784 184.157C256.145 182.932 256.62 181.422 257.844 180.784C265.034 177.033 278.707 169.102 288.43 163.375C277.26 162.748 260.275 162.695 246.491 165.452C245.137 165.722 243.82 164.844 243.549 163.49C243.278 162.137 244.156 160.819 245.51 160.549C261.046 157.441 280.228 157.77 291.481 158.557C287.712 153.981 281.853 149.276 275.378 144.969C267.048 139.428 258.122 134.817 252.476 132.281C251.217 131.715 250.654 130.235 251.22 128.976Z"
-          fill="#111928"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M304.768 110.845C305.958 111.545 306.356 113.077 305.656 114.267C301.283 121.7 293.743 126.032 290.407 127.33C289.12 127.83 287.671 127.193 287.171 125.906C286.67 124.619 287.308 123.17 288.595 122.67C291.258 121.634 297.718 117.899 301.346 111.732C302.046 110.542 303.578 110.145 304.768 110.845Z"
-          fill="#111928"
-        />
-        <path
-          d="M262.602 197.971C263.331 192.657 266.248 190 268.526 190C274.906 190 272.172 196.199 275.361 204.613C278.551 213.026 277.64 223.211 267.615 221.882C257.59 220.554 261.691 204.613 262.602 197.971Z"
-          fill="white"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M264.214 191.353C265.446 189.873 267.003 189 268.526 189C270.282 189 271.611 189.43 272.555 190.404C273.458 191.336 273.858 192.621 274.121 193.958C274.281 194.768 274.4 195.629 274.526 196.541C274.836 198.781 275.19 201.339 276.296 204.258C277.933 208.575 278.574 213.472 277.397 217.201C276.802 219.09 275.723 220.724 274.031 221.777C272.341 222.828 270.156 223.228 267.483 222.874C264.66 222.5 262.766 221.065 261.604 219.013C260.474 217.018 260.066 214.5 260.007 211.942C259.919 208.076 260.638 203.785 261.181 200.545C261.352 199.521 261.506 198.602 261.611 197.835C261.997 195.026 262.97 192.849 264.214 191.353ZM265.752 192.632C264.786 193.793 263.937 195.602 263.593 198.107C263.474 198.971 263.309 199.961 263.128 201.038C262.59 204.257 261.923 208.242 262.007 211.896C262.062 214.32 262.452 216.451 263.344 218.027C264.204 219.545 265.557 220.601 267.746 220.891C270.086 221.201 271.774 220.826 272.975 220.079C274.174 219.332 275.003 218.143 275.49 216.6C276.478 213.466 275.979 209.064 274.426 204.967C273.233 201.821 272.826 198.884 272.508 196.592C272.391 195.748 272.286 194.992 272.159 194.345C271.91 193.08 271.597 192.289 271.119 191.796C270.681 191.345 269.96 191 268.526 191C267.771 191 266.731 191.456 265.752 192.632Z"
-          fill="#111928"
-        />
-        <path
-          d="M253.802 245.714C254.623 239.238 257.904 236 260.467 236C267.644 236 264.568 243.555 268.157 253.809C271.745 264.063 270.72 276.476 259.442 274.857C248.163 273.238 252.777 253.809 253.802 245.714Z"
-          fill="white"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M255.688 237.82C257.044 236.054 258.767 235 260.467 235C262.445 235 263.912 235.528 264.937 236.674C265.911 237.763 266.348 239.268 266.641 240.881C266.817 241.844 266.949 242.878 267.09 243.982C267.44 246.721 267.844 249.89 269.1 253.479C270.932 258.711 271.632 264.606 270.334 269.065C269.68 271.313 268.496 273.261 266.625 274.522C264.747 275.788 262.303 276.278 259.3 275.846C256.133 275.392 254.044 273.655 252.772 271.222C251.53 268.845 251.074 265.831 251.008 262.735C250.91 258.055 251.711 252.87 252.321 248.924C252.515 247.668 252.69 246.537 252.81 245.589C253.238 242.212 254.316 239.606 255.688 237.82ZM257.274 239.038C256.16 240.489 255.187 242.74 254.794 245.84C254.663 246.878 254.478 248.075 254.277 249.38C253.67 253.307 252.913 258.209 253.008 262.693C253.071 265.668 253.512 268.32 254.544 270.295C255.547 272.213 257.111 273.512 259.584 273.867C262.22 274.245 264.133 273.79 265.507 272.864C266.888 271.933 267.851 270.44 268.414 268.506C269.551 264.6 268.97 259.161 267.213 254.14C265.882 250.337 265.431 246.813 265.074 244.025C264.941 242.986 264.821 242.049 264.674 241.238C264.39 239.681 264.027 238.656 263.446 238.007C262.918 237.416 262.078 237 260.467 237C259.603 237 258.405 237.565 257.274 239.038Z"
-          fill="#111928"
-        />
-        <defs>
-          <linearGradient
-            id="paint0_linear_383_360"
-            x1="341.567"
-            y1="167.672"
-            x2="341"
-            y2="419.179"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="white" stopOpacity="0" />
-            <stop offset="1" stopColor="white" />
-          </linearGradient>
-          <linearGradient
-            id="paint1_linear_383_360"
-            x1="333"
-            y1="202.5"
-            x2="333"
-            y2="463"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#111928" stopOpacity="0" />
-            <stop offset="1" stopColor="#111928" />
-          </linearGradient>
-          <linearGradient
-            id="paint2_linear_383_360"
-            x1="333"
-            y1="204"
-            x2="333"
-            y2="-60.5"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#c8d8fa" stopOpacity="0" />
-            <stop offset="1" stopColor="#c8d8fa" />
-          </linearGradient>
-          <linearGradient
-            id="paint3_linear_383_360"
-            x1="674"
-            y1="222.5"
-            x2="674"
-            y2="275.5"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#2563eb" stopOpacity="0" />
-            <stop offset="1" stopColor="#2563eb" />
-          </linearGradient>
-          <linearGradient
-            id="paint4_linear_383_360"
-            x1="641.25"
-            y1="260.5"
-            x2="641.25"
-            y2="322.5"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#2563eb" stopOpacity="0" />
-            <stop offset="1" stopColor="#2563eb" />
-          </linearGradient>
-          <linearGradient
-            id="paint5_linear_383_360"
-            x1="206.5"
-            y1="222.5"
-            x2="206.5"
-            y2="275.5"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#2563eb" stopOpacity="0" />
-            <stop offset="1" stopColor="#2563eb" />
-          </linearGradient>
-          <linearGradient
-            id="paint6_linear_383_360"
-            x1="173.75"
-            y1="260.5"
-            x2="173.75"
-            y2="322.5"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#2563eb" stopOpacity="0" />
-            <stop offset="1" stopColor="#2563eb" />
-          </linearGradient>
-        </defs>
-      </svg>
-
-      {/* Page number and title */}
-      <h2 className="text-2xl font-bold mb-4">Page Not Found</h2>
-
-      {/* Description text */}
+      <img
+        src="/404.png"
+        style={{ width: "30%", height: "auto" }}
+        alt="404 Not Found"
+      />
+      <h2 className="text-2xl font-bold mb-4 mt-4">{t("not_found_title")}</h2>
       <p className="text-center text-gray-700 mb-6">
-        Sorry, we couldn&apos;t find the page you were looking for. It may have
-        been moved or deleted.
+        {t("not_found_description")}
       </p>
-
-      {/* Call-to-action button */}
       <Link
         to="/"
         className="px-6 py-2 bg-[#1877F2] text-white rounded hover:bg-blue-600 transition duration-200"
       >
-        Go Home
+        {t("go_home")}
       </Link>
     </div>
   );

Frontend/src/store/UploadStatusSlice.js

@@ -0,0 +1,18 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  isUploading: false,
+};
+
+const uploadStatusSlice = createSlice({
+  name: "uploadStatus",
+  initialState,
+  reducers: {
+    setIsUploading: (state) => {
+      state.isUploading = !state.isUploading;
+    },
+  },
+});
+
+export const { setIsUploading } = uploadStatusSlice.actions;
+export default uploadStatusSlice.reducer;

Frontend/src/store/pathSlice.js

@@ -0,0 +1,19 @@
+// src/redux/pathSlice.js
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  currentPath: "/",
+};
+
+const pathSlice = createSlice({
+  name: "path",
+  initialState,
+  reducers: {
+    setCurrentPath: (state, action) => {
+      state.currentPath = action.payload;
+    },
+  },
+});
+
+export const { setCurrentPath } = pathSlice.actions;
+export default pathSlice.reducer;

Frontend/src/store/store.js

@@ -0,0 +1,11 @@
+// src/redux/store.js
+import { configureStore } from "@reduxjs/toolkit";
+import pathReducer from "./pathSlice";
+import setIsUploadingReducer from "./UploadStatusSlice";
+
+export const store = configureStore({
+  reducer: {
+    path: pathReducer,
+    upload: setIsUploadingReducer,
+  },
+});

Frontend/vite.config.js

@@ -4,6 +4,13 @@ import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss(),
+  plugins: [
+    react(),
+    tailwindcss(),
   ],
+  server: {
+    host: 'localhost', 
+    port: 5173,
+  },
 })
+

README.md

@@ -1,14 +1,54 @@
-# CC-MINI (2025)
+# Skycrate
 
-`frontend` branch is intended only for pushing frontend files within the [Frontend](Frontend/) folder.
+> [!NOTE]
+> This project is now multilingual. To contribute new languages, please read the [translation guide](./TRANSLATION.md).
 
 ---
 
-Design: https://www.figma.com/design/37nOQ4PtUUGVTmPAQJ1lwU/Drive-thru
+## Versions
+- Hadoop: 3.4.1
+- Java: 17
+- Node: 22.14.0
+- NPM: 10.9.2
 
-## Current state
+## How to run?
 
-| ![landing](Frontend/samples/landing.jpg) | ![login](Frontend/samples/login.jpg) | ![signup](Frontend/samples/signup.jpg)
-| --- | --- | --- |
-| [landing](Frontend/samples/landing.jpg) | [login](Frontend/samples/login.jpg) | [signup](Frontend/samples/signup.jpg)
+> [!IMPORTANT]
+> You must have [Docker](https://www.docker.com/products/docker-desktop/) and [Git](https://git-scm.com/) installed on your system.
 
+1. Clone this repository:
+
+```shell
+git clone https://git.kska.io/notkshitij/Skycrate.git
+```
+
+2. Change into the directory:
+
+```shell
+cd ./Skycrate
+```
+
+3. Create a `.env` file inside the directory containing the following variables:
+
+```env
+MYSQL_PASSWORD=<set-a-strong-password>
+```
+
+> [!NOTE]
+> Please choose a strong password, since it will be used for your MySQL database.
+
+4. Execute the Docker Compose file:
+
+```shell
+docker-compose -f docker-compose.yaml up -d
+```
+
+> [!TIP]
+> Use `-d` flag to run in detached mode.
+
+5. Visit `localhost:8080` to enjoy using Skycrate!
+
+> [!NOTE]
+> To stop and remove all the containers, run `docker compose down`
+
+---

TRANSLATION.md

@@ -0,0 +1,78 @@
+# TRANSLATION
+
+This is a comprehensive guide for translation for those who wish to contribute in any language.
+
+---
+
+## 1. Add Your Language JSON File
+
+- Go to the `Frontend/src/locales/` directory.
+- Copy an existing language file (e.g., `en.json`) and rename it to your language code (e.g., `es.json` for Spanish, `de.json` for German).
+- Translate all the key-value pairs in your new file.
+
+**Example:**
+
+```shell
+cp Frontend/src/locales/en.json Frontend/src/locales/es.json
+```
+
+```json
+{
+  "skycrate": "Skycrate",
+  "hero_subtitle": "Store, Access & Share Your Files — Anytime, Anywhere!",
+}
+```
+
+## 2. Register the Language in `Frontend/src/i18n.js`
+
+- Open `Frontend/src/i18n.js`.
+- Import your new JSON file:
+
+```js
+import en from './locales/en.json';
+import fr from './locales/fr.json';
+// import more languages as needed
+import es from './locales/es.json'; // <-- Add this line
+
+const resources = {
+  en: { translation: en },
+  fr: { translation: fr },
+  // add other languages here
+  es: { translation: es }, // <-- Add this line
+};
+```
+
+## 3. Update the Language Switcher
+
+- Open `Frontend/src/components/LanguageSwitcher.jsx`.
+- Add your language to the `languages` array:
+
+
+```js
+const languages = [
+  { code: 'en', label: 'English' },
+  { code: 'fr', label: 'Français' },
+  // Add more languages as needed
+  { code: 'es', label: 'Spanish' }, // <-- Add this line
+];
+```
+
+## 4. Test Your Translation
+
+- Start the app.
+- Use the language switcher to select your new language.
+- Check all pages for missing or untranslated keys.
+- If you see a key instead of a translation, add it to your JSON file.
+
+## 5. Submit Your Contribution
+
+- Double-check your translations for accuracy and completeness.
+- Commit your changes to:
+- `Frontend/src/locales/<your_language>.json`
+- `Frontend/src/i18n.js`
+- `Frontend/src/components/LanguageSwitcher.jsx`
+- Open a pull request with a description of your contribution.
+
+---
+
+## Thank you for making Skycrate accessible to more people!

docker-compose.yaml

@@ -0,0 +1,151 @@
+services:
+  namenode:
+    image: kshitijka/hadoop-namenode:3.4.1
+    container_name: skycrate-hadoop-namenode
+    restart: on-failure:5
+    ports:
+      - "9870:9870" # Web UI
+      #- "9000:9000" # Hadoop; No need to expose since backend will access internally
+    user: "hdoop:hdoop"  
+    security_opt:
+      - no-new-privileges:true
+    networks:
+      - skycrate-internal
+    volumes:
+      - skycrate-hadoop_namenode:/hadoop/dfs/name
+    environment:
+      - CLUSTER_NAME=skycreate
+    env_file:
+      - ./hadoop.env
+
+  datanode:
+    image: kshitijka/hadoop-datanode:3.4.1
+    container_name: skycrate-hadoop-datanode-1
+    restart: on-failure:5
+    user: "hdoop:hdoop"  
+    security_opt:
+      - no-new-privileges:true
+    networks:
+      - skycrate-internal
+    volumes:
+      - skycrate-hadoop_datanode:/hadoop/dfs/data
+    environment:
+      SERVICE_PRECONDITION: "namenode:9870"
+    env_file:
+      - ./hadoop.env
+    # healthcheck:
+    #   disable: true
+
+  resourcemanager:
+    image: kshitijka/hadoop-resourcemanager:3.4.1
+    container_name: skycrate-hadoop-resourcemanager
+    restart: on-failure:10
+    user: "hdoop:hdoop"  
+    security_opt:
+      - no-new-privileges:true
+    networks:
+      - skycrate-internal
+    environment:
+      SERVICE_PRECONDITION: "namenode:9000 namenode:9870 datanode:9864"
+    env_file:
+      - ./hadoop.env
+    # healthcheck:
+    #   disable: true
+
+  nodemanager:
+    image: kshitijka/hadoop-nodemanager:3.4.1
+    container_name: skycrate-hadoop-nodemanager
+    restart: on-failure:5
+    user: "hdoop:hdoop"  
+    security_opt:
+      - no-new-privileges:true
+    networks:
+      - skycrate-internal
+    environment:
+      SERVICE_PRECONDITION: "namenode:9000 namenode:9870 datanode:9864 resourcemanager:8088"
+    env_file:
+      - ./hadoop.env
+    # healthcheck:
+    #   disable: true
+
+  historyserver:
+    image: kshitijka/hadoop-historyserver:3.4.1
+    container_name: skycrate-hadoop-historyserver
+    restart: on-failure:5
+    user: "hdoop:hdoop"  
+    security_opt:
+      - no-new-privileges:true
+    networks:
+      - skycrate-internal
+    environment:
+      SERVICE_PRECONDITION: "namenode:9000 namenode:9870 datanode:9864 resourcemanager:8088"
+    volumes:
+      - skycrate-hadoop_historyserver:/hadoop/yarn/timeline
+    env_file:
+      - ./hadoop.env
+    # healthcheck:
+    #   disable: true
+
+  db:
+    image: mysql:8
+    container_name: skycrate-db
+    restart: on-failure:5
+    user: "1000:1000"
+    security_opt:
+      - no-new-privileges:true
+    networks:
+      - skycrate-internal
+    environment:
+      - MYSQL_DATABASE=skycrate
+      - MYSQL_USER=skycrateDB
+      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
+      - MYSQL_RANDOM_ROOT_PASSWORD=yes
+    volumes:
+      - skycrate-db:/var/lib/mysql
+    env_file:
+      - .env
+
+  frontend:
+    image: kshitijka/skycrate-frontend:1.0
+    container_name: skycrate-frontend
+    restart: on-failure:5
+    user: "skycrateFront:skycrateFront"
+    security_opt:
+      - no-new-privileges:true
+    networks:
+      - skycrate-internal
+    ports:
+      - "80:8080"
+    volumes:
+      - skycrate-frontend:/app
+    depends_on:
+      - backend
+
+  backend:
+    image: kshitijka/skycrate-backend:1.0
+    container_name: skycrate-backend
+    restart: on-failure:5
+    user: "skycrateBack:skycrateBack"
+    security_opt:
+      - no-new-privileges:true
+    networks:
+      - skycrate-internal
+    ports:
+      - "8081:8081" # If you change, update in Frontend/.env file too and rebuild the image
+    environment:
+      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
+    volumes:
+      - skycrate-backend:/app
+
+volumes:
+  skycrate-hadoop_namenode:
+  skycrate-hadoop_datanode:
+  skycrate-hadoop_historyserver:
+  skycrate-db:
+  skycrate-frontend:
+  skycrate-backend:
+
+networks:
+  skycrate-internal:
+    external: false
+    driver: bridge

hadoop.env

@@ -0,0 +1,43 @@
+CORE_CONF_fs_defaultFS=hdfs://namenode:9000
+CORE_CONF_hadoop_http_staticuser_user=root
+CORE_CONF_hadoop_proxyuser_hue_hosts=*
+CORE_CONF_hadoop_proxyuser_hue_groups=*
+CORE_CONF_io_compression_codecs=org.apache.hadoop.io.compress.SnappyCodec
+
+HDFS_CONF_dfs_webhdfs_enabled=true
+HDFS_CONF_dfs_permissions_enabled=false
+HDFS_CONF_dfs_namenode_datanode_registration_ip___hostname___check=false
+
+YARN_CONF_yarn_log___aggregation___enable=true
+YARN_CONF_yarn_log_server_url=http://historyserver:8188/applicationhistory/logs/
+YARN_CONF_yarn_resourcemanager_recovery_enabled=true
+YARN_CONF_yarn_resourcemanager_store_class=org.apache.hadoop.yarn.server.resourcemanager.recovery.FileSystemRMStateStore
+YARN_CONF_yarn_resourcemanager_scheduler_class=org.apache.hadoop.yarn.server.resourcemanager.scheduler.capacity.CapacityScheduler
+YARN_CONF_yarn_scheduler_capacity_root_default_maximum___allocation___mb=8192
+YARN_CONF_yarn_scheduler_capacity_root_default_maximum___allocation___vcores=4
+YARN_CONF_yarn_resourcemanager_fs_state___store_uri=/rmstate
+YARN_CONF_yarn_resourcemanager_system___metrics___publisher_enabled=true
+YARN_CONF_yarn_resourcemanager_hostname=resourcemanager
+YARN_CONF_yarn_resourcemanager_address=resourcemanager:8032
+YARN_CONF_yarn_resourcemanager_scheduler_address=resourcemanager:8030
+YARN_CONF_yarn_resourcemanager_resource__tracker_address=resourcemanager:8031
+YARN_CONF_yarn_timeline___service_enabled=true
+YARN_CONF_yarn_timeline___service_generic___application___history_enabled=true
+YARN_CONF_yarn_timeline___service_hostname=historyserver
+YARN_CONF_mapreduce_map_output_compress=true
+YARN_CONF_mapred_map_output_compress_codec=org.apache.hadoop.io.compress.SnappyCodec
+YARN_CONF_yarn_nodemanager_resource_memory___mb=16384
+YARN_CONF_yarn_nodemanager_resource_cpu___vcores=8
+YARN_CONF_yarn_nodemanager_disk___health___checker_max___disk___utilization___per___disk___percentage=98.5
+YARN_CONF_yarn_nodemanager_remote___app___log___dir=/app-logs
+YARN_CONF_yarn_nodemanager_aux___services=mapreduce_shuffle
+
+MAPRED_CONF_mapreduce_framework_name=yarn
+MAPRED_CONF_mapred_child_java_opts=-Xmx4096m
+MAPRED_CONF_mapreduce_map_memory_mb=4096
+MAPRED_CONF_mapreduce_reduce_memory_mb=8192
+MAPRED_CONF_mapreduce_map_java_opts=-Xmx3072m
+MAPRED_CONF_mapreduce_reduce_java_opts=-Xmx6144m
+MAPRED_CONF_yarn_app_mapreduce_am_env=HADOOP_MAPRED_HOME=/opt/hadoop-3.4.1/
+MAPRED_CONF_mapreduce_map_env=HADOOP_MAPRED_HOME=/opt/hadoop-3.4.1/
+MAPRED_CONF_mapreduce_reduce_env=HADOOP_MAPRED_HOME=/opt/hadoop-3.4.1/