Sprint #3 PR

README.md

@@ -3,9 +3,6 @@
 **Pixel to Pattern** turns your pixel art into beautiful, beginner friendly crochet patterns stitch by stitch, row by row.  
 Let the creativity flow!
 
-
-
-
 ## 🧶 Features
 
 ### Create  
@@ -25,8 +22,15 @@ Users will soon be able to edit their own patterns directly.
 ### Delete  
 Remove any pattern you’ve posted with one click.
 
+### Export to PDF  
+Download a printable crochet pattern PDF including:
 
+- Pattern title
+- Author & date
+- Description
+- Pixel color rows (stitch instructions)
 
+Great for crocheting offline
 
 ## ⚙️ Local Setup
 
@@ -49,18 +53,12 @@ Follow these steps to run **Pixel to Pattern** locally:
 6. Open your browser at http://localhost:3000
 7. 🎨 Get creative!
 
-
-
-
 ## Tech Stack
 - **Frontend:** NextJs, MaterialUI
 - **Backend:** Node.js, Express
 - **Database:** MySQL database with Sequelize used on the backend.
 - **Version:** Node 24+
 
-
-
-
 ## Environment Variables
 
 This project utilizes environment variables for configuration. You need to create a `db.env` file in the root directory based on the provided variable examples listed below.
@@ -79,4 +77,106 @@ Restart your development server if it's already running (e.g., npm start).
 
 ## Deployment Process
 Linked below is the documentation that was created while setting up the virtual machine for deployment.
-[Click Here!](https://loving-eye-8b5.notion.site/VM-Deployment-27e101a39e1480328574fee619f042d8)
+[Click Here!](https://loving-eye-8b5.notion.site/VM-Deployment-27e101a39e1480328574fee619f042d8)
+
+
+---
+
+## 🐳 Docker Setup
+
+```bash
+# Build containers
+docker compose build
+
+# Run containers
+docker compose up -d
+
+# Stop containers
+docker compose down
+
+# View logs
+docker compose logs -f
+```
+
+After running these commands, visit:
+
+- Frontend: [http://localhost:3000](http://localhost:3000)  
+- Backend: [http://localhost:3001/patterns](http://localhost:3001/patterns)
+
+---
+
+## 🐳 VM Deployment
+
+```bash
+ssh root@<VM_IP>
+git clone https://github.com/your-username/pixel-to-pattern.git
+cd pixel-to-pattern
+docker compose up -d
+```
+
+Once the containers are up, the application will be accessible at:
+```
+http://<VM_IP>:3000
+```
+
+---
+
+## 🌿 Environment Variables for Docker
+
+These variables are used in the `docker-compose.yml` or `.env` file:
+
+```
+DB_USER=your_user
+DB_PASSWORD=your_password
+DB_HOST=db
+DB_DATABASE=pixel_to_pattern
+DB_PORT=3306
+```
+
+✅ **Note:**  
+- `DB_HOST=db` is used so the backend connects to the MySQL container through the Docker network.  
+- Make sure these match your database credentials.
+
+---
+
+## 💾 Volume Persistence
+
+A Docker volume is configured to persist the database data:
+```yaml
+volumes:
+  db_data:
+```
+
+This ensures that your MySQL data is **not lost** when containers stop or restart.
+
+To list volumes:
+```bash
+docker volume ls
+```
+
+To inspect:
+```bash
+docker volume inspect pixel-to-pattern_db_data
+```
+
+
+---
+
+## 🧰 Troubleshooting
+
+| Command                                | Purpose                                    |
+|-----------------------------------------|--------------------------------------------|
+| `docker compose logs -f`               | View live logs of all services             |
+| `docker logs <container_name>`         | View logs for a specific container         |
+| `docker exec -it <container_name> sh`  | Open a shell inside a running container   |
+| `docker ps`                            | Check running containers                   |
+| `docker system prune -a`               | Clean up unused images and containers ⚠️   |
+| `docker compose down -v`              | Stop and remove containers **and volumes** (careful) |
+
+If something isn’t working:
+- Ensure ports **3000** (frontend) and **3001** (backend) are open.
+- Check logs for DB connection issues.
+- Rebuild images if code changes:
+  ```bash
+  docker compose up --build -d
+  ```

deploy.sh

@@ -0,0 +1,48 @@
+#!/bin/bash
+set -e
+
+echo "Starting Pixel-to-Pattern deployment..."
+
+# System update
+sudo apt update && sudo apt upgrade -y
+
+# Install Git if missing
+if ! command -v git &> /dev/null
+then
+    echo "Installing Git..."
+    sudo apt install -y git
+fi
+
+# Install Docker
+if ! command -v docker &> /dev/null
+then
+    echo "Installing Docker..."
+    curl -fsSL https://get.docker.com | sh
+fi
+
+# Install Docker Compose plugin
+if ! command -v docker compose &> /dev/null
+then
+    echo "Installing Docker Compose..."
+    sudo apt install -y docker-compose-plugin
+fi
+
+# Clone repo if not exists
+if [ ! -d "pixel-to-pattern" ]; then
+  echo "Cloning repository..."
+  git clone https://github.com/<your-username>/pixel-to-pattern.git
+fi
+
+cd pixel-to-pattern
+
+echo "Pulling latest updates..."
+git pull origin main
+
+echo "Building containers..."
+docker compose build
+
+echo "Starting services..."
+docker compose up -d
+
+echo "Deployment complete!"
+echo "App running at: http://<YOUR_VM_IP>:3000"

docker-compose.yml

@@ -0,0 +1,45 @@
+version: '3.9'
+
+services:
+  frontend:
+    build: ./pixel2pattern
+    container_name: pixel_frontend
+    restart: always
+    ports:
+      - "3000:3000"
+    environment:
+      - NEXT_PUBLIC_API_URL=http://143.198.63.60:3001
+    depends_on:
+      - backend
+
+  backend:
+    build: ./server
+    container_name: pixel_backend
+    restart: always
+    ports:
+      - "3001:3001"
+    environment:
+      - DB_USER=pixel_user
+      - DB_PASSWORD=PixelPattern123!
+      - DB_HOST=db
+      - DB_DATABASE=pixel_to_pattern
+      - DB_PORT=3306
+    depends_on:
+      - db
+
+  db:
+    image: mysql:8
+    container_name: pixel_db
+    restart: always
+    environment:
+      MYSQL_ROOT_PASSWORD: Xyz123!abcd
+      MYSQL_DATABASE: pixel_to_pattern
+      MYSQL_USER: pixel_user
+      MYSQL_PASSWORD: PixelPattern123!
+    ports:
+      - "3307:3306"
+    volumes:
+      - db_data:/var/lib/mysql
+
+volumes:
+  db_data:

pixel2pattern/dockerfile

@@ -0,0 +1,12 @@
+# pixel2pattern/Dockerfile
+FROM node:18-alpine as build
+
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# Serve build using Next.js built-in server
+EXPOSE 3000
+CMD ["npm", "start"]