From 84fe79b37b4f154fa0758f8d037cdba0d166dd3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elisi=C3=A1rio=20Couto?= <elisiario@couto.io>
Date: Wed, 10 Sep 2025 00:53:49 +0100
Subject: [PATCH] feat(docker): Add Docker containerization for React frontend

- Add production compose.yml using published ghcr.io images
- Rename compose.yml to compose.dev.yml for development
- Create config.example.toml configuration template
- Update README.md with Docker setup instructions
- Use ./data directory for configuration and database storage
- Separate development and production Docker workflows
---
 README.md           | 52 ++++++++++++++++++++++++++++++++++++++++-----
 compose.dev.yml     | 25 ++++++++++++++++++++++
 compose.yml         | 12 +++--------
 config.example.toml | 30 ++++++++++++++++++++++++++
 4 files changed, 105 insertions(+), 14 deletions(-)
 create mode 100644 compose.dev.yml
 create mode 100644 config.example.toml

diff --git a/README.md b/README.md
index 39f68d5..01573bc 100644
--- a/README.md
+++ b/README.md
@@ -64,8 +64,8 @@ git clone https://github.com/elisiariocouto/leggen.git
 cd leggen
 
 # Create your configuration
-mkdir -p leggen && cp config.example.toml leggen/config.toml
-# Edit leggen/config.toml with your GoCardless credentials
+mkdir -p data && cp config.example.toml data/config.toml
+# Edit data/config.toml with your GoCardless credentials
 
 # Start all services (frontend + backend)
 docker compose up -d
@@ -74,6 +74,31 @@ docker compose up -d
 # API is available at http://localhost:8000
 ```
 
+#### Production Deployment
+
+For production deployment using published Docker images:
+
+```bash
+# Clone the repository
+git clone https://github.com/elisiariocouto/leggen.git
+cd leggen
+
+# Create your configuration
+mkdir -p data && cp config.example.toml data/config.toml
+# Edit data/config.toml with your GoCardless credentials
+
+# Start production services
+docker compose up -d
+
+# Access the web interface at http://localhost:3000
+# API is available at http://localhost:8000
+```
+
+### Development vs Production
+
+- **Development**: Use `docker compose -f compose.dev.yml up -d` (builds from source)
+- **Production**: Use `docker compose up -d` (uses published images)
+
 #### Option 2: Local Development
 For development or local installation:
 
@@ -90,7 +115,7 @@ uv run leggen --help
 
 ### Configuration
 
-Create a configuration file at `~/.config/leggen/config.toml`:
+Create a configuration file at `./data/config.toml` (for Docker) or `~/.config/leggen/config.toml` (for local development):
 
 ```toml
 [gocardless]
@@ -188,8 +213,25 @@ leggen status
 
 ### Docker Usage
 
+#### Development (build from source)
 ```bash
-# Start all services (frontend + backend)
+# Start development services
+docker compose -f compose.dev.yml up -d
+
+# View service status
+docker compose -f compose.dev.yml ps
+
+# Check logs
+docker compose -f compose.dev.yml logs frontend
+docker compose -f compose.dev.yml logs leggend
+
+# Stop development services
+docker compose -f compose.dev.yml down
+```
+
+#### Production (use published images)
+```bash
+# Start production services
 docker compose up -d
 
 # View service status
@@ -202,7 +244,7 @@ docker compose logs leggend
 # Access the web interface at http://localhost:3000
 # API documentation at http://localhost:8000/docs
 
-# Stop all services
+# Stop production services
 docker compose down
 ```
 
diff --git a/compose.dev.yml b/compose.dev.yml
new file mode 100644
index 0000000..ff7fd05
--- /dev/null
+++ b/compose.dev.yml
@@ -0,0 +1,25 @@
+services:
+  # React frontend service
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    restart: "unless-stopped"
+    ports:
+      - "127.0.0.1:3000:80"
+    environment:
+      - API_BACKEND_URL=${API_BACKEND_URL:-http://leggend:8000}
+    depends_on:
+      leggend:
+        condition: service_healthy
+
+  # FastAPI backend service
+  leggend:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    restart: "unless-stopped"
+    ports:
+      - "127.0.0.1:8000:8000"
+    volumes:
+      - "./data:/root/.config/leggen"
diff --git a/compose.yml b/compose.yml
index ff7fd05..d55fba3 100644
--- a/compose.yml
+++ b/compose.yml
@@ -1,25 +1,19 @@
 services:
   # React frontend service
   frontend:
-    build:
-      context: ./frontend
-      dockerfile: Dockerfile
+    image: ghcr.io/elisiariocouto/leggen:latest-frontend
     restart: "unless-stopped"
     ports:
       - "127.0.0.1:3000:80"
-    environment:
-      - API_BACKEND_URL=${API_BACKEND_URL:-http://leggend:8000}
     depends_on:
       leggend:
         condition: service_healthy
 
   # FastAPI backend service
   leggend:
-    build:
-      context: .
-      dockerfile: Dockerfile
+    image: ghcr.io/elisiariocouto/leggen:latest
     restart: "unless-stopped"
     ports:
       - "127.0.0.1:8000:8000"
     volumes:
-      - "./data:/root/.config/leggen"
+      - "./data:/root/.config/leggen"  # Configuration and database directory
diff --git a/config.example.toml b/config.example.toml
new file mode 100644
index 0000000..26926a3
--- /dev/null
+++ b/config.example.toml
@@ -0,0 +1,30 @@
+[gocardless]
+key = "your-api-key"
+secret = "your-secret-key"
+url = "https://bankaccountdata.gocardless.com/api/v2"
+
+[database]
+sqlite = true
+
+# Optional: Background sync scheduling
+[scheduler.sync]
+enabled = true
+hour = 3      # 3 AM
+minute = 0
+# cron = "0 3 * * *"  # Alternative: use cron expression
+
+# Optional: Discord notifications
+[notifications.discord]
+webhook = "https://discord.com/api/webhooks/..."
+enabled = true
+
+# Optional: Telegram notifications
+[notifications.telegram]
+token = "your-bot-token"
+chat_id = 12345
+enabled = true
+
+# Optional: Transaction filters for notifications
+[filters]
+case-insensitive = ["salary", "utility"]
+case-sensitive = ["SpecificStore"]