cms fix

The database config had an incorrect nested structure with
connection.client.connection which caused Strapi to fail with
'Cannot destructure property client of db.config.connection'.

Fixed to use the correct flat structure:
connection.client, connection.host, etc.

backend/Dockerfile

@@ -6,11 +6,10 @@ FROM node:20-alpine AS builder
 WORKDIR /app
 
 # Copy package files
-COPY package*.json ./
-COPY package-lock.json* ./
+COPY package.json package-lock.json* ./
 
-# Install dependencies
-RUN npm ci --only=production
+# Install ALL dependencies (including devDependencies for build)
+RUN npm install --legacy-peer-deps
 
 # Copy source code
 COPY . .
@@ -18,6 +17,9 @@ COPY . .
 # Build TypeScript
 RUN npm run build
 
+# Prune devDependencies after build (suppress warning)
+RUN npm prune --omit=dev
+
 # Production stage
 FROM node:20-alpine
 
@@ -32,9 +34,6 @@ COPY --from=builder --chown=nodejs:nodejs /app/dist ./dist
 COPY --from=builder --chown=nodejs:nodejs /app/node_modules ./node_modules
 COPY --from=builder --chown=nodejs:nodejs /app/package*.json ./
 
-# Copy environment configuration
-COPY --chown=nodejs:nodejs .env.example .env
-
 # Switch to non-root user
 USER nodejs
 
@@ -46,4 +45,4 @@ HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
 EXPOSE 3000
 
 # Start application
-CMD ["node", "dist/main.js"]
+CMD ["node", "dist/src/main.js"]

backend/src/app.controller.ts

@@ -1,5 +1,6 @@
 import { Controller, Get } from '@nestjs/common';
 import { AppService } from './app.service';
+import { Public } from './modules/auth/public.decorator';
 
 @Controller()
 export class AppController {
@@ -9,4 +10,13 @@ export class AppController {
   getHello(): string {
     return this.appService.getHello();
   }
+
+  @Public()
+  @Get('health')
+  healthCheck(): { status: string; timestamp: string } {
+    return {
+      status: 'ok',
+      timestamp: new Date().toISOString(),
+    };
+  }
 }

backend/src/modules/push/push.controller.ts

@@ -30,12 +30,6 @@ export class PushController {
   @Post('subscribe')
   @HttpCode(HttpStatus.CREATED)
   async subscribe(@Body() dto: SubscribeDto): Promise<{ success: boolean }> {
-    console.log('Received push subscription:', {
-      endpoint: dto.endpoint?.substring(0, 50) + '...',
-      hasP256dh: !!dto.p256dh,
-      hasAuth: !!dto.auth,
-      userId: dto.userId,
-    });
     await this.pushService.subscribe(dto);
     return { success: true };
   }

backend/src/modules/push/push.service.ts

@@ -49,15 +49,11 @@ export class PushService implements OnModuleInit {
   }
 
   async subscribe(dto: SubscribeDto): Promise<PushSubscriptionEntity> {
-    this.logger.log('Subscribing push notification...');
-    this.logger.debug(`Endpoint: ${dto.endpoint?.substring(0, 50)}...`);
-
     const existing = await this.subscriptionRepo.findOne({
       where: { endpoint: dto.endpoint },
     });
 
     if (existing) {
-      this.logger.log('Subscription already exists, updating...');
       if (dto.userId && existing.userId !== dto.userId) {
         existing.userId = dto.userId;
         return this.subscriptionRepo.save(existing);
@@ -65,7 +61,6 @@ export class PushService implements OnModuleInit {
       return existing;
     }
 
-    this.logger.log('Creating new subscription...');
     const subscription = this.subscriptionRepo.create({
       endpoint: dto.endpoint,
       p256dh: dto.p256dh,
@@ -73,9 +68,7 @@ export class PushService implements OnModuleInit {
       userId: dto.userId ?? null,
     });
 
-    const saved = await this.subscriptionRepo.save(subscription);
-    this.logger.log(`Subscription saved with ID: ${saved.id}`);
-    return saved;
+    return this.subscriptionRepo.save(subscription);
   }
 
   async unsubscribe(dto: UnsubscribeDto): Promise<void> {

cms/cms/.env

@@ -0,0 +1,20 @@
+
+# Server
+HOST=0.0.0.0
+PORT=1337
+
+# Secrets (these should be overridden by docker env vars)
+APP_KEYS=tobereplaced
+API_TOKEN_SALT=tobereplaced
+ADMIN_JWT_SECRET=tobereplaced
+TRANSFER_TOKEN_SALT=tobereplaced
+JWT_SECRET=tobereplaced
+
+# Database (these MUST be overridden by docker env vars)
+DATABASE_CLIENT=postgres
+DATABASE_HOST=postgres-cms
+DATABASE_PORT=5432
+DATABASE_NAME=placebo_cms_db
+DATABASE_USERNAME=placebo_user
+DATABASE_PASSWORD=placebo_pass
+DATABASE_SSL=false

cms/cms/Dockerfile

@@ -6,11 +6,10 @@ FROM node:20-alpine AS builder
 WORKDIR /app
 
 # Copy package files
-COPY package*.json ./
-COPY package-lock.json* ./
+COPY package.json package-lock.json* ./
 
 # Install dependencies
-RUN npm ci --only=production
+RUN npm install --legacy-peer-deps
 
 # Copy source code
 COPY . .
@@ -18,6 +17,9 @@ COPY . .
 # Build Strapi
 RUN npm run build
 
+# Prune devDependencies after build (suppress warning)
+RUN npm prune --omit=dev
+
 # Production stage
 FROM node:20-alpine
 
@@ -27,31 +29,27 @@ WORKDIR /app
 RUN addgroup -g 1001 -S nodejs && \
     adduser -S nodejs -u 1001
 
-# Install SQLite for development (will use PostgreSQL in production)
-RUN apk add --no-cache sqlite
-
 # Copy built application from builder stage
 COPY --from=builder --chown=nodejs:nodejs /app/dist ./dist
+COPY --from=builder --chown=nodejs:nodejs /app/dist/config ./config
 COPY --from=builder --chown=nodejs:nodejs /app/public ./public
+COPY --from=builder --chown=nodejs:nodejs /app/favicon.png ./favicon.png
 COPY --from=builder --chown=nodejs:nodejs /app/node_modules ./node_modules
 COPY --from=builder --chown=nodejs:nodejs /app/package*.json ./
 
-# Copy environment configuration
-COPY --chown=nodejs:nodejs .env.example .env
-
-# Create data directory for SQLite
-RUN mkdir -p /app/.tmp && \
-    chown -R nodejs:nodejs /app/.tmp
+# Create data and database directories with proper permissions
+RUN mkdir -p /app/.tmp /app/database /app/uploads /app/database/migrations && \
+    chown -R nodejs:nodejs /app
 
 # Switch to non-root user
 USER nodejs
 
 # Health check
-HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
-  CMD node -e "require('http').get('http://localhost:1337/_health', (r) => {if(r.statusCode !== 200) throw new Error()})"
+HEALTHCHECK --interval=30s --timeout=3s --start-period=60s --retries=3 \
+  CMD node -e "require('http').get('http://localhost:1337/_health', (r) => {if(r.statusCode !== 200) process.exit(1)})"
 
 # Expose port
 EXPOSE 1337
 
 # Start Strapi
-CMD ["npm", "run", "start"]
+CMD ["npm", "run", "start"]

cms/cms/config/database.ts

@@ -3,58 +3,31 @@ import path from 'path';
 export default ({ env }) => {
   const client = env('DATABASE_CLIENT', 'sqlite');
 
-  const connections = {
-    mysql: {
+  console.log('DATABASE_CLIENT:', client);
+  console.log('DATABASE_HOST:', env('DATABASE_HOST', 'not-set'));
+  console.log('DATABASE_USERNAME:', env('DATABASE_USERNAME', 'not-set'));
+  console.log('DATABASE_NAME:', env('DATABASE_NAME', 'not-set'));
+
+  if (client === 'postgres') {
+    return {
       connection: {
-        host: env('DATABASE_HOST', 'localhost'),
-        port: env.int('DATABASE_PORT', 3306),
-        database: env('DATABASE_NAME', 'strapi'),
-        user: env('DATABASE_USERNAME', 'strapi'),
-        password: env('DATABASE_PASSWORD', 'strapi'),
-        ssl: env.bool('DATABASE_SSL', false) && {
-          key: env('DATABASE_SSL_KEY', undefined),
-          cert: env('DATABASE_SSL_CERT', undefined),
-          ca: env('DATABASE_SSL_CA', undefined),
-          capath: env('DATABASE_SSL_CAPATH', undefined),
-          cipher: env('DATABASE_SSL_CIPHER', undefined),
-          rejectUnauthorized: env.bool('DATABASE_SSL_REJECT_UNAUTHORIZED', true),
-        },
-      },
-      pool: { min: env.int('DATABASE_POOL_MIN', 2), max: env.int('DATABASE_POOL_MAX', 10) },
-    },
-    postgres: {
-      connection: {
-        connectionString: env('DATABASE_URL'),
+        client: 'postgres',
         host: env('DATABASE_HOST', 'localhost'),
         port: env.int('DATABASE_PORT', 5432),
         database: env('DATABASE_NAME', 'strapi'),
         user: env('DATABASE_USERNAME', 'strapi'),
         password: env('DATABASE_PASSWORD', 'strapi'),
-        ssl: env.bool('DATABASE_SSL', false) && {
-          key: env('DATABASE_SSL_KEY', undefined),
-          cert: env('DATABASE_SSL_CERT', undefined),
-          ca: env('DATABASE_SSL_CA', undefined),
-          capath: env('DATABASE_SSL_CAPATH', undefined),
-          cipher: env('DATABASE_SSL_CIPHER', undefined),
-          rejectUnauthorized: env.bool('DATABASE_SSL_REJECT_UNAUTHORIZED', true),
-        },
-        schema: env('DATABASE_SCHEMA', 'public'),
+        ssl: env.bool('DATABASE_SSL', false),
+        pool: { min: 2, max: 10 },
       },
-      pool: { min: env.int('DATABASE_POOL_MIN', 2), max: env.int('DATABASE_POOL_MAX', 10) },
-    },
-    sqlite: {
-      connection: {
-        filename: path.join(__dirname, '..', '..', env('DATABASE_FILENAME', '.tmp/data.db')),
-      },
-      useNullAsDefault: true,
-    },
-  };
+    };
+  }
 
   return {
     connection: {
-      client,
-      ...connections[client],
-      acquireConnectionTimeout: env.int('DATABASE_CONNECTION_TIMEOUT', 60000),
+      client: 'sqlite',
+      filename: path.join(__dirname, '..', '..', env('DATABASE_FILENAME', '.tmp/data.db')),
+      useNullAsDefault: true,
     },
   };
 };

docker-compose.coolify.yml

@@ -0,0 +1,268 @@
+# Docker Compose for Coolify Deployment
+# Deploy all services in one run
+#
+# Usage in Coolify:
+# 1. Create new Docker Compose service
+# 2. Point to this file
+# 3. Set environment variables in Coolify UI
+# 4. Deploy
+
+services:
+  # ===========================================
+  # DATABASES
+  # ===========================================
+
+  postgres-backend:
+    image: postgres:16-alpine
+    container_name: placebo-postgres-backend
+    restart: unless-stopped
+    environment:
+      POSTGRES_DB: placebo_backend_db
+      POSTGRES_USER: placebo_user
+      POSTGRES_PASSWORD: ${DATABASE_PASSWORD}
+    volumes:
+      - placebo-postgres-backend-data:/var/lib/postgresql/data
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready']
+      interval: 5s
+      timeout: 5s
+      retries: 10
+      start_period: 30s
+    networks:
+      - placebo-internal
+
+  postgres-cms:
+    image: postgres:16-alpine
+    container_name: placebo-postgres-cms
+    restart: unless-stopped
+    environment:
+      POSTGRES_DB: placebo_cms_db
+      POSTGRES_USER: placebo_user
+      POSTGRES_PASSWORD: ${DATABASE_PASSWORD}
+    volumes:
+      - placebo-postgres-cms-data:/var/lib/postgresql/data
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready']
+      interval: 5s
+      timeout: 5s
+      retries: 10
+      start_period: 30s
+    networks:
+      - placebo-internal
+
+  # ===========================================
+  # BACKEND (NestJS API)
+  # ===========================================
+
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    container_name: placebo-backend
+    restart: unless-stopped
+    environment:
+      NODE_ENV: production
+      PORT: 3000
+      DATABASE_TYPE: postgres
+      DATABASE_HOST: postgres-backend
+      DATABASE_PORT: 5432
+      DATABASE_USERNAME: placebo_user
+      DATABASE_PASSWORD: ${DATABASE_PASSWORD}
+      DATABASE_NAME: placebo_backend_db
+      DATABASE_SYNCHRONIZE: 'false'
+      DATABASE_LOGGING: 'false'
+      JWT_SECRET: ${JWT_SECRET}
+      JWT_EXPIRATION: '86400'
+      CORS_ORIGIN: https://placebo.mk,https://www.placebo.mk,https://app.placebo.mk
+      STRAPI_URL: http://cms:1337
+      STRAPI_API_TOKEN: ${STRAPI_API_TOKEN}
+      VAPID_SUBJECT: ${VAPID_SUBJECT:-mailto:contact@placebo.mk}
+      VAPID_PUBLIC_KEY: ${VAPID_PUBLIC_KEY}
+      VAPID_PRIVATE_KEY: ${VAPID_PRIVATE_KEY}
+    depends_on:
+      postgres-backend:
+        condition: service_healthy
+    healthcheck:
+      test: ['CMD', 'node', '-e', "require('http').get('http://127.0.0.1:3000/api/v1/health', (r) => {if(r.statusCode !== 200) process.exit(1)})"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+    networks:
+      - placebo-internal
+      - coolify
+    expose:
+      - "3000"
+    labels:
+      - "traefik.enable=true"
+      # HTTP router (for Let's Encrypt challenge and redirect)
+      - "traefik.http.routers.backend-http.rule=Host(`api.placebo.mk`)"
+      - "traefik.http.routers.backend-http.entrypoints=http"
+      - "traefik.http.routers.backend-http.middlewares=redirect-to-https"
+      # HTTPS router
+      - "traefik.http.routers.backend.rule=Host(`api.placebo.mk`)"
+      - "traefik.http.routers.backend.entrypoints=https"
+      - "traefik.http.routers.backend.tls=true"
+      - "traefik.http.routers.backend.tls.certresolver=letsencrypt"
+      # Service
+      - "traefik.http.services.backend.loadbalancer.server.port=3000"
+      # Redirect middleware
+      - "traefik.http.middlewares.redirect-to-https.redirectscheme.scheme=https"
+      - "traefik.http.middlewares.redirect-to-https.redirectscheme.permanent=true"
+
+  # ===========================================
+  # CMS (Strapi)
+  # ===========================================
+
+  cms:
+    build:
+      context: ./cms/cms
+      dockerfile: Dockerfile
+    container_name: placebo-cms
+    restart: unless-stopped
+    environment:
+      NODE_ENV: production
+      HOST: 0.0.0.0
+      PORT: 1337
+      DATABASE_CLIENT: postgres
+      DATABASE_HOST: postgres-cms
+      DATABASE_PORT: '5432'
+      DATABASE_NAME: placebo_cms_db
+      DATABASE_USERNAME: placebo_user
+      DATABASE_PASSWORD: ${DATABASE_PASSWORD}
+      DATABASE_SSL: 'false'
+      APP_KEYS: ${STRAPI_APP_KEYS}
+      API_TOKEN_SALT: ${STRAPI_API_TOKEN_SALT}
+      ADMIN_JWT_SECRET: ${STRAPI_ADMIN_JWT_SECRET}
+      TRANSFER_TOKEN_SALT: ${STRAPI_TRANSFER_TOKEN_SALT}
+      JWT_SECRET: ${STRAPI_JWT_SECRET}
+      ENCRYPTION_KEY: ${STRAPI_ENCRYPTION_KEY}
+    depends_on:
+      postgres-cms:
+        condition: service_healthy
+    volumes:
+      - placebo-cms-uploads:/app/public/uploads
+    healthcheck:
+      test: ['CMD', 'node', '-e', "require('http').get('http://127.0.0.1:1337/_health', (r) => {if(r.statusCode === 200 || r.statusCode === 204) process.exit(0); process.exit(1)})"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 60s
+    networks:
+      - placebo-internal
+      - coolify
+    expose:
+      - "1337"
+    labels:
+      - "traefik.enable=true"
+      # HTTP router (for Let's Encrypt challenge and redirect)
+      - "traefik.http.routers.cms-http.rule=Host(`cms.placebo.mk`)"
+      - "traefik.http.routers.cms-http.entrypoints=http"
+      - "traefik.http.routers.cms-http.middlewares=redirect-to-https"
+      # HTTPS router
+      - "traefik.http.routers.cms.rule=Host(`cms.placebo.mk`)"
+      - "traefik.http.routers.cms.entrypoints=https"
+      - "traefik.http.routers.cms.tls=true"
+      - "traefik.http.routers.cms.tls.certresolver=letsencrypt"
+      # Service
+      - "traefik.http.services.cms.loadbalancer.server.port=1337"
+
+  # ===========================================
+  # FRONTEND (React)
+  # ===========================================
+
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+      args:
+        VITE_API_URL: https://api.placebo.mk/api/v1
+        VITE_CMS_URL: https://cms.placebo.mk
+    container_name: placebo-frontend
+    restart: unless-stopped
+    depends_on:
+      - backend
+    healthcheck:
+      test: ['CMD', 'wget', '--no-verbose', '--tries=1', '--spider', 'http://127.0.0.1:80/']
+      interval: 30s
+      timeout: 10s
+      retries: 3
+    networks:
+      - placebo-internal
+      - coolify
+    expose:
+      - "80"
+    labels:
+      - "traefik.enable=true"
+      # HTTP router (for Let's Encrypt challenge and redirect)
+      - "traefik.http.routers.frontend-http.rule=Host(`placebo.mk`) || Host(`www.placebo.mk`)"
+      - "traefik.http.routers.frontend-http.entrypoints=http"
+      - "traefik.http.routers.frontend-http.middlewares=redirect-to-https"
+      # HTTPS router
+      - "traefik.http.routers.frontend.rule=Host(`placebo.mk`) || Host(`www.placebo.mk`)"
+      - "traefik.http.routers.frontend.entrypoints=https"
+      - "traefik.http.routers.frontend.tls=true"
+      - "traefik.http.routers.frontend.tls.certresolver=letsencrypt"
+      # Service
+      - "traefik.http.services.frontend.loadbalancer.server.port=80"
+
+  # ===========================================
+  # PWA (Progressive Web App)
+  # ===========================================
+
+  pwa:
+    build:
+      context: ./pwa
+      dockerfile: Dockerfile
+      args:
+        VITE_API_URL: https://api.placebo.mk/api/v1
+        VITE_CMS_URL: https://cms.placebo.mk
+    container_name: placebo-pwa
+    restart: unless-stopped
+    depends_on:
+      - backend
+    healthcheck:
+      test: ['CMD', 'wget', '--no-verbose', '--tries=1', '--spider', 'http://127.0.0.1:80/']
+      interval: 30s
+      timeout: 10s
+      retries: 3
+    networks:
+      - placebo-internal
+      - coolify
+    expose:
+      - "80"
+    labels:
+      - "traefik.enable=true"
+      # HTTP router (for Let's Encrypt challenge and redirect)
+      - "traefik.http.routers.pwa-http.rule=Host(`app.placebo.mk`)"
+      - "traefik.http.routers.pwa-http.entrypoints=http"
+      - "traefik.http.routers.pwa-http.middlewares=redirect-to-https"
+      # HTTPS router
+      - "traefik.http.routers.pwa.rule=Host(`app.placebo.mk`)"
+      - "traefik.http.routers.pwa.entrypoints=https"
+      - "traefik.http.routers.pwa.tls=true"
+      - "traefik.http.routers.pwa.tls.certresolver=letsencrypt"
+      # Service
+      - "traefik.http.services.pwa.loadbalancer.server.port=80"
+
+# ===========================================
+# VOLUMES (Managed by Coolify)
+# ===========================================
+
+volumes:
+  placebo-postgres-backend-data:
+    driver: local
+  placebo-postgres-cms-data:
+    driver: local
+  placebo-cms-uploads:
+    driver: local
+
+# ===========================================
+# NETWORKS
+# ===========================================
+
+networks:
+  placebo-internal:
+    driver: bridge
+  coolify:
+    external: true

docker-compose.prod.yml

@@ -0,0 +1,155 @@
+# Production Docker Compose for Coolify
+# Each service should be deployed separately in Coolify
+# This file is for reference and local testing only
+
+version: '3.8'
+
+services:
+  # PostgreSQL Database
+  postgres:
+    image: postgres:16-alpine
+    container_name: placebo-postgres
+    restart: unless-stopped
+    environment:
+      POSTGRES_DB: placebo_db
+      POSTGRES_USER: placebo_user
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-placebo_password}
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -U placebo_user -d placebo_db']
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    networks:
+      - placebo-network
+
+  # Backend API (NestJS)
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    container_name: placebo-backend
+    restart: unless-stopped
+    environment:
+      NODE_ENV: production
+      DATABASE_TYPE: postgres
+      DATABASE_HOST: postgres
+      DATABASE_PORT: 5432
+      DATABASE_USERNAME: placebo_user
+      DATABASE_PASSWORD: ${POSTGRES_PASSWORD:-placebo_password}
+      DATABASE_NAME: placebo_db
+      DATABASE_SYNCHRONIZE: 'false'
+      DATABASE_LOGGING: 'false'
+      JWT_SECRET: ${JWT_SECRET:-change-me-in-production}
+      JWT_EXPIRATION: '86400'
+      CORS_ORIGIN: ${CORS_ORIGIN:-http://localhost:3001}
+      VAPID_SUBJECT: ${VAPID_SUBJECT:-mailto:contact@placebo.mk}
+      VAPID_PUBLIC_KEY: ${VAPID_PUBLIC_KEY}
+      VAPID_PRIVATE_KEY: ${VAPID_PRIVATE_KEY}
+    ports:
+      - '3000:3000'
+    depends_on:
+      postgres:
+        condition: service_healthy
+    healthcheck:
+      test: ['CMD', 'node', '-e', "require('http').get('http://localhost:3000/health', (r) => {if(r.statusCode !== 200) process.exit(1)})"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+    networks:
+      - placebo-network
+
+  # Frontend (React)
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+      args:
+        VITE_API_URL: ${VITE_API_URL:-http://localhost:3000/api/v1}
+        VITE_CMS_URL: ${VITE_CMS_URL:-http://localhost:1337}
+    container_name: placebo-frontend
+    restart: unless-stopped
+    ports:
+      - '3001:80'
+    depends_on:
+      - backend
+    healthcheck:
+      test: ['CMD', 'wget', '--no-verbose', '--tries=1', '--spider', 'http://localhost:80/']
+      interval: 30s
+      timeout: 10s
+      retries: 3
+    networks:
+      - placebo-network
+
+  # PWA (Progressive Web App)
+  pwa:
+    build:
+      context: ./pwa
+      dockerfile: Dockerfile
+      args:
+        VITE_API_URL: ${VITE_API_URL:-http://localhost:3000/api/v1}
+        VITE_CMS_URL: ${VITE_CMS_URL:-http://localhost:1337}
+    container_name: placebo-pwa
+    restart: unless-stopped
+    ports:
+      - '5174:80'
+    depends_on:
+      - backend
+    healthcheck:
+      test: ['CMD', 'wget', '--no-verbose', '--tries=1', '--spider', 'http://localhost:80/']
+      interval: 30s
+      timeout: 10s
+      retries: 3
+    networks:
+      - placebo-network
+
+  # CMS (Strapi)
+  cms:
+    build:
+      context: ./cms/cms
+      dockerfile: Dockerfile
+    container_name: placebo-cms
+    restart: unless-stopped
+    environment:
+      NODE_ENV: production
+      DATABASE_CLIENT: postgres
+      DATABASE_HOST: postgres
+      DATABASE_PORT: 5432
+      DATABASE_NAME: placebo_cms_db
+      DATABASE_USERNAME: placebo_user
+      DATABASE_PASSWORD: ${POSTGRES_PASSWORD:-placebo_password}
+      DATABASE_SSL: 'false'
+      HOST: 0.0.0.0
+      PORT: 1337
+      APP_KEYS: ${STRAPI_APP_KEYS:-key1,key2,key3,key4}
+      API_TOKEN_SALT: ${STRAPI_API_TOKEN_SALT:-change-me}
+      ADMIN_JWT_SECRET: ${STRAPI_ADMIN_JWT_SECRET:-change-me}
+      TRANSFER_TOKEN_SALT: ${STRAPI_TRANSFER_TOKEN_SALT:-change-me}
+      JWT_SECRET: ${STRAPI_JWT_SECRET:-change-me}
+    ports:
+      - '1337:1337'
+    depends_on:
+      postgres:
+        condition: service_healthy
+    volumes:
+      - cms_uploads:/app/public/uploads
+    healthcheck:
+      test: ['CMD', 'node', '-e', "require('http').get('http://localhost:1337/_health', (r) => {if(r.statusCode !== 200) process.exit(1)})"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 60s
+    networks:
+      - placebo-network
+
+volumes:
+  postgres_data:
+    driver: local
+  cms_uploads:
+    driver: local
+
+networks:
+  placebo-network:
+    driver: bridge

frontend/Dockerfile

@@ -5,12 +5,19 @@ FROM node:20-alpine AS builder
 
 WORKDIR /app
 
+# Build arguments for environment variables
+ARG VITE_API_URL
+ARG VITE_CMS_URL
+
+# Set environment variables for build
+ENV VITE_API_URL=$VITE_API_URL
+ENV VITE_CMS_URL=$VITE_CMS_URL
+
 # Copy package files
-COPY package*.json ./
-COPY package-lock.json* ./
+COPY package.json package-lock.json* ./
 
 # Install dependencies
-RUN npm ci
+RUN npm install --legacy-peer-deps
 
 # Copy source code
 COPY . .
@@ -21,19 +28,12 @@ RUN npm run build
 # Production stage
 FROM nginx:alpine
 
-# Create non-root user
-RUN addgroup -g 1001 -S nginx && \
-    adduser -S nginx -u 1001 -G nginx
-
 # Copy built application from builder stage
 COPY --from=builder --chown=nginx:nginx /app/dist /usr/share/nginx/html
 
 # Copy nginx configuration
 COPY nginx.conf /etc/nginx/nginx.conf
 
-# Switch to non-root user
-USER nginx
-
 # Health check
 HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
   CMD wget --no-verbose --tries=1 --spider http://localhost:80/ || exit 1
@@ -42,4 +42,4 @@ HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
 EXPOSE 80
 
 # Start nginx
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]

frontend/nginx.conf

@@ -60,35 +60,35 @@ http {
             add_header Cache-Control "public, immutable";
         }
 
-        # API proxy
-        location /api/ {
-            proxy_pass http://backend:3000/;
-            proxy_http_version 1.1;
-            proxy_set_header Upgrade $http_upgrade;
-            proxy_set_header Connection 'upgrade';
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_cache_bypass $http_upgrade;
-            proxy_read_timeout 300;
-            proxy_connect_timeout 300;
-        }
+        # API proxy (for local dev only - in prod use public URL)
+        # location /api/ {
+        #     proxy_pass http://backend:3000/;
+        #     proxy_http_version 1.1;
+        #     proxy_set_header Upgrade $http_upgrade;
+        #     proxy_set_header Connection 'upgrade';
+        #     proxy_set_header Host $host;
+        #     proxy_set_header X-Real-IP $remote_addr;
+        #     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        #     proxy_set_header X-Forwarded-Proto $scheme;
+        #     proxy_cache_bypass $http_upgrade;
+        #     proxy_read_timeout 300;
+        #     proxy_connect_timeout 300;
+        # }
 
-        # CMS proxy
-        location /cms/ {
-            proxy_pass http://cms:1337/;
-            proxy_http_version 1.1;
-            proxy_set_header Upgrade $http_upgrade;
-            proxy_set_header Connection 'upgrade';
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_cache_bypass $http_upgrade;
-            proxy_read_timeout 300;
-            proxy_connect_timeout 300;
-        }
+        # CMS proxy (for local dev only - in prod use public URL)
+        # location /cms/ {
+        #     proxy_pass http://cms:1337/;
+        #     proxy_http_version 1.1;
+        #     proxy_set_header Upgrade $http_upgrade;
+        #     proxy_set_header Connection 'upgrade';
+        #     proxy_set_header Host $host;
+        #     proxy_set_header X-Real-IP $remote_addr;
+        #     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        #     proxy_set_header X-Forwarded-Proto $scheme;
+        #     proxy_cache_bypass $http_upgrade;
+        #     proxy_read_timeout 300;
+        #     proxy_connect_timeout 300;
+        # }
 
         # Health check endpoint
         location /health {

frontend/src/components/ArticleTicker.tsx

@@ -25,7 +25,8 @@ export function ArticleTicker() {
             {articles.map((article, index) => (
               <Link
                 key={`${article.id}-${index}`}
-                to={`/articles/${article.id}`}
+                to="/articles/$id"
+                params={{ id: article.id }}
                 className="font-body text-sm uppercase tracking-wider text-background/80 hover:text-accent hover:bg-background/10 inline-block px-6 py-1 border-r border-background/20 transition-colors"
               >
                 {article.title || 'No title'}
@@ -34,7 +35,8 @@ export function ArticleTicker() {
             {articles.map((article, index) => (
               <Link
                 key={`dup-${article.id}-${index}`}
-                to={`/articles/${article.id}`}
+                to="/articles/$id"
+                params={{ id: article.id }}
                 className="font-body text-sm uppercase tracking-wider text-background/80 hover:text-accent hover:bg-background/10 inline-block px-6 py-1 border-r border-background/20 transition-colors"
               >
                 {article.title || 'No title'}

frontend/src/components/home/HeroArticle.tsx

@@ -122,7 +122,7 @@ export function HeroArticle() {
         )}
 
         <div className="flex items-center justify-between pt-4 border-t-2 border-foreground/10">
-          <Link to={`/articles/${article.id}`}>
+          <Link to="/articles/$id" params={{ id: article.id }}>
             <Button variant="brutalAccent" className="gap-2">
               Read Full Story
               <ArrowRight className="w-4 h-4" />

frontend/src/components/home/LatestArticlesGrid.tsx

@@ -65,7 +65,8 @@ export function LatestArticlesGrid() {
             className={`group border-brutal-sm bg-card hover:shadow-brutal transition-all duration-150 hover:-translate-y-1 animate-fade-in-up stagger-${Math.min(index + 1, 12)}`}
           >
             <Link
-              to={`/articles/${article.id}`}
+              to="/articles/$id"
+              params={{ id: article.id }}
               className="block"
             >
               {article.featuredImage ? (
@@ -107,12 +108,12 @@ export function LatestArticlesGrid() {
                 </span>
                 
                 {article.category && (
-                  <Link
-                    to={`/${article.category.slug}`}
+                  <a
+                    href={`/${article.category.slug}`}
                     className="px-2 py-0.5 border border-foreground bg-background text-foreground text-[10px] hover:bg-accent hover:border-accent transition-colors"
                   >
                     {article.category.name}
-                  </Link>
+                  </a>
                 )}
               </div>
               
@@ -121,7 +122,7 @@ export function LatestArticlesGrid() {
                   articleId={article.id}
                   title={article.title}
                   url={`${window.location.origin}/articles/${article.id}`}
-                  excerpt={article.excerpt}
+                  excerpt={article.excerpt ?? undefined}
                   image={article.featuredImage}
                   tags={article.tags}
                   variant="compact"

frontend/src/components/routes/ArchiveComponent.tsx

@@ -39,9 +39,10 @@ export function ArchiveComponent() {
              className="p-6 rounded-xl border bg-card hover:shadow-lg transition-shadow"
            >
              <Link
-               to={`/articles/${article.id}`}
-               className="block mb-4"
-             >
+                to="/articles/$id"
+                params={{ id: article.id }}
+                className="block mb-4"
+              >
                <h2 className="text-xl font-semibold mb-2 line-clamp-2">
                  {article.title}
                </h2>
@@ -66,14 +67,14 @@ export function ArchiveComponent() {
                </div>
                
                 <SocialShareButtons
-                  articleId={article.id}
-                  title={article.title}
-                  url={`${window.location.origin}/articles/${article.id}`}
-                  excerpt={article.excerpt}
-                  image={article.featuredImage}
-                  tags={article.tags}
-                  variant="compact"
-                />
+                   articleId={article.id}
+                   title={article.title}
+                   url={`${window.location.origin}/articles/${article.id}`}
+                   excerpt={article.excerpt ?? undefined}
+                   image={article.featuredImage}
+                   tags={article.tags}
+                   variant="compact"
+                 />
              </div>
            </div>
          ))}

frontend/src/components/routes/ArticleDetailComponent.tsx

@@ -42,7 +42,7 @@ export function ArticleDetailComponent({ id }: { id: string }) {
   return (
     <article className="max-w-3xl mx-auto">
       <Link
-        to="/articles"
+        to="/archive"
         className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground mb-8"
       >
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -74,14 +74,14 @@ export function ArticleDetailComponent({ id }: { id: string }) {
 
         {/* Social Sharing */}
         <div className="mb-8 flex flex-wrap items-center gap-4">
-          <SocialShareButtons
-            articleId={data.id}
-            title={data.title}
-            url={typeof window !== 'undefined' ? window.location.href : ''}
-            excerpt={data.excerpt}
-            image={data.featuredImage}
-            tags={data.tags}
-          />
+           <SocialShareButtons
+             articleId={data.id}
+             title={data.title}
+             url={typeof window !== 'undefined' ? window.location.href : ''}
+             excerpt={data.excerpt ?? undefined}
+             image={data.featuredImage}
+             tags={data.tags}
+           />
           <a
             href="https://www.buymeacoffee.com/placebomk"
             target="_blank"
@@ -195,14 +195,14 @@ export function ArticleDetailComponent({ id }: { id: string }) {
           <p className="text-sm text-muted-foreground mb-2">Share this article:</p>
           <div className="flex flex-wrap items-center justify-center gap-4">
             <SocialShareButtons
-              articleId={data.id}
-              title={data.title}
-              url={typeof window !== 'undefined' ? window.location.href : ''}
-              excerpt={data.excerpt}
-              image={data.featuredImage}
-              tags={data.tags}
-              variant="footer"
-            />
+               articleId={data.id}
+               title={data.title}
+               url={typeof window !== 'undefined' ? window.location.href : ''}
+               excerpt={data.excerpt ?? undefined}
+               image={data.featuredImage}
+               tags={data.tags}
+               variant="footer"
+             />
             <a
               href="https://www.buymeacoffee.com/placebomk"
               target="_blank"

frontend/src/components/routes/CategoryPage.tsx

@@ -57,7 +57,7 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
           {/* Hero Article - 2/3 width */}
           <div className="lg:col-span-2">
             <div className="rounded-xl border bg-card overflow-hidden group hover:shadow-lg transition-shadow">
-              <Link to={`/articles/${heroArticle.id}`} className="block">
+                <Link to="/articles/$id" params={{ id: heroArticle.id }} className="block">
                 {heroArticle.featuredImage ? (
                   <div className="relative h-64 md:h-80 overflow-hidden">
                     <img
@@ -80,7 +80,7 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
               </Link>
               
               <div className="p-6">
-                <Link to={`/articles/${heroArticle.id}`} className="block">
+              <Link to="/articles/$id" params={{ id: heroArticle.id }} className="block">
                   <h2 className="text-2xl font-bold mb-3 group-hover:text-primary transition-colors">
                     {heroArticle.title}
                   </h2>
@@ -105,14 +105,14 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
                   </div>
                   
                   <SocialShareButtons
-                    articleId={heroArticle.id}
-                    title={heroArticle.title}
-                    url={`${window.location.origin}/articles/${heroArticle.id}`}
-                    excerpt={heroArticle.excerpt}
-                    image={heroArticle.featuredImage}
-                    tags={heroArticle.tags}
-                    variant="compact"
-                  />
+                     articleId={heroArticle.id}
+                     title={heroArticle.title}
+                     url={`${window.location.origin}/articles/${heroArticle.id}`}
+                     excerpt={heroArticle.excerpt ?? undefined}
+                     image={heroArticle.featuredImage}
+                     tags={heroArticle.tags}
+                     variant="compact"
+                   />
                 </div>
               </div>
             </div>
@@ -135,8 +135,9 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
               className="p-6 rounded-xl border bg-card hover:shadow-lg transition-shadow group"
             >
               <Link
-                to={`/articles/${article.id}`}
-                className="block mb-4"
+                 to="/articles/$id"
+                 params={{ id: article.id }}
+                 className="block mb-4"
               >
                 <h2 className="text-xl font-semibold mb-2 line-clamp-2 group-hover:text-primary transition-colors">
                   {article.title}
@@ -162,14 +163,14 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
                 </div>
                 
                 <SocialShareButtons
-                  articleId={article.id}
-                  title={article.title}
-                  url={`${window.location.origin}/articles/${article.id}`}
-                  excerpt={article.excerpt}
-                  image={article.featuredImage}
-                  tags={article.tags}
-                  variant="compact"
-                />
+                   articleId={article.id}
+                   title={article.title}
+                   url={`${window.location.origin}/articles/${article.id}`}
+                   excerpt={article.excerpt ?? undefined}
+                   image={article.featuredImage}
+                   tags={article.tags}
+                   variant="compact"
+                 />
               </div>
             </div>
           ))}

pwa/Dockerfile

@@ -1,16 +1,23 @@
-# Frontend Dockerfile for Placebo.mk TanStack React App
+# PWA Dockerfile for Placebo.mk Progressive Web App
 
 # Build stage
 FROM node:20-alpine AS builder
 
 WORKDIR /app
 
+# Build arguments for environment variables
+ARG VITE_API_URL
+ARG VITE_CMS_URL
+
+# Set environment variables for build
+ENV VITE_API_URL=$VITE_API_URL
+ENV VITE_CMS_URL=$VITE_CMS_URL
+
 # Copy package files
-COPY package*.json ./
-COPY package-lock.json* ./
+COPY package.json package-lock.json* ./
 
 # Install dependencies
-RUN npm ci
+RUN npm install --legacy-peer-deps
 
 # Copy source code
 COPY . .
@@ -21,19 +28,12 @@ RUN npm run build
 # Production stage
 FROM nginx:alpine
 
-# Create non-root user
-RUN addgroup -g 1001 -S nginx && \
-    adduser -S nginx -u 1001 -G nginx
-
 # Copy built application from builder stage
 COPY --from=builder --chown=nginx:nginx /app/dist /usr/share/nginx/html
 
 # Copy nginx configuration
 COPY nginx.conf /etc/nginx/nginx.conf
 
-# Switch to non-root user
-USER nginx
-
 # Health check
 HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
   CMD wget --no-verbose --tries=1 --spider http://localhost:80/ || exit 1
@@ -42,4 +42,4 @@ HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
 EXPOSE 80
 
 # Start nginx
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]

pwa/eslint.config.js

@@ -6,7 +6,7 @@ import tseslint from 'typescript-eslint'
 import { defineConfig, globalIgnores } from 'eslint/config'
 
 export default defineConfig([
-  globalIgnores(['dist']),
+  globalIgnores(['dist', 'dev-dist']),
   {
     files: ['**/*.{ts,tsx}'],
     extends: [

pwa/nginx.conf

@@ -60,35 +60,35 @@ http {
             add_header Cache-Control "public, immutable";
         }
 
-        # API proxy
-        location /api/ {
-            proxy_pass http://backend:3000/;
-            proxy_http_version 1.1;
-            proxy_set_header Upgrade $http_upgrade;
-            proxy_set_header Connection 'upgrade';
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_cache_bypass $http_upgrade;
-            proxy_read_timeout 300;
-            proxy_connect_timeout 300;
-        }
+        # API proxy (for local dev only - in prod use public URL)
+        # location /api/ {
+        #     proxy_pass http://backend:3000/;
+        #     proxy_http_version 1.1;
+        #     proxy_set_header Upgrade $http_upgrade;
+        #     proxy_set_header Connection 'upgrade';
+        #     proxy_set_header Host $host;
+        #     proxy_set_header X-Real-IP $remote_addr;
+        #     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        #     proxy_set_header X-Forwarded-Proto $scheme;
+        #     proxy_cache_bypass $http_upgrade;
+        #     proxy_read_timeout 300;
+        #     proxy_connect_timeout 300;
+        # }
 
-        # CMS proxy
-        location /cms/ {
-            proxy_pass http://cms:1337/;
-            proxy_http_version 1.1;
-            proxy_set_header Upgrade $http_upgrade;
-            proxy_set_header Connection 'upgrade';
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_cache_bypass $http_upgrade;
-            proxy_read_timeout 300;
-            proxy_connect_timeout 300;
-        }
+        # CMS proxy (for local dev only - in prod use public URL)
+        # location /cms/ {
+        #     proxy_pass http://cms:1337/;
+        #     proxy_http_version 1.1;
+        #     proxy_set_header Upgrade $http_upgrade;
+        #     proxy_set_header Connection 'upgrade';
+        #     proxy_set_header Host $host;
+        #     proxy_set_header X-Real-IP $remote_addr;
+        #     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        #     proxy_set_header X-Forwarded-Proto $scheme;
+        #     proxy_cache_bypass $http_upgrade;
+        #     proxy_read_timeout 300;
+        #     proxy_connect_timeout 300;
+        # }
 
         # Health check endpoint
         location /health {

pwa/src/components/ArticleTicker.tsx

@@ -25,7 +25,8 @@ export function ArticleTicker() {
             {articles.map((article, index) => (
               <Link
                 key={`${article.id}-${index}`}
-                to={`/articles/${article.id}`}
+                to="/articles/$id"
+                params={{ id: article.id }}
                 className="font-body text-sm uppercase tracking-wider text-background/80 hover:text-accent hover:bg-background/10 inline-block px-6 py-1 border-r border-background/20 transition-colors"
               >
                 {article.title || 'No title'}
@@ -34,7 +35,8 @@ export function ArticleTicker() {
             {articles.map((article, index) => (
               <Link
                 key={`dup-${article.id}-${index}`}
-                to={`/articles/${article.id}`}
+                to="/articles/$id"
+                params={{ id: article.id }}
                 className="font-body text-sm uppercase tracking-wider text-background/80 hover:text-accent hover:bg-background/10 inline-block px-6 py-1 border-r border-background/20 transition-colors"
               >
                 {article.title || 'No title'}

pwa/src/components/home/HeroArticle.tsx

@@ -122,7 +122,7 @@ export function HeroArticle() {
         )}
 
         <div className="flex items-center justify-between pt-4 border-t-2 border-foreground/10">
-          <Link to={`/articles/${article.id}`}>
+          <Link to="/articles/$id" params={{ id: article.id }}>
             <Button variant="brutalAccent" className="gap-2">
               Read Full Story
               <ArrowRight className="w-4 h-4" />

pwa/src/components/home/LatestArticlesGrid.tsx

@@ -65,7 +65,8 @@ export function LatestArticlesGrid() {
             className={`group border-brutal-sm bg-card hover:shadow-brutal transition-all duration-150 hover:-translate-y-1 animate-fade-in-up stagger-${Math.min(index + 1, 12)}`}
           >
             <Link
-              to={`/articles/${article.id}`}
+              to="/articles/$id"
+              params={{ id: article.id }}
               className="block"
             >
               {article.featuredImage ? (
@@ -107,12 +108,12 @@ export function LatestArticlesGrid() {
                 </span>
                 
                 {article.category && (
-                  <Link
-                    to={`/${article.category.slug}`}
+                  <a
+                    href={`/${article.category.slug}`}
                     className="px-2 py-0.5 border border-foreground bg-background text-foreground text-[10px] hover:bg-accent hover:border-accent transition-colors"
                   >
                     {article.category.name}
-                  </Link>
+                  </a>
                 )}
               </div>
               
@@ -121,7 +122,7 @@ export function LatestArticlesGrid() {
                   articleId={article.id}
                   title={article.title}
                   url={`${window.location.origin}/articles/${article.id}`}
-                  excerpt={article.excerpt}
+                  excerpt={article.excerpt ?? undefined}
                   image={article.featuredImage}
                   tags={article.tags}
                   variant="compact"

pwa/src/components/routes/ArchiveComponent.tsx

@@ -39,9 +39,10 @@ export function ArchiveComponent() {
              className="p-6 rounded-xl border bg-card hover:shadow-lg transition-shadow"
            >
              <Link
-               to={`/articles/${article.id}`}
-               className="block mb-4"
-             >
+                to="/articles/$id"
+                params={{ id: article.id }}
+                className="block mb-4"
+              >
                <h2 className="text-xl font-semibold mb-2 line-clamp-2">
                  {article.title}
                </h2>
@@ -66,14 +67,14 @@ export function ArchiveComponent() {
                </div>
                
                 <SocialShareButtons
-                  articleId={article.id}
-                  title={article.title}
-                  url={`${window.location.origin}/articles/${article.id}`}
-                  excerpt={article.excerpt}
-                  image={article.featuredImage}
-                  tags={article.tags}
-                  variant="compact"
-                />
+                   articleId={article.id}
+                   title={article.title}
+                   url={`${window.location.origin}/articles/${article.id}`}
+                   excerpt={article.excerpt ?? undefined}
+                   image={article.featuredImage}
+                   tags={article.tags}
+                   variant="compact"
+                 />
              </div>
            </div>
          ))}

pwa/src/components/routes/ArticleDetailComponent.tsx

@@ -42,7 +42,7 @@ export function ArticleDetailComponent({ id }: { id: string }) {
   return (
     <article className="max-w-3xl mx-auto">
       <Link
-        to="/articles"
+        to="/archive"
         className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground mb-8"
       >
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -74,14 +74,14 @@ export function ArticleDetailComponent({ id }: { id: string }) {
 
         {/* Social Sharing */}
         <div className="mb-8 flex flex-wrap items-center gap-4">
-          <SocialShareButtons
-            articleId={data.id}
-            title={data.title}
-            url={typeof window !== 'undefined' ? window.location.href : ''}
-            excerpt={data.excerpt}
-            image={data.featuredImage}
-            tags={data.tags}
-          />
+           <SocialShareButtons
+             articleId={data.id}
+             title={data.title}
+             url={typeof window !== 'undefined' ? window.location.href : ''}
+             excerpt={data.excerpt ?? undefined}
+             image={data.featuredImage}
+             tags={data.tags}
+           />
           <a
             href="https://www.buymeacoffee.com/placebomk"
             target="_blank"
@@ -195,14 +195,14 @@ export function ArticleDetailComponent({ id }: { id: string }) {
           <p className="text-sm text-muted-foreground mb-2">Share this article:</p>
           <div className="flex flex-wrap items-center justify-center gap-4">
             <SocialShareButtons
-              articleId={data.id}
-              title={data.title}
-              url={typeof window !== 'undefined' ? window.location.href : ''}
-              excerpt={data.excerpt}
-              image={data.featuredImage}
-              tags={data.tags}
-              variant="footer"
-            />
+               articleId={data.id}
+               title={data.title}
+               url={typeof window !== 'undefined' ? window.location.href : ''}
+               excerpt={data.excerpt ?? undefined}
+               image={data.featuredImage}
+               tags={data.tags}
+               variant="footer"
+             />
             <a
               href="https://www.buymeacoffee.com/placebomk"
               target="_blank"

pwa/src/components/routes/CategoryPage.tsx

@@ -57,7 +57,7 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
           {/* Hero Article - 2/3 width */}
           <div className="lg:col-span-2">
             <div className="rounded-xl border bg-card overflow-hidden group hover:shadow-lg transition-shadow">
-              <Link to={`/articles/${heroArticle.id}`} className="block">
+                <Link to="/articles/$id" params={{ id: heroArticle.id }} className="block">
                 {heroArticle.featuredImage ? (
                   <div className="relative h-64 md:h-80 overflow-hidden">
                     <img
@@ -80,7 +80,7 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
               </Link>
               
               <div className="p-6">
-                <Link to={`/articles/${heroArticle.id}`} className="block">
+              <Link to="/articles/$id" params={{ id: heroArticle.id }} className="block">
                   <h2 className="text-2xl font-bold mb-3 group-hover:text-primary transition-colors">
                     {heroArticle.title}
                   </h2>
@@ -105,14 +105,14 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
                   </div>
                   
                   <SocialShareButtons
-                    articleId={heroArticle.id}
-                    title={heroArticle.title}
-                    url={`${window.location.origin}/articles/${heroArticle.id}`}
-                    excerpt={heroArticle.excerpt}
-                    image={heroArticle.featuredImage}
-                    tags={heroArticle.tags}
-                    variant="compact"
-                  />
+                     articleId={heroArticle.id}
+                     title={heroArticle.title}
+                     url={`${window.location.origin}/articles/${heroArticle.id}`}
+                     excerpt={heroArticle.excerpt ?? undefined}
+                     image={heroArticle.featuredImage}
+                     tags={heroArticle.tags}
+                     variant="compact"
+                   />
                 </div>
               </div>
             </div>
@@ -135,8 +135,9 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
               className="p-6 rounded-xl border bg-card hover:shadow-lg transition-shadow group"
             >
               <Link
-                to={`/articles/${article.id}`}
-                className="block mb-4"
+                 to="/articles/$id"
+                 params={{ id: article.id }}
+                 className="block mb-4"
               >
                 <h2 className="text-xl font-semibold mb-2 line-clamp-2 group-hover:text-primary transition-colors">
                   {article.title}
@@ -162,14 +163,14 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
                 </div>
                 
                 <SocialShareButtons
-                  articleId={article.id}
-                  title={article.title}
-                  url={`${window.location.origin}/articles/${article.id}`}
-                  excerpt={article.excerpt}
-                  image={article.featuredImage}
-                  tags={article.tags}
-                  variant="compact"
-                />
+                   articleId={article.id}
+                   title={article.title}
+                   url={`${window.location.origin}/articles/${article.id}`}
+                   excerpt={article.excerpt ?? undefined}
+                   image={article.featuredImage}
+                   tags={article.tags}
+                   variant="compact"
+                 />
               </div>
             </div>
           ))}

pwa/src/components/ui/notification-banner.tsx

@@ -32,18 +32,9 @@ export function NotificationBanner() {
   };
 
   const handleSubscribe = async () => {
-    console.log('handleSubscribe called');
-    console.log('isSupported:', isSupported);
-    console.log('isSubscribed:', isSubscribed);
-
-    try {
-      const success = await subscribe();
-      console.log('subscribe() returned:', success);
-      if (success) {
-        setIsVisible(false);
-      }
-    } catch (error) {
-      console.error('handleSubscribe error:', error);
+    const success = await subscribe();
+    if (success) {
+      setIsVisible(false);
     }
   };
 

pwa/src/hooks/usePushNotifications.ts

@@ -18,8 +18,8 @@ function checkPushSupport(): boolean {
   );
 }
 
-function getInitialPermission(): NotificationPermission | 'not-supported' {
-  if (!checkPushSupport()) return 'not-supported';
+function getInitialPermission(): NotificationPermission {
+  if (!checkPushSupport()) return 'denied';
   return Notification.permission;
 }
 
@@ -27,7 +27,7 @@ export interface UsePushNotificationsReturn {
   isSupported: boolean;
   isSubscribed: boolean;
   isLoading: boolean;
-  permissionState: NotificationPermission | 'not-supported';
+  permissionState: NotificationPermission;
   subscribe: () => Promise<boolean>;
   unsubscribe: () => Promise<boolean>;
   requestPermission: () => Promise<NotificationPermission>;
@@ -40,30 +40,21 @@ export function usePushNotifications(): UsePushNotificationsReturn {
   const [permissionState, setPermissionState] = useState(getInitialPermission);
   const hasCheckedRef = useRef(false);
 
-  useEffect(() => {
-    console.log('usePushNotifications - isSupported:', checkPushSupport());
-    console.log('usePushNotifications - permissionState:', getInitialPermission());
-  }, []);
-
   useEffect(() => {
     if (!isSupported || hasCheckedRef.current) return;
     hasCheckedRef.current = true;
 
-    console.log('Checking existing push subscription...');
     navigator.serviceWorker.ready
       .then((registration) => registration.pushManager.getSubscription())
       .then((subscription) => {
-        console.log('Existing subscription:', subscription);
         setIsSubscribed(!!subscription);
       })
-      .catch((error) => {
-        console.error('Error checking subscription:', error);
-      });
+      .catch(() => {});
   }, [isSupported]);
 
   const requestPermission =
     useCallback(async (): Promise<NotificationPermission> => {
-      if (!isSupported) return 'not-supported';
+      if (!isSupported) return 'denied';
 
       const permission = await Notification.requestPermission();
       setPermissionState(permission);
@@ -78,38 +69,26 @@ export function usePushNotifications(): UsePushNotificationsReturn {
     try {
       const permission = await requestPermission();
       if (permission !== 'granted') {
-        console.log('Push permission denied');
         setIsLoading(false);
         return false;
       }
 
       const publicKey = await getVapidPublicKey();
       if (!publicKey) {
-        console.error('VAPID public key not available');
         setIsLoading(false);
         return false;
       }
 
-      console.log('Got VAPID public key, subscribing...');
-
-      // Check if service worker is already ready
-      console.log('Checking service worker status...');
-      const swController = navigator.serviceWorker.controller;
-      console.log('Service worker controller:', swController);
-
-      // Wait for service worker to be ready with timeout
       const registration = await Promise.race([
         navigator.serviceWorker.ready,
         new Promise<ServiceWorkerRegistration>((_, reject) => {
           setTimeout(() => {
-            reject(new Error('Service worker ready timeout after 10s'));
+            reject(new Error('Service worker ready timeout'));
           }, 10000);
         }),
       ]);
-      console.log('Service worker ready:', registration);
 
       if (!registration.pushManager) {
-        console.error('PushManager not available in service worker registration');
         setIsLoading(false);
         return false;
       }
@@ -117,31 +96,25 @@ export function usePushNotifications(): UsePushNotificationsReturn {
       let subscription = await registration.pushManager.getSubscription();
 
       if (!subscription) {
-        console.log('Creating new push subscription...');
+        const keyArray = urlBase64ToUint8Array(publicKey);
         subscription = await registration.pushManager.subscribe({
           userVisibleOnly: true,
-          applicationServerKey: urlBase64ToUint8Array(publicKey),
+          applicationServerKey: keyArray.buffer as ArrayBuffer,
         });
-        console.log('Push subscription created');
-      } else {
-        console.log('Existing push subscription found');
       }
 
       const subJson = subscription.toJSON();
-      console.log('Subscription JSON:', subJson);
 
       if (
         !subJson.endpoint ||
         !subJson.keys?.p256dh ||
         !subJson.keys?.auth
       ) {
-        console.error('Invalid subscription data:', subJson);
         setIsLoading(false);
         return false;
       }
 
       const success = await subscribeToPush(subJson as PushSubscriptionData);
-      console.log('Subscribe to push result:', success);
 
       if (success) {
         setIsSubscribed(true);
@@ -150,8 +123,7 @@ export function usePushNotifications(): UsePushNotificationsReturn {
 
       setIsLoading(false);
       return success;
-    } catch (error) {
-      console.error('Error subscribing to push notifications:', error);
+    } catch {
       setIsLoading(false);
       return false;
     }
@@ -175,8 +147,7 @@ export function usePushNotifications(): UsePushNotificationsReturn {
       localStorage.removeItem(STORAGE_KEY);
       setIsLoading(false);
       return true;
-    } catch (error) {
-      console.error('Error unsubscribing from push notifications:', error);
+    } catch {
       setIsLoading(false);
       return false;
     }

pwa/src/lib/push-api.ts

@@ -20,8 +20,7 @@ export async function getVapidPublicKey(): Promise<string | null> {
     }
     const data: VapidPublicKeyResponse = await response.json();
     return data.publicKey;
-  } catch (error) {
-    console.error('Error fetching VAPID public key:', error);
+  } catch {
     return null;
   }
 }
@@ -30,39 +29,20 @@ export async function subscribeToPush(
   subscription: PushSubscriptionData,
 ): Promise<boolean> {
   try {
-    console.log('Sending subscription to server:', {
-      endpoint: subscription.endpoint,
-      hasKeys: !!subscription.keys,
-    });
-
-    const payload = {
-      endpoint: subscription.endpoint,
-      p256dh: subscription.keys.p256dh,
-      auth: subscription.keys.auth,
-    };
-
-    console.log('Payload:', payload);
-    console.log('API URL:', `${API_BASE_URL}/push/subscribe`);
-
     const response = await fetch(`${API_BASE_URL}/push/subscribe`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify(payload),
+      body: JSON.stringify({
+        endpoint: subscription.endpoint,
+        p256dh: subscription.keys.p256dh,
+        auth: subscription.keys.auth,
+      }),
     });
 
-    console.log('Subscribe response status:', response.status);
-
-    if (!response.ok) {
-      const errorText = await response.text();
-      console.error('Subscribe failed:', errorText);
-      return false;
-    }
-
-    return true;
-  } catch (error) {
-    console.error('Error subscribing to push:', error);
+    return response.ok;
+  } catch {
     return false;
   }
 }
@@ -79,8 +59,7 @@ export async function unsubscribeFromPush(
       body: JSON.stringify({ endpoint }),
     });
     return response.ok;
-  } catch (error) {
-    console.error('Error unsubscribing from push:', error);
+  } catch {
     return false;
   }
 }

pwa/src/main.tsx

@@ -11,22 +11,12 @@ initializeTheme()
 
 const queryClient = new QueryClient()
 
-// Register service worker
 const updateSW = registerSW({
   onNeedRefresh() {
     if (confirm('New content available. Reload?')) {
       updateSW(true)
     }
   },
-  onOfflineReady() {
-    console.log('App ready to work offline')
-  },
-  onRegistered(registration) {
-    console.log('SW Registered:', registration?.scope)
-  },
-  onRegisterError(error) {
-    console.error('SW registration error:', error)
-  },
 })
 
 ReactDOM.createRoot(document.getElementById('root')!).render(