feat(docker): add Docker support for frontend and backend with development and production configurations

.dockerignore

@@ -0,0 +1,9 @@
+backend
+node_modules
+dist
+build
+.gitignore 
+.git
+.env.*
+.github
+yarn.lock

.gitignore

@@ -1,6 +1,8 @@
 # Node modules
 node_modules/
 package-lock.json
+*/yarn.lock
+yarn.lock
 # Logs
 logs
 *.log

Dockerfile

@@ -0,0 +1,44 @@
+# Stage 1: Build the frontend
+FROM node:20-alpine AS build
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json
+COPY package.json .
+
+# Install production dependencies using Yarn
+RUN yarn install --production
+# Copy the rest of the application files
+COPY . .
+
+# Build the frontend using Yarn
+RUN yarn run build
+
+# Stage 2: Serve the application with Nginx
+FROM nginx:alpine
+
+# Copy the build output from the previous stage to Nginx's serve directory
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# Remove the default Nginx configuration file
+RUN rm /etc/nginx/conf.d/default.conf
+
+# Create a new Nginx configuration file
+RUN echo $'\
+server { \n\
+    listen 3000; \n\
+    server_name localhost; \n\
+    root /usr/share/nginx/html; \n\
+    index index.html; \n\
+    \n\
+    location / { \n\
+        try_files $uri $uri/ /index.html; \n\
+    } \n\
+}' > /etc/nginx/conf.d/default.conf
+
+# Expose port 3000
+EXPOSE 3000
+
+# Start Nginx
+CMD ["nginx", "-g", "daemon off;"]

Dockerfile.dev

@@ -0,0 +1,21 @@
+# Stage 1: Build the frontend
+FROM node:20-alpine
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json 
+
+COPY package.json .
+
+# Install all dependencies
+RUN yarn install
+
+# Copy the rest of the application files
+COPY . .
+
+# Expose the port for the application
+EXPOSE 3000
+
+# Start Nginx
+CMD ["yarn","dev", "--port", "3000","--host"]

backend/.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+.gitignore 
+.git
+.env.*
+yarn.lock

backend/Dockerfile

@@ -0,0 +1,20 @@
+# Use a lightweight Node.js Alpine image
+FROM node:20-alpine
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and yarn.lock files for dependency installation
+COPY package.json ./
+
+# Install production dependencies using Yarn
+RUN yarn install --production
+
+# Copy the rest of the application files
+COPY . .
+
+# Expose the port for the application
+EXPOSE 5000
+
+# Start the server in production mode using Yarn
+CMD ["yarn", "start"]

backend/Dockerfile.dev

@@ -0,0 +1,20 @@
+# Use a lightweight Node.js Alpine image
+FROM node:20-alpine
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and yarn.lock files for dependency installation
+COPY package.json ./
+
+# Install all dependencies using Yarn
+RUN yarn install
+
+# Copy the rest of the application files
+COPY . .
+
+# Expose the port for the application
+EXPOSE 5000
+
+# Start the server in dev mode using Yarn
+CMD ["yarn", "dev"]

backend/package.json

@@ -3,7 +3,8 @@
   "version": "1.0.0",
   "main": "server.js",
   "scripts": {
-    "start": "nodemon server.js",
+    "dev": "nodemon server.js",
+    "start": "node server.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],

docker-compose.dev.yml

@@ -0,0 +1,37 @@
+services:
+  frontend:  # Defines the frontend service
+    image: frontend  # Names the Docker image for the frontend service
+    container_name: frontend-container  # Names the container for the frontend service
+    build:
+      context: .  # Uses the current directory as the build context
+      dockerfile: Dockerfile.dev  # Specifies the Dockerfile to use for building the image
+    ports:
+      - "3000:3000"  # Maps port 3000 on the host machine to port 3000 in the container
+    env_file:
+      - .env  # Loads environment variables from the .env file
+    volumes:
+      - .:/app  # Mounts the entire project directory into the container for live code updates
+      - /app/node_modules  # Prevents node_modules inside the container from being overwritten
+    depends_on:
+      - backend  # Ensures the backend service starts before the frontend
+    networks:
+      - app-network  # Connects the frontend to a custom Docker network
+
+  backend:  # Defines the backend service
+    image: backend  # Names the Docker image for the backend service
+    container_name: backend-container  # Names the container for the backend service
+    build:
+      context: ./backend  # Uses the "backend" directory as the build context
+      dockerfile: Dockerfile.dev  # Specifies the Dockerfile to use for building the image
+    ports:
+      - "5000:5000"  # Maps port 8000 on the host machine to port 8000 in the container
+    env_file:
+      - ./backend/.env  # Loads environment variables from the .env file
+    volumes:
+      - ./backend:/app  # Mounts the backend directory into the container for live code updates
+      - /app/node_modules  # Prevents node_modules inside the container from being overwritten
+    networks:
+      - app-network  # Connects the backend to a custom Docker network
+
+networks:
+  app-network:  # Defines a shared network so that containers can communicate with each other

docker-compose.prod.yml

@@ -0,0 +1,31 @@
+services:
+  frontend:
+    image: frontend
+    container_name: frontend-container
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+    env_file:
+      - .env
+    depends_on:
+      - backend
+    networks:
+      - app-network
+
+  backend:
+    image: backend
+    container_name: backend-container
+    build:
+      context: backend
+      dockerfile: Dockerfile
+    ports:
+      - "5000:5000"
+    env_file:
+      - backend/.env
+    networks:
+      - app-network
+
+networks:
+  app-network:

package.json

@@ -21,7 +21,10 @@
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
-    "react-router-dom": "^6.28.0"
+    "react-router-dom": "^6.28.0",
+    "postcss": "^8.4.47",
+    "autoprefixer": "^10.4.20",
+    "tailwindcss": "^3.4.14"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
@@ -30,14 +33,11 @@
     "@types/react-dom": "^18.3.1",
     "@types/react-redux": "^7.1.34",
     "@vitejs/plugin-react-swc": "^3.5.0",
-    "autoprefixer": "^10.4.20",
     "eslint": "^9.13.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.11.0",
-    "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.14",
     "vite": "^5.4.10"
   }
 }