feat: Add complete Dockerization for the application, including deployment documentation and Nginx configuration.

DEPLOY.md

@@ -0,0 +1,97 @@
+# Deployment Instructions for AWS EC2
+
+This guide will help you deploy the **WonderSheets** application to your EC2 instance using Docker.
+
+## Prerequisites
+
+1.  **AWS EC2 Instance**: A running instance (e.g., Amazon Linux 2 or Ubuntu).
+2.  **Security Group Rules**: Ensure your EC2 Security Group allows:
+    - **Inbound HTTP (Port 80)**: For the web interface.
+    - **Inbound SSH (Port 22)**: For you to connect.
+3.  **API Key**: Your Google Gemini API Key.
+
+## Step 1: Connect to your EC2 Instance
+
+Open your terminal and SSH into your server:
+
+```bash
+ssh -i /path/to/your-key.pem user@your-ec2-public-ip
+```
+
+## Step 2: Install Docker and Docker Compose (if not installed)
+
+**For Amazon Linux 2023 / Amazon Linux 2:**
+
+```bash
+sudo yum update -y
+sudo yum install -y docker
+sudo service docker start
+sudo usermod -a -G docker ec2-user
+# Logout and log back in to apply group changes
+exit
+# ssh again...
+```
+
+**Install Docker Compose:**
+
+```bash
+sudo curl -L https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m) -o /usr/local/bin/docker-compose
+sudo chmod +x /usr/local/bin/docker-compose
+```
+
+*(If you are using Ubuntu, use `sudo apt update && sudo apt install docker.io docker-compose -y`)*
+
+## Step 3: Get the Code
+
+You can either clone the repository or upload your files.
+
+**Option A: Git Clone (Recommended)**
+If your code is on Gitea/GitHub:
+
+```bash
+git clone <your-repo-url>
+cd wondersheets
+```
+
+**Option B: Upload Files**
+If you want to copy local files:
+```bash
+scp -i /path/to/key.pem -r . user@your-ec2-ip:~/wondersheets
+```
+
+## Step 4: Configure Environment
+
+Create a `.env` file in the project directory:
+
+```bash
+nano .env
+```
+
+Paste your API key:
+```
+GEMINI_API_KEY=your_actual_api_key_here
+```
+Save and exit (`Ctrl+O`, `Enter`, `Ctrl+X`).
+
+## Step 5: Start the Application
+
+Run the application in the background:
+
+```bash
+docker-compose up -d --build
+```
+
+## Step 6: Verify
+
+Open your browser and visit your EC2 Public IP:
+`http://your-ec2-public-ip/`
+
+The app should be running!
+
+---
+
+### Troubleshooting
+
+- **Check logs**: `docker-compose logs -f`
+- **Restart**: `docker-compose restart`
+- **Stop**: `docker-compose down`

Dockerfile.backend

@@ -0,0 +1,20 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Copy package files first for better caching
+COPY package*.json ./
+
+# Install only production dependencies
+# Note: if your server needs devDependencies (like babel-node), remove --production
+RUN npm install
+
+# Copy server source code
+COPY server ./server
+COPY .env ./
+
+# Expose the API port
+EXPOSE 3001
+
+# Start the server
+CMD ["node", "server/index.js"]

Dockerfile.frontend

@@ -0,0 +1,23 @@
+# Build Stage
+FROM node:20-alpine AS build
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+RUN npm run build
+
+# Production Stage
+FROM nginx:alpine
+
+# Copy built assets from builder
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# Copy nginx config
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

docker-compose.yml

@@ -0,0 +1,24 @@
+version: '3.8'
+
+services:
+  backend:
+    build:
+      context: .
+      dockerfile: Dockerfile.backend
+    ports:
+      - "3001:3001"
+    environment:
+      - PORT=3001
+      # Ensure GEMINI_API_KEY is passed from the host .env file
+      - GEMINI_API_KEY=${GEMINI_API_KEY}
+    restart: always
+
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile.frontend
+    ports:
+      - "80:80"
+    depends_on:
+      - backend
+    restart: always

nginx.conf

@@ -0,0 +1,23 @@
+server {
+    listen 80;
+    
+    server_name localhost;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Serve the frontend
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Proxy API requests to the backend
+    location /api/ {
+        proxy_pass http://backend:3001;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+}

server/index.js

@@ -72,7 +72,7 @@ MANDATORY STYLE & QUALITY RULES — MUST FOLLOW EXACTLY:
 - Every visible element MUST be FULLY CLOSED paths (use Z/z to close <path>, or <circle>/<ellipse>/<polygon>/<rect>). NO open paths, NO <line>, NO <polyline> unless closed, NO stroke-only lines without enclosed fill regions.
 - Forbidden forever: blobs, distorted/wrong anatomy (e.g. elephant with pigtails, sheep with leaf legs), floating disconnected lines/parts, random dots/scribbles/noise/artifacts, self-intersecting paths making uncolorable slivers, cut-off/incomplete shapes, inconsistent stroke widths, tiny details, fill="none" on main objects (except holes), any greyscale/shading.
 - Stroke: #000000 solid (no dasharray except for traceable writing). Fill: #ffffff on all colorable regions.
-- ViewBox: exactly '0 0 500 500'. Center content with 50–100px margins on all sides. No touching edges.
+- ViewBox: exactly '0 0 500 500'. MAXIMIZE PAGE USAGE. Use the full 500x500 canvas with MINIMAL margins (10-20px). Make the main subject FILL the available space.
 - Attributes: single quotes ' only for all XML.
 - SVG: complete valid XML — <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'> ... </svg>. Use smooth curves (C, Q, S) for natural shapes. 8–20 large closed regions for coloring fun.
 - High-quality kid style: bold thick outlines, big simple shapes, cute friendly expressions (big round eyes as circles/ovals, smiling curved mouth), balanced proportions (big head for cuteness), no complexity/noise.