added Dockfile for frontend

frontend/.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["next/babel", "next/core-web-vitals"]
+  "extends": ["next", "next/core-web-vitals"]
 }

frontend/Dockerfile

@@ -0,0 +1,35 @@
+# Stage 1: Building the code
+FROM node:16-alpine AS builder
+
+WORKDIR /app
+
+# Copy the package.json and package-lock.json
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci --only=production
+
+# Copy the app source code
+COPY . .
+
+# Build the app
+RUN npm run build
+
+# Stage 2: Run the app
+FROM node:16-alpine AS runner
+WORKDIR /app
+
+# Copy built assets from the builder stage
+COPY --from=builder /app/.next/ .next/
+COPY --from=builder /app/node_modules/ node_modules/
+COPY --from=builder /app/public/ public/
+COPY --from=builder /app/package.json package.json
+
+# Expose the port Next.js runs on
+EXPOSE 3000
+
+# Set environment to production to avoid including unnecessary files
+ENV NODE_ENV production
+
+# Start the app
+CMD ["npm", "start"]

frontend/src/components/NavigationBar.js

@@ -9,7 +9,6 @@ import MenuIcon from "@mui/icons-material/Menu";
 import Container from "@mui/material/Container";
 import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
-import AutoMateLogo from "../../public/Automate_logo.png";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -31,7 +30,12 @@ function NavigationBar() {
       <Container maxWidth="xl">
         <Toolbar disableGutters>
           <Box sx={{ display: { xs: "none", md: "flex" }, mr: 1 }}>
-            <Image width={50} alt="AutoMate Logo" src={AutoMateLogo} />
+            <Image
+              width={50}
+              height={50}
+              alt="AutoMate Logo"
+              src="/AutoMate_logo.png"
+            />
           </Box>
           <Typography
             variant="h6"
@@ -94,8 +98,13 @@ function NavigationBar() {
             </Menu>
           </Box>
 
-          <Box sx={{ display: { xs: "flex", md: "none" }, mr: 1 }}>
-            <Image width={50} alt="AutoMate Logo" src={AutoMateLogo} />
+          <Box sx={{ display: { xs: "none", md: "flex" }, mr: 1 }}>
+            <Image
+              width={50}
+              height={50}
+              alt="AutoMate Logo"
+              src="/AutoMate_logo.png"
+            />
           </Box>
           <Typography
             variant="h5"

frontend/src/pages/index.js

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import Typography from "@mui/material/Typography";
 import "@fontsource/public-sans";
-import AutoMateLogo from "../../public/Automate_logo.png";
 import Image from "next/image";
 import Button from "@mui/material/Button";
 import styled from "@emotion/styled";
@@ -120,8 +119,13 @@ export default function Home() {
             </Button>
           </Element>
         </Element>
-        <Picture style={{ left: "10" }}>
-          <Image width={500} alt="AutoMate Logo" src={AutoMateLogo} />
+        <Picture>
+          <Image
+            width={500}
+            height={500}
+            alt="AutoMate Logo"
+            src="/AutoMate_logo.png"
+          />
         </Picture>
       </BoxContainer>
     </Container>