Dockerized the application.

frontend/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+dist

frontend/Dockerfile

@@ -0,0 +1,37 @@
+# Stage 1: Build the React app
+FROM node:18-alpine AS build
+WORKDIR /app
+
+# Leverage caching by installing dependencies first
+COPY package.json package-lock.json ./
+RUN npm install --frozen-lockfile --include=dev
+
+# Copy the rest of the application code and build for production
+COPY . ./
+RUN npm run build
+
+# Stage 2: Development environment
+FROM node:18-alpine AS development
+WORKDIR /app
+
+# Install dependencies again for development
+COPY package.json package-lock.json ./
+RUN npm install --frozen-lockfile --include=dev
+
+# Copy the full source code
+COPY . ./
+
+# Expose port for the Vite development server
+EXPOSE 5173
+CMD ["npm", "run", "dev"]
+
+# Stage 3: Production environment
+FROM nginx:alpine AS production
+
+# Copy the production build artifacts from the build stage
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Expose the default NGINX port
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

frontend/nginx.conf

@@ -0,0 +1,17 @@
+server {
+    listen 80;
+
+    location /api {
+        proxy_pass http://backend:5000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+    }
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+}

frontend/package.json

@@ -11,23 +11,33 @@
         "test": "vitest"
     },
     "dependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@fontsource/roboto": "^5.2.5",
+        "@mui/icons-material": "^6.4.8",
+        "@mui/x-data-grid": "^7.1.0",
+        "@mui/material": "^6.4.8",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-dropzone": "^14.3.8",
         "react-router-dom": "^6.26.1",
         "lucide-react": "^0.515.0",
+        "tailwindcss": "^4.1.10",
+        "@tailwindcss/vite": "^4.1.10",
+        "react-router": "^7.6.0",
         "axios": "^1.7.2"
     },
     "devDependencies": {
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.3.1",
+        "esbuild": "^0.25.5",
         "eslint": "^8.57.0",
         "eslint-plugin-react": "^7.34.3",
         "eslint-plugin-react-hooks": "^4.6.2",
         "eslint-plugin-react-refresh": "^0.4.7",
         "vite": "^5.3.4",
         "vitest": "^1.6.0",
-        "tailwindcss": "^3.4.4",
         "autoprefixer": "^10.4.19",
         "postcss": "^8.4.39"
     }

frontend/src/index.css

@@ -1,9 +1,5 @@
 @import "tailwindcss";
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 @layer base {
   body {
     @apply bg-zinc-900 text-white font-sans;