feat(frontend): Add Docker containerization support for development and production

Implement complete Docker setup for Next.js 16 frontend with multi-stage builds,
hot reload support, and production optimizations.

Changes:
- Add Dockerfile with multi-stage build (deps, builder, development, production)
- Add .dockerignore to exclude unnecessary files from Docker context
- Add .env.local.example template for environment configuration
- Update next.config.ts with standalone output for production builds
- Add Docker convenience scripts to package.json for easy container management
- Support hot reload in development with volume mounts
- Use Node.js 20 Alpine for smaller image size
- Implement security best practices (non-root user in production)

Technical Details:
- Development stage: Full source mounted with hot reload via Turbopack
- Production stage: Standalone build with optimized static assets
- Image size: ~1.17GB (development), smaller for production
- Port: 3000 (maps to container port 3000)

Testing:
- Docker build verified for development target
- Container startup successful with Next.js 16.0.1
- HTTP 200 response confirmed on localhost:3000
- Hot reload functional with volume mounts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.dockerignore

@@ -0,0 +1,50 @@
+# Dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Next.js
+.next/
+out/
+build/
+
+# Environment files
+.env
+.env*.local
+.env.production
+
+# Git
+.git/
+.gitignore
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+.DS_Store
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Testing
+coverage/
+.nyc_output/
+__tests__/
+*.test.ts
+*.test.tsx
+*.spec.ts
+*.spec.tsx
+
+# Documentation
+README.md
+*.md
+
+# Misc
+*.log
+.eslintcache
+.prettierignore

.env.local.example

@@ -0,0 +1,47 @@
+# ColaFlow Frontend Environment Variables Template
+# Copy this file to .env.local and modify the values as needed
+
+# ============================================
+# Backend API Configuration
+# ============================================
+NEXT_PUBLIC_API_URL=http://localhost:5000
+
+# SignalR Hub Configuration
+NEXT_PUBLIC_SIGNALR_HUB_URL=http://localhost:5000/hubs/notifications
+NEXT_PUBLIC_WS_URL=ws://localhost:5000/hubs/project
+
+# Internal API URL (for server-side calls in Docker)
+API_URL=http://backend:8080
+
+# ============================================
+# Application Configuration
+# ============================================
+NEXT_PUBLIC_APP_NAME=ColaFlow
+NEXT_PUBLIC_APP_DESCRIPTION=AI-powered project management system with MCP integration
+
+# ============================================
+# Feature Flags
+# ============================================
+# Enable analytics tracking
+NEXT_PUBLIC_ENABLE_ANALYTICS=false
+
+# Enable debug mode (shows additional logging)
+NEXT_PUBLIC_ENABLE_DEBUG=true
+
+# ============================================
+# Development Configuration (Optional)
+# ============================================
+# Port for Next.js dev server
+# PORT=3000
+
+# Node environment
+# NODE_ENV=development
+
+# ============================================
+# Production Configuration (Optional)
+# ============================================
+# NEXT_PUBLIC_API_URL=https://api.colaflow.com
+# NEXT_PUBLIC_SIGNALR_HUB_URL=https://api.colaflow.com/hubs/notifications
+# NEXT_PUBLIC_WS_URL=wss://api.colaflow.com/hubs/project
+# NEXT_PUBLIC_ENABLE_ANALYTICS=true
+# NEXT_PUBLIC_ENABLE_DEBUG=false

Dockerfile

@@ -0,0 +1,88 @@
+# ============================================
+# Stage 1: Dependencies Installation
+# ============================================
+FROM node:20-alpine AS deps
+WORKDIR /app
+
+# Install libc6-compat for compatibility
+RUN apk add --no-cache libc6-compat
+
+# Copy dependency files
+COPY package.json package-lock.json* ./
+
+# Install dependencies with legacy peer deps flag for Next.js 16
+RUN npm ci --legacy-peer-deps
+
+# ============================================
+# Stage 2: Build Stage
+# ============================================
+FROM node:20-alpine AS builder
+WORKDIR /app
+
+# Copy dependencies from deps stage
+COPY --from=deps /app/node_modules ./node_modules
+
+# Copy all source files
+COPY . .
+
+# Disable Next.js telemetry
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# Build the application
+RUN npm run build
+
+# ============================================
+# Stage 3: Development Environment (Default)
+# ============================================
+FROM node:20-alpine AS development
+WORKDIR /app
+
+# Set environment variables
+ENV NODE_ENV=development
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# Install libc6-compat for compatibility
+RUN apk add --no-cache libc6-compat curl
+
+# Copy dependencies from deps stage
+COPY --from=deps /app/node_modules ./node_modules
+
+# Copy source code (will be overridden by volume mount in docker-compose)
+COPY . .
+
+# Expose Next.js default port
+EXPOSE 3000
+
+# Use turbo mode for faster development
+CMD ["npm", "run", "dev"]
+
+# ============================================
+# Stage 4: Production Environment
+# ============================================
+FROM node:20-alpine AS production
+WORKDIR /app
+
+# Set environment variables
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# Install libc6-compat
+RUN apk add --no-cache libc6-compat
+
+# Create non-privileged user for security
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 nextjs
+
+# Copy build artifacts from builder stage
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
+
+# Switch to non-privileged user
+USER nextjs
+
+# Expose port
+EXPOSE 3000
+
+# Start the standalone server
+CMD ["node", "server.js"]

next.config.ts

@@ -1,6 +1,9 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  // Enable standalone output for production Docker builds
+  output: 'standalone',
+
   /* config options here */
 };
 

package.json

@@ -7,7 +7,19 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint",
-    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,md}\""
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "docker:dev": "docker-compose up -d postgres redis backend",
+    "docker:all": "docker-compose up -d",
+    "docker:stop": "docker-compose down",
+    "docker:logs": "docker-compose logs -f frontend",
+    "docker:logs:backend": "docker-compose logs -f backend",
+    "docker:logs:all": "docker-compose logs -f",
+    "docker:restart": "docker-compose restart frontend",
+    "docker:restart:backend": "docker-compose restart backend",
+    "docker:clean": "docker-compose down -v && docker-compose up -d --build",
+    "docker:status": "docker-compose ps",
+    "docker:build": "docker build --target development -t colaflow-frontend:dev .",
+    "docker:build:prod": "docker build --target production -t colaflow-frontend:prod ."
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",