pwa fix

axios

AGENTS.md

@@ -1,151 +1,169 @@
 # Agent Guidelines for placebo.mk
 
 ## Project Overview
-News site in Macedonia with sarcastic tone. Minimalistic design using TanStack stack.
+Macedonian satirical news site using TanStack stack + NestJS backend.
 
 ## Tech Stack
-- **Frontend**: TanStack (React 19, Query, Router) + Vite + Tailwind CSS + shadcn/ui
+- **Frontend**: React 19 + TanStack (Query, Router) + Vite + Tailwind CSS + shadcn/ui
 - **Backend**: NestJS + TypeORM + SQLite
 - **CMS**: Strapi (in /cms)
 
-## Build Commands
+## Commands
 
-### Backend (NestJS)
+### Root Level
 ```bash
-cd backend
-npm install
-npm run start:dev    # Watch mode
-npm run build
-npm run start:prod
-npm run lint         # Lint
-npm run lint:fix     # Auto-fix
-npm run type-check   # TypeScript check
-npm test             # All tests
-npm test app.service.spec.ts  # Single file
-npm test -t "should"           # By test name
-npm run test:cov    # Coverage
-npm run test:e2e    # E2E tests
+npm run dev:local           # Start backend & frontend locally
+npm run dev:docker          # Start via docker-compose
+npm run lint                # Lint both projects
+npm run lint:fix            # Auto-fix lint issues
+npm run type-check          # Type check both projects
 ```
 
-### Frontend (TanStack)
+### Backend (cd backend)
 ```bash
-cd frontend
-npm install
-npm run dev         # Vite dev server
-npm run build
-npm run preview
-npm run lint
-npm run lint:fix
-npm run type-check
-npm test            # All tests
-npm test Header.test.tsx  # Single file
-npm test -t "renders"     # By name
-npm run test:ui     # Vitest UI
+npm run start:dev           # Watch mode
+npm run lint / lint:fix     # ESLint
+npm run type-check          # TypeScript check
+npm test                    # All tests
+npm test app.service.spec   # Single file (omit .ts)
+npm test -t "should return" # By pattern
+npm test:cov                # Coverage
+npm test:e2e                # E2E tests
+```
+
+### Frontend (cd frontend)
+```bash
+npm run dev                 # Vite dev server
+npm run lint / lint:fix     # ESLint
+npm run type-check          # TypeScript check
+npm test                    # All tests (Vitest)
+npm test Header.test        # Single file (omit .tsx)
+npm test -t "renders"       # By pattern
+npm test:ui                 # Vitest UI
+npm test:coverage           # Coverage
 ```
 
 ## Code Style
 
-### Formatting & TypeScript
-- Use Prettier (2 spaces, single quotes, trailing commas, 100 char max)
-- Strict TypeScript - no implicit `any`, avoid `any`, use `unknown`
+### TypeScript
+- Strict mode: `noImplicitAny`, `strictNullChecks`, `noFallthroughCasesInSwitch`
+- No implicit `any` - use `unknown` when type uncertain
 - Explicit return types for public methods
-- Prefer interfaces over types for objects
+- Prefer `interface` over `type` for objects
 - Use `readonly` for immutable properties
 
-### Naming Conventions
-- **Files**: kebab-case (`user-profile.ts`, `auth.service.ts`)
-- **Classes**: PascalCase (`UserService`, `AuthGuard`)
-- **Functions/Variables**: camelCase (`getUser`, `isLoading`)
-- **Constants**: UPPER_SNAKE_CASE (`MAX_RETRIES`)
-- **Private members**: underscore prefix (`_cache`, `_validate()`)
-- **Interfaces**: PascalCase, no 'I' prefix (`User`, `ApiResponse`)
+### Formatting (Prettier)
+- Single quotes, trailing commas, 2-space indent
+- No semicolons in comments
 
-### Import Order
-- External libraries first, then internal modules, then relative imports
+### Naming
+| Element | Convention | Example |
+|---------|------------|---------|
+| Files | kebab-case | `user-profile.ts`, `auth.service.ts` |
+| Classes | PascalCase | `UserService`, `AuthGuard` |
+| Functions/Variables | camelCase | `getUser`, `isLoading` |
+| Constants | UPPER_SNAKE_CASE | `MAX_RETRIES` |
+| Private members | underscore prefix | `_cache`, `_validate()` |
+| Interfaces | PascalCase (no I prefix) | `User`, `ApiResponse` |
 
+### Imports
+Group with blank lines: External → Internal → Relative
+```typescript
+// External
+import { Injectable } from '@nestjs/common';
+import { useQuery } from '@tanstack/react-query';
+
+// Internal modules
+import { UserService } from '../users/user.service';
+
+// Relative
+import { AuthResponse } from './types';
+```
 
 ### File Structure
 ```
 backend/src/
-  modules/feature-name/
-    feature-name.module.ts
-    feature-name.controller.ts
-    feature-name.service.ts
-    feature-name.entity.ts
-    feature-name.dto.ts
+  modules/{feature}/
+    {feature}.module.ts
+    {feature}.controller.ts
+    {feature}.service.ts
+    {feature}.dto.ts
   common/{decorators,filters,guards,interceptors,pipes}
-  config/
+  entities.ts              # All TypeORM entities
 
 frontend/src/
-  components/{ui,layout,features}/
-  hooks/
-  lib/
-  queries/
-  routes/
-  types/
-  utils/
+  components/{ui,layout,features,admin,routes}/
+  hooks/                   # Custom React hooks
+  queries/                 # TanStack Query hooks
+  lib/                     # Utilities, API client
+  routes/                  # TanStack Router routes
+  types/                   # TypeScript types
+```
+
+### Path Aliases
+- Frontend: `@/*` maps to `./src/*`
+- Import UI components: `import { Button } from '@/components/ui/button'`
+
+## Patterns
+
+### Backend Services (NestJS)
+```typescript
+@Injectable()
+export class AuthService {
+  constructor(
+    private userService: UserService,
+    private jwtService: JwtService,
+  ) {}
+
+  async login(dto: LoginUserDto): Promise<AuthResponse> {
+    // Implementation
+  }
+}
+```
+
+### Frontend Hooks (TanStack Query)
+```typescript
+export function useArticles(params: FindArticlesParams = {}) {
+  return useQuery({
+    queryKey: ['articles', params],
+    queryFn: () => api.fetchArticles(params),
+  });
+}
+
+export function useCreateArticle() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.createArticle,
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['articles'] }),
+  });
+}
 ```
 
 ### Error Handling
-- **Backend**: Use NestJS exceptions (`NotFoundException`, `BadRequestException`), custom exceptions, Logger
+- **Backend**: NestJS exceptions (`NotFoundException`, `BadRequestException`)
 - **Frontend**: Error boundaries, try-catch with user-friendly messages
 
-### API Conventions
-- REST endpoints: `/api/v1/resources`
-- JSON fields: snake_case
-- Pagination: `page`, `limit` query params
-- Response format:
-  ```typescript
-  {
-    data: T,
-    meta: { total, page, limit },
-    error?: { code, message }
-  }
-  ```
+### API Response Format
+```typescript
+{ data: T, meta: { total, page, limit }, error?: { code, message } }
+```
 
-### Testing
-- Unit tests for services/hooks (AAA pattern: Arrange-Act-Assert)
-- Integration tests for API endpoints
-- E2E tests for critical user flows
-- Descriptive test names that explain what is tested
-- Mock external dependencies (use Jest for backend, Vitest for frontend)
-- Run `npm test` for all tests or target specific files/names
+## Testing
+- **Backend**: Jest (`*.spec.ts`), AAA pattern, mock dependencies
+- **Frontend**: Vitest + React Testing Library (`*.test.tsx`)
+- Descriptive names: `should return user data when valid ID provided`
 
-### Git Workflow
-- Conventional commits: `feat:`, `fix:`, `refactor:`, `test:`, `docs:`, `chore:`
-- Keep commits atomic and focused
-- Write clear commit messages in imperative mood
-
-### Component Guidelines
-- Keep components small and focused (< 200 lines)
-- Use functional components with hooks
-- Prefer composition over inheritance
-- Extract complex logic into custom hooks
-- Use TanStack Query for server state management
-- Use TanStack Router for routing
-- Validate props with TypeScript
-
-### Database
-- Use TypeORM for SQLite
-- Define entities with proper relationships
-- Use migrations for schema changes
-- Seed data with factory functions
-- Use TypeORM repositories for data access
-
-### UI Components
-- Use shadcn/ui components from `components/ui/`
-- Use class-variance-authority (CVA) for component variants
-- Use clsx and tailwind-merge for class composition
-- Follow shadcn patterns for new component creation
-
-
-## Environment Variables
-- Backend: `@nestjs/config` with `.env` files
-- Frontend: Vite env vars (`VITE_API_URL`)
-- Never commit secrets to the repository.
-- Example frontend env: `VITE_API_URL=http://localhost:3000`
-- Example backend env: `DATABASE_PATH=./data.db`
-- Store sensitive config in `.env` files
-- Use `DATABASE_PATH` for SQLite location
+## Git Commits
+- Conventional: `feat:`, `fix:`, `refactor:`, `test:`, `docs:`, `chore:`
+- Atomic, imperative mood
 
+## UI Components
+- Use shadcn/ui from `components/ui/`
+- CVA for variants, clsx + tailwind-merge for classes
 
+## Agent Instructions
+- **ALWAYS** run `npm run lint` and `npm run type-check` after changes
+- **NEVER** commit without explicit request
+- **PREFER** editing existing files over creating new ones
+- **VERIFY** tests pass before considering work complete
+- **CHECK** both backend/frontend when making API changes

COOLIFY_ENV_VARS.txt

@@ -0,0 +1,28 @@
+# ===========================================
+# COOLIFY ENVIRONMENT VARIABLES
+# Copy these to Coolify UI: Environment Variables section
+# ===========================================
+
+# Database Password (you should already have this set)
+DATABASE_PASSWORD=abreubre776677112233
+
+# Backend JWT Secret (REQUIRED - MISSING!)
+JWT_SECRET=Xt4mwkbFEw83dSMXCv6W0Ut6YoTgIkYO62eticw0CfxkZhYSplDbjeUOyrnwyWK34Pt3nrnmtE5+khKxeoHiSA==
+
+# Strapi API Token (leave empty for now - will set after making API public)
+STRAPI_API_TOKEN=
+
+# Strapi Security Keys (REQUIRED)
+STRAPI_APP_KEYS=Jlt1Pu+ZBzcTSYazU8ZlEMOZyj4F9MO9YVAJmkaKrnk=,V2VSvJQrZ61jk8MtVkhC2RrKcm3XvJzmYTi73NItPYQ=,dhvlKrjeYGbCGaZznVTEJZLcAjIIwAtNmT6/i5Zq09I=,qDCKh9Pdep3P4ZlX+OCsKUwj/VZKul959RGbxXdiyf8=
+STRAPI_API_TOKEN_SALT=MkkvTfDJkwEPznUVfbiKj3SSWPw/MKqrOIRxN9cyWLk=
+STRAPI_ADMIN_JWT_SECRET=RpqNlR20k4VF2x1rzRvjUsg46zN2X4YcfBowbjdvqJo=
+STRAPI_TRANSFER_TOKEN_SALT=96PznECGwwinWXB8fhlHwE11+0XU5TaJwTaztQPaQw4=
+STRAPI_JWT_SECRET=3CGgFzvM8ykfndK2pqcCb7U5W3FcBF0SXwalj1kby6s=
+STRAPI_ENCRYPTION_KEY=8V99V0CfSxJZLvgXGRBv/zndKH2FnPQ/JVmXa1OEfZ8=
+
+# Push Notification VAPID Keys (for PWA notifications)
+VAPID_PUBLIC_KEY=BEUVi1YA6wyD1Mt31M8nbsz7ctVC1wxURkz4bHdrexbtUzDETS90MOpS-QFebnXt_Dx_zvntPHCno6bwsK3pOxU
+VAPID_PRIVATE_KEY=XJIYJyV1KkfEwnHa1vy4Jb3FPRg27eFton1Tdsep8fI
+
+# VAPID Subject (optional - defaults to mailto:contact@placebo.mk)
+VAPID_SUBJECT=mailto:contact@placebo.mk

QUICK_WEBHOOK_SETUP.md

@@ -0,0 +1,70 @@
+# Quick Strapi Webhook Setup
+
+## TL;DR - Quick Configuration
+
+1. **Access Strapi Admin**: `http://localhost:1337/admin`
+2. **Go to Settings → Webhooks**
+3. **Add New Webhook**:
+   - **Name**: `Backend Sync`
+   - **URL**: `http://localhost:3000/api/v1/webhooks/strapi`
+   - **Events**: Select all for "Article" and "Live Blog" content types
+4. **Save and Test**
+
+## Already Configured (What We Fixed)
+
+✅ **Backend webhook endpoints** are now public (no auth required)  
+✅ **Tested webhooks** manually - they work  
+✅ **Articles sync** from Strapi to backend  
+✅ **Frontend TypeScript errors** fixed  
+✅ **Authentication system** working  
+
+## Manual Test Commands
+
+```bash
+# Test webhook manually
+curl -X POST http://localhost:3000/api/v1/webhooks/strapi \
+  -H "Content-Type: application/json" \
+  -d '{
+    "event": "entry.publish",
+    "model": "article",
+    "entry": {"documentId": "r07qatlpgvx82d7337n3nz1l"}
+  }'
+
+# Check synced articles
+curl http://localhost:3000/api/v1/articles?status=published
+
+# Run comprehensive test
+./scripts/test-webhooks.sh
+```
+
+## Current Status
+
+- **Strapi Articles**: 2
+- **Backend Articles**: 2 (synced)
+- **Webhook Status**: Ready for configuration
+- **Frontend**: Access at `http://localhost:5173/articles`
+
+## Immediate Action Required
+
+1. **Configure webhooks in Strapi admin** (see detailed guide in `STRAPI_WEBHOOKS_SETUP.md`)
+2. **Test by publishing an article** in Strapi
+3. **Verify automatic sync** works
+
+## If Webhooks Don't Work
+
+Use manual sync as fallback:
+```bash
+# Get auth token first
+TOKEN=$(curl -s -X POST http://localhost:3000/api/v1/auth/login \
+  -H "Content-Type: application/json" \
+  -d '{"username":"testuser","password":"Test123!"}' | jq -r '.access_token')
+
+# Sync all articles
+curl -X POST http://localhost:3000/api/v1/webhooks/strapi/sync/all \
+  -H "Authorization: Bearer $TOKEN"
+```
+
+## Verification
+- Visit `http://localhost:5173/articles` to see synced articles
+- Check backend logs: `docker logs placebo-backend-dev --tail 20`
+- Monitor sync status with test script: `./scripts/test-webhooks.sh`

STRAPI_WEBHOOKS_SETUP.md

@@ -0,0 +1,191 @@
+# Strapi Webhooks Configuration Guide
+
+## Overview
+This guide explains how to configure Strapi webhooks for automatic synchronization with the backend API. When articles or live blogs are published/updated/deleted in Strapi, webhooks will automatically trigger synchronization with the backend.
+
+## Webhook Endpoints
+
+The backend provides three webhook endpoints:
+
+1. **Article-specific webhook**: `POST /api/v1/webhooks/strapi/article`
+2. **Live Blog-specific webhook**: `POST /api/v1/webhooks/strapi/live-blog`
+3. **Generic webhook**: `POST /api/v1/webhooks/strapi` (handles both)
+
+All endpoints accept the following JSON format:
+```json
+{
+  "event": "entry.publish",  // or "entry.update", "entry.delete", "entry.unpublish"
+  "model": "article",        // or "live-blog"
+  "entry": {
+    "documentId": "unique-strapi-id"
+  }
+}
+```
+
+## Configuration Steps
+
+### Step 1: Access Strapi Admin Panel
+1. Open your browser and go to: `http://localhost:1337/admin`
+2. Log in with your admin credentials
+
+### Step 2: Configure Webhooks
+1. In the left sidebar, click on **Settings** (gear icon)
+2. Click on **Webhooks** under the "GLOBAL SETTINGS" section
+3. Click the **"Add new webhook"** button
+
+### Step 3: Configure Article Webhook
+**Basic Settings:**
+- **Name**: `Backend Article Sync`
+- **URL**: `http://localhost:3000/api/v1/webhooks/strapi/article`
+  - For Docker internal communication: `http://backend:3000/api/v1/webhooks/strapi/article`
+- **Headers**: Add if needed (usually not required)
+
+**Trigger Events:**
+Select the following events for the "Article" content type:
+- [x] **Create entry** (`entry.create`)
+- [x] **Update entry** (`entry.update`)
+- [x] **Delete entry** (`entry.delete`)
+- [x] **Publish entry** (`entry.publish`)
+- [x] **Unpublish entry** (`entry.unpublish`)
+
+**Save the webhook.**
+
+### Step 4: Configure Live Blog Webhook (Optional)
+Repeat Step 3 for live blogs:
+- **Name**: `Backend Live Blog Sync`
+- **URL**: `http://localhost:3000/api/v1/webhooks/strapi/live-blog`
+- Select events for the "Live Blog" content type
+
+### Alternative: Single Generic Webhook
+You can use a single webhook for all content types:
+- **Name**: `Backend Generic Sync`
+- **URL**: `http://localhost:3000/api/v1/webhooks/strapi`
+- Select events for ALL relevant content types (Article, Live Blog)
+
+## Testing Webhooks
+
+### Manual Test
+You can manually trigger a webhook to test the configuration:
+
+```bash
+# Test article webhook
+curl -X POST http://localhost:3000/api/v1/webhooks/strapi/article \
+  -H "Content-Type: application/json" \
+  -d '{
+    "event": "entry.publish",
+    "model": "article",
+    "entry": {
+      "documentId": "your-article-id"
+    }
+  }'
+
+# Test generic webhook
+curl -X POST http://localhost:3000/api/v1/webhooks/strapi \
+  -H "Content-Type: application/json" \
+  -d '{
+    "event": "entry.publish",
+    "model": "article",
+    "entry": {
+      "documentId": "your-article-id"
+    }
+  }'
+```
+
+### Test from Strapi
+1. In Strapi admin, edit any article
+2. Click "Save" or "Publish"
+3. Check backend logs for webhook receipt:
+   ```bash
+   docker logs placebo-backend-dev --tail 20 | grep -i "webhook\|strapi"
+   ```
+
+## Manual Sync (Fallback)
+If webhooks fail or for initial sync, use manual sync endpoints:
+
+```bash
+# Get authentication token first
+curl -X POST http://localhost:3000/api/v1/auth/login \
+  -H "Content-Type: application/json" \
+  -d '{"username":"your-username","password":"your-password"}'
+
+# Sync all articles (requires auth)
+curl -X POST http://localhost:3000/api/v1/webhooks/strapi/sync/all \
+  -H "Authorization: Bearer YOUR_TOKEN_HERE"
+
+# Sync all live blogs
+curl -X POST http://localhost:3000/api/v1/webhooks/strapi/sync/live-blogs \
+  -H "Authorization: Bearer YOUR_TOKEN_HERE"
+
+# Sync everything
+curl -X POST http://localhost:3000/api/v1/webhooks/strapi/sync/everything \
+  -H "Authorization: Bearer YOUR_TOKEN_HERE"
+```
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Webhook not received by backend**
+   - Check backend logs: `docker logs placebo-backend-dev --tail 50`
+   - Verify CORS is configured (should allow `http://localhost:1337`)
+   - Test webhook manually with curl
+
+2. **401 Unauthorized error**
+   - Webhook endpoints are now public (no auth required)
+   - If getting 401, check that `@Public()` decorator is on webhook methods
+
+3. **Webhook received but sync fails**
+   - Check Strapi API token in backend `.env.docker`
+   - Verify Strapi is accessible from backend container
+   - Check backend logs for specific error messages
+
+4. **Article not appearing in frontend**
+   - Verify article is synced to backend: `curl http://localhost:3000/api/v1/articles`
+   - Check frontend browser console for errors
+   - Hard refresh frontend (Ctrl+F5)
+
+### Log Monitoring
+```bash
+# Monitor backend logs for webhooks
+docker logs -f placebo-backend-dev | grep -i "webhook\|strapi"
+
+# Monitor Strapi logs
+docker logs -f placebo-cms-dev
+
+# Check if articles are in backend
+curl -s "http://localhost:3000/api/v1/articles?status=published" | jq '.total'
+```
+
+## Docker Network Considerations
+
+### Internal Docker Communication
+- Within Docker network: Use `http://backend:3000` and `http://cms:1337`
+- From host machine: Use `http://localhost:3000` and `http://localhost:1337`
+
+### Webhook URL Examples
+- **From Strapi container to Backend**: `http://backend:3000/api/v1/webhooks/strapi`
+- **From Host to Backend**: `http://localhost:3000/api/v1/webhooks/strapi`
+- **External/Production**: Use your domain: `https://api.yourdomain.com/api/v1/webhooks/strapi`
+
+## Security Considerations
+
+1. **Webhook endpoints are public** - ensure your backend is not exposed to the public internet in production
+2. **Consider adding webhook signature verification** for production
+3. **Use HTTPS in production** for all webhook calls
+4. **Monitor webhook logs** for suspicious activity
+
+## Verification Checklist
+
+- [ ] Webhooks configured in Strapi admin
+- [ ] Test webhook manually works
+- [ ] Article publish in Strapi triggers sync
+- [ ] Synced articles appear in backend API
+- [ ] Frontend displays synced articles
+- [ ] All event types tested (publish, update, delete)
+
+## Support
+If issues persist:
+1. Check all service logs
+2. Verify network connectivity between containers
+3. Test each component independently
+4. Review error messages in logs

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/Dockerfile.dev

@@ -4,6 +4,9 @@ FROM node:20-alpine
 
 WORKDIR /app
 
+# Install build dependencies for native modules
+RUN apk add --no-cache python3 make g++
+
 # Install dependencies with better error handling
 COPY package*.json ./
 COPY package-lock.json* ./

backend/docker-entrypoint.sh

@@ -0,0 +1,13 @@
+#!/bin/sh
+# Backend entrypoint script - seeds admin on first run
+
+echo "Starting Placebo.mk Backend..."
+
+# Run admin seed script (idempotent - won't recreate if exists)
+# Temporarily disabled to fix startup issues
+# echo "Checking for admin user..."
+# node dist/scripts/seed-admin.js || echo "Warning: Admin seed failed, continuing..."
+
+# Start the application
+echo "Starting NestJS application..."
+exec node dist/src/main.js

backend/package.json

@@ -22,7 +22,10 @@
     "test:e2e": "jest --config ./test/jest-e2e.json",
     "dev:docker": "nest start --watch",
     "dev:local": "cp -f .env.local .env && nest start --watch",
-    "dev:reset-env": "cp -f .env.docker .env"
+    "dev:reset-env": "cp -f .env.docker .env",
+    "seed:admin": "ts-node scripts/seed-admin.ts",
+    "seed:categories": "ts-node scripts/seed-categories.ts",
+    "generate-vapid": "ts-node scripts/generate-vapid-keys.ts"
   },
   "dependencies": {
     "@nestjs/axios": "^4.0.1",
@@ -30,15 +33,26 @@
     "@nestjs/config": "^4.0.2",
     "@nestjs/core": "^11.0.1",
     "@nestjs/event-emitter": "^3.0.1",
+    "@nestjs/jwt": "^11.0.2",
+    "@nestjs/passport": "^11.0.5",
     "@nestjs/platform-express": "^11.0.1",
     "@nestjs/typeorm": "^11.0.0",
+    "@types/bcrypt": "^6.0.0",
+    "@types/passport-jwt": "^4.0.1",
+    "@types/passport-local": "^1.0.38",
+    "axios": "^1.13.6",
+    "bcrypt": "^6.0.0",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.3",
+    "passport": "^0.7.0",
+    "passport-jwt": "^4.0.1",
+    "passport-local": "^1.0.0",
     "pg": "^8.18.0",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.1",
     "sqlite3": "^5.1.7",
-    "typeorm": "^0.3.28"
+    "typeorm": "^0.3.28",
+    "web-push": "^3.6.7"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
@@ -50,6 +64,7 @@
     "@types/jest": "^30.0.0",
     "@types/node": "^22.10.7",
     "@types/supertest": "^6.0.2",
+    "@types/web-push": "^3.6.4",
     "eslint": "^9.18.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-prettier": "^5.2.2",

backend/scripts/generate-vapid-keys.ts

@@ -0,0 +1,46 @@
+import * as webpush from 'web-push';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const envPath = path.join(__dirname, '..', '.env');
+
+function generateVapidKeys(): void {
+  console.log('Generating VAPID keys...');
+
+  const vapidKeys = webpush.generateVAPIDKeys();
+
+  let envContent = '';
+
+  if (fs.existsSync(envPath)) {
+    envContent = fs.readFileSync(envPath, 'utf-8');
+  }
+
+  const lines = envContent.split('\n');
+
+  const vapidSubject = `VAPID_SUBJECT=mailto:contact@placebo.mk`;
+  const vapidPublicKey = `VAPID_PUBLIC_KEY=${vapidKeys.publicKey}`;
+  const vapidPrivateKey = `VAPID_PRIVATE_KEY=${vapidKeys.privateKey}`;
+
+  const updatedLines = lines.filter(
+    (line) =>
+      !line.startsWith('VAPID_SUBJECT=') &&
+      !line.startsWith('VAPID_PUBLIC_KEY=') &&
+      !line.startsWith('VAPID_PRIVATE_KEY='),
+  );
+
+  const nonEmptyLines = updatedLines.filter((line) => line.trim() !== '');
+
+  const newEnvContent =
+    nonEmptyLines.join('\n') +
+    (nonEmptyLines.length > 0 ? '\n' : '') +
+    `${vapidSubject}\n${vapidPublicKey}\n${vapidPrivateKey}\n`;
+
+  fs.writeFileSync(envPath, newEnvContent);
+
+  console.log('VAPID keys generated and added to .env file:');
+  console.log(`  Public Key: ${vapidKeys.publicKey}`);
+  console.log(`  Private Key: ${vapidKeys.privateKey}`);
+  console.log('\nKeep your private key secret!');
+}
+
+generateVapidKeys();

backend/scripts/reset-db.js

@@ -0,0 +1,26 @@
+const { exec } = require('child_process');
+const { promisify } = require('util');
+const execAsync = promisify(exec);
+
+async function resetDatabase() {
+  console.log('Resetting database...');
+  
+  try {
+    // Drop and recreate the database
+    const { stdout, stderr } = await execAsync(`
+      PGPASSWORD=placebo_password psql -h localhost -U placebo_user -d postgres -c "DROP DATABASE IF EXISTS placebo_backend_db;"
+      PGPASSWORD=placebo_password psql -h localhost -U placebo_user -d postgres -c "CREATE DATABASE placebo_backend_db;"
+    `);
+    
+    if (stderr && !stderr.includes('warning')) {
+      console.error('Error:', stderr);
+      return;
+    }
+    
+    console.log('Database reset successfully!');
+  } catch (error) {
+    console.error('Failed to reset database:', error.message);
+  }
+}
+
+resetDatabase();

backend/scripts/reset-db.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+echo "Resetting PostgreSQL database..."
+
+# Connect to PostgreSQL and reset the database (without -t for TTY)
+docker exec -i placebo-postgres-dev psql -U placebo_user -d postgres <<EOF
+DROP DATABASE IF EXISTS placebo_backend_db;
+CREATE DATABASE placebo_backend_db;
+EOF
+
+echo "Database reset complete!"
+echo "The new schema will be created when the backend starts with DATABASE_SYNCHRONIZE=true"

backend/scripts/seed-admin.ts

@@ -0,0 +1,41 @@
+import { NestFactory } from '@nestjs/core';
+import { AppModule } from '../src/app.module';
+import { UserService } from '../src/modules/users/user.service';
+import { UserRole } from '../src/modules/entities';
+
+async function bootstrap() {
+  const app = await NestFactory.createApplicationContext(AppModule);
+  const userService = app.get(UserService);
+
+  try {
+    // Check if admin user already exists
+    const existingAdmin = await userService.findByUsername('admin');
+    if (existingAdmin) {
+      console.log('Admin user already exists');
+      await app.close();
+      return;
+    }
+
+    // Create admin user
+    const adminUser = await userService.create({
+      username: 'admin',
+      email: 'admin@placebo.mk',
+      password: 'admin123', // Change this in production!
+      role: UserRole.ADMIN,
+      isActive: true,
+    });
+
+    console.log('Admin user created successfully:');
+    console.log(`Username: ${adminUser.username}`);
+    console.log(`Email: ${adminUser.email}`);
+    console.log(`Role: ${adminUser.role}`);
+    console.log('\n⚠️  IMPORTANT: Change the default password immediately!');
+
+  } catch (error) {
+    console.error('Error creating admin user:', error);
+  } finally {
+    await app.close();
+  }
+}
+
+bootstrap();

backend/scripts/seed-categories.ts

@@ -0,0 +1,65 @@
+import { NestFactory } from '@nestjs/core';
+import { AppModule } from '../src/app.module';
+import { getRepositoryToken } from '@nestjs/typeorm';
+import { Category } from '../src/modules/entities';
+
+async function bootstrap() {
+  const app = await NestFactory.createApplicationContext(AppModule);
+  
+  try {
+    const categoryRepository = app.get(getRepositoryToken(Category));
+    
+    // Define categories with Macedonian names and English slugs
+    const categories = [
+      {
+        name: 'Спорт',
+        slug: 'sport',
+        description: 'Спортски вести и анализи',
+        order: 1,
+      },
+      {
+        name: 'Уметност',
+        slug: 'art',
+        description: 'Уметност, култура и забава',
+        order: 2,
+      },
+      {
+        name: 'Наука',
+        slug: 'science',
+        description: 'Научни откритија и технологија',
+        order: 3,
+      },
+    ];
+
+    console.log('Seeding categories...');
+    
+    for (const categoryData of categories) {
+      // Check if category already exists
+      const existingCategory = await categoryRepository.findOne({
+        where: { slug: categoryData.slug },
+      });
+
+      if (existingCategory) {
+        console.log(`Category "${categoryData.name}" (${categoryData.slug}) already exists`);
+      } else {
+        const category = categoryRepository.create(categoryData);
+        await categoryRepository.save(category);
+        console.log(`Created category: "${categoryData.name}" (${categoryData.slug})`);
+      }
+    }
+
+    console.log('\n✅ Category seeding completed!');
+    console.log('Categories available:');
+    const allCategories = await categoryRepository.find({ order: { order: 'ASC' } });
+    allCategories.forEach((cat: Category) => {
+      console.log(`  • ${cat.name} (${cat.slug}) - ${cat.description || 'No description'}`);
+    });
+
+  } catch (error) {
+    console.error('Error seeding categories:', error);
+  } finally {
+    await app.close();
+  }
+}
+
+bootstrap();

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/app.module.ts

@@ -1,18 +1,30 @@
 import { Module } from '@nestjs/common';
 import { ConfigModule } from '@nestjs/config';
 import { TypeOrmModule } from '@nestjs/typeorm';
+import { APP_GUARD } from '@nestjs/core';
 import { AppController } from './app.controller';
 import { AppService } from './app.service';
 import { ArticlesModule } from './modules/articles.module';
 import { StrapiModule } from './modules/strapi.module';
 import { LiveBlogModule } from './modules/live-blog.module';
+import { UserModule } from './modules/users/user.module';
+import { AuthModule } from './modules/auth/auth.module';
+import { CommentModule } from './modules/comment/comment.module';
+import { AnalyticsModule } from './modules/analytics/analytics.module';
+import { PushModule } from './modules/push/push.module';
 import {
   Article,
   Author,
   Category,
   LiveBlog,
   LiveBlogUpdate,
+  User,
+  Comment,
+  Reaction,
 } from './modules/entities';
+import { ShareEvent } from './modules/analytics/analytics.entity';
+import { PushSubscriptionEntity } from './modules/push/push-subscription.entity';
+import { JwtAuthPublicGuard } from './modules/auth/jwt-auth-public.guard';
 
 @Module({
   imports: [
@@ -26,15 +38,37 @@ import {
       username: process.env.DATABASE_USERNAME || 'placebo_user',
       password: process.env.DATABASE_PASSWORD || 'placebo_password',
       database: process.env.DATABASE_NAME || 'placebo_backend_db',
-      entities: [Article, Author, Category, LiveBlog, LiveBlogUpdate],
-      synchronize: process.env.NODE_ENV !== 'production',
-      logging: process.env.NODE_ENV === 'development',
+      entities: [
+        Article,
+        Author,
+        Category,
+        LiveBlog,
+        LiveBlogUpdate,
+        User,
+        Comment,
+        Reaction,
+        ShareEvent,
+        PushSubscriptionEntity,
+      ],
+      synchronize: process.env.DATABASE_SYNCHRONIZE === 'true',
+      logging: process.env.DATABASE_LOGGING === 'true',
     }),
     ArticlesModule,
     StrapiModule,
     LiveBlogModule,
+    UserModule,
+    AuthModule,
+    CommentModule,
+    AnalyticsModule,
+    PushModule,
   ],
   controllers: [AppController],
-  providers: [AppService],
+  providers: [
+    AppService,
+    {
+      provide: APP_GUARD,
+      useClass: JwtAuthPublicGuard,
+    },
+  ],
 })
 export class AppModule {}

backend/src/main.ts

@@ -1,21 +1,41 @@
 import { NestFactory } from '@nestjs/core';
+import { ValidationPipe } from '@nestjs/common';
 import { AppModule } from './app.module';
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
 
+  // Build allowed origins list from environment variables
   const allowedOrigins = [
     process.env.FRONTEND_URL ?? 'http://localhost:5173',
+    'https://placebo.mk', // Production domain
+    'https://www.placebo.mk', // Also allow www subdomain
+    process.env.PWA_URL ?? 'http://localhost:5174',
     process.env.STRAPI_URL ?? 'http://localhost:1337',
-  ];
+  ].filter(Boolean); // Remove any undefined/null values
+
+  console.log('CORS enabled for origins:', allowedOrigins);
 
   app.enableCors({
     origin: allowedOrigins,
+    methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'],
+    allowedHeaders: ['Content-Type', 'Authorization', 'Accept', 'Origin'],
+    exposedHeaders: ['Content-Range', 'X-Content-Range'],
     credentials: true,
+    maxAge: 3600,
   });
 
   app.setGlobalPrefix('api/v1');
 
+  // Apply global validation pipe
+  app.useGlobalPipes(
+    new ValidationPipe({
+      whitelist: true,
+      transform: true,
+      forbidNonWhitelisted: true,
+    }),
+  );
+
   const port = process.env.PORT ?? 3000;
   const host = '0.0.0.0'; // Bind to all interfaces for Docker
   await app.listen(port, host);

backend/src/modules/analytics/analytics.controller.ts

@@ -0,0 +1,76 @@
+import {
+  Controller,
+  Post,
+  Body,
+  Get,
+  Query,
+  UsePipes,
+  ValidationPipe,
+  HttpCode,
+  HttpStatus,
+  UseGuards,
+} from '@nestjs/common';
+import { AnalyticsService } from './analytics.service';
+import {
+  TrackShareDto,
+  GetShareStatsDto,
+  ShareStatsResponse,
+} from './analytics.dto';
+import { Public } from '../auth/public.decorator';
+import { JwtAuthGuard } from '../auth/jwt-auth.guard';
+import { RolesGuard } from '../auth/roles.guard';
+import { Roles } from '../auth/roles.decorator';
+import { UserRole } from '../entities';
+
+@Controller('analytics')
+export class AnalyticsController {
+  constructor(private readonly analyticsService: AnalyticsService) {}
+
+  @Public()
+  @Post('share')
+  @HttpCode(HttpStatus.CREATED)
+  @UsePipes(new ValidationPipe({ transform: true }))
+  async trackShare(@Body() trackShareDto: TrackShareDto) {
+    return await this.analyticsService.trackShare(trackShareDto);
+  }
+
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN)
+  @Get('shares')
+  @UsePipes(new ValidationPipe({ transform: true }))
+  async getShareStats(
+    @Query() getShareStatsDto: GetShareStatsDto,
+  ): Promise<ShareStatsResponse[]> {
+    return await this.analyticsService.getShareStats(getShareStatsDto);
+  }
+
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN)
+  @Get('shares/top')
+  async getTopSharedArticles(@Query('limit') limit: string) {
+    const limitNum = limit ? parseInt(limit) : 10;
+    return await this.analyticsService.getTopSharedArticles(limitNum);
+  }
+
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN)
+  @Get('shares/trends')
+  async getShareTrends(
+    @Query('startDate') startDate: string,
+    @Query('endDate') endDate: string,
+    @Query('interval') interval: 'day' | 'week' | 'month',
+  ) {
+    return await this.analyticsService.getShareTrends(
+      new Date(startDate),
+      new Date(endDate),
+      interval || 'day',
+    );
+  }
+
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN)
+  @Get('shares/total')
+  async getTotalShareStats() {
+    return await this.analyticsService.getTotalShareStats();
+  }
+}

backend/src/modules/analytics/analytics.dto.ts

@@ -0,0 +1,48 @@
+import { IsEnum, IsOptional, IsString, IsUUID } from 'class-validator';
+import type { SharePlatform } from './analytics.entity';
+
+export class TrackShareDto {
+  @IsUUID()
+  articleId: string;
+
+  @IsEnum(['facebook', 'twitter', 'instagram', 'tiktok', 'telegram', 'link'])
+  platform: SharePlatform;
+
+  @IsOptional()
+  @IsString()
+  userAgent?: string;
+
+  @IsOptional()
+  @IsString()
+  ipAddress?: string;
+}
+
+export class GetShareStatsDto {
+  @IsOptional()
+  @IsUUID()
+  articleId?: string;
+
+  @IsOptional()
+  @IsString()
+  startDate?: string;
+
+  @IsOptional()
+  @IsString()
+  endDate?: string;
+}
+
+export class ShareStatsResponse {
+  articleId: string;
+  articleTitle: string;
+  facebookShares: number;
+  twitterShares: number;
+  instagramShares: number;
+  tiktokShares: number;
+  telegramShares: number;
+  linkShares: number;
+  totalShares: number;
+  views: number;
+  shareRate: number;
+  createdAt: Date;
+  updatedAt: Date;
+}

backend/src/modules/analytics/analytics.entity.ts

@@ -0,0 +1,59 @@
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
+import { Article } from '../entities';
+
+export type SharePlatform =
+  | 'facebook'
+  | 'twitter'
+  | 'instagram'
+  | 'tiktok'
+  | 'telegram'
+  | 'link';
+
+@Entity('share_events')
+export class ShareEvent {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column()
+  articleId: string;
+
+  @Column({ type: 'text' })
+  platform: SharePlatform;
+
+  @Column({ nullable: true })
+  userId: string;
+
+  @Column({ nullable: true })
+  userAgent: string;
+
+  @Column({ nullable: true })
+  ipAddress: string;
+
+  @CreateDateColumn()
+  createdAt: Date;
+
+  @ManyToOne(() => Article, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'articleId' })
+  article: Article;
+}
+
+export interface ShareStats {
+  articleId: string;
+  articleTitle: string;
+  facebookShares: number;
+  twitterShares: number;
+  instagramShares: number;
+  tiktokShares: number;
+  telegramShares: number;
+  linkShares: number;
+  totalShares: number;
+  views: number;
+  shareRate: number;
+}

backend/src/modules/analytics/analytics.module.ts

@@ -0,0 +1,14 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { AnalyticsController } from './analytics.controller';
+import { AnalyticsService } from './analytics.service';
+import { ShareEvent } from './analytics.entity';
+import { Article } from '../entities';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([ShareEvent, Article])],
+  controllers: [AnalyticsController],
+  providers: [AnalyticsService],
+  exports: [AnalyticsService],
+})
+export class AnalyticsModule {}

backend/src/modules/analytics/analytics.service.ts

@@ -0,0 +1,282 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { ShareEvent, SharePlatform } from './analytics.entity';
+import { Article } from '../entities';
+import {
+  TrackShareDto,
+  GetShareStatsDto,
+  ShareStatsResponse,
+} from './analytics.dto';
+
+@Injectable()
+export class AnalyticsService {
+  private readonly logger = new Logger(AnalyticsService.name);
+
+  constructor(
+    @InjectRepository(ShareEvent)
+    private readonly shareEventRepository: Repository<ShareEvent>,
+    @InjectRepository(Article)
+    private readonly articleRepository: Repository<Article>,
+  ) {}
+
+  async trackShare(trackShareDto: TrackShareDto): Promise<ShareEvent> {
+    const shareEvent = this.shareEventRepository.create(trackShareDto);
+
+    // Also update the article's share counters
+    await this.incrementArticleShareCounter(
+      trackShareDto.articleId,
+      trackShareDto.platform,
+    );
+
+    return await this.shareEventRepository.save(shareEvent);
+  }
+
+  private async incrementArticleShareCounter(
+    articleId: string,
+    platform: SharePlatform,
+  ): Promise<void> {
+    const updateField = this.getShareCounterField(platform);
+    if (!updateField) return;
+
+    await this.articleRepository
+      .createQueryBuilder()
+      .update(Article)
+      .set({ [updateField]: () => `${updateField} + 1` })
+      .where('id = :id', { id: articleId })
+      .execute();
+  }
+
+  private getShareCounterField(platform: SharePlatform): string | null {
+    switch (platform) {
+      case 'facebook':
+        return 'facebookShares';
+      case 'twitter':
+        return 'twitterShares';
+      case 'instagram':
+        return 'instagramShares';
+      case 'tiktok':
+        return 'tiktokShares';
+      case 'telegram':
+        return 'telegramShares';
+      default:
+        return null; // 'link' shares don't increment counters
+    }
+  }
+
+  async getShareStats(
+    getShareStatsDto: GetShareStatsDto,
+  ): Promise<ShareStatsResponse[]> {
+    const query = this.articleRepository
+      .createQueryBuilder('article')
+      .select([
+        'article.id as "articleId"',
+        'article.title as "articleTitle"',
+        'article.facebookShares as "facebookShares"',
+        'article.twitterShares as "twitterShares"',
+        'article.instagramShares as "instagramShares"',
+        'article.tiktokShares as "tiktokShares"',
+        'article.telegramShares as "telegramShares"',
+        'article.views as "views"',
+        'article.createdAt as "createdAt"',
+        'article.updatedAt as "updatedAt"',
+      ])
+      .addSelect(
+        `(article.facebookShares + article.twitterShares + article.instagramShares + article.tiktokShares + article.telegramShares) as "totalShares"`,
+      )
+      .addSelect(
+        `CASE 
+          WHEN article.views > 0 
+          THEN ROUND(
+            (article.facebookShares + article.twitterShares + article.instagramShares + article.tiktokShares + article.telegramShares)::decimal / article.views * 100, 
+            2
+          )
+          ELSE 0 
+        END as "shareRate"`,
+      );
+
+    if (getShareStatsDto.articleId) {
+      query.where('article.id = :articleId', {
+        articleId: getShareStatsDto.articleId,
+      });
+    }
+
+    if (getShareStatsDto.startDate) {
+      query.andWhere('article.createdAt >= :startDate', {
+        startDate: getShareStatsDto.startDate,
+      });
+    }
+
+    if (getShareStatsDto.endDate) {
+      query.andWhere('article.createdAt <= :endDate', {
+        endDate: getShareStatsDto.endDate,
+      });
+    }
+
+    query.orderBy('"totalShares"', 'DESC');
+
+    const rawResults = await query.getRawMany<{
+      articleId: string;
+      articleTitle: string;
+      facebookShares: string;
+      twitterShares: string;
+      instagramShares: string;
+      tiktokShares: string;
+      telegramShares: string;
+      views: string;
+      createdAt: string;
+      updatedAt: string;
+      totalShares: string;
+      shareRate: string;
+    }>();
+
+    // Get link shares from share_events table
+    const results: ShareStatsResponse[] = [];
+    for (const rawResult of rawResults) {
+      const linkShares = await this.shareEventRepository.count({
+        where: {
+          articleId: rawResult.articleId,
+          platform: 'link',
+        },
+      });
+
+      const facebookShares = parseInt(rawResult.facebookShares) || 0;
+      const twitterShares = parseInt(rawResult.twitterShares) || 0;
+      const instagramShares = parseInt(rawResult.instagramShares) || 0;
+      const tiktokShares = parseInt(rawResult.tiktokShares) || 0;
+      const telegramShares = parseInt(rawResult.telegramShares) || 0;
+      const views = parseInt(rawResult.views) || 0;
+      const baseTotalShares =
+        facebookShares +
+        twitterShares +
+        instagramShares +
+        tiktokShares +
+        telegramShares;
+      const totalShares = baseTotalShares + linkShares;
+      const shareRate =
+        views > 0 ? parseFloat(((totalShares / views) * 100).toFixed(2)) : 0;
+
+      results.push({
+        articleId: rawResult.articleId,
+        articleTitle: rawResult.articleTitle,
+        facebookShares,
+        twitterShares,
+        instagramShares,
+        tiktokShares,
+        telegramShares,
+        linkShares,
+        totalShares,
+        views,
+        shareRate,
+        createdAt: new Date(rawResult.createdAt),
+        updatedAt: new Date(rawResult.updatedAt),
+      });
+    }
+
+    return results;
+  }
+
+  async getTopSharedArticles(
+    limit: number = 10,
+  ): Promise<ShareStatsResponse[]> {
+    const stats = await this.getShareStats({});
+    return stats.slice(0, limit);
+  }
+
+  async getShareTrends(
+    startDate: Date,
+    endDate: Date,
+    interval: 'day' | 'week' | 'month' = 'day',
+  ): Promise<
+    Array<{ period: string; platform: SharePlatform; count: number }>
+  > {
+    const dateFormat =
+      interval === 'day'
+        ? 'YYYY-MM-DD'
+        : interval === 'week'
+          ? 'YYYY-WW'
+          : 'YYYY-MM';
+
+    const query = this.shareEventRepository
+      .createQueryBuilder('share_event')
+      .select([
+        `TO_CHAR(share_event.createdAt, '${dateFormat}') as period`,
+        'share_event.platform as platform',
+        'COUNT(*) as count',
+      ])
+      .where('share_event.createdAt >= :startDate', { startDate })
+      .andWhere('share_event.createdAt <= :endDate', { endDate })
+      .groupBy('period, platform')
+      .orderBy('period', 'ASC');
+
+    const rawResults = await query.getRawMany<{
+      period: string;
+      platform: string;
+      count: string;
+    }>();
+
+    // Convert platform strings to SharePlatform type
+    return rawResults.map((result) => ({
+      period: result.period,
+      platform: result.platform as SharePlatform,
+      count: parseInt(result.count) || 0,
+    }));
+  }
+
+  async getTotalShareStats(): Promise<{
+    totalShares: number;
+    facebookShares: number;
+    twitterShares: number;
+    instagramShares: number;
+    tiktokShares: number;
+    telegramShares: number;
+    linkShares: number;
+  }> {
+    interface ArticleStatsRaw {
+      facebookShares: string;
+      twitterShares: string;
+      instagramShares: string;
+      tiktokShares: string;
+      telegramShares: string;
+    }
+
+    const articleStats = (await this.articleRepository
+      .createQueryBuilder('article')
+      .select([
+        'SUM(article.facebookShares) as facebookShares',
+        'SUM(article.twitterShares) as twitterShares',
+        'SUM(article.instagramShares) as instagramShares',
+        'SUM(article.tiktokShares) as tiktokShares',
+        'SUM(article.telegramShares) as telegramShares',
+      ])
+      .getRawOne()) as ArticleStatsRaw;
+
+    const linkShares = await this.shareEventRepository.count({
+      where: { platform: 'link' },
+    });
+
+    const facebookShares = parseInt(articleStats?.facebookShares || '0') || 0;
+    const twitterShares = parseInt(articleStats?.twitterShares || '0') || 0;
+    const instagramShares = parseInt(articleStats?.instagramShares || '0') || 0;
+    const tiktokShares = parseInt(articleStats?.tiktokShares || '0') || 0;
+    const telegramShares = parseInt(articleStats?.telegramShares || '0') || 0;
+
+    const totalShares =
+      facebookShares +
+      twitterShares +
+      instagramShares +
+      tiktokShares +
+      telegramShares +
+      linkShares;
+
+    return {
+      totalShares,
+      facebookShares,
+      twitterShares,
+      instagramShares,
+      tiktokShares,
+      telegramShares,
+      linkShares,
+    };
+  }
+}

backend/src/modules/articles.controller.ts

@@ -8,7 +8,7 @@ import {
   Body,
   Param,
   Query,
-  ValidationPipe,
+  UseGuards,
 } from '@nestjs/common';
 import { ArticlesService } from './articles.service';
 import {
@@ -16,54 +16,73 @@ import {
   UpdateArticleDto,
   FindArticlesDto,
 } from './articles.dto';
-import { ArticleStatus } from './entities';
+
+import { JwtAuthGuard } from './auth/jwt-auth.guard';
+import { RolesGuard } from './auth/roles.guard';
+import { Roles } from './auth/roles.decorator';
+import { Public } from './auth/public.decorator';
+import { UserRole } from './entities';
 
 @Controller('articles')
 export class ArticlesController {
   constructor(private readonly articlesService: ArticlesService) {}
 
   @Post()
-  create(@Body(new ValidationPipe({ transform: true })) dto: CreateArticleDto) {
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN, UserRole.CONTRIBUTOR)
+  create(@Body() dto: CreateArticleDto) {
     return this.articlesService.create(dto);
   }
 
   @Get()
-  findAll(
-    @Query(new ValidationPipe({ transform: true })) dto: FindArticlesDto,
-  ) {
+  @Public()
+  findAll(@Query() dto: FindArticlesDto) {
     return this.articlesService.findAll(dto);
   }
 
+  @Get('hero')
+  @Public()
+  findHero() {
+    return this.articlesService.findHeroArticle();
+  }
+
   @Get(':id')
+  @Public()
   findOne(@Param('id') id: string) {
     return this.articlesService.findOne(id);
   }
 
   @Get('slug/:slug')
+  @Public()
   findBySlug(@Param('slug') slug: string) {
     return this.articlesService.findBySlug(slug);
   }
 
   @Put(':id')
-  update(
-    @Param('id') id: string,
-    @Body(new ValidationPipe({ transform: true })) dto: UpdateArticleDto,
-  ) {
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN, UserRole.CONTRIBUTOR)
+  update(@Param('id') id: string, @Body() dto: UpdateArticleDto) {
     return this.articlesService.update(id, dto);
   }
 
   @Delete(':id')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN, UserRole.CONTRIBUTOR)
   remove(@Param('id') id: string) {
     return this.articlesService.remove(id);
   }
 
   @Patch(':id/archive')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN, UserRole.CONTRIBUTOR)
   archive(@Param('id') id: string) {
     return this.articlesService.archive(id);
   }
 
   @Patch(':id/publish')
-  publish(@Param('id') id: string, @Query('status') status?: ArticleStatus) {
-    return this.articlesService.publish(id, status || ArticleStatus.PUBLISHED);
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN, UserRole.CONTRIBUTOR)
+  publish(@Param('id') id: string) {
+    return this.articlesService.publish(id);
   }
 }

backend/src/modules/articles.dto.ts

@@ -6,7 +6,7 @@ import {
   IsUUID,
   IsNumber,
   IsBoolean,
-  IsDate,
+  IsDateString,
 } from 'class-validator';
 import {
   ArticleStatus,
@@ -48,6 +48,10 @@ export class CreateArticleDto {
   @IsString()
   strapiId?: string;
 
+  @IsOptional()
+  @IsBoolean()
+  isHero?: boolean;
+
   @IsOptional()
   @IsUUID()
   authorId?: string;
@@ -75,6 +79,30 @@ export class CreateArticleDto {
   @IsOptional()
   @IsString()
   videoCaption?: string;
+
+  @IsOptional()
+  @IsString()
+  ogTitle?: string;
+
+  @IsOptional()
+  @IsString()
+  ogDescription?: string;
+
+  @IsOptional()
+  @IsString()
+  ogImage?: string;
+
+  @IsOptional()
+  @IsString()
+  twitterTitle?: string;
+
+  @IsOptional()
+  @IsString()
+  twitterDescription?: string;
+
+  @IsOptional()
+  @IsString()
+  twitterImage?: string;
 }
 
 export class UpdateArticleDto {
@@ -111,6 +139,10 @@ export class UpdateArticleDto {
   @IsString()
   strapiId?: string;
 
+  @IsOptional()
+  @IsBoolean()
+  isHero?: boolean;
+
   @IsOptional()
   @IsUUID()
   authorId?: string;
@@ -138,6 +170,30 @@ export class UpdateArticleDto {
   @IsOptional()
   @IsString()
   videoCaption?: string;
+
+  @IsOptional()
+  @IsString()
+  ogTitle?: string;
+
+  @IsOptional()
+  @IsString()
+  ogDescription?: string;
+
+  @IsOptional()
+  @IsString()
+  ogImage?: string;
+
+  @IsOptional()
+  @IsString()
+  twitterTitle?: string;
+
+  @IsOptional()
+  @IsString()
+  twitterDescription?: string;
+
+  @IsOptional()
+  @IsString()
+  twitterImage?: string;
 }
 
 export class FindArticlesDto {
@@ -169,6 +225,35 @@ export class FindArticlesDto {
   limit?: number;
 }
 
+export class FindLiveBlogsDto {
+  @IsOptional()
+  @IsString()
+  category?: string;
+
+  @IsOptional()
+  @IsString()
+  author?: string;
+
+  @IsOptional()
+  @IsString()
+  status?: string;
+
+  @IsOptional()
+  @IsBoolean()
+  isPinned?: boolean;
+
+  @IsOptional()
+  @IsString()
+  search?: string;
+
+  @IsOptional()
+  @IsNumber()
+  page?: number;
+
+  @IsOptional()
+  limit?: number;
+}
+
 export class CreateLiveBlogDto {
   @IsString()
   title: string;
@@ -292,16 +377,24 @@ export class CreateLiveBlogUpdateDto {
   isPinned?: boolean;
 
   @IsOptional()
-  @IsUUID()
+  @IsString()
   authorId?: string;
 
   @IsOptional()
-  @IsDate()
-  scheduledAt?: Date;
+  @IsDateString()
+  scheduledAt?: string;
 
   @IsOptional()
   @IsString()
-  strapiId?: string;
+  image?: string;
+
+  @IsOptional()
+  @IsString()
+  videoUrl?: string;
+
+  @IsOptional()
+  @IsString()
+  authorName?: string;
 }
 
 export class UpdateLiveBlogUpdateDto {
@@ -314,43 +407,18 @@ export class UpdateLiveBlogUpdateDto {
   isPinned?: boolean;
 
   @IsOptional()
-  @IsUUID()
+  @IsString()
   authorId?: string;
 
   @IsOptional()
-  @IsDate()
-  scheduledAt?: Date;
+  @IsString()
+  image?: string;
 
   @IsOptional()
   @IsString()
-  strapiId?: string;
-}
-
-export class FindLiveBlogsDto {
-  @IsOptional()
-  @IsString()
-  category?: string;
-
-  @IsOptional()
-  @IsString()
-  author?: string;
-
-  @IsOptional()
-  @IsString()
-  status?: string;
-
-  @IsOptional()
-  @IsBoolean()
-  isPinned?: boolean;
-
-  @IsOptional()
-  @IsString()
-  search?: string;
-
-  @IsOptional()
-  @IsNumber()
-  page?: number;
-
-  @IsOptional()
-  limit?: number;
+  videoUrl?: string;
+
+  @IsOptional()
+  @IsString()
+  authorName?: string;
 }

backend/src/modules/articles.dto.ts.backup

@@ -0,0 +1,356 @@
+import {
+  IsString,
+  IsOptional,
+  IsEnum,
+  IsArray,
+  IsUUID,
+  IsNumber,
+  IsBoolean,
+  IsDate,
+} from 'class-validator';
+import {
+  ArticleStatus,
+  LiveBlogStatus,
+  ImagePosition,
+  ImageSize,
+  VideoPosition,
+} from './entities';
+
+export class CreateArticleDto {
+  @IsString()
+  title: string;
+
+  @IsString()
+  content: string;
+
+  @IsOptional()
+  @IsString()
+  excerpt?: string;
+
+  @IsOptional()
+  @IsString()
+  slug?: string;
+
+  @IsOptional()
+  @IsString()
+  featuredImage?: string;
+
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  tags?: string[];
+
+  @IsOptional()
+  @IsEnum(ArticleStatus)
+  status?: ArticleStatus;
+
+  @IsOptional()
+  @IsString()
+  strapiId?: string;
+
+  @IsOptional()
+  @IsUUID()
+  authorId?: string;
+
+  @IsOptional()
+  @IsUUID()
+  categoryId?: string;
+
+  @IsOptional()
+  @IsEnum(ImagePosition)
+  imagePosition?: ImagePosition;
+
+  @IsOptional()
+  @IsEnum(ImageSize)
+  imageSize?: ImageSize;
+
+  @IsOptional()
+  @IsString()
+  videoUrl?: string;
+
+  @IsOptional()
+  @IsEnum(VideoPosition)
+  videoPosition?: VideoPosition;
+
+  @IsOptional()
+  @IsString()
+  videoCaption?: string;
+}
+
+export class UpdateArticleDto {
+  @IsOptional()
+  @IsString()
+  title?: string;
+
+  @IsOptional()
+  @IsString()
+  content?: string;
+
+  @IsOptional()
+  @IsString()
+  excerpt?: string;
+
+  @IsOptional()
+  @IsString()
+  slug?: string;
+
+  @IsOptional()
+  @IsString()
+  featuredImage?: string;
+
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  tags?: string[];
+
+  @IsOptional()
+  @IsEnum(ArticleStatus)
+  status?: ArticleStatus;
+
+  @IsOptional()
+  @IsString()
+  strapiId?: string;
+
+  @IsOptional()
+  @IsUUID()
+  authorId?: string;
+
+  @IsOptional()
+  @IsUUID()
+  categoryId?: string;
+
+  @IsOptional()
+  @IsEnum(ImagePosition)
+  imagePosition?: ImagePosition;
+
+  @IsOptional()
+  @IsEnum(ImageSize)
+  imageSize?: ImageSize;
+
+  @IsOptional()
+  @IsString()
+  videoUrl?: string;
+
+  @IsOptional()
+  @IsEnum(VideoPosition)
+  videoPosition?: VideoPosition;
+
+  @IsOptional()
+  @IsString()
+  videoCaption?: string;
+}
+
+export class FindArticlesDto {
+  @IsOptional()
+  @IsString()
+  category?: string;
+
+  @IsOptional()
+  @IsString()
+  author?: string;
+
+  @IsOptional()
+  @IsString()
+  tag?: string;
+
+  @IsOptional()
+  @IsString()
+  status?: string;
+
+  @IsOptional()
+  @IsString()
+  search?: string;
+
+  @IsOptional()
+  @IsNumber()
+  page?: number;
+
+  @IsOptional()
+  limit?: number;
+}
+
+export class CreateLiveBlogDto {
+  @IsString()
+  title: string;
+
+  @IsString()
+  slug: string;
+
+  @IsOptional()
+  @IsString()
+  description?: string;
+
+  @IsOptional()
+  @IsEnum(LiveBlogStatus)
+  status?: LiveBlogStatus;
+
+  @IsOptional()
+  @IsBoolean()
+  isPinned?: boolean;
+
+  @IsOptional()
+  @IsString()
+  strapiId?: string;
+
+  @IsOptional()
+  @IsUUID()
+  authorId?: string;
+
+  @IsOptional()
+  @IsUUID()
+  categoryId?: string;
+
+  @IsOptional()
+  @IsString()
+  featuredImage?: string;
+
+  @IsOptional()
+  @IsEnum(ImagePosition)
+  imagePosition?: ImagePosition;
+
+  @IsOptional()
+  @IsEnum(ImageSize)
+  imageSize?: ImageSize;
+
+  @IsOptional()
+  @IsString()
+  videoUrl?: string;
+
+  @IsOptional()
+  @IsEnum(VideoPosition)
+  videoPosition?: VideoPosition;
+
+  @IsOptional()
+  @IsString()
+  videoCaption?: string;
+}
+
+export class UpdateLiveBlogDto {
+  @IsOptional()
+  @IsString()
+  title?: string;
+
+  @IsOptional()
+  @IsString()
+  slug?: string;
+
+  @IsOptional()
+  @IsString()
+  description?: string;
+
+  @IsOptional()
+  @IsEnum(LiveBlogStatus)
+  status?: LiveBlogStatus;
+
+  @IsOptional()
+  @IsBoolean()
+  isPinned?: boolean;
+
+  @IsOptional()
+  @IsString()
+  strapiId?: string;
+
+  @IsOptional()
+  @IsUUID()
+  authorId?: string;
+
+  @IsOptional()
+  @IsUUID()
+  categoryId?: string;
+
+  @IsOptional()
+  @IsString()
+  featuredImage?: string;
+
+  @IsOptional()
+  @IsEnum(ImagePosition)
+  imagePosition?: ImagePosition;
+
+  @IsOptional()
+  @IsEnum(ImageSize)
+  imageSize?: ImageSize;
+
+  @IsOptional()
+  @IsString()
+  videoUrl?: string;
+
+  @IsOptional()
+  @IsEnum(VideoPosition)
+  videoPosition?: VideoPosition;
+
+  @IsOptional()
+  @IsString()
+  videoCaption?: string;
+}
+
+export class CreateLiveBlogUpdateDto {
+  @IsString()
+  content: string;
+
+  @IsOptional()
+  @IsBoolean()
+  isPinned?: boolean;
+
+  @IsOptional()
+  @IsUUID()
+  authorId?: string;
+
+  @IsOptional()
+  @IsDate()
+  scheduledAt?: Date;
+
+  @IsOptional()
+  @IsString()
+  strapiId?: string;
+}
+
+export class UpdateLiveBlogUpdateDto {
+  @IsOptional()
+  @IsString()
+  content?: string;
+
+  @IsOptional()
+  @IsBoolean()
+  isPinned?: boolean;
+
+  @IsOptional()
+  @IsUUID()
+  authorId?: string;
+
+  @IsOptional()
+  @IsDate()
+  scheduledAt?: Date;
+
+  @IsOptional()
+  @IsString()
+  strapiId?: string;
+}
+
+export class FindLiveBlogsDto {
+  @IsOptional()
+  @IsString()
+  category?: string;
+
+  @IsOptional()
+  @IsString()
+  author?: string;
+
+  @IsOptional()
+  @IsString()
+  status?: string;
+
+  @IsOptional()
+  @IsBoolean()
+  isPinned?: boolean;
+
+  @IsOptional()
+  @IsString()
+  search?: string;
+
+  @IsOptional()
+  @IsNumber()
+  page?: number;
+
+  @IsOptional()
+  limit?: number;
+}

backend/src/modules/articles.module.ts

@@ -4,11 +4,13 @@ import { ArticlesService } from './articles.service';
 import { ArticlesController } from './articles.controller';
 import { Article, Author, Category } from './entities';
 import { StrapiModule } from './strapi.module';
+import { PushModule } from './push/push.module';
 
 @Module({
   imports: [
     TypeOrmModule.forFeature([Article, Author, Category]),
     forwardRef(() => StrapiModule),
+    forwardRef(() => PushModule),
   ],
   controllers: [ArticlesController],
   providers: [ArticlesService],

backend/src/modules/articles.service.ts

@@ -4,6 +4,7 @@ import {
   Logger,
   Inject,
   forwardRef,
+  Optional,
 } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Repository } from 'typeorm';
@@ -14,6 +15,7 @@ import {
   UpdateArticleDto,
   FindArticlesDto,
 } from './articles.dto';
+import { PushService } from './push/push.service';
 
 @Injectable()
 export class ArticlesService {
@@ -24,6 +26,9 @@ export class ArticlesService {
     private readonly articleRepository: Repository<Article>,
     @Inject(forwardRef(() => StrapiService))
     private readonly strapiService: StrapiService,
+    @Optional()
+    @Inject(forwardRef(() => PushService))
+    private readonly pushService?: PushService,
   ) {}
 
   async create(dto: CreateArticleDto): Promise<Article> {
@@ -93,6 +98,9 @@ export class ArticlesService {
       throw new NotFoundException(`Article with ID ${id} not found`);
     }
 
+    // Increment view count
+    await this.articleRepository.increment({ id }, 'views', 1);
+
     return article;
   }
 
@@ -106,11 +114,27 @@ export class ArticlesService {
       throw new NotFoundException(`Article with slug ${slug} not found`);
     }
 
+    // Increment view count
+    await this.articleRepository.increment({ slug }, 'views', 1);
+
+    return article;
+  }
+
+  async findOneWithoutIncrement(id: string): Promise<Article> {
+    const article = await this.articleRepository.findOne({
+      where: { id },
+      relations: ['author', 'category'],
+    });
+
+    if (!article) {
+      throw new NotFoundException(`Article with ID ${id} not found`);
+    }
+
     return article;
   }
 
   async update(id: string, dto: UpdateArticleDto): Promise<Article> {
-    const article = await this.findOne(id);
+    const article = await this.findOneWithoutIncrement(id);
     const oldStatus = article.status;
     Object.assign(article, dto);
     const savedArticle = await this.articleRepository.save(article);
@@ -139,7 +163,7 @@ export class ArticlesService {
   }
 
   async remove(id: string): Promise<void> {
-    const article = await this.findOne(id);
+    const article = await this.findOneWithoutIncrement(id);
 
     // Delete from Strapi if article has strapiId
     if (article.strapiId) {
@@ -155,7 +179,7 @@ export class ArticlesService {
   }
 
   async archive(id: string): Promise<Article> {
-    const article = await this.findOne(id);
+    const article = await this.findOneWithoutIncrement(id);
     article.status = ArticleStatus.ARCHIVED;
     const savedArticle = await this.articleRepository.save(article);
 
@@ -182,7 +206,8 @@ export class ArticlesService {
     id: string,
     status: ArticleStatus = ArticleStatus.PUBLISHED,
   ): Promise<Article> {
-    const article = await this.findOne(id);
+    const article = await this.findOneWithoutIncrement(id);
+    const wasDraft = article.status === ArticleStatus.DRAFT;
     article.status = status;
     const savedArticle = await this.articleRepository.save(article);
 
@@ -202,6 +227,21 @@ export class ArticlesService {
       }
     }
 
+    // Send push notification for newly published articles
+    if (wasDraft && status === ArticleStatus.PUBLISHED && this.pushService) {
+      try {
+        await this.pushService.notifyNewArticle(
+          savedArticle.title,
+          savedArticle.slug,
+        );
+        this.logger.log(
+          `Push notification sent for article: ${savedArticle.title}`,
+        );
+      } catch (error) {
+        this.logger.error('Failed to send push notification:', error);
+      }
+    }
+
     return savedArticle;
   }
 
@@ -293,4 +333,15 @@ export class ArticlesService {
     await this.articleRepository.remove(article);
     this.logger.log(`Successfully deleted article with strapiId: ${strapiId}`);
   }
+
+  async findHeroArticle(): Promise<Article | null> {
+    return this.articleRepository.findOne({
+      where: {
+        isHero: true,
+        status: ArticleStatus.PUBLISHED,
+      },
+      relations: ['author', 'category'],
+      order: { createdAt: 'DESC' },
+    });
+  }
 }

backend/src/modules/auth/auth.controller.ts

@@ -0,0 +1,31 @@
+import {
+  Controller,
+  Post,
+  Body,
+  HttpCode,
+  HttpStatus,
+  UseGuards,
+} from '@nestjs/common';
+import { AuthService } from './auth.service';
+import { LoginUserDto, CreateUserDto } from '../users/user.dto';
+import { LocalAuthGuard } from './local-auth.guard';
+import { Public } from './public.decorator';
+
+@Controller('auth')
+export class AuthController {
+  constructor(private readonly authService: AuthService) {}
+
+  @Public()
+  @UseGuards(LocalAuthGuard)
+  @Post('login')
+  @HttpCode(HttpStatus.OK)
+  async login(@Body() loginUserDto: LoginUserDto) {
+    return this.authService.login(loginUserDto);
+  }
+
+  @Public()
+  @Post('register')
+  async register(@Body() createUserDto: CreateUserDto) {
+    return this.authService.register(createUserDto);
+  }
+}

backend/src/modules/auth/auth.module.ts

@@ -0,0 +1,34 @@
+import { Module } from '@nestjs/common';
+import { JwtModule } from '@nestjs/jwt';
+import { PassportModule } from '@nestjs/passport';
+import { ConfigModule, ConfigService } from '@nestjs/config';
+import { UserModule } from '../users/user.module';
+import { AuthService } from './auth.service';
+import { AuthController } from './auth.controller';
+import { JwtStrategy } from './jwt.strategy';
+import { LocalStrategy } from './local.strategy';
+
+@Module({
+  imports: [
+    UserModule,
+    PassportModule,
+    JwtModule.registerAsync({
+      imports: [ConfigModule],
+      useFactory: (configService: ConfigService) => {
+        const expiration = configService.get<string>('JWT_EXPIRATION') || '7d';
+        return {
+          secret:
+            configService.get<string>('JWT_SECRET') || 'default-secret-key',
+          signOptions: {
+            expiresIn: expiration ? parseInt(expiration) : 3600, // Convert to number
+          },
+        };
+      },
+      inject: [ConfigService],
+    }),
+  ],
+  controllers: [AuthController],
+  providers: [AuthService, LocalStrategy, JwtStrategy],
+  exports: [AuthService, JwtModule],
+})
+export class AuthModule {}

backend/src/modules/auth/auth.service.ts

@@ -0,0 +1,80 @@
+import { Injectable } from '@nestjs/common';
+import { JwtService } from '@nestjs/jwt';
+import { UserService } from '../users/user.service';
+import { CreateUserDto, LoginUserDto } from '../users/user.dto';
+import { AuthResponse, JwtPayload } from './types';
+import { UserRole } from '../entities';
+
+@Injectable()
+export class AuthService {
+  constructor(
+    private userService: UserService,
+    private jwtService: JwtService,
+  ) {}
+
+  async validateUser(
+    username: string,
+    password: string,
+  ): Promise<{
+    id: string;
+    username: string;
+    email: string;
+    role: string;
+  } | null> {
+    return this.userService.validateUser(username, password);
+  }
+
+  async login(loginUserDto: LoginUserDto): Promise<AuthResponse> {
+    const user = await this.validateUser(
+      loginUserDto.username,
+      loginUserDto.password,
+    );
+    if (!user) {
+      throw new Error('Invalid credentials');
+    }
+
+    const payload: JwtPayload = {
+      sub: user.id,
+      username: user.username,
+      email: user.email,
+      role: user.role as UserRole,
+    };
+
+    return {
+      access_token: this.jwtService.sign(payload),
+      user: {
+        id: user.id,
+        username: user.username,
+        email: user.email,
+        role: user.role as UserRole,
+      },
+    };
+  }
+
+  async register(createUserDto: CreateUserDto): Promise<AuthResponse> {
+    // Default new users to USER role
+    const userDto = {
+      ...createUserDto,
+      role: UserRole.USER,
+    };
+
+    const user = await this.userService.create(userDto);
+
+    const payload: JwtPayload = {
+      sub: user.id,
+      username: user.username,
+      email: user.email,
+      role: user.role,
+    };
+
+    return {
+      access_token: this.jwtService.sign(payload),
+      user: {
+        id: user.id,
+        username: user.username,
+        email: user.email,
+        role: user.role,
+      },
+    };
+  }
+}

backend/src/modules/auth/jwt-auth-public.guard.ts

@@ -0,0 +1,24 @@
+import { Injectable, ExecutionContext } from '@nestjs/common';
+import { Reflector } from '@nestjs/core';
+import { AuthGuard } from '@nestjs/passport';
+import { IS_PUBLIC_KEY } from './public.decorator';
+
+@Injectable()
+export class JwtAuthPublicGuard extends AuthGuard('jwt') {
+  constructor(private reflector: Reflector) {
+    super();
+  }
+
+  canActivate(context: ExecutionContext) {
+    const isPublic = this.reflector.getAllAndOverride<boolean>(IS_PUBLIC_KEY, [
+      context.getHandler(),
+      context.getClass(),
+    ]);
+
+    if (isPublic) {
+      return true;
+    }
+
+    return super.canActivate(context);
+  }
+}

backend/src/modules/auth/jwt-auth.guard.ts

@@ -0,0 +1,9 @@
+import { Injectable, ExecutionContext } from '@nestjs/common';
+import { AuthGuard } from '@nestjs/passport';
+
+@Injectable()
+export class JwtAuthGuard extends AuthGuard('jwt') {
+  canActivate(context: ExecutionContext) {
+    return super.canActivate(context);
+  }
+}

backend/src/modules/auth/jwt.strategy.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@nestjs/common';
+import { PassportStrategy } from '@nestjs/passport';
+import { ExtractJwt, Strategy } from 'passport-jwt';
+import { ConfigService } from '@nestjs/config';
+import { JwtPayload } from './types';
+
+@Injectable()
+export class JwtStrategy extends PassportStrategy(Strategy) {
+  constructor(private configService: ConfigService) {
+    super({
+      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
+      ignoreExpiration: false,
+      secretOrKey:
+        configService.get<string>('JWT_SECRET') || 'default-secret-key',
+    });
+  }
+
+  async validate(payload: JwtPayload) {
+    await Promise.resolve(); // Add await to satisfy eslint rule
+    return {
+      id: payload.sub,
+      username: payload.username,
+      email: payload.email,
+      role: payload.role,
+    };
+  }
+}

backend/src/modules/auth/local-auth.guard.ts

@@ -0,0 +1,5 @@
+import { Injectable } from '@nestjs/common';
+import { AuthGuard } from '@nestjs/passport';
+
+@Injectable()
+export class LocalAuthGuard extends AuthGuard('local') {}

backend/src/modules/auth/local.strategy.ts

@@ -0,0 +1,22 @@
+import { Injectable, UnauthorizedException } from '@nestjs/common';
+import { PassportStrategy } from '@nestjs/passport';
+import { Strategy } from 'passport-local';
+import { AuthService } from './auth.service';
+
+@Injectable()
+export class LocalStrategy extends PassportStrategy(Strategy) {
+  constructor(private authService: AuthService) {
+    super();
+  }
+
+  async validate(
+    username: string,
+    password: string,
+  ): Promise<{ id: string; username: string; email: string; role: string }> {
+    const user = await this.authService.validateUser(username, password);
+    if (!user) {
+      throw new UnauthorizedException('Invalid credentials');
+    }
+    return user;
+  }
+}

backend/src/modules/auth/public.decorator.ts

@@ -0,0 +1,4 @@
+import { SetMetadata } from '@nestjs/common';
+
+export const IS_PUBLIC_KEY = 'isPublic';
+export const Public = () => SetMetadata(IS_PUBLIC_KEY, true);

backend/src/modules/auth/roles.decorator.ts

@@ -0,0 +1,4 @@
+import { SetMetadata } from '@nestjs/common';
+import { UserRole } from '../entities';
+
+export const Roles = (...roles: UserRole[]) => SetMetadata('roles', roles);

backend/src/modules/auth/roles.guard.ts

@@ -0,0 +1,31 @@
+import { Injectable, CanActivate, ExecutionContext } from '@nestjs/common';
+import { Reflector } from '@nestjs/core';
+import { UserRole } from '../entities';
+
+@Injectable()
+export class RolesGuard implements CanActivate {
+  constructor(private reflector: Reflector) {}
+
+  canActivate(context: ExecutionContext): boolean {
+    const requiredRoles = this.reflector.getAllAndOverride<UserRole[]>(
+      'roles',
+      [context.getHandler(), context.getClass()],
+    );
+
+    if (!requiredRoles) {
+      return true;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const request = context.switchToHttp().getRequest();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    const user = request.user as
+      | { id: string; username: string; email: string; role: UserRole }
+      | undefined;
+    if (!user) {
+      return false;
+    }
+
+    return requiredRoles.includes(user.role);
+  }
+}

backend/src/modules/auth/types.ts

@@ -0,0 +1,27 @@
+import { UserRole } from '../entities';
+
+export interface JwtPayload {
+  sub: string;
+  username: string;
+  email: string;
+  role: UserRole;
+}
+
+export interface RequestWithUser extends Request {
+  user: {
+    id: string;
+    username: string;
+    email: string;
+    role: UserRole;
+  };
+}
+
+export interface AuthResponse {
+  access_token: string;
+  user: {
+    id: string;
+    username: string;
+    email: string;
+    role: UserRole;
+  };
+}

backend/src/modules/comment/comment.controller.ts

@@ -0,0 +1,153 @@
+import {
+  Controller,
+  Get,
+  Post,
+  Put,
+  Delete,
+  Patch,
+  Body,
+  Param,
+  Query,
+  UseGuards,
+  Request,
+  HttpCode,
+  HttpStatus,
+} from '@nestjs/common';
+import { CommentService } from './comment.service';
+import {
+  CreateCommentDto,
+  UpdateCommentDto,
+  CommentResponseDto,
+  FindCommentsDto,
+  CreateReactionDto,
+} from './comment.dto';
+import { JwtAuthGuard } from '../auth/jwt-auth.guard';
+import { RolesGuard } from '../auth/roles.guard';
+import { Roles } from '../auth/roles.decorator';
+import { Public } from '../auth/public.decorator';
+import { UserRole } from '../entities';
+import type { RequestWithUser } from '../auth/types';
+
+@Controller('comments')
+export class CommentController {
+  constructor(private readonly commentService: CommentService) {}
+
+  @Post()
+  @UseGuards(JwtAuthGuard)
+  async create(
+    @Body() createCommentDto: CreateCommentDto,
+    @Request() req: RequestWithUser,
+  ): Promise<CommentResponseDto> {
+    return this.commentService.create(createCommentDto, req.user.id);
+  }
+
+  @Get()
+  @Public()
+  async findAll(
+    @Query() findCommentsDto: FindCommentsDto,
+  ): Promise<CommentResponseDto[]> {
+    return this.commentService.findAll(findCommentsDto);
+  }
+
+  @Get(':id')
+  @Public()
+  async findOne(@Param('id') id: string): Promise<CommentResponseDto> {
+    return this.commentService.findOne(id);
+  }
+
+  @Put(':id')
+  @UseGuards(JwtAuthGuard)
+  async update(
+    @Param('id') id: string,
+    @Body() updateCommentDto: UpdateCommentDto,
+    @Request() req: RequestWithUser,
+  ): Promise<CommentResponseDto> {
+    return this.commentService.update(
+      id,
+      updateCommentDto,
+      req.user.id,
+      req.user.role,
+    );
+  }
+
+  @Delete(':id')
+  @UseGuards(JwtAuthGuard)
+  @HttpCode(HttpStatus.NO_CONTENT)
+  async remove(
+    @Param('id') id: string,
+    @Request() req: RequestWithUser,
+  ): Promise<void> {
+    return this.commentService.remove(id, req.user.id, req.user.role);
+  }
+
+  @Post('reactions')
+  @UseGuards(JwtAuthGuard)
+  @HttpCode(HttpStatus.NO_CONTENT)
+  async addReaction(
+    @Body() createReactionDto: CreateReactionDto,
+    @Request() req: RequestWithUser,
+  ): Promise<void> {
+    return this.commentService.addReaction(createReactionDto, req.user.id);
+  }
+
+  @Get('reactions/user')
+  @Public()
+  async getUserReaction(
+    @Request() req: RequestWithUser,
+    @Query('articleId') articleId?: string,
+    @Query('liveBlogId') liveBlogId?: string,
+    @Query('commentId') commentId?: string,
+  ): Promise<{ type: string | null }> {
+    // If user is not authenticated, return null
+    if (!req.user?.id) {
+      return { type: null };
+    }
+
+    const reaction = await this.commentService.getUserReaction(
+      req.user.id,
+      articleId,
+      liveBlogId,
+      commentId,
+    );
+    return { type: reaction };
+  }
+
+  @Get('reactions/counts')
+  @Public()
+  async getReactionCounts(
+    @Query('articleId') articleId?: string,
+    @Query('liveBlogId') liveBlogId?: string,
+    @Query('commentId') commentId?: string,
+  ): Promise<{ likes: number; dislikes: number }> {
+    return this.commentService.getReactionCounts(
+      articleId,
+      liveBlogId,
+      commentId,
+    );
+  }
+
+  // Admin endpoints
+  @Patch(':id/hide')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN)
+  async hideComment(@Param('id') id: string): Promise<CommentResponseDto> {
+    return this.commentService.update(
+      id,
+      { isVisible: false },
+      'admin',
+      'admin',
+    );
+  }
+
+  @Patch(':id/show')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN)
+  async showComment(@Param('id') id: string): Promise<CommentResponseDto> {
+    return this.commentService.update(
+      id,
+      { isVisible: true },
+      'admin',
+      'admin',
+    );
+  }
+}

backend/src/modules/comment/comment.dto.ts

@@ -0,0 +1,149 @@
+import {
+  IsString,
+  IsOptional,
+  IsUUID,
+  IsBoolean,
+  IsInt,
+  Min,
+  Max,
+  MaxLength,
+} from 'class-validator';
+import { Type } from 'class-transformer';
+
+interface CommentEntity {
+  id: string;
+  content: string;
+  articleId?: string;
+  liveBlogId?: string;
+  parentId?: string;
+  userId: string;
+  likeCount: number;
+  dislikeCount: number;
+  isVisible: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+  user?: {
+    id: string;
+    username: string;
+  };
+  replies?: CommentEntity[];
+}
+
+export class CreateCommentDto {
+  @IsString()
+  @MaxLength(5000)
+  content: string;
+
+  @IsUUID()
+  @IsOptional()
+  articleId?: string;
+
+  @IsUUID()
+  @IsOptional()
+  liveBlogId?: string;
+
+  @IsUUID()
+  @IsOptional()
+  parentId?: string;
+}
+
+export class UpdateCommentDto {
+  @IsString()
+  @MaxLength(5000)
+  @IsOptional()
+  content?: string;
+
+  @IsBoolean()
+  @IsOptional()
+  isVisible?: boolean;
+}
+
+export class CommentResponseDto {
+  id: string;
+  content: string;
+  articleId?: string;
+  liveBlogId?: string;
+  parentId?: string;
+  userId: string;
+  likeCount: number;
+  dislikeCount: number;
+  isVisible: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+  user: {
+    id: string;
+    username: string;
+  };
+  replies?: CommentResponseDto[];
+
+  constructor(comment: CommentEntity) {
+    this.id = comment.id;
+    this.content = comment.content;
+    this.articleId = comment.articleId;
+    this.liveBlogId = comment.liveBlogId;
+    this.parentId = comment.parentId;
+    this.userId = comment.userId;
+    this.likeCount = comment.likeCount;
+    this.dislikeCount = comment.dislikeCount;
+    this.isVisible = comment.isVisible;
+    this.createdAt = comment.createdAt;
+    this.updatedAt = comment.updatedAt;
+
+    if (comment.user) {
+      this.user = {
+        id: comment.user.id,
+        username: comment.user.username,
+      };
+    }
+
+    if (comment.replies) {
+      this.replies = comment.replies.map(
+        (reply) => new CommentResponseDto(reply),
+      );
+    }
+  }
+}
+
+export class FindCommentsDto {
+  @IsUUID()
+  @IsOptional()
+  articleId?: string;
+
+  @IsUUID()
+  @IsOptional()
+  liveBlogId?: string;
+
+  @IsUUID()
+  @IsOptional()
+  parentId?: string;
+
+  @IsInt()
+  @Min(1)
+  @IsOptional()
+  @Type(() => Number)
+  page?: number = 1;
+
+  @IsInt()
+  @Min(1)
+  @Max(100)
+  @IsOptional()
+  @Type(() => Number)
+  limit?: number = 20;
+}
+
+export class CreateReactionDto {
+  @IsString()
+  type: 'like' | 'dislike';
+
+  @IsUUID()
+  @IsOptional()
+  articleId?: string;
+
+  @IsUUID()
+  @IsOptional()
+  liveBlogId?: string;
+
+  @IsUUID()
+  @IsOptional()
+  commentId?: string;
+}

backend/src/modules/comment/comment.module.ts

@@ -0,0 +1,13 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { Comment, Reaction } from '../entities';
+import { CommentService } from './comment.service';
+import { CommentController } from './comment.controller';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([Comment, Reaction])],
+  controllers: [CommentController],
+  providers: [CommentService],
+  exports: [CommentService],
+})
+export class CommentModule {}

backend/src/modules/comment/comment.service.ts

@@ -0,0 +1,298 @@
+import {
+  Injectable,
+  NotFoundException,
+  BadRequestException,
+} from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { Comment, Reaction, ReactionType } from '../entities';
+import {
+  CreateCommentDto,
+  UpdateCommentDto,
+  CommentResponseDto,
+  FindCommentsDto,
+  CreateReactionDto,
+} from './comment.dto';
+
+@Injectable()
+export class CommentService {
+  constructor(
+    @InjectRepository(Comment)
+    private commentRepository: Repository<Comment>,
+    @InjectRepository(Reaction)
+    private reactionRepository: Repository<Reaction>,
+  ) {}
+
+  async create(
+    createCommentDto: CreateCommentDto,
+    userId: string,
+  ): Promise<CommentResponseDto> {
+    // Validate that comment is attached to either article or live blog
+    if (!createCommentDto.articleId && !createCommentDto.liveBlogId) {
+      throw new BadRequestException(
+        'Comment must be attached to either an article or live blog',
+      );
+    }
+
+    // If parentId is provided, verify it exists
+    if (createCommentDto.parentId) {
+      const parent = await this.commentRepository.findOne({
+        where: { id: createCommentDto.parentId },
+      });
+      if (!parent) {
+        throw new NotFoundException('Parent comment not found');
+      }
+    }
+
+    const comment = this.commentRepository.create({
+      ...createCommentDto,
+      userId,
+    });
+
+    const savedComment = await this.commentRepository.save(comment);
+    return this.findOne(savedComment.id);
+  }
+
+  async findAll(
+    findCommentsDto: FindCommentsDto,
+  ): Promise<CommentResponseDto[]> {
+    const {
+      articleId,
+      liveBlogId,
+      parentId,
+      page = 1,
+      limit = 20,
+    } = findCommentsDto;
+    const skip = (page - 1) * limit;
+
+    const query = this.commentRepository
+      .createQueryBuilder('comment')
+      .leftJoinAndSelect('comment.user', 'user')
+      .leftJoinAndSelect('comment.replies', 'replies')
+      .leftJoinAndSelect('replies.user', 'replyUser')
+      .where('comment.isVisible = :isVisible', { isVisible: true });
+
+    if (articleId) {
+      query.andWhere('comment.articleId = :articleId', { articleId });
+    }
+
+    if (liveBlogId) {
+      query.andWhere('comment.liveBlogId = :liveBlogId', { liveBlogId });
+    }
+
+    if (parentId) {
+      query.andWhere('comment.parentId = :parentId', { parentId });
+    } else {
+      query.andWhere('comment.parentId IS NULL');
+    }
+
+    query.orderBy('comment.createdAt', 'DESC').skip(skip).take(limit);
+
+    const comments = await query.getMany();
+    return comments.map((comment) => new CommentResponseDto(comment));
+  }
+
+  async findOne(id: string): Promise<CommentResponseDto> {
+    const comment = await this.commentRepository
+      .createQueryBuilder('comment')
+      .leftJoinAndSelect('comment.user', 'user')
+      .leftJoinAndSelect('comment.replies', 'replies')
+      .leftJoinAndSelect('replies.user', 'replyUser')
+      .where('comment.id = :id', { id })
+      .andWhere('comment.isVisible = :isVisible', { isVisible: true })
+      .getOne();
+
+    if (!comment) {
+      throw new NotFoundException('Comment not found');
+    }
+
+    return new CommentResponseDto(comment);
+  }
+
+  async update(
+    id: string,
+    updateCommentDto: UpdateCommentDto,
+    userId: string,
+    userRole: string,
+  ): Promise<CommentResponseDto> {
+    const comment = await this.commentRepository.findOne({
+      where: { id },
+      relations: ['user'],
+    });
+
+    if (!comment) {
+      throw new NotFoundException('Comment not found');
+    }
+
+    // Only allow comment owner or admin to update
+    if (comment.userId !== userId && userRole !== 'admin') {
+      throw new BadRequestException('You can only update your own comments');
+    }
+
+    Object.assign(comment, updateCommentDto);
+    const updatedComment = await this.commentRepository.save(comment);
+    return this.findOne(updatedComment.id);
+  }
+
+  async remove(id: string, userId: string, userRole: string): Promise<void> {
+    const comment = await this.commentRepository.findOne({
+      where: { id },
+      relations: ['user'],
+    });
+
+    if (!comment) {
+      throw new NotFoundException('Comment not found');
+    }
+
+    // Only allow comment owner or admin to delete
+    if (comment.userId !== userId && userRole !== 'admin') {
+      throw new BadRequestException('You can only delete your own comments');
+    }
+
+    await this.commentRepository.remove(comment);
+  }
+
+  async addReaction(
+    createReactionDto: CreateReactionDto,
+    userId: string,
+  ): Promise<void> {
+    // Validate that reaction is attached to either article, live blog, or comment
+    const { articleId, liveBlogId, commentId, type } = createReactionDto;
+
+    if (!articleId && !liveBlogId && !commentId) {
+      throw new BadRequestException(
+        'Reaction must be attached to an article, live blog, or comment',
+      );
+    }
+
+    // Check if user already reacted to this item
+    const whereClause: {
+      userId: string;
+      articleId?: string;
+      liveBlogId?: string;
+      commentId?: string;
+    } = { userId };
+    if (articleId) whereClause.articleId = articleId;
+    if (liveBlogId) whereClause.liveBlogId = liveBlogId;
+    if (commentId) whereClause.commentId = commentId;
+
+    const existingReaction = await this.reactionRepository.findOne({
+      where: whereClause,
+    });
+
+    if (existingReaction) {
+      // If same reaction type, remove it (toggle)
+      if (existingReaction.type === (type as ReactionType)) {
+        await this.reactionRepository.remove(existingReaction);
+
+        // Update comment counts if reacting to comment
+        if (commentId) {
+          await this.updateCommentReactionCount(commentId, type, -1);
+        }
+        return;
+      } else {
+        // Change reaction type
+        existingReaction.type = type as ReactionType;
+        await this.reactionRepository.save(existingReaction);
+
+        // Update comment counts if reacting to comment
+        if (commentId) {
+          // Decrement old reaction count
+          await this.updateCommentReactionCount(
+            commentId,
+            existingReaction.type === ReactionType.LIKE
+              ? ReactionType.DISLIKE
+              : ReactionType.LIKE,
+            -1,
+          );
+          // Increment new reaction count
+          await this.updateCommentReactionCount(commentId, type, 1);
+        }
+        return;
+      }
+    }
+
+    // Create new reaction
+    const reaction = this.reactionRepository.create({
+      ...createReactionDto,
+      userId,
+      type: type as ReactionType,
+    });
+
+    await this.reactionRepository.save(reaction);
+
+    // Update comment counts if reacting to comment
+    if (commentId) {
+      await this.updateCommentReactionCount(commentId, type, 1);
+    }
+  }
+
+  private async updateCommentReactionCount(
+    commentId: string,
+    type: 'like' | 'dislike',
+    change: number,
+  ): Promise<void> {
+    const comment = await this.commentRepository.findOne({
+      where: { id: commentId },
+    });
+    if (!comment) {
+      return;
+    }
+
+    if (type === 'like') {
+      comment.likeCount = Math.max(0, comment.likeCount + change);
+    } else {
+      comment.dislikeCount = Math.max(0, comment.dislikeCount + change);
+    }
+
+    await this.commentRepository.save(comment);
+  }
+
+  async getUserReaction(
+    userId: string,
+    articleId?: string,
+    liveBlogId?: string,
+    commentId?: string,
+  ): Promise<ReactionType | null> {
+    const whereClause: {
+      userId: string;
+      articleId?: string;
+      liveBlogId?: string;
+      commentId?: string;
+    } = { userId };
+    if (articleId) whereClause.articleId = articleId;
+    if (liveBlogId) whereClause.liveBlogId = liveBlogId;
+    if (commentId) whereClause.commentId = commentId;
+
+    const reaction = await this.reactionRepository.findOne({
+      where: whereClause,
+    });
+
+    return reaction ? reaction.type : null;
+  }
+
+  async getReactionCounts(
+    articleId?: string,
+    liveBlogId?: string,
+    commentId?: string,
+  ): Promise<{ likes: number; dislikes: number }> {
+    const query = this.reactionRepository.createQueryBuilder('reaction');
+
+    if (articleId) {
+      query.where('reaction.articleId = :articleId', { articleId });
+    } else if (liveBlogId) {
+      query.where('reaction.liveBlogId = :liveBlogId', { liveBlogId });
+    } else if (commentId) {
+      query.where('reaction.commentId = :commentId', { commentId });
+    } else {
+      return { likes: 0, dislikes: 0 };
+    }
+
+    const reactions = await query.getMany();
+
+    return {
+      likes: reactions.filter((r) => r.type === ReactionType.LIKE).length,
+      dislikes: reactions.filter((r) => r.type === ReactionType.DISLIKE).length,
+    };
+  }
+}

backend/src/modules/entities.ts

@@ -56,6 +56,17 @@ export enum VideoPosition {
   NONE = 'none',
 }
 
+export enum UserRole {
+  ADMIN = 'admin',
+  CONTRIBUTOR = 'contributor',
+  USER = 'user',
+}
+
+export enum ReactionType {
+  LIKE = 'like',
+  DISLIKE = 'dislike',
+}
+
 @Entity('authors')
 export class Author {
   @PrimaryGeneratedColumn('uuid')
@@ -114,6 +125,36 @@ export class Category {
   parent: Category;
 }
 
+@Entity('users')
+export class User {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column({ unique: true })
+  email: string;
+
+  @Column({ unique: true })
+  username: string;
+
+  @Column()
+  passwordHash: string;
+
+  @Column({
+    type: 'text',
+    default: 'user',
+  })
+  role: UserRole;
+
+  @Column({ default: true })
+  isActive: boolean;
+
+  @CreateDateColumn()
+  createdAt: Date;
+
+  @UpdateDateColumn()
+  updatedAt: Date;
+}
+
 @Entity('articles')
 export class Article {
   @PrimaryGeneratedColumn('uuid')
@@ -183,6 +224,42 @@ export class Article {
   @Column({ nullable: true })
   categoryId: string;
 
+  @Column({ type: 'text', nullable: true })
+  ogTitle: string;
+
+  @Column({ type: 'text', nullable: true })
+  ogDescription: string;
+
+  @Column({ type: 'text', nullable: true })
+  ogImage: string;
+
+  @Column({ type: 'text', nullable: true })
+  twitterTitle: string;
+
+  @Column({ type: 'text', nullable: true })
+  twitterDescription: string;
+
+  @Column({ type: 'text', nullable: true })
+  twitterImage: string;
+
+  @Column({ default: 0 })
+  facebookShares: number;
+
+  @Column({ default: 0 })
+  twitterShares: number;
+
+  @Column({ default: 0 })
+  instagramShares: number;
+
+  @Column({ default: 0 })
+  tiktokShares: number;
+
+  @Column({ default: 0 })
+  telegramShares: number;
+
+  @Column({ default: false })
+  isHero: boolean;
+
   @CreateDateColumn()
   createdAt: Date;
 
@@ -196,6 +273,12 @@ export class Article {
   @ManyToOne(() => Category, { onDelete: 'SET NULL' })
   @JoinColumn({ name: 'categoryId' })
   category: Category;
+
+  @OneToMany(() => Comment, (comment) => comment.article)
+  comments: Comment[];
+
+  @OneToMany(() => Reaction, (reaction) => reaction.article)
+  reactions: Reaction[];
 }
 
 @Entity('live_blogs')
@@ -278,6 +361,12 @@ export class LiveBlog {
     cascade: true,
   })
   updates: LiveBlogUpdate[];
+
+  @OneToMany(() => Comment, (comment) => comment.liveBlog)
+  comments: Comment[];
+
+  @OneToMany(() => Reaction, (reaction) => reaction.liveBlog)
+  reactions: Reaction[];
 }
 
 @Entity('live_blog_updates')
@@ -314,3 +403,100 @@ export class LiveBlogUpdate {
   @JoinColumn({ name: 'liveBlogId' })
   liveBlog: LiveBlog;
 }
+
+@Entity('comments')
+export class Comment {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column('text')
+  content: string;
+
+  @Column({ nullable: true })
+  articleId: string;
+
+  @Column({ nullable: true })
+  liveBlogId: string;
+
+  @Column({ nullable: true })
+  parentId: string;
+
+  @Column()
+  userId: string;
+
+  @Column({ default: 0 })
+  likeCount: number;
+
+  @Column({ default: 0 })
+  dislikeCount: number;
+
+  @Column({ default: true })
+  isVisible: boolean;
+
+  @CreateDateColumn()
+  createdAt: Date;
+
+  @UpdateDateColumn()
+  updatedAt: Date;
+
+  @ManyToOne(() => Article, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'articleId' })
+  article: Article;
+
+  @ManyToOne(() => LiveBlog, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'liveBlogId' })
+  liveBlog: LiveBlog;
+
+  @ManyToOne(() => Comment, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'parentId' })
+  parent: Comment;
+
+  @ManyToOne(() => User, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'userId' })
+  user: User;
+
+  @OneToMany(() => Comment, (comment) => comment.parent)
+  replies: Comment[];
+}
+
+@Entity('reactions')
+export class Reaction {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column({
+    type: 'text',
+  })
+  type: ReactionType;
+
+  @Column({ nullable: true })
+  articleId: string;
+
+  @Column({ nullable: true })
+  liveBlogId: string;
+
+  @Column({ nullable: true })
+  commentId: string;
+
+  @Column()
+  userId: string;
+
+  @CreateDateColumn()
+  createdAt: Date;
+
+  @ManyToOne(() => Article, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'articleId' })
+  article: Article;
+
+  @ManyToOne(() => LiveBlog, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'liveBlogId' })
+  liveBlog: LiveBlog;
+
+  @ManyToOne(() => Comment, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'commentId' })
+  comment: Comment;
+
+  @ManyToOne(() => User, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'userId' })
+  user: User;
+}

backend/src/modules/live-blog.controller.ts

@@ -8,10 +8,10 @@ import {
   Body,
   Param,
   Query,
-  ValidationPipe,
   Res,
   Logger,
   Headers,
+  UseGuards,
 } from '@nestjs/common';
 import type { Response as ExpressResponse } from 'express';
 import { LiveBlogService } from './live-blog.service';
@@ -22,7 +22,11 @@ import {
   CreateLiveBlogUpdateDto,
   UpdateLiveBlogUpdateDto,
 } from './articles.dto';
-import { LiveBlogStatus } from './entities';
+import { LiveBlogStatus, UserRole } from './entities';
+import { JwtAuthGuard } from './auth/jwt-auth.guard';
+import { RolesGuard } from './auth/roles.guard';
+import { Roles } from './auth/roles.decorator';
+import { Public } from './auth/public.decorator';
 
 @Controller('live-blogs')
 export class LiveBlogController {
@@ -32,68 +36,76 @@ export class LiveBlogController {
 
   // Live Blog CRUD operations
   @Get('featured')
+  @Public()
   getFeatured() {
     this.logger.log('GET /featured called');
     return this.liveBlogService.findPinned();
   }
 
   @Get('active')
+  @Public()
   getActive() {
     return this.liveBlogService.findActive();
   }
 
   @Get('recent')
+  @Public()
   getRecent() {
     return this.liveBlogService.getLiveBlogsWithRecentUpdates();
   }
 
   @Post()
-  create(
-    @Body(new ValidationPipe({ transform: true })) dto: CreateLiveBlogDto,
-  ) {
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN, UserRole.CONTRIBUTOR)
+  create(@Body() dto: CreateLiveBlogDto) {
     return this.liveBlogService.create(dto);
   }
 
   @Get()
-  findAll(
-    @Query(new ValidationPipe({ transform: true })) dto: FindLiveBlogsDto,
-  ) {
+  @Public()
+  findAll(@Query() dto: FindLiveBlogsDto) {
     return this.liveBlogService.findAll(dto);
   }
 
   @Get(':id')
+  @Public()
   findOne(@Param('id') id: string) {
     return this.liveBlogService.findOne(id);
   }
 
   @Get('slug/:slug')
+  @Public()
   findBySlug(@Param('slug') slug: string) {
     return this.liveBlogService.findBySlug(slug);
   }
 
   @Put(':id')
-  update(
-    @Param('id') id: string,
-    @Body(new ValidationPipe({ transform: true })) dto: UpdateLiveBlogDto,
-  ) {
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN, UserRole.CONTRIBUTOR)
+  update(@Param('id') id: string, @Body() dto: UpdateLiveBlogDto) {
     return this.liveBlogService.update(id, dto);
   }
 
   @Delete(':id')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN, UserRole.CONTRIBUTOR)
   remove(@Param('id') id: string) {
     return this.liveBlogService.remove(id);
   }
 
   // Live Blog Updates CRUD operations
   @Post(':id/updates')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN, UserRole.CONTRIBUTOR)
   createUpdate(
     @Param('id') liveBlogId: string,
-    @Body(new ValidationPipe({ transform: true })) dto: CreateLiveBlogUpdateDto,
+    @Body() dto: CreateLiveBlogUpdateDto,
   ) {
     return this.liveBlogService.createUpdate(dto, liveBlogId);
   }
 
   @Get(':id/updates')
+  @Public()
   findUpdates(
     @Param('id') liveBlogId: string,
     @Query('page') page = 1,
@@ -107,15 +119,19 @@ export class LiveBlogController {
   }
 
   @Put(':id/updates/:updateId')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN, UserRole.CONTRIBUTOR)
   updateUpdate(
     @Param('id') liveBlogId: string,
     @Param('updateId') updateId: string,
-    @Body(new ValidationPipe({ transform: true })) dto: UpdateLiveBlogUpdateDto,
+    @Body() dto: UpdateLiveBlogUpdateDto,
   ) {
     return this.liveBlogService.updateUpdate(liveBlogId, updateId, dto);
   }
 
   @Delete(':id/updates/:updateId')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN, UserRole.CONTRIBUTOR)
   removeUpdate(
     @Param('id') liveBlogId: string,
     @Param('updateId') updateId: string,
@@ -124,17 +140,22 @@ export class LiveBlogController {
   }
 
   @Patch(':id/archive')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN, UserRole.CONTRIBUTOR)
   archive(@Param('id') id: string) {
     return this.liveBlogService.archive(id);
   }
 
   @Patch(':id/publish')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN, UserRole.CONTRIBUTOR)
   publish(@Param('id') id: string, @Query('status') status?: LiveBlogStatus) {
     return this.liveBlogService.publish(id, status || LiveBlogStatus.DRAFT);
   }
 
   // SSE endpoint for real-time updates
   @Get(':id/stream')
+  @Public()
   stream(
     @Param('id') liveBlogId: string,
     @Res() response: ExpressResponse,

backend/src/modules/live-blog.module.ts

@@ -5,12 +5,14 @@ import { LiveBlogService } from './live-blog.service';
 import { LiveBlogController } from './live-blog.controller';
 import { LiveBlog, LiveBlogUpdate, Author, Category } from './entities';
 import { StrapiModule } from './strapi.module';
+import { PushModule } from './push/push.module';
 
 @Module({
   imports: [
     TypeOrmModule.forFeature([LiveBlog, LiveBlogUpdate, Author, Category]),
     EventEmitterModule.forRoot(),
     forwardRef(() => StrapiModule),
+    forwardRef(() => PushModule),
   ],
   controllers: [LiveBlogController],
   providers: [LiveBlogService],

backend/src/modules/live-blog.service.ts

@@ -5,6 +5,7 @@ import {
   OnModuleInit,
   Inject,
   forwardRef,
+  Optional,
 } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Repository, In } from 'typeorm';
@@ -19,6 +20,7 @@ import {
   CreateLiveBlogUpdateDto,
   UpdateLiveBlogUpdateDto,
 } from './articles.dto';
+import { PushService } from './push/push.service';
 
 interface SseClient {
   id: string;
@@ -55,6 +57,9 @@ export class LiveBlogService implements OnModuleInit {
     private readonly eventEmitter: EventEmitter2,
     @Inject(forwardRef(() => StrapiService))
     private readonly strapiService: StrapiService,
+    @Optional()
+    @Inject(forwardRef(() => PushService))
+    private readonly pushService?: PushService,
   ) {}
 
   onModuleInit() {
@@ -364,6 +369,22 @@ export class LiveBlogService implements OnModuleInit {
       update: savedUpdate,
     });
 
+    // Send push notification for live blog updates (only for live blogs)
+    if (liveBlogEntity.status === LiveBlogStatus.LIVE && this.pushService) {
+      try {
+        await this.pushService.notifyLiveBlogUpdate(
+          liveBlogEntity.title,
+          liveBlogEntity.slug,
+          savedUpdate.content,
+        );
+        this.logger.debug(
+          `Push notification sent for live blog update: ${liveBlogEntity.title}`,
+        );
+      } catch (error) {
+        this.logger.error('Failed to send push notification:', error);
+      }
+    }
+
     return savedUpdate;
   }
 

backend/src/modules/push/push-subscription.entity.ts

@@ -0,0 +1,29 @@
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  Index,
+} from 'typeorm';
+
+@Entity('push_subscriptions')
+export class PushSubscriptionEntity {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Index()
+  @Column({ type: 'text', unique: true })
+  endpoint: string;
+
+  @Column({ type: 'text' })
+  p256dh: string;
+
+  @Column({ type: 'text' })
+  auth: string;
+
+  @Column({ type: 'varchar', nullable: true })
+  userId: string | null;
+
+  @CreateDateColumn()
+  createdAt: Date;
+}

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

@@ -0,0 +1,63 @@
+import {
+  Controller,
+  Get,
+  Post,
+  Delete,
+  Body,
+  HttpCode,
+  HttpStatus,
+  UseGuards,
+} from '@nestjs/common';
+import { PushService } from './push.service';
+import { SubscribeDto, UnsubscribeDto, SendNotificationDto } from './push.dto';
+import { Public } from '../auth/public.decorator';
+import { Roles } from '../auth/roles.decorator';
+import { RolesGuard } from '../auth/roles.guard';
+import { UserRole } from '../entities';
+
+@Controller('push')
+@UseGuards(RolesGuard)
+export class PushController {
+  constructor(private readonly pushService: PushService) {}
+
+  @Public()
+  @Get('vapid-public-key')
+  getVapidPublicKey(): { publicKey: string | null } {
+    return { publicKey: this.pushService.getPublicKey() };
+  }
+
+  @Public()
+  @Post('subscribe')
+  @HttpCode(HttpStatus.CREATED)
+  async subscribe(@Body() dto: SubscribeDto): Promise<{ success: boolean }> {
+    await this.pushService.subscribe(dto);
+    return { success: true };
+  }
+
+  @Public()
+  @Delete('unsubscribe')
+  @HttpCode(HttpStatus.NO_CONTENT)
+  async unsubscribe(@Body() dto: UnsubscribeDto): Promise<void> {
+    await this.pushService.unsubscribe(dto);
+  }
+
+  @Roles(UserRole.ADMIN)
+  @Get('stats')
+  getStats(): Promise<{ totalSubscribers: number }> {
+    return this.pushService.getStats();
+  }
+
+  @Roles(UserRole.ADMIN, UserRole.CONTRIBUTOR)
+  @Post('send')
+  @HttpCode(HttpStatus.OK)
+  async sendNotification(
+    @Body() dto: SendNotificationDto,
+  ): Promise<{ sent: number; failed: number }> {
+    return this.pushService.sendToAll({
+      title: dto.title,
+      body: dto.body,
+      url: dto.url,
+      tag: 'admin-notification',
+    });
+  }
+}

backend/src/modules/push/push.dto.ts

@@ -0,0 +1,39 @@
+import { IsString, IsNotEmpty, IsOptional } from 'class-validator';
+
+export class SubscribeDto {
+  @IsString()
+  @IsNotEmpty()
+  endpoint: string;
+
+  @IsString()
+  @IsNotEmpty()
+  p256dh: string;
+
+  @IsString()
+  @IsNotEmpty()
+  auth: string;
+
+  @IsOptional()
+  @IsString()
+  userId?: string;
+}
+
+export class UnsubscribeDto {
+  @IsString()
+  @IsNotEmpty()
+  endpoint: string;
+}
+
+export class SendNotificationDto {
+  @IsString()
+  @IsNotEmpty()
+  title: string;
+
+  @IsString()
+  @IsNotEmpty()
+  body: string;
+
+  @IsOptional()
+  @IsString()
+  url?: string;
+}

backend/src/modules/push/push.module.ts

@@ -0,0 +1,13 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { PushController } from './push.controller';
+import { PushService } from './push.service';
+import { PushSubscriptionEntity } from './push-subscription.entity';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([PushSubscriptionEntity])],
+  controllers: [PushController],
+  providers: [PushService],
+  exports: [PushService],
+})
+export class PushModule {}

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

@@ -0,0 +1,178 @@
+import * as webpush from 'web-push';
+import { Injectable, Logger, OnModuleInit } from '@nestjs/common';
+import { ConfigService } from '@nestjs/config';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { PushSubscriptionEntity } from './push-subscription.entity';
+import { SubscribeDto, UnsubscribeDto } from './push.dto';
+
+export interface PushPayload {
+  title: string;
+  body: string;
+  icon?: string;
+  badge?: string;
+  url?: string;
+  tag?: string;
+}
+
+@Injectable()
+export class PushService implements OnModuleInit {
+  private readonly logger = new Logger(PushService.name);
+
+  constructor(
+    private configService: ConfigService,
+    @InjectRepository(PushSubscriptionEntity)
+    private subscriptionRepo: Repository<PushSubscriptionEntity>,
+  ) {}
+
+  onModuleInit() {
+    const publicKey = this.configService.get<string>('VAPID_PUBLIC_KEY');
+    const privateKey = this.configService.get<string>('VAPID_PRIVATE_KEY');
+    const subject = this.configService.get<string>(
+      'VAPID_SUBJECT',
+      'mailto:contact@placebo.mk',
+    );
+
+    if (!publicKey || !privateKey) {
+      this.logger.warn(
+        'VAPID keys not configured. Push notifications will not work. Run: npm run generate-vapid',
+      );
+      return;
+    }
+
+    webpush.setVapidDetails(subject, publicKey, privateKey);
+    this.logger.log('VAPID keys configured successfully');
+  }
+
+  getPublicKey(): string | null {
+    return this.configService.get<string>('VAPID_PUBLIC_KEY') ?? null;
+  }
+
+  async subscribe(dto: SubscribeDto): Promise<PushSubscriptionEntity> {
+    const existing = await this.subscriptionRepo.findOne({
+      where: { endpoint: dto.endpoint },
+    });
+
+    if (existing) {
+      if (dto.userId && existing.userId !== dto.userId) {
+        existing.userId = dto.userId;
+        return this.subscriptionRepo.save(existing);
+      }
+      return existing;
+    }
+
+    const subscription = this.subscriptionRepo.create({
+      endpoint: dto.endpoint,
+      p256dh: dto.p256dh,
+      auth: dto.auth,
+      userId: dto.userId ?? null,
+    });
+
+    return this.subscriptionRepo.save(subscription);
+  }
+
+  async unsubscribe(dto: UnsubscribeDto): Promise<void> {
+    await this.subscriptionRepo.delete({ endpoint: dto.endpoint });
+  }
+
+  async sendToAll(
+    payload: PushPayload,
+  ): Promise<{ sent: number; failed: number }> {
+    const subscriptions = await this.subscriptionRepo.find();
+
+    if (subscriptions.length === 0) {
+      return { sent: 0, failed: 0 };
+    }
+
+    const notification = JSON.stringify({
+      title: payload.title,
+      body: payload.body,
+      icon: payload.icon ?? '/icons/icon-192.png',
+      badge: payload.badge ?? '/icons/badge-72.png',
+      url: payload.url ?? '/',
+      tag: payload.tag,
+    });
+
+    let sent = 0;
+    let failed = 0;
+
+    const results = await Promise.allSettled(
+      subscriptions.map(async (sub) => {
+        try {
+          await webpush.sendNotification(
+            {
+              endpoint: sub.endpoint,
+              keys: {
+                p256dh: sub.p256dh,
+                auth: sub.auth,
+              },
+            },
+            notification,
+            {
+              TTL: 86400,
+            },
+          );
+          return { success: true, id: sub.id };
+        } catch (error) {
+          if (error instanceof Error) {
+            this.logger.warn(`Push failed for ${sub.id}: ${error.message}`);
+          }
+          if (
+            error instanceof webpush.WebPushError &&
+            (error.statusCode === 410 || error.statusCode === 404)
+          ) {
+            await this.subscriptionRepo.delete({ id: sub.id });
+            this.logger.log(`Removed invalid subscription: ${sub.id}`);
+          }
+          return { success: false, id: sub.id };
+        }
+      }),
+    );
+
+    for (const result of results) {
+      if (result.status === 'fulfilled' && result.value.success) {
+        sent++;
+      } else {
+        failed++;
+      }
+    }
+
+    this.logger.log(`Push sent: ${sent}, failed: ${failed}`);
+    return { sent, failed };
+  }
+
+  async notifyNewArticle(
+    articleTitle: string,
+    articleSlug: string,
+  ): Promise<void> {
+    await this.sendToAll({
+      title: 'Нови вести! 📰',
+      body: articleTitle,
+      url: `/article/${articleSlug}`,
+      tag: 'new-article',
+    });
+  }
+
+  async notifyLiveBlogUpdate(
+    blogTitle: string,
+    blogSlug: string,
+    updatePreview: string,
+  ): Promise<void> {
+    const body =
+      updatePreview.length > 100
+        ? updatePreview.substring(0, 97) + '...'
+        : updatePreview;
+
+    await this.sendToAll({
+      title: `${blogTitle} 📡`,
+      body,
+      url: `/live-blog/${blogSlug}`,
+      tag: `live-blog-${blogSlug}`,
+    });
+  }
+
+  async getStats(): Promise<{ totalSubscribers: number }> {
+    const totalSubscribers = await this.subscriptionRepo.count();
+    return { totalSubscribers };
+  }
+}

backend/src/modules/strapi.controller.ts

@@ -1,5 +1,6 @@
-import { Controller, Post, Body, Logger } from '@nestjs/common';
+import { Controller, Post, Get, Body, Logger } from '@nestjs/common';
 import { StrapiService } from './strapi.service';
+import { Public } from './auth/public.decorator';
 
 interface WebhookBody {
   event:
@@ -21,6 +22,7 @@ export class StrapiController {
   constructor(private readonly strapiService: StrapiService) {}
 
   @Post('article')
+  @Public()
   async handleArticleWebhook(@Body() body: WebhookBody) {
     this.logger.log(`Received article webhook: ${JSON.stringify(body)}`);
     const { event, model, entry } = body;
@@ -38,6 +40,7 @@ export class StrapiController {
   }
 
   @Post('live-blog')
+  @Public()
   async handleLiveBlogWebhook(@Body() body: WebhookBody) {
     this.logger.log(`Received live-blog webhook: ${JSON.stringify(body)}`);
     const { event, model, entry } = body;
@@ -55,6 +58,7 @@ export class StrapiController {
   }
 
   @Post()
+  @Public()
   async handleGenericWebhook(@Body() body: unknown) {
     this.logger.log(`Received generic webhook: ${JSON.stringify(body)}`);
 
@@ -116,18 +120,28 @@ export class StrapiController {
   }
 
   @Post('sync/all')
+  @Public()
   async syncAllArticles() {
     await this.strapiService.syncArticles();
     return { message: 'Articles sync completed' };
   }
 
+  @Get('sync/all')
+  @Public()
+  async syncAllArticlesGet() {
+    await this.strapiService.syncArticles();
+    return { message: 'Articles sync completed' };
+  }
+
   @Post('sync/live-blogs')
+  @Public()
   async syncAllLiveBlogs() {
     await this.strapiService.syncLiveBlogs();
     return { message: 'Live blogs sync completed' };
   }
 
   @Post('sync/everything')
+  @Public()
   async syncEverything() {
     await Promise.all([
       this.strapiService.syncArticles(),

backend/src/modules/strapi.module.ts

@@ -1,13 +1,16 @@
 import { Module, forwardRef } from '@nestjs/common';
 import { HttpModule } from '@nestjs/axios';
+import { TypeOrmModule } from '@nestjs/typeorm';
 import { StrapiService } from './strapi.service';
 import { StrapiController } from './strapi.controller';
 import { ArticlesModule } from './articles.module';
 import { LiveBlogModule } from './live-blog.module';
+import { Category } from './entities';
 
 @Module({
   imports: [
     HttpModule,
+    TypeOrmModule.forFeature([Category]),
     forwardRef(() => ArticlesModule),
     forwardRef(() => LiveBlogModule),
   ],

backend/src/modules/strapi.service.ts

@@ -1,6 +1,8 @@
 import { Injectable, Logger, Inject, forwardRef } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { HttpService } from '@nestjs/axios';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
 import { lastValueFrom } from 'rxjs';
 import { ArticlesService } from './articles.service';
 import { LiveBlogService } from './live-blog.service';
@@ -11,6 +13,7 @@ import {
   ImagePosition,
   ImageSize,
   VideoPosition,
+  Category,
 } from './entities';
 
 interface StrapiImage {
@@ -45,6 +48,7 @@ interface StrapiArticle {
   videoUrl?: string;
   videoPosition?: string;
   videoCaption?: string;
+  category?: string;
 }
 
 interface StrapiLiveBlog {
@@ -64,6 +68,7 @@ interface StrapiLiveBlog {
   videoUrl?: string;
   videoPosition?: string;
   videoCaption?: string;
+  category?: string;
 }
 
 interface StrapiResponse<T> {
@@ -82,6 +87,7 @@ interface StrapiResponse<T> {
 export class StrapiService {
   private readonly logger = new Logger(StrapiService.name);
   private readonly strapiUrl: string;
+  private readonly strapiPublicUrl: string;
   private readonly strapiApiToken: string;
 
   constructor(
@@ -91,21 +97,76 @@ export class StrapiService {
     private readonly articlesService: ArticlesService,
     @Inject(forwardRef(() => LiveBlogService))
     private readonly liveBlogService: LiveBlogService,
+    @InjectRepository(Category)
+    private readonly categoryRepository: Repository<Category>,
   ) {
     this.strapiUrl =
       this.configService.get<string>('STRAPI_URL') || 'http://localhost:1337';
+    this.strapiPublicUrl =
+      this.configService.get<string>('STRAPI_PUBLIC_URL') ||
+      this.strapiUrl.replace('cms:', 'localhost:');
     this.strapiApiToken =
       this.configService.get<string>('STRAPI_API_TOKEN') || '';
   }
 
   private getHeaders() {
-    const headers: Record<string, string> = {
-      'Content-Type': 'application/json',
-    };
-    if (this.strapiApiToken) {
-      headers['Authorization'] = `Bearer ${this.strapiApiToken}`;
+    // Use public API access - no authentication needed
+    // Strapi Public role has been configured to allow article access
+    return {};
+  }
+
+  private generateSlug(title: string): string {
+    // Generate slug from title if missing
+    return title
+      .toLowerCase()
+      .trim()
+      .replace(/[^\w\s-]/g, '') // Remove special characters
+      .replace(/\s+/g, '-') // Replace spaces with hyphens
+      .replace(/-+/g, '-') // Replace multiple hyphens with single hyphen
+      .substring(0, 100); // Limit length
+  }
+
+  private async findOrCreateCategory(
+    categorySlug: string,
+  ): Promise<Category | null> {
+    if (!categorySlug) {
+      return null;
     }
-    return headers;
+
+    // Map CMS category slugs to Macedonian display names
+    const categoryMap: Record<string, { name: string; description: string }> = {
+      general: { name: 'Општо', description: 'Општи вести и теми' },
+      sport: { name: 'Спорт', description: 'Спортски вести и анализи' },
+      art: { name: 'Уметност', description: 'Уметност, култура и забава' },
+      science: { name: 'Наука', description: 'Научни откритија и технологија' },
+    };
+
+    const categoryInfo = categoryMap[categorySlug];
+    if (!categoryInfo) {
+      this.logger.warn(`Unknown category slug: ${categorySlug}`);
+      return null;
+    }
+
+    // Try to find existing category by slug
+    let category = await this.categoryRepository.findOne({
+      where: { slug: categorySlug },
+    });
+
+    if (!category) {
+      // Create new category
+      category = this.categoryRepository.create({
+        name: categoryInfo.name,
+        slug: categorySlug,
+        description: categoryInfo.description,
+        order: 0,
+      });
+      category = await this.categoryRepository.save(category);
+      this.logger.log(
+        `Created new category: ${categorySlug} (${categoryInfo.name})`,
+      );
+    }
+
+    return category;
   }
 
   private extractImageUrl(strapiArticle: StrapiArticle): string | undefined {
@@ -125,10 +186,8 @@ export class StrapiService {
 
     // If URL is relative, prepend Strapi base URL
     if (imageUrl.startsWith('/')) {
-      // Convert Docker service URL to localhost for frontend access
-      // Backend uses http://cms:1337 internally, but frontend needs http://localhost:1337
-      const frontendStrapiUrl = this.strapiUrl.replace('cms:', 'localhost:');
-      return `${frontendStrapiUrl}${imageUrl}`;
+      // Use public URL for frontend access
+      return `${this.strapiPublicUrl}${imageUrl}`;
     }
 
     return imageUrl;
@@ -153,10 +212,8 @@ export class StrapiService {
 
     // If URL is relative, prepend Strapi base URL
     if (imageUrl.startsWith('/')) {
-      // Convert Docker service URL to localhost for frontend access
-      // Backend uses http://cms:1337 internally, but frontend needs http://localhost:1337
-      const frontendStrapiUrl = this.strapiUrl.replace('cms:', 'localhost:');
-      return `${frontendStrapiUrl}${imageUrl}`;
+      // Use public URL for frontend access
+      return `${this.strapiPublicUrl}${imageUrl}`;
     }
 
     return imageUrl;
@@ -181,11 +238,26 @@ export class StrapiService {
       for (const strapiArticle of strapiArticles) {
         const imageUrl = this.extractImageUrl(strapiArticle);
 
+        // Find or create category
+        let categoryId: string | undefined;
+        if (strapiArticle.category) {
+          const category = await this.findOrCreateCategory(
+            strapiArticle.category,
+          );
+          if (category) {
+            categoryId = category.id;
+          }
+        }
+
+        // Generate slug if missing or null
+        const slug =
+          strapiArticle.slug || this.generateSlug(strapiArticle.title);
+
         const articleData: Partial<CreateArticleDto> = {
           title: strapiArticle.title,
-          excerpt: strapiArticle.description,
+          excerpt: strapiArticle.description || '',
           content: strapiArticle.content,
-          slug: strapiArticle.slug,
+          slug,
           status: strapiArticle.publishedAt
             ? ArticleStatus.PUBLISHED
             : ArticleStatus.DRAFT,
@@ -198,6 +270,7 @@ export class StrapiService {
           videoPosition: (strapiArticle.videoPosition ||
             'inline') as VideoPosition,
           videoCaption: strapiArticle.videoCaption || '',
+          categoryId,
         };
 
         await this.articlesService.syncFromStrapi(
@@ -256,11 +329,25 @@ export class StrapiService {
 
       const imageUrl = this.extractImageUrl(strapiArticle);
 
+      // Find or create category
+      let categoryId: string | undefined;
+      if (strapiArticle.category) {
+        const category = await this.findOrCreateCategory(
+          strapiArticle.category,
+        );
+        if (category) {
+          categoryId = category.id;
+        }
+      }
+
+      // Generate slug if missing or null
+      const slug = strapiArticle.slug || this.generateSlug(strapiArticle.title);
+
       const articleData: Partial<CreateArticleDto> = {
         title: strapiArticle.title,
-        excerpt: strapiArticle.description,
+        excerpt: strapiArticle.description || '',
         content: strapiArticle.content,
-        slug: strapiArticle.slug,
+        slug,
         status,
         tags: [],
         featuredImage: imageUrl,
@@ -270,6 +357,7 @@ export class StrapiService {
         videoPosition: (strapiArticle.videoPosition ||
           'inline') as VideoPosition,
         videoCaption: strapiArticle.videoCaption || '',
+        categoryId,
       };
 
       await this.articlesService.syncFromStrapi(
@@ -333,6 +421,17 @@ export class StrapiService {
       for (const strapiLiveBlog of strapiLiveBlogs) {
         const imageUrl = this.extractLiveBlogImageUrl(strapiLiveBlog);
 
+        // Find or create category
+        let categoryId: string | undefined;
+        if (strapiLiveBlog.category) {
+          const category = await this.findOrCreateCategory(
+            strapiLiveBlog.category,
+          );
+          if (category) {
+            categoryId = category.id;
+          }
+        }
+
         const liveBlogData: Partial<CreateLiveBlogDto> = {
           title: strapiLiveBlog.title,
           description: strapiLiveBlog.description,
@@ -346,6 +445,7 @@ export class StrapiService {
           videoPosition: (strapiLiveBlog.videoPosition ||
             'inline') as VideoPosition,
           videoCaption: strapiLiveBlog.videoCaption || '',
+          categoryId,
         };
 
         await this.liveBlogService.syncFromStrapi(
@@ -400,6 +500,17 @@ export class StrapiService {
 
       const imageUrl = this.extractLiveBlogImageUrl(strapiLiveBlog);
 
+      // Find or create category
+      let categoryId: string | undefined;
+      if (strapiLiveBlog.category) {
+        const category = await this.findOrCreateCategory(
+          strapiLiveBlog.category,
+        );
+        if (category) {
+          categoryId = category.id;
+        }
+      }
+
       const liveBlogData: Partial<CreateLiveBlogDto> = {
         title: strapiLiveBlog.title,
         description: strapiLiveBlog.description,
@@ -412,6 +523,7 @@ export class StrapiService {
         videoPosition: (strapiLiveBlog.videoPosition ||
           'inline') as VideoPosition,
         videoCaption: strapiLiveBlog.videoCaption || '',
+        categoryId,
       };
 
       await this.liveBlogService.syncFromStrapi(

backend/src/modules/users/user.controller.ts

@@ -0,0 +1,104 @@
+import {
+  Controller,
+  Get,
+  Post,
+  Body,
+  Patch,
+  Param,
+  Delete,
+  UseGuards,
+  Request,
+  HttpCode,
+  HttpStatus,
+} from '@nestjs/common';
+import { UserService } from './user.service';
+import {
+  CreateUserDto,
+  UpdateUserDto,
+  UserResponseDto,
+  ChangePasswordDto,
+} from './user.dto';
+import { JwtAuthGuard } from '../auth/jwt-auth.guard';
+import { RolesGuard } from '../auth/roles.guard';
+import { Roles } from '../auth/roles.decorator';
+import { UserRole } from '../entities';
+import type { RequestWithUser } from '../auth/types';
+
+@Controller('users')
+export class UserController {
+  constructor(private readonly userService: UserService) {}
+
+  @Post()
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN)
+  async create(@Body() createUserDto: CreateUserDto): Promise<UserResponseDto> {
+    return this.userService.create(createUserDto);
+  }
+
+  @Get()
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN)
+  async findAll(): Promise<UserResponseDto[]> {
+    return this.userService.findAll();
+  }
+
+  @Get('profile')
+  @UseGuards(JwtAuthGuard)
+  async getProfile(@Request() req: RequestWithUser): Promise<UserResponseDto> {
+    return this.userService.findOne(req.user.id);
+  }
+
+  @Get(':id')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN)
+  async findOne(@Param('id') id: string): Promise<UserResponseDto> {
+    return this.userService.findOne(id);
+  }
+
+  @Patch(':id')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN)
+  async update(
+    @Param('id') id: string,
+    @Body() updateUserDto: UpdateUserDto,
+  ): Promise<UserResponseDto> {
+    return this.userService.update(id, updateUserDto);
+  }
+
+  @Delete(':id')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN)
+  @HttpCode(HttpStatus.NO_CONTENT)
+  async remove(@Param('id') id: string): Promise<void> {
+    return this.userService.remove(id);
+  }
+
+  @Post(':id/change-password')
+  @UseGuards(JwtAuthGuard)
+  @HttpCode(HttpStatus.NO_CONTENT)
+  async changePassword(
+    @Param('id') id: string,
+    @Body() changePasswordDto: ChangePasswordDto,
+    @Request() req: RequestWithUser,
+  ): Promise<void> {
+    // Users can only change their own password, unless they're admin
+    if (req.user.role !== UserRole.ADMIN && req.user.id !== id) {
+      throw new Error('You can only change your own password');
+    }
+    return this.userService.changePassword(id, changePasswordDto);
+  }
+
+  @Patch(':id/deactivate')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN)
+  async deactivate(@Param('id') id: string): Promise<UserResponseDto> {
+    return this.userService.update(id, { isActive: false });
+  }
+
+  @Patch(':id/activate')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles(UserRole.ADMIN)
+  async activate(@Param('id') id: string): Promise<UserResponseDto> {
+    return this.userService.update(id, { isActive: true });
+  }
+}

backend/src/modules/users/user.dto.ts

@@ -0,0 +1,111 @@
+import {
+  IsEmail,
+  IsString,
+  IsEnum,
+  IsBoolean,
+  IsOptional,
+  MinLength,
+  MaxLength,
+  Matches,
+} from 'class-validator';
+import { UserRole } from '../entities';
+
+interface UserEntity {
+  id: string;
+  email: string;
+  username: string;
+  role: UserRole;
+  isActive: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export class CreateUserDto {
+  @IsEmail()
+  email: string;
+
+  @IsString()
+  @MinLength(3)
+  @MaxLength(30)
+  @Matches(/^[a-zA-Z0-9_]+$/, {
+    message: 'Username can only contain letters, numbers, and underscores',
+  })
+  username: string;
+
+  @IsString()
+  @MinLength(6)
+  password: string;
+
+  @IsEnum(UserRole)
+  @IsOptional()
+  role?: UserRole = UserRole.USER;
+
+  @IsBoolean()
+  @IsOptional()
+  isActive?: boolean = true;
+}
+
+export class UpdateUserDto {
+  @IsEmail()
+  @IsOptional()
+  email?: string;
+
+  @IsString()
+  @MinLength(3)
+  @MaxLength(30)
+  @Matches(/^[a-zA-Z0-9_]+$/, {
+    message: 'Username can only contain letters, numbers, and underscores',
+  })
+  @IsOptional()
+  username?: string;
+
+  @IsString()
+  @MinLength(6)
+  @IsOptional()
+  password?: string;
+
+  @IsEnum(UserRole)
+  @IsOptional()
+  role?: UserRole;
+
+  @IsBoolean()
+  @IsOptional()
+  isActive?: boolean;
+}
+
+export class LoginUserDto {
+  @IsString()
+  username: string;
+
+  @IsString()
+  password: string;
+}
+
+export class UserResponseDto {
+  id: string;
+  email: string;
+  username: string;
+  role: UserRole;
+  isActive: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+
+  constructor(user: UserEntity) {
+    this.id = user.id;
+    this.email = user.email;
+    this.username = user.username;
+    this.role = user.role;
+    this.isActive = user.isActive;
+    this.createdAt = user.createdAt;
+    this.updatedAt = user.updatedAt;
+  }
+}
+
+export class ChangePasswordDto {
+  @IsString()
+  currentPassword: string;
+
+  @IsString()
+  @MinLength(6)
+  newPassword: string;
+}

backend/src/modules/users/user.module.ts

@@ -0,0 +1,13 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { User } from '../entities';
+import { UserService } from './user.service';
+import { UserController } from './user.controller';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([User])],
+  controllers: [UserController],
+  providers: [UserService],
+  exports: [UserService],
+})
+export class UserModule {}

backend/src/modules/users/user.service.ts

@@ -0,0 +1,212 @@
+import {
+  Injectable,
+  NotFoundException,
+  ConflictException,
+  BadRequestException,
+} from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import * as bcrypt from 'bcrypt';
+import { User, UserRole } from '../entities';
+import {
+  CreateUserDto,
+  UpdateUserDto,
+  UserResponseDto,
+  ChangePasswordDto,
+} from './user.dto';
+
+@Injectable()
+export class UserService {
+  constructor(
+    @InjectRepository(User)
+    private userRepository: Repository<User>,
+  ) {}
+
+  async create(createUserDto: CreateUserDto): Promise<UserResponseDto> {
+    // Check if email already exists
+    const existingEmail = await this.userRepository.findOne({
+      where: { email: createUserDto.email },
+    });
+    if (existingEmail) {
+      throw new ConflictException('Email already exists');
+    }
+
+    // Check if username already exists
+    const existingUsername = await this.userRepository.findOne({
+      where: { username: createUserDto.username },
+    });
+    if (existingUsername) {
+      throw new ConflictException('Username already exists');
+    }
+
+    // Hash password
+    const saltRounds = 10;
+    const passwordHash = await bcrypt.hash(createUserDto.password, saltRounds);
+
+    // Create user
+    const user = this.userRepository.create({
+      ...createUserDto,
+      passwordHash,
+    });
+
+    const savedUser = await this.userRepository.save(user);
+    return new UserResponseDto(savedUser);
+  }
+
+  async findAll(): Promise<UserResponseDto[]> {
+    const users = await this.userRepository.find({
+      order: { createdAt: 'DESC' },
+    });
+    return users.map((user) => new UserResponseDto(user));
+  }
+
+  async findOne(id: string): Promise<UserResponseDto> {
+    const user = await this.userRepository.findOne({ where: { id } });
+    if (!user) {
+      throw new NotFoundException('User not found');
+    }
+    return new UserResponseDto(user);
+  }
+
+  async findByUsername(username: string): Promise<User | null> {
+    return this.userRepository.findOne({ where: { username } });
+  }
+
+  async findByEmail(email: string): Promise<User | null> {
+    return this.userRepository.findOne({ where: { email } });
+  }
+
+  async update(
+    id: string,
+    updateUserDto: UpdateUserDto,
+  ): Promise<UserResponseDto> {
+    const user = await this.userRepository.findOne({ where: { id } });
+    if (!user) {
+      throw new NotFoundException('User not found');
+    }
+
+    // Check if email is being changed and if it already exists
+    if (updateUserDto.email && updateUserDto.email !== user.email) {
+      const existingEmail = await this.userRepository.findOne({
+        where: { email: updateUserDto.email },
+      });
+      if (existingEmail) {
+        throw new ConflictException('Email already exists');
+      }
+    }
+
+    // Check if username is being changed and if it already exists
+    if (updateUserDto.username && updateUserDto.username !== user.username) {
+      const existingUsername = await this.userRepository.findOne({
+        where: { username: updateUserDto.username },
+      });
+      if (existingUsername) {
+        throw new ConflictException('Username already exists');
+      }
+    }
+
+    // Hash new password if provided
+    if (updateUserDto.password) {
+      const saltRounds = 10;
+      updateUserDto.password = await bcrypt.hash(
+        updateUserDto.password,
+        saltRounds,
+      );
+    }
+
+    // Update user
+    Object.assign(user, updateUserDto);
+    if (updateUserDto.password) {
+      user.passwordHash = updateUserDto.password;
+      delete updateUserDto.password;
+    }
+
+    const updatedUser = await this.userRepository.save(user);
+    return new UserResponseDto(updatedUser);
+  }
+
+  async remove(id: string): Promise<void> {
+    const user = await this.userRepository.findOne({ where: { id } });
+    if (!user) {
+      throw new NotFoundException('User not found');
+    }
+
+    // Prevent deleting the last admin
+    if (user.role === UserRole.ADMIN) {
+      const adminCount = await this.userRepository.count({
+        where: { role: UserRole.ADMIN },
+      });
+      if (adminCount <= 1) {
+        throw new BadRequestException('Cannot delete the last admin user');
+      }
+    }
+
+    await this.userRepository.remove(user);
+  }
+
+  async changePassword(
+    id: string,
+    changePasswordDto: ChangePasswordDto,
+  ): Promise<void> {
+    const user = await this.userRepository.findOne({ where: { id } });
+    if (!user) {
+      throw new NotFoundException('User not found');
+    }
+
+    // Verify current password
+    const isPasswordValid = await bcrypt.compare(
+      changePasswordDto.currentPassword,
+      user.passwordHash,
+    );
+    if (!isPasswordValid) {
+      throw new BadRequestException('Current password is incorrect');
+    }
+
+    // Hash new password
+    const saltRounds = 10;
+    user.passwordHash = await bcrypt.hash(
+      changePasswordDto.newPassword,
+      saltRounds,
+    );
+
+    await this.userRepository.save(user);
+  }
+
+  async validateUser(username: string, password: string): Promise<User | null> {
+    const user = await this.userRepository.findOne({
+      where: { username, isActive: true },
+    });
+    if (!user) {
+      return null;
+    }
+
+    const isPasswordValid = await bcrypt.compare(password, user.passwordHash);
+    if (!isPasswordValid) {
+      return null;
+    }
+
+    return user;
+  }
+
+  async createAdminIfNotExists(): Promise<void> {
+    const adminExists = await this.userRepository.findOne({
+      where: { role: UserRole.ADMIN },
+    });
+
+    if (!adminExists) {
+      const saltRounds = 10;
+      const passwordHash = await bcrypt.hash('admin123', saltRounds);
+
+      const adminUser = this.userRepository.create({
+        email: 'admin@placebo.mk',
+        username: 'admin',
+        passwordHash,
+        role: UserRole.ADMIN,
+        isActive: true,
+      });
+
+      await this.userRepository.save(adminUser);
+      console.log('Default admin user created: admin / admin123');
+    }
+  }
+}

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,40 +17,56 @@ COPY . .
 # Build Strapi
 RUN npm run build
 
+# Prune devDependencies after build (suppress warning)
+RUN npm prune --omit=dev
+
 # Production stage
 FROM node:20-alpine
 
 WORKDIR /app
 
+# Install su-exec for user switching in entrypoint
+RUN apk add --no-cache su-exec
+
 # Create non-root user
 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/src ./src
 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/.strapi ./.strapi
 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
+# Copy entrypoint script
+COPY docker-entrypoint.sh /usr/local/bin/
+RUN chmod +x /usr/local/bin/docker-entrypoint.sh
 
-# Create data directory for SQLite
-RUN mkdir -p /app/.tmp && \
-    chown -R nodejs:nodejs /app/.tmp
+# Create the directory structure Strapi expects for the admin build
+RUN mkdir -p /app/node_modules/@strapi/admin/dist/server/server && \
+    ln -sf /app/dist/build /app/node_modules/@strapi/admin/dist/server/server/build && \
+    chown -R nodejs:nodejs /app/node_modules/@strapi/admin
 
-# Switch to non-root user
-USER nodejs
+# Create data and database directories with proper permissions
+RUN mkdir -p /app/.tmp /app/database /app/database/migrations /app/public/uploads && \
+    chown -R nodejs:nodejs /app
+
+# Don't switch to nodejs user yet - entrypoint will handle it
+# 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
 
+# Use entrypoint to fix permissions on startup then switch to nodejs user
+ENTRYPOINT ["docker-entrypoint.sh"]
+
 # Start Strapi
 CMD ["npm", "run", "start"]

cms/cms/cmstoken.md

@@ -0,0 +1 @@
+ad31a55be0b5efc2d6d7b5490e8d1a31b1a3a2aecbcf99e8f65bcb44bd0189e2918388b942fb3ac7b35fd470d19d475e556489b773c68756977e452aec1ab83f34876ed76ebadafce31636d5621c66820425d1105d753cdc5452d8f3d503ddbaebf45fc6817c235e1f8eae12d118452951ee0a48691446475f7ffc6a72fd6ffb

cms/cms/config/admin.ts

@@ -17,4 +17,9 @@ export default ({ env }) => ({
     nps: env.bool('FLAG_NPS', true),
     promoteEE: env.bool('FLAG_PROMOTE_EE', true),
   },
+  // Specify the build directory path for production
+  path: env('ADMIN_PATH', '/admin'),
+  build: {
+    backend: env('PUBLIC_URL', 'https://cms.placebo.mk'),
+  },
 });

cms/cms/config/database.ts

@@ -3,58 +3,51 @@ import path from 'path';
 export default ({ env }) => {
   const client = env('DATABASE_CLIENT', 'sqlite');
 
-  const connections = {
-    mysql: {
+  console.log('=== DATABASE CONFIGURATION ===');
+  console.log('DATABASE_CLIENT:', client);
+  console.log('DATABASE_HOST:', env('DATABASE_HOST', 'not-set'));
+  console.log('DATABASE_PORT:', env('DATABASE_PORT', 'not-set'));
+  console.log('DATABASE_USERNAME:', env('DATABASE_USERNAME', 'not-set'));
+  console.log('DATABASE_NAME:', env('DATABASE_NAME', 'not-set'));
+  console.log('DATABASE_PASSWORD:', env('DATABASE_PASSWORD') ? '***SET***' : '***NOT SET***');
+  console.log('DATABASE_SSL:', env('DATABASE_SSL', 'not-set'));
+
+  if (client === 'postgres') {
+    const connectionConfig = {
+      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) ? { rejectUnauthorized: false } : false,
+    };
+    
+    console.log('PostgreSQL connection config:', JSON.stringify({
+      ...connectionConfig,
+      password: connectionConfig.password ? `***${connectionConfig.password.length} chars***` : '***NOT SET***'
+    }, null, 2));
+    
+    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),
+        client: 'postgres',
+        connection: connectionConfig,
+        pool: {
+          min: env.int('DATABASE_POOL_MIN', 2),
+          max: env.int('DATABASE_POOL_MAX', 10),
         },
+        acquireConnectionTimeout: env.int('DATABASE_TIMEOUT', 60000),
       },
-      pool: { min: env.int('DATABASE_POOL_MIN', 2), max: env.int('DATABASE_POOL_MAX', 10) },
-    },
-    postgres: {
-      connection: {
-        connectionString: env('DATABASE_URL'),
-        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'),
-      },
-      pool: { min: env.int('DATABASE_POOL_MIN', 2), max: env.int('DATABASE_POOL_MAX', 10) },
-    },
-    sqlite: {
+    };
+  }
+
+  console.log('Using SQLite configuration');
+  return {
+    connection: {
+      client: '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),
-    },
-  };
 };

cms/cms/config/middlewares.ts

@@ -5,7 +5,17 @@ export default [
   'strapi::cors',
   'strapi::poweredBy',
   'strapi::query',
-  'strapi::body',
+  {
+    name: 'strapi::body',
+    config: {
+      formLimit: '256mb', // Max form size
+      jsonLimit: '256mb', // Max JSON payload size
+      textLimit: '256mb', // Max text payload size
+      formidable: {
+        maxFileSize: 200 * 1024 * 1024, // 200MB in bytes
+      },
+    },
+  },
   'strapi::session',
   'strapi::favicon',
   'strapi::public',

cms/cms/config/plugins.ts

@@ -1 +1,7 @@
-export default () => ({});
+export default ({ env }) => ({
+  upload: {
+    config: {
+      sizeLimit: 200 * 1024 * 1024, // 200MB in bytes
+    },
+  },
+});

cms/cms/config/server.ts

@@ -1,6 +1,7 @@
 export default ({ env }) => ({
   host: env('HOST', '0.0.0.0'),
   port: env.int('PORT', 1337),
+  url: env('PUBLIC_URL', 'https://cms.placebo.mk'),
   app: {
     keys: env.array('APP_KEYS'),
   },

cms/cms/docker-entrypoint.sh

@@ -0,0 +1,12 @@
+#!/bin/sh
+set -e
+
+# Ensure uploads directory exists and is writable
+mkdir -p /app/public/uploads
+
+# Fix permissions for uploads directory (needed for volume mounts)
+chown -R nodejs:nodejs /app/public/uploads
+chmod -R 755 /app/public/uploads
+
+# Switch to nodejs user and execute the main command
+exec su-exec nodejs "$@"

cms/cms/envprodstrapi.md

@@ -0,0 +1,2 @@
+api token=5af45b836a0bcd065b528963e62b6d5d325117dfbf179cd5123087a17906c911fd67bcb57d92f11e869ebda27339b21aa3a7221d3dbbe79de51ef2f9e2af4dae0befe6528872ca2f68f64656ed45c7dfcacea36fdb55d1d9eb2fd9275454ac7ff8ab9acb1535f62449b3f8bd75c24803a2bd0714c637fd1d0bc819798723d999
+

cms/cms/scripts/create-api-token.js

@@ -0,0 +1,38 @@
+/**
+ * Script to create an API token for backend integration
+ * Run this inside the CMS container if the UI doesn't work
+ */
+
+import { factories } from '@strapi/strapi';
+
+async function createApiToken() {
+  const strapi = await factories.createCoreStore()();
+  
+  try {
+    // Create API token
+    const tokenService = strapi.service('admin::api-token');
+    
+    const token = await tokenService.create({
+      name: 'Backend Integration',
+      description: 'Token for backend to fetch articles',
+      type: 'read-only',
+      permissions: [],
+      lifespan: null, // Unlimited
+    });
+
+    console.log('✅ API Token created successfully!');
+    console.log('\nToken details:');
+    console.log('Name:', token.name);
+    console.log('Type:', token.type);
+    console.log('\nTOKEN (copy this to Coolify as STRAPI_API_TOKEN):');
+    console.log(token.accessKey);
+    console.log('\n⚠️  Save this token - you won\'t see it again!');
+    
+  } catch (error) {
+    console.error('❌ Error creating API token:', error.message);
+  } finally {
+    await strapi.destroy();
+  }
+}
+
+createApiToken();

cms/cms/src/api/article/content-types/article/schema.json

@@ -4,7 +4,8 @@
   "info": {
     "singularName": "article",
     "pluralName": "articles",
-    "displayName": "article"
+    "displayName": "Article",
+    "description": "News articles for Placebo.mk"
   },
   "options": {
     "draftAndPublish": true
@@ -12,33 +13,28 @@
   "pluginOptions": {},
   "attributes": {
     "title": {
-      "type": "string"
+      "type": "string",
+      "required": true
+    },
+    "slug": {
+      "type": "uid",
+      "targetField": "title",
+      "required": true
+    },
+    "description": {
+      "type": "text"
     },
     "content": {
       "type": "richtext"
     },
-    "media": {
-      "type": "media",
-      "multiple": true,
-      "allowedTypes": [
-        "images",
-        "files",
-        "videos",
-        "audios"
-      ]
-    },
     "author": {
       "type": "string"
     },
     "img": {
       "type": "media",
       "multiple": false,
-      "allowedTypes": [
-        "images",
-        "files",
-        "videos",
-        "audios"
-      ]
+      "required": false,
+      "allowedTypes": ["images"]
     },
     "imagePosition": {
       "type": "enumeration",
@@ -50,10 +46,14 @@
       "enum": ["small", "medium", "large"],
       "default": "medium"
     },
+    "media": {
+      "type": "media",
+      "multiple": true,
+      "required": false,
+      "allowedTypes": ["images", "files", "videos", "audios"]
+    },
     "videoUrl": {
-      "type": "string",
-      "regex": "^(https?:\\/\\/)?(www\\.)?(youtube\\.com\\/watch\\?v=|youtu\\.be\\/|youtube\\.com\\/embed\\/)[a-zA-Z0-9_-]{11}",
-      "default": ""
+      "type": "string"
     },
     "videoPosition": {
       "type": "enumeration",
@@ -61,8 +61,13 @@
       "default": "inline"
     },
     "videoCaption": {
-      "type": "string",
-      "default": ""
+      "type": "string"
+    },
+    "category": {
+      "type": "enumeration",
+      "enum": ["general", "sport", "art", "science"],
+      "default": "general",
+      "required": true
     }
   }
 }

cms/cms/src/api/article/controllers/article.js

@@ -0,0 +1,7 @@
+/**
+ * article controller
+ */
+
+const { createCoreController } = require('@strapi/strapi').factories;
+
+module.exports = createCoreController('api::article.article');

cms/cms/src/api/article/controllers/article.ts

@@ -1,7 +0,0 @@
-/**
- * article controller
- */
-
-import { factories } from '@strapi/strapi';
-
-export default factories.createCoreController('api::article.article');

cms/cms/src/api/article/routes/article.js

@@ -0,0 +1,7 @@
+/**
+ * article router
+ */
+
+const { createCoreRouter } = require('@strapi/strapi').factories;
+
+module.exports = createCoreRouter('api::article.article');

cms/cms/src/api/article/routes/article.ts

@@ -1,7 +0,0 @@
-/**
- * article router
- */
-
-import { factories } from '@strapi/strapi';
-
-export default factories.createCoreRouter('api::article.article');

cms/cms/src/api/article/services/article.js

@@ -0,0 +1,7 @@
+/**
+ * article service
+ */
+
+const { createCoreService } = require('@strapi/strapi').factories;
+
+module.exports = createCoreService('api::article.article');

cms/cms/src/api/article/services/article.ts

@@ -1,7 +0,0 @@
-/**
- * article service
- */
-
-import { factories } from '@strapi/strapi';
-
-export default factories.createCoreService('api::article.article');

cms/cms/src/index.ts

@@ -16,5 +16,9 @@ export default {
    * This gives you an opportunity to set up your data model,
    * run jobs, or perform some special logic.
    */
-  bootstrap(/* { strapi }: { strapi: Core.Strapi } */) {},
+  async bootstrap({ strapi }) {
+    console.log('=== Strapi Bootstrap ===');
+    console.log('Available content types:', Object.keys(strapi.contentTypes || {}));
+    console.log('Article content type exists:', !!strapi.contentTypes['api::article.article']);
+  },
 };

docker-compose.coolify.yml

@@ -0,0 +1,289 @@
+# 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
+    expose:
+      - "5432"
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -U placebo_user -d placebo_backend_db']
+      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
+    expose:
+      - "5432"
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -U placebo_user -d placebo_cms_db']
+      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: 'true'
+      DATABASE_LOGGING: 'true'
+      JWT_SECRET: ${JWT_SECRET}
+      JWT_EXPIRATION: '86400'
+      FRONTEND_URL: https://placebo.mk
+      PWA_URL: https://app.placebo.mk
+      STRAPI_URL: http://cms:1337
+      STRAPI_PUBLIC_URL: https://cms.placebo.mk
+      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"
+      - "traefik.http.routers.backend.service=backend"
+      # 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
+      PUBLIC_URL: https://cms.placebo.mk
+      BACKEND_WEBHOOK_URL: http://backend:3000
+      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"
+      - "traefik.http.routers.cms.service=cms"
+      # Service configuration
+      - "traefik.http.services.cms.loadbalancer.server.port=1337"
+      - "traefik.http.services.cms.loadbalancer.passhostheader=true"
+      - "traefik.http.services.cms.loadbalancer.responseForwarding.flushInterval=100ms"
+      # Health check for service
+      - "traefik.http.services.cms.loadbalancer.healthcheck.path=/_health"
+      - "traefik.http.services.cms.loadbalancer.healthcheck.interval=30s"
+      - "traefik.http.services.cms.loadbalancer.healthcheck.timeout=5s"
+
+  # ===========================================
+  # 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
+        VITE_PUBLIC_POSTHOG_KEY: phc_kuDGT1kUmJmijLRjiQaKWIaU4JBdFW0aELW2hIGlBXR
+        VITE_PUBLIC_POSTHOG_HOST: https://eu.i.posthog.com
+    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"
+      - "traefik.http.routers.frontend.service=frontend"
+      # 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
+        VITE_PUBLIC_POSTHOG_KEY: phc_kuDGT1kUmJmijLRjiQaKWIaU4JBdFW0aELW2hIGlBXR
+        VITE_PUBLIC_POSTHOG_HOST: https://eu.i.posthog.com
+    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"
+      - "traefik.http.routers.pwa.service=pwa"
+      # 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.dev.yml

@@ -24,9 +24,9 @@ services:
       dockerfile: Dockerfile.dev
     container_name: placebo-backend-dev
     env_file:
-      - ./backend/.env  # Use the .env file for configuration
+      - ./backend/.env.docker  # Use the .env.docker file for Docker configuration
     environment:
-      # Only override if needed, most config is in .env file
+      # Only override if needed, most config is in .env.docker file
       NODE_ENV: development
     ports:
       - "3000:3000"
@@ -36,7 +36,7 @@ services:
       - ./backend/src:/app/src
       - ./backend/package.json:/app/package.json
       - ./backend/package-lock.json:/app/package-lock.json
-      - ./backend/.env:/app/.env  # Mount .env file into container
+      - ./backend/.env.docker:/app/.env  # Mount .env.docker file as .env in container
     command: npm run dev:docker
     networks:
       - placebo-network-dev

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

docker-compose.yml

@@ -6,7 +6,7 @@ services:
     image: postgres:16-alpine
     container_name: placebo-postgres
     environment:
-      POSTGRES_DB: placebo_db
+      POSTGRES_DB: placebo_backend_db
       POSTGRES_USER: placebo_user
       POSTGRES_PASSWORD: placebo_password
     volumes:
@@ -15,7 +15,7 @@ services:
     ports:
       - "5432:5432"
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U placebo_user -d placebo_db"]
+      test: ["CMD-SHELL", "pg_isready -U placebo_user -d placebo_backend_db"]
       interval: 10s
       timeout: 5s
       retries: 5
@@ -29,19 +29,17 @@ services:
       dockerfile: Dockerfile
     container_name: placebo-backend
     environment:
-      NODE_ENV: production
-      DATABASE_TYPE: postgres
-      DATABASE_HOST: postgres
-      DATABASE_PORT: 5432
-      DATABASE_USERNAME: placebo_user
-      DATABASE_PASSWORD: placebo_password
-      DATABASE_NAME: placebo_db
-      DATABASE_SYNCHRONIZE: "false"
-      DATABASE_LOGGING: "false"
-      JWT_SECRET: ${JWT_SECRET:-your-jwt-secret-key-change-in-production}
-      JWT_EXPIRATION: 3600
-      CORS_ORIGIN: http://localhost:5173,http://localhost:3001
-      PORT: 3000
+       NODE_ENV: production
+       DATABASE_TYPE: postgres
+       DATABASE_HOST: postgres
+       DATABASE_PORT: 5432
+       DATABASE_USERNAME: placebo_user
+       DATABASE_PASSWORD: placebo_password
+       DATABASE_NAME: placebo_backend_db
+       DATABASE_SYNCHRONIZE: "false"
+       DATABASE_LOGGING: "false"
+       CORS_ORIGIN: http://localhost:5173,http://localhost:3001
+       PORT: 3000
     ports:
       - "3000:3000"
     depends_on:

frontend/.claude/skills/posthog-integration-react-tanstack-router-code-based/SKILL.md

@@ -0,0 +1,61 @@
+---
+name: integration-react-tanstack-router-code-based
+description: >-
+  PostHog integration for React applications using TanStack Router with
+  code-based routing
+metadata:
+  author: PostHog
+  version: 1.8.1
+---
+
+# PostHog integration for React with TanStack Router (code-based)
+
+This skill helps you add PostHog analytics to React with TanStack Router (code-based) applications.
+
+## Workflow
+
+Follow these steps in order to complete the integration:
+
+1. `basic-integration-1.0-begin.md` - PostHog Setup - Begin ← **Start here**
+2. `basic-integration-1.1-edit.md` - PostHog Setup - Edit
+3. `basic-integration-1.2-revise.md` - PostHog Setup - Revise
+4. `basic-integration-1.3-conclude.md` - PostHog Setup - Conclusion
+
+## Reference files
+
+- `EXAMPLE.md` - React with TanStack Router (code-based) example project code
+- `tanstack-start.md` - Tanstack start - docs
+- `identify-users.md` - Identify users - docs
+- `basic-integration-1.0-begin.md` - PostHog setup - begin
+- `basic-integration-1.1-edit.md` - PostHog setup - edit
+- `basic-integration-1.2-revise.md` - PostHog setup - revise
+- `basic-integration-1.3-conclude.md` - PostHog setup - conclusion
+
+The example project shows the target implementation pattern. Consult the documentation for API details.
+
+## Key principles
+
+- **Environment variables**: Always use environment variables for PostHog keys. Never hardcode them.
+- **Minimal changes**: Add PostHog code alongside existing integrations. Don't replace or restructure existing code.
+- **Match the example**: Your implementation should follow the example project's patterns as closely as possible.
+
+## Framework guidelines
+
+- For feature flags, use useFeatureFlagEnabled() or useFeatureFlagPayload() hooks - they handle loading states and external sync automatically
+- Add analytics capture in event handlers where user actions occur, NOT in useEffect reacting to state changes
+- Do NOT use useEffect for data transformation - calculate derived values during render instead
+- Do NOT use useEffect to respond to user events - put that logic in the event handler itself
+- Do NOT use useEffect to chain state updates - calculate all related updates together in the event handler
+- Do NOT use useEffect to notify parent components - call the parent callback alongside setState in the event handler
+- To reset component state when a prop changes, pass the prop as the component's key instead of using useEffect
+- useEffect is ONLY for synchronizing with external systems (non-React widgets, browser APIs, network subscriptions)
+- Use TanStack Router's built-in navigation events for pageview tracking instead of useEffect
+- Use PostHogProvider in the root component defined in either the file-based convention (__root.tsx) or code-based convention (wherever createRootRoute() is called) so all child routes have access to the PostHog client
+
+## Identifying users
+
+Identify users during login and signup events. Refer to the example code and documentation for the correct identify pattern for this framework. If both frontend and backend code exist, pass the client-side session and distinct ID using `X-POSTHOG-DISTINCT-ID` and `X-POSTHOG-SESSION-ID` headers to maintain correlation.
+
+## Error tracking
+
+Add PostHog error tracking to relevant files, particularly around critical user flows and API boundaries.

frontend/.claude/skills/posthog-integration-react-tanstack-router-code-based/references/EXAMPLE.md

@@ -0,0 +1,783 @@
+# PostHog React with TanStack Router (code-based) Example Project
+
+Repository: https://github.com/PostHog/context-mill
+Path: basics/react-tanstack-router-code-based
+
+---
+
+## README.md
+
+# PostHog TanStack Router Example (Code-Based Routing)
+
+This is a React and [TanStack Router](https://tanstack.com/router) example demonstrating PostHog integration with product analytics, session replay, and error tracking. This example uses **code-based routing** where routes are defined programmatically.
+
+## Features
+
+- **Product analytics**: Track user events and behaviors
+- **Session replay**: Record and replay user sessions
+- **Error tracking**: Capture and track errors
+- **User authentication**: Demo login system with PostHog user identification
+- **Client-side tracking**: Pure client-side React implementation
+- **Reverse proxy**: PostHog ingestion through Vite proxy
+
+## Getting started
+
+### 1. Install dependencies
+
+```bash
+npm install
+```
+
+### 2. Configure environment variables
+
+Create a `.env` file in the root directory:
+
+```bash
+VITE_PUBLIC_POSTHOG_KEY=your_posthog_project_api_key
+VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+```
+
+Get your PostHog API key from your [PostHog project settings](https://app.posthog.com/project/settings).
+
+### 3. Run the development server
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the app.
+
+## Project structure
+
+```
+src/
+├── contexts/
+│   └── AuthContext.tsx    # Authentication context with PostHog integration
+├── main.tsx               # App entry point with all routes defined in code
+├── reportWebVitals.ts     # Performance monitoring
+└── styles.css             # Global styles
+```
+
+## Key integration points
+
+### PostHog provider setup (main.tsx)
+
+PostHog is initialized using `PostHogProvider` from `@posthog/react`. The provider wraps the entire app in the root route component:
+
+```typescript
+import { PostHogProvider } from '@posthog/react'
+import { createRootRoute } from '@tanstack/react-router'
+
+const rootRoute = createRootRoute({
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <PostHogProvider
+      apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY!}
+      options={{
+        api_host: '/ingest',
+        ui_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST || 'https://us.posthog.com',
+        defaults: '2026-01-30',
+        capture_exceptions: true,
+        debug: import.meta.env.DEV,
+      }}
+    >
+      {/* your app */}
+    </PostHogProvider>
+  )
+}
+```
+
+### User identification (contexts/AuthContext.tsx)
+
+```typescript
+import { usePostHog } from '@posthog/react'
+
+const posthog = usePostHog()
+
+posthog.identify(username, {
+  username: username,
+})
+```
+
+### Event tracking (main.tsx - BurritoPage)
+
+```typescript
+import { usePostHog } from '@posthog/react'
+
+const posthog = usePostHog()
+
+posthog.capture('burrito_considered', {
+  total_considerations: count,
+  username: username,
+})
+```
+
+### Error tracking (main.tsx - ProfilePage)
+
+```typescript
+posthog.captureException(error)
+```
+
+## TanStack Router details
+
+This example uses TanStack Router with **code-based routing**. Key details:
+
+1. **Client-side only**: No server-side logic, no API routes, no posthog-node
+2. **Code-based routing**: All routes defined in `main.tsx` using `createRoute()` and `createRootRoute()`
+3. **Manual route tree**: Routes connected with `addChildren()` method
+4. **Standard hooks**: Uses `useNavigate()` from @tanstack/react-router
+5. **Vite proxy**: Uses Vite's proxy config for PostHog calls
+6. **Environment variables**: Uses `import.meta.env.VITE_*`
+7. **PostHog provider**: Uses `PostHogProvider` from `@posthog/react` in root route
+
+### Code-based vs File-based routing
+
+This example demonstrates **code-based routing**, where routes are defined programmatically:
+
+```typescript
+import { createRoute, createRootRoute, createRouter } from '@tanstack/react-router'
+
+const rootRoute = createRootRoute({ component: RootComponent })
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: Home,
+})
+
+const burritoRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/burrito',
+  component: BurritoPage,
+})
+
+const routeTree = rootRoute.addChildren([indexRoute, burritoRoute])
+
+const router = createRouter({ routeTree })
+```
+
+For file-based routing (auto-generated from file structure), see the `react-tanstack-router-file-based` example.
+
+## Learn more
+
+- [PostHog Documentation](https://posthog.com/docs)
+- [TanStack Router Documentation](https://tanstack.com/router)
+- [TanStack Router Code-Based Routing](https://tanstack.com/router/latest/docs/framework/react/guide/code-based-routing)
+- [PostHog React Integration Guide](https://posthog.com/docs/libraries/react)
+
+---
+
+## .env.example
+
+```example
+VITE_PUBLIC_POSTHOG_KEY=<ph_project_api_key>
+VITE_PUBLIC_POSTHOG_HOST=<ph_client_api_host>
+
+```
+
+---
+
+## .prettierignore
+
+```
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+
+```
+
+---
+
+## index.html
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="React TanStack Router code-based routing example"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>React TanStack Router - Code-Based</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+
+```
+
+---
+
+## prettier.config.js
+
+```js
+//  @ts-check
+
+/** @type {import('prettier').Config} */
+const config = {
+  semi: false,
+  singleQuote: true,
+  trailingComma: "all",
+};
+
+export default config;
+
+```
+
+---
+
+## public/robots.txt
+
+```txt
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
+
+```
+
+---
+
+## src/contexts/AuthContext.tsx
+
+```tsx
+import { createContext, useContext, useState, type ReactNode } from 'react';
+import { usePostHog } from '@posthog/react';
+
+interface User {
+  username: string;
+  burritoConsiderations: number;
+}
+
+interface AuthContextType {
+  user: User | null;
+  login: (username: string, password: string) => Promise<boolean>;
+  logout: () => void;
+  incrementBurritoConsiderations: () => void;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+const users: Map<string, User> = new Map();
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  // Use lazy initializer to read from localStorage only once on mount
+  const [user, setUser] = useState<User | null>(() => {
+    if (typeof window === 'undefined') return null;
+
+    const storedUsername = localStorage.getItem('currentUser');
+    if (storedUsername) {
+      const existingUser = users.get(storedUsername);
+      if (existingUser) {
+        return existingUser;
+      }
+    }
+    return null;
+  });
+  const posthog = usePostHog();
+
+  const login = async (username: string, password: string): Promise<boolean> => {
+    if (!username || !password) {
+      return false;
+    }
+
+    // Get or create user in local map
+    let user = users.get(username);
+    const isNewUser = !user;
+
+    if (!user) {
+      user = { username, burritoConsiderations: 0 };
+      users.set(username, user);
+    }
+
+    setUser(user);
+    localStorage.setItem('currentUser', username);
+
+    // Identify user in PostHog using username as distinct ID
+    posthog.identify(username, {
+      username: username,
+      isNewUser: isNewUser,
+    });
+
+    // Capture login event
+    posthog.capture('user_logged_in', {
+      username: username,
+      isNewUser: isNewUser,
+    });
+
+    return true;
+  };
+
+  const logout = () => {
+    // Capture logout event before resetting
+    posthog.capture('user_logged_out');
+    posthog.reset();
+
+    setUser(null);
+    localStorage.removeItem('currentUser');
+  };
+
+  const incrementBurritoConsiderations = () => {
+    if (user) {
+      user.burritoConsiderations++;
+      users.set(user.username, user);
+      setUser({ ...user });
+    }
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, login, logout, incrementBurritoConsiderations }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}
+
+```
+
+---
+
+## src/main.tsx
+
+```tsx
+import { StrictMode, useState } from 'react'
+import ReactDOM from 'react-dom/client'
+import {
+  Link,
+  Outlet,
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  useNavigate,
+} from '@tanstack/react-router'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { PostHogProvider, usePostHog } from '@posthog/react'
+
+import { AuthProvider, useAuth } from './contexts/AuthContext'
+import './styles.css'
+import reportWebVitals from './reportWebVitals'
+
+// ============================================================================
+// Root Route
+// ============================================================================
+
+const rootRoute = createRootRoute({
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <PostHogProvider
+      apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY!}
+      options={{
+        api_host: '/ingest',
+        ui_host:
+          import.meta.env.VITE_PUBLIC_POSTHOG_HOST || 'https://us.posthog.com',
+        defaults: '2026-01-30',
+        capture_exceptions: true,
+        debug: import.meta.env.DEV,
+      }}
+    >
+      <AuthProvider>
+        <Header />
+        <main>
+          <Outlet />
+        </main>
+        <TanStackDevtools
+          config={{
+            position: 'bottom-right',
+          }}
+          plugins={[
+            {
+              name: 'Tanstack Router',
+              render: <TanStackRouterDevtoolsPanel />,
+            },
+          ]}
+        />
+      </AuthProvider>
+    </PostHogProvider>
+  )
+}
+
+// ============================================================================
+// Header Component
+// ============================================================================
+
+function Header() {
+  const { user, logout } = useAuth()
+
+  return (
+    <header className="header">
+      <div className="header-container">
+        <nav>
+          <Link to="/">Home</Link>
+          {user && (
+            <>
+              <Link to="/burrito">Burrito Consideration</Link>
+              <Link to="/profile">Profile</Link>
+            </>
+          )}
+        </nav>
+        <div className="user-section">
+          {user ? (
+            <>
+              <span>Welcome, {user.username}!</span>
+              <button onClick={logout} className="btn-logout">
+                Logout
+              </button>
+            </>
+          ) : (
+            <span>Not logged in</span>
+          )}
+        </div>
+      </div>
+    </header>
+  )
+}
+
+// ============================================================================
+// Index Route (Home Page)
+// ============================================================================
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: Home,
+})
+
+function Home() {
+  const { user, login } = useAuth()
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+
+    try {
+      const success = await login(username, password)
+      if (success) {
+        setUsername('')
+        setPassword('')
+      } else {
+        setError('Please provide both username and password')
+      }
+    } catch (err) {
+      console.error('Login failed:', err)
+      setError('An error occurred during login')
+    }
+  }
+
+  if (user) {
+    return (
+      <div className="container">
+        <h1>Welcome back, {user.username}!</h1>
+        <p>You are now logged in. Feel free to explore:</p>
+        <ul>
+          <li>Consider the potential of burritos</li>
+          <li>View your profile and statistics</li>
+        </ul>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container">
+      <h1>Welcome to Burrito Consideration App</h1>
+      <p>Please sign in to begin your burrito journey</p>
+
+      <form onSubmit={handleSubmit} className="form">
+        <div className="form-group">
+          <label htmlFor="username">Username:</label>
+          <input
+            type="text"
+            id="username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            placeholder="Enter any username"
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="password">Password:</label>
+          <input
+            type="password"
+            id="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Enter any password"
+          />
+        </div>
+
+        {error && <p className="error">{error}</p>}
+
+        <button type="submit" className="btn-primary">
+          Sign In
+        </button>
+      </form>
+
+      <p className="note">
+        Note: This is a demo app. Use any username and password to sign in.
+      </p>
+    </div>
+  )
+}
+
+// ============================================================================
+// Burrito Route
+// ============================================================================
+
+const burritoRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/burrito',
+  component: BurritoPage,
+})
+
+function BurritoPage() {
+  const { user, incrementBurritoConsiderations } = useAuth()
+  const navigate = useNavigate()
+  const posthog = usePostHog()
+  const [hasConsidered, setHasConsidered] = useState(false)
+
+  // Redirect to home if not logged in
+  if (!user) {
+    navigate({ to: '/' })
+    return null
+  }
+
+  const handleConsideration = () => {
+    incrementBurritoConsiderations()
+    setHasConsidered(true)
+    setTimeout(() => setHasConsidered(false), 2000)
+
+    // Capture burrito consideration event
+    console.log('posthog', posthog)
+    posthog.capture('burrito_considered', {
+      total_considerations: user.burritoConsiderations + 1,
+      username: user.username,
+    })
+  }
+
+  return (
+    <div className="container">
+      <h1>Burrito consideration zone</h1>
+      <p>Take a moment to truly consider the potential of burritos.</p>
+
+      <div style={{ textAlign: 'center' }}>
+        <button onClick={handleConsideration} className="btn-burrito">
+          I have considered the burrito potential
+        </button>
+
+        {hasConsidered && (
+          <p className="success">
+            Thank you for your consideration! Count: {user.burritoConsiderations}
+          </p>
+        )}
+      </div>
+
+      <div className="stats">
+        <h3>Consideration stats</h3>
+        <p>Total considerations: {user.burritoConsiderations}</p>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Profile Route
+// ============================================================================
+
+const profileRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/profile',
+  component: ProfilePage,
+})
+
+function ProfilePage() {
+  const { user } = useAuth()
+  const navigate = useNavigate()
+  const posthog = usePostHog()
+
+  // Redirect to home if not logged in
+  if (!user) {
+    navigate({ to: '/' })
+    return null
+  }
+
+  const triggerTestError = () => {
+    try {
+      throw new Error('Test error for PostHog error tracking')
+    } catch (err) {
+      posthog.captureException(err)
+      console.error('Captured error:', err)
+      alert('Error captured and sent to PostHog!')
+    }
+  }
+
+  return (
+    <div className="container">
+      <h1>User Profile</h1>
+
+      <div className="stats">
+        <h2>Your Information</h2>
+        <p>
+          <strong>Username:</strong> {user.username}
+        </p>
+        <p>
+          <strong>Burrito Considerations:</strong> {user.burritoConsiderations}
+        </p>
+      </div>
+
+      <div style={{ marginTop: '2rem' }}>
+        <button
+          onClick={triggerTestError}
+          className="btn-primary"
+          style={{ backgroundColor: '#dc3545' }}
+        >
+          Trigger Test Error (for PostHog)
+        </button>
+      </div>
+
+      <div style={{ marginTop: '2rem' }}>
+        <h3>Your Burrito Journey</h3>
+        {user.burritoConsiderations === 0 ? (
+          <p>
+            You haven't considered any burritos yet. Visit the Burrito
+            Consideration page to start!
+          </p>
+        ) : user.burritoConsiderations === 1 ? (
+          <p>You've considered the burrito potential once. Keep going!</p>
+        ) : user.burritoConsiderations < 5 ? (
+          <p>You're getting the hang of burrito consideration!</p>
+        ) : user.burritoConsiderations < 10 ? (
+          <p>You're becoming a burrito consideration expert!</p>
+        ) : (
+          <p>You are a true burrito consideration master!</p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Route Tree & Router Setup
+// ============================================================================
+
+const routeTree = rootRoute.addChildren([indexRoute, burritoRoute, profileRoute])
+
+const router = createRouter({
+  routeTree,
+  context: {},
+  defaultPreload: 'intent',
+  scrollRestoration: true,
+  defaultStructuralSharing: true,
+  defaultPreloadStaleTime: 0,
+})
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+// ============================================================================
+// Render the App
+// ============================================================================
+
+const rootElement = document.getElementById('app')
+if (rootElement && !rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>,
+  )
+}
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals()
+
+```
+
+---
+
+## src/reportWebVitals.ts
+
+```ts
+const reportWebVitals = (onPerfEntry?: () => void) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {
+      onCLS(onPerfEntry)
+      onINP(onPerfEntry)
+      onFCP(onPerfEntry)
+      onLCP(onPerfEntry)
+      onTTFB(onPerfEntry)
+    })
+  }
+}
+
+export default reportWebVitals
+
+```
+
+---
+
+## vite.config.ts
+
+```ts
+import { defineConfig, loadEnv } from 'vite'
+import viteReact from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+import { fileURLToPath, URL } from 'node:url'
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
+
+  return {
+    plugins: [viteReact(), tailwindcss()],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+      },
+    },
+    server: {
+      proxy: {
+        '/ingest': {
+          target: env.VITE_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/ingest/, ''),
+        },
+      },
+    },
+  }
+})
+
+```
+
+---
+

frontend/.claude/skills/posthog-integration-react-tanstack-router-code-based/references/basic-integration-1.0-begin.md

@@ -0,0 +1,43 @@
+---
+title: PostHog Setup - Begin
+description: Start the event tracking setup process by analyzing the project and creating an event tracking plan
+---
+
+We're making an event tracking plan for this project.
+
+Before proceeding, find any existing `posthog.capture()` code. Make note of event name formatting.
+
+From the project's file list, select between 10 and 15 files that might have interesting business value for event tracking, especially conversion and churn events. Also look for additional files related to login that could be used for identifying users, along with error handling. Read the files. If a file is already well-covered by PostHog events, replace it with another option. Do not spawn subagents.
+
+Look for opportunities to track client-side events.
+
+**IMPORTANT: Server-side events are REQUIRED** if the project includes any instrumentable server-side code. If the project has API routes (e.g., `app/api/**/route.ts`) or Server Actions, you MUST include server-side events for critical business operations like:
+
+  - Payment/checkout completion
+  - Webhook handlers
+  - Authentication endpoints
+
+Do not skip server-side events - they capture actions that cannot be tracked client-side.
+
+Create a new file with a JSON array at the root of the project: .posthog-events.json. It should include one object for each event we want to add: event name, event description, and the file path we want to place the event in. If events already exist, don't duplicate them; supplement them.
+
+Track actions only, not pageviews. These can be captured automatically. Exceptions can be made for "viewed"-type events that correspond to the top of a conversion funnel.
+
+As you review files, make an internal note of opportunities to identify users and catch errors. We'll need them for the next step.
+
+## Status
+
+Before beginning a phase of the setup, you will send a status message with the exact prefix '[STATUS]', as in:
+
+[STATUS] Checking project structure.
+
+Status to report in this phase:
+
+- Checking project structure
+- Verifying PostHog dependencies
+- Generating events based on project
+
+
+---
+
+**Upon completion, continue with:** [basic-integration-1.1-edit.md](basic-integration-1.1-edit.md)

frontend/.claude/skills/posthog-integration-react-tanstack-router-code-based/references/basic-integration-1.1-edit.md

@@ -0,0 +1,37 @@
+---
+title: PostHog Setup - Edit
+description: Implement PostHog event tracking in the identified files, following best practices and the example project
+---
+
+For each of the files and events noted in .posthog-events.json, make edits to capture events using PostHog. Make sure to set up any helper files needed. Carefully examine the included example project code: your implementation should match it as closely as possible. Do not spawn subagents.
+
+Use environment variables for PostHog keys. Do not hardcode PostHog keys.
+
+If a file already has existing integration code for other tools or services, don't overwrite or remove that code. Place PostHog code below it.
+
+For each event, add useful properties, and use your access to the PostHog source code to ensure correctness. You also have access to documentation about creating new events with PostHog. Consider this documentation carefully and follow it closely before adding events. Your integration should be based on documented best practices. Carefully consider how the user project's framework version may impact the correct PostHog integration approach.
+
+Remember that you can find the source code for any dependency in the node_modules directory. This may be necessary to properly populate property names. There are also example project code files available via the PostHog MCP; use these for reference.
+
+Where possible, add calls for PostHog's identify() function on the client side upon events like logins and signups. Use the contents of login and signup forms to identify users on submit. If there is server-side code, pass the client-side session and distinct ID to the server-side code to identify the user. On the server side, make sure events have a matching distinct ID where relevant. 
+
+It's essential to do this in both client code and server code, so that user behavior from both domains is easy to correlate.
+
+You should also add PostHog exception capture error tracking to these files where relevant.
+
+Remember: Do not alter the fundamental architecture of existing files. Make your additions minimal and targeted.
+
+Remember the documentation and example project resources you were provided at the beginning. Read them now.
+
+## Status
+
+Status to report in this phase:
+
+- Inserting PostHog capture code
+- A status message for each file whose edits you are planning, including a high level summary of changes
+- A status message for each file you have edited
+
+
+---
+
+**Upon completion, continue with:** [basic-integration-1.2-revise.md](basic-integration-1.2-revise.md)

frontend/.claude/skills/posthog-integration-react-tanstack-router-code-based/references/basic-integration-1.2-revise.md

@@ -0,0 +1,22 @@
+---
+title: PostHog Setup - Revise
+description: Review and fix any errors in the PostHog integration implementation
+---
+
+Check the project for errors. Read the package.json file for any type checking or build scripts that may provide input about what to fix. Remember that you can find the source code for any dependency in the node_modules directory. Do not spawn subagents.
+
+Ensure that any components created were actually used.
+
+Once all other tasks are complete, run any linter or prettier-like scripts found in the package.json, but ONLY on the files you have edited or created during this session. Do not run formatting or linting across the entire project's codebase.
+
+## Status
+
+Status to report in this phase:
+
+- Finding and correcting errors
+- Report details of any errors you fix
+- Linting, building and prettying
+
+---
+
+**Upon completion, continue with:** [basic-integration-1.3-conclude.md](basic-integration-1.3-conclude.md)

frontend/.claude/skills/posthog-integration-react-tanstack-router-code-based/references/basic-integration-1.3-conclude.md

@@ -0,0 +1,38 @@
+---
+title: PostHog Setup - Conclusion
+description: Review and fix any errors in the PostHog integration implementation
+---
+
+Use the PostHog MCP to create a new dashboard named "Analytics basics" based on the events created here. Make sure to use the exact same event names as implemented in the code. Populate it with up to five insights, with special emphasis on things like conversion funnels, churn events, and other business critical insights.  
+
+Search for a file called `.posthog-events.json` and read it for available events. Do not spawn subagents.
+
+Create the file posthog-setup-report.md. It should include a summary of the integration edits, a table with the event names, event descriptions, and files where events were added, along with a list of links for the dashboard and insights created. Follow this format:
+
+<wizard-report>
+# PostHog post-wizard report
+
+The wizard has completed a deep integration of your project. [Detailed summary of changes]
+
+[table of events/descriptions/files]
+
+## Next steps
+
+We've built some insights and a dashboard for you to keep an eye on user behavior, based on the events we just instrumented:
+
+[links]
+
+### Agent skill
+
+We've left an agent skill folder in your project. You can use this context for further agent development when using Claude Code. This will help ensure the model provides the most up-to-date approaches for integrating PostHog.
+
+</wizard-report>
+
+Upon completion, remove .posthog-events.json.
+
+## Status
+
+Status to report in this phase:
+
+- Configured dashboard: [insert PostHog dashboard URL]
+- Created setup report: [insert full local file path]

frontend/.claude/skills/posthog-integration-react-tanstack-router-code-based/references/identify-users.md

@@ -0,0 +1,202 @@
+# Identify users - Docs
+
+Linking events to specific users enables you to build a full picture of how they're using your product across different sessions, devices, and platforms.
+
+This is straightforward to do when [capturing backend events](/docs/product-analytics/capture-events?tab=Node.js.md), as you associate events to a specific user using a `distinct_id`, which is a required argument.
+
+However, in the frontend of a [web](/docs/libraries/js/features#capturing-events.md) or [mobile app](/docs/libraries/ios#capturing-events.md), a `distinct_id` is not a required argument — PostHog's SDKs will generate an anonymous `distinct_id` for you automatically and you can capture events anonymously, provided you use the appropriate [configuration](/docs/libraries/js/features#capturing-anonymous-events.md).
+
+To link events to specific users, call `identify`:
+
+PostHog AI
+
+### Web
+
+```javascript
+posthog.identify(
+  'distinct_id',  // Replace 'distinct_id' with your user's unique identifier
+  { email: 'max@hedgehogmail.com', name: 'Max Hedgehog' } // optional: set additional person properties
+);
+```
+
+### Android
+
+```kotlin
+PostHog.identify(
+    distinctId = distinctID, // Replace 'distinctID' with your user's unique identifier
+    // optional: set additional person properties
+    userProperties = mapOf(
+        "name" to "Max Hedgehog",
+        "email" to "max@hedgehogmail.com"
+    )
+)
+```
+
+### iOS
+
+```swift
+PostHogSDK.shared.identify("distinct_id", // Replace "distinct_id" with your user's unique identifier
+                           userProperties: ["name": "Max Hedgehog", "email": "max@hedgehogmail.com"]) // optional: set additional person properties
+```
+
+### React Native
+
+```jsx
+posthog.identify('distinct_id', { // Replace "distinct_id" with your user's unique identifier
+    email: 'max@hedgehogmail.com', // optional: set additional person properties
+    name: 'Max Hedgehog'
+})
+```
+
+### Dart
+
+```dart
+await Posthog().identify(
+  userId: 'distinct_id', // Replace "distinct_id" with your user's unique identifier
+  userProperties: {
+    email: "max@hedgehogmail.com", // optional: set additional person properties
+    name: "Max Hedgehog"
+});
+```
+
+Events captured after calling `identify` are identified events and this creates a person profile if one doesn't exist already.
+
+Due to the cost of processing them, anonymous events can be up to 4x cheaper than identified events, so it's recommended you only capture identified events when needed.
+
+## How identify works
+
+When a user starts browsing your website or app, PostHog automatically assigns them an **anonymous ID**, which is stored locally.
+
+Provided you've [configured persistence](/docs/libraries/js/persistence.md) to use cookies or `localStorage`, this enables us to track anonymous users – even across different sessions.
+
+By calling `identify` with a `distinct_id` of your choice (usually the user's ID in your database, or their email), you link the anonymous ID and distinct ID together.
+
+Thus, all past and future events made with that anonymous ID are now associated with the distinct ID.
+
+This enables you to do things like associate events with a user from before they log in for the first time, or associate their events across different devices or platforms.
+
+Using identify in the backend
+
+Although you can call `identify` using our backend SDKs, it is used most in frontends. This is because there is no concept of anonymous sessions in the backend SDKs, so calling `identify` only updates person profiles.
+
+## Best practices when using `identify`
+
+### 1\. Call `identify` as soon as you're able to
+
+In your frontend, you should call `identify` as soon as you're able to.
+
+Typically, this is every time your **app loads** for the first time, and directly after your **users log in**.
+
+This ensures that events sent during your users' sessions are correctly associated with them.
+
+You only need to call `identify` once per session, and you should avoid calling it multiple times unnecessarily.
+
+If you call `identify` multiple times with the same data without reloading the page in between, PostHog will ignore the subsequent calls.
+
+### 2\. Use unique strings for distinct IDs
+
+If two users have the same distinct ID, their data is merged and they are considered one user in PostHog. Two common ways this can happen are:
+
+-   Your logic for generating IDs does not generate sufficiently strong IDs and you can end up with a clash where 2 users have the same ID.
+-   There's a bug, typo, or mistake in your code leading to most or all users being identified with generic IDs like `null`, `true`, or `distinctId`.
+
+PostHog also has built-in protections to stop the most common distinct ID mistakes.
+
+### 3\. Reset after logout
+
+If a user logs out on your frontend, you should call `reset()` to unlink any future events made on that device with that user.
+
+This is important if your users are sharing a computer, as otherwise all of those users are grouped together into a single user due to shared cookies between sessions.
+
+**We strongly recommend you call `reset` on logout even if you don't expect users to share a computer.**
+
+You can do that like so:
+
+PostHog AI
+
+### Web
+
+```javascript
+posthog.reset()
+```
+
+### iOS
+
+```swift
+PostHogSDK.shared.reset()
+```
+
+### Android
+
+```kotlin
+PostHog.reset()
+```
+
+### React Native
+
+```jsx
+posthog.reset()
+```
+
+### Dart
+
+```dart
+Posthog().reset()
+```
+
+If you *also* want to reset the `device_id` so that the device will be considered a new device in future events, you can pass `true` as an argument:
+
+Web
+
+PostHog AI
+
+```javascript
+posthog.reset(true)
+```
+
+### 4\. Person profiles and properties
+
+You'll notice that one of the parameters in the `identify` method is a `properties` object.
+
+This enables you to set [person properties](/docs/product-analytics/person-properties.md).
+
+Whenever possible, we recommend passing in all person properties you have available each time you call identify, as this ensures their person profile on PostHog is up to date.
+
+Person properties can also be set being adding a `$set` property to a event `capture` call.
+
+See our [person properties docs](/docs/product-analytics/person-properties.md) for more details on how to work with them and best practices.
+
+### 5\. Use deep links between platforms
+
+We recommend you call `identify` [as soon as you're able](#1-call-identify-as-soon-as-youre-able), typically when a user signs up or logs in.
+
+This doesn't work if one or both platforms are unauthenticated. Some examples of such cases are:
+
+-   Onboarding and signup flows before authentication.
+-   Unauthenticated web pages redirecting to authenticated mobile apps.
+-   Authenticated web apps prompting an app download.
+
+In these cases, you can use a [deep link](https://developer.android.com/training/app-links/deep-linking) on Android and [universal links](https://developer.apple.com/documentation/xcode/supporting-universal-links-in-your-app) on iOS to identify users.
+
+1.  Use `posthog.get_distinct_id()` to get the current distinct ID. Even if you cannot call identify because the user is unauthenticated, this will return an anonymous distinct ID generated by PostHog.
+2.  Add the distinct ID to the deep link as query parameters, along with other properties like UTM parameters.
+3.  When the user is redirected to the app, parse the deep link and handle the following cases:
+
+-   The user is already authenticated on the mobile app. In this case, call [`posthog.alias()`](/docs/libraries/js/features#alias.md) with the distinct ID from the web. This associates the two distinct IDs as a single person.
+-   The user is unauthenticated. In this case, call [`posthog.identify()`](/docs/libraries/js/features#identifying-users.md) with the distinct ID from the web. Events will be associated with this distinct ID.
+
+As long as you associate the distinct IDs with `posthog.identify()` or `posthog.alias()`, you can track events generated across platforms.
+
+## Further reading
+
+-   [Identifying users docs](/docs/product-analytics/identify.md)
+-   [How person processing works](/docs/how-posthog-works/ingestion-pipeline#2-person-processing.md)
+-   [An introductory guide to identifying users in PostHog](/tutorials/identifying-users-guide.md)
+
+### Community questions
+
+Ask a question
+
+### Was this page useful?
+
+HelpfulCould be better

frontend/.claude/skills/posthog-integration-react-tanstack-router-code-based/references/tanstack-start.md

@@ -0,0 +1,187 @@
+# TanStack Start - Docs
+
+This tutorial shows how to integrate PostHog with a [TanStack Start](https://tanstack.com/start) app for both client-side and server-side analytics.
+
+## Installation
+
+Install the required packages:
+
+Terminal
+
+PostHog AI
+
+```bash
+npm install @posthog/react posthog-node
+```
+
+-   `@posthog/react` - React package for our [JS Web SDK](/docs/libraries/js.md) for client-side usage
+-   `posthog-node` - PostHog [Node.js SDK](/docs/libraries/node.md) for server-side event capture
+
+## Initialize PostHog on the client
+
+Wrap your app with `PostHogProvider` in your root route with your project token, host, and other options.
+
+src/routes/\_\_root.tsx
+
+PostHog AI
+
+```jsx
+// src/routes/__root.tsx
+import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
+import { PostHogProvider } from '@posthog/react'
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    ],
+  }),
+  shellComponent: RootDocument,
+})
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <PostHogProvider
+          apiKey="<ph_project_token>"
+          options={{
+            api_host: 'https://us.i.posthog.com',
+            defaults: '2026-01-30',
+            capture_exceptions: true
+          }}
+        >
+          {children}
+        </PostHogProvider>
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+```
+
+Once the provider is in place, PostHog automatically captures pageviews, sessions, and web vitals.
+
+## Capture events on the client
+
+Use the `usePostHog` hook from `@posthog/react` in any component to capture custom events:
+
+src/routes/checkout.tsx
+
+PostHog AI
+
+```jsx
+import { usePostHog } from '@posthog/react'
+function CheckoutButton({ orderId, total }: { orderId: string; total: number }) {
+  const posthog = usePostHog()
+  const handleClick = () => {
+    posthog.capture('checkout_started', {
+      order_id: orderId,
+      total: total,
+    })
+  }
+  return <button onClick={handleClick}>Checkout</button>
+}
+```
+
+### Identify users
+
+Call `posthog.identify()` when a user logs in to link their events to a user ID:
+
+TSX
+
+PostHog AI
+
+```jsx
+import { usePostHog } from '@posthog/react'
+function LoginForm() {
+  const posthog = usePostHog()
+  const handleLogin = async (userId: string, email: string) => {
+    // ... your login logic
+    posthog.identify(userId, {
+      email: email,
+    })
+    posthog.capture('user_logged_in')
+  }
+}
+```
+
+Call `posthog.reset()` on logout to clear the identified user.
+
+## Initialize PostHog on the server
+
+Create a server-side PostHog client using `posthog-node`. Use a singleton pattern so you reuse the same client across requests:
+
+src/utils/posthog-server.ts
+
+PostHog AI
+
+```typescript
+// src/utils/posthog-server.ts
+import { PostHog } from 'posthog-node'
+let posthogClient: PostHog | null = null
+export function getPostHogClient() {
+  if (!posthogClient) {
+    posthogClient = new PostHog(
+      '<ph_project_token>',
+      {
+        host: 'https://us.i.posthog.com',
+        flushAt: 1,
+        flushInterval: 0,
+      },
+    )
+  }
+  return posthogClient
+}
+```
+
+## Capture events on the server
+
+Use the server client in TanStack Start API routes to capture events server-side. Server-side capture is useful for tracking events that shouldn't be spoofable from the client, like purchases or authentication:
+
+src/routes/api/checkout.ts
+
+PostHog AI
+
+```typescript
+// src/routes/api/checkout.ts
+import { createFileRoute } from '@tanstack/react-router'
+import { json } from '@tanstack/react-start'
+import { getPostHogClient } from '../../utils/posthog-server'
+export const Route = createFileRoute('/api/checkout')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const body = await request.json()
+        const posthog = getPostHogClient()
+        posthog.capture({
+          distinctId: body.userId,
+          event: 'item_purchased',
+          properties: {
+            item_id: body.itemId,
+            price: body.price,
+            source: 'api',
+          },
+        })
+        return json({ success: true })
+      },
+    },
+  },
+})
+```
+
+The server-side `capture` call requires a `distinctId` (the user identifier), an `event` name, and optional `properties`.
+
+## Next steps
+
+Installing the JS Web SDK and Node SDK means all of their functionality is available in your TanStack Start project. To learn more about this, have a look at our [JS Web SDK docs](/docs/libraries/js/usage.md) and [Node SDK docs](/docs/libraries/node.md).
+
+### Community questions
+
+Ask a question
+
+### Was this page useful?
+
+HelpfulCould be better

frontend/.env.example

@@ -11,3 +11,7 @@ VITE_API_URL=http://localhost:3000/api/v1
 
 # ===== COMMON =====
 VITE_CMS_URL=http://localhost:1337
+
+# ===== POSTHOG ANALYTICS =====
+VITE_PUBLIC_POSTHOG_KEY=phc_kuDGT1kUmJmijLRjiQaKWIaU4JBdFW0aELW2hIGlBXR
+VITE_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com

frontend/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env.local
+.env

frontend/Dockerfile

@@ -5,12 +5,23 @@ FROM node:20-alpine AS builder
 
 WORKDIR /app
 
+# Build arguments for environment variables
+ARG VITE_API_URL
+ARG VITE_CMS_URL
+ARG VITE_PUBLIC_POSTHOG_KEY
+ARG VITE_PUBLIC_POSTHOG_HOST
+
+# Set environment variables for build
+ENV VITE_API_URL=$VITE_API_URL
+ENV VITE_CMS_URL=$VITE_CMS_URL
+ENV VITE_PUBLIC_POSTHOG_KEY=$VITE_PUBLIC_POSTHOG_KEY
+ENV VITE_PUBLIC_POSTHOG_HOST=$VITE_PUBLIC_POSTHOG_HOST
+
 # 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 +32,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

frontend/index.html

@@ -1,10 +1,14 @@
 <!doctype html>
-<html lang="en">
+<html lang="mk">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>frontend</title>
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://eu-assets.i.posthog.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https:; font-src 'self' data: https://fonts.gstatic.com; connect-src 'self' http://localhost:3000 http://localhost:1337 https://api.placebo.mk https://cms.placebo.mk https://eu.i.posthog.com https://eu-assets.i.posthog.com;">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <title>Placebo.mk - Сатирични вести од Македонија</title>
   </head>
   <body>
     <div id="root"></div>

frontend/nginx.conf

@@ -46,7 +46,7 @@ http {
         index index.html;
 
         # Security headers for frontend
-        add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' http://localhost:3000 http://localhost:1337;" always;
+        add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://eu-assets.i.posthog.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https:; font-src 'self' data: https://fonts.gstatic.com; connect-src 'self' http://localhost:3000 http://localhost:1337 https://api.placebo.mk https://cms.placebo.mk https://eu.i.posthog.com https://eu-assets.i.posthog.com;" always;
 
         # Handle React Router
         location / {
@@ -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/package.json

@@ -18,6 +18,7 @@
     "dev:reset-env": "cp -f .env.docker .env"
   },
   "dependencies": {
+    "@posthog/react": "^1.8.1",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
@@ -27,8 +28,10 @@
     "@tanstack/react-query": "^5.90.14",
     "@tanstack/react-router": "^1.144.0",
     "date-fns": "^4.1.0",
+    "posthog-js": "^1.356.1",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "react-dom": "^19.2.4",
+    "react-icons": "^5.6.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1"
   },

frontend/posthog-setup-report.md

@@ -0,0 +1,47 @@
+<wizard-report>
+# PostHog post-wizard report
+
+The wizard has completed a deep integration of PostHog analytics into the Placebo.mk React (TanStack Router, code-based routing) application. Here is a summary of all changes made:
+
+## Integration summary
+
+- **`src/main.tsx`** — Updated `PostHogProvider` options to use a `/ingest` reverse proxy (`api_host: '/ingest'`), added `ui_host`, enabled `capture_exceptions: true` for automatic error tracking, and enabled `debug` mode in development.
+- **`vite.config.ts`** — Added a Vite dev server proxy for `/ingest` → `VITE_PUBLIC_POSTHOG_HOST`, routing PostHog calls through the dev server to avoid ad blockers.
+- **`.env` / `.env.local`** — Set `VITE_PUBLIC_POSTHOG_KEY` and `VITE_PUBLIC_POSTHOG_HOST` with the correct EU cloud values.
+- **`src/contexts/AuthContext.tsx`** — Added `usePostHog()`, `posthog.identify()` on login and register (using user ID as distinct ID with username, email, role properties), `posthog.capture()` for `user_logged_in`, `user_registered`, and `user_logged_out` events, and `posthog.reset()` on logout.
+- **`src/components/features/social-share/SocialShareButtons.tsx`** — Added `posthog.capture('article_shared', ...)` with platform, article ID, title, and URL properties.
+- **`src/components/features/comments/ReactionButtons.tsx`** — Added `posthog.capture('article_reaction_added', ...)` with reaction type, target IDs, and target type (article/live_blog/comment).
+- **`src/components/features/comments/CommentSection.tsx`** — Added `posthog.capture('comment_submitted', ...)` with article/live blog ID, target type, and comment length.
+- **`src/components/admin/PushNotificationManager.tsx`** — Added `posthog.capture('push_notification_sent', ...)` with notification title, sent/failed counts, and subscriber count.
+- **`src/components/features/live-blog/LiveBlogViewer.tsx`** — Added `posthog.capture('live_blog_viewed', ...)` once per mount (guarded with a ref), and `posthog.capture('live_blog_reconnected', ...)` on the Reconnect button click.
+
+## Events instrumented
+
+| Event name | Description | File |
+|---|---|---|
+| `user_logged_in` | Fired when a user successfully logs in | `src/contexts/AuthContext.tsx` |
+| `user_registered` | Fired when a user successfully completes registration | `src/contexts/AuthContext.tsx` |
+| `user_logged_out` | Fired when a user logs out | `src/contexts/AuthContext.tsx` |
+| `article_shared` | Fired when a user shares an article on a social platform | `src/components/features/social-share/SocialShareButtons.tsx` |
+| `article_reaction_added` | Fired when a user reacts (like or dislike) to an article or comment | `src/components/features/comments/ReactionButtons.tsx` |
+| `comment_submitted` | Fired when a user successfully posts a comment on an article or live blog | `src/components/features/comments/CommentSection.tsx` |
+| `push_notification_sent` | Fired when an admin successfully sends a push notification to all subscribers | `src/components/admin/PushNotificationManager.tsx` |
+| `live_blog_viewed` | Fired when a user opens a live blog page (top of engagement funnel for live coverage) | `src/components/features/live-blog/LiveBlogViewer.tsx` |
+| `live_blog_reconnected` | Fired when a user manually reconnects to a live blog stream | `src/components/features/live-blog/LiveBlogViewer.tsx` |
+
+## Next steps
+
+We've built some insights and a dashboard for you to keep an eye on user behavior, based on the events we just instrumented:
+
+- 📊 **Dashboard — Analytics basics**: https://eu.posthog.com/project/133810/dashboard/546519
+- 📈 **User Authentication Trends** (logins, registrations, logouts over time): https://eu.posthog.com/project/133810/insights/pxodr2zQ
+- 🔽 **New User Engagement Funnel** (registration → first comment → first reaction): https://eu.posthog.com/project/133810/insights/zK5n3YKc
+- 🔗 **Article Shares by Platform** (breakdown of shares per social platform): https://eu.posthog.com/project/133810/insights/pplQTyt8
+- 💬 **Content Engagement Activity** (comments, reactions, and shares over time): https://eu.posthog.com/project/133810/insights/wn7cQy26
+- 📡 **Live Blog Engagement** (live blog views and reconnect attempts): https://eu.posthog.com/project/133810/insights/6QtI23Hm
+
+### Agent skill
+
+We've left an agent skill folder in your project at `.claude/skills/posthog-integration-react-tanstack-router-code-based/`. You can use this context for further agent development when using Claude Code. This will help ensure the model provides the most up-to-date approaches for integrating PostHog.
+
+</wizard-report>

frontend/src/components/ArticleTicker.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import { Link } from '@tanstack/react-router'
 import * as api from '@/lib/api'
+import { Zap } from 'lucide-react'
 
 export function ArticleTicker() {
   const { data } = useQuery({
@@ -13,34 +14,34 @@ export function ArticleTicker() {
   if (articles.length === 0) return null
 
   return (
-    <div className="overflow-hidden bg-muted/50 border-y">
-      <div className="container mx-auto max-w-6xl px-4">
-        <div className="py-2 flex items-center gap-4">
-          <span className="text-sm font-semibold text-primary whitespace-nowrap">
-            Latest:
-          </span>
-          <div className="overflow-hidden flex-1 relative">
-            <div className="flex animate-marquee whitespace-nowrap">
-              {articles.map((article, index) => (
-                 <Link
-                  key={`${article.id}-${index}`}
-                  to={`/articles/${article.id}` as any}
-                  className="text-sm text-muted-foreground hover:text-foreground hover:underline inline-block px-4"
-                >
-                  {article.title || 'No title'}
-                </Link>
-              ))}
-              {/* Duplicate for seamless scrolling */}
-              {articles.map((article, index) => (
-                 <Link
-                  key={`dup-${article.id}-${index}`}
-                  to={`/articles/${article.id}` as any}
-                  className="text-sm text-muted-foreground hover:text-foreground hover:underline inline-block px-4"
-                >
-                  {article.title || 'No title'}
-                </Link>
-              ))}
-            </div>
+    <div className="overflow-hidden bg-foreground text-background border-b-4 border-accent">
+      <div className="py-2 flex items-center">
+        <div className="flex-shrink-0 px-4 py-1 bg-accent text-foreground font-body text-sm font-bold uppercase tracking-wider flex items-center gap-2 border-r-4 border-background z-10">
+          <Zap className="w-4 h-4" />
+          Топ вести
+        </div>
+        <div className="overflow-hidden flex-1">
+          <div className="flex animate-marquee whitespace-nowrap">
+            {articles.map((article, index) => (
+              <Link
+                key={`${article.id}-${index}`}
+                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'}
+              </Link>
+            ))}
+            {articles.map((article, index) => (
+              <Link
+                key={`dup-${article.id}-${index}`}
+                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'}
+              </Link>
+            ))}
           </div>
         </div>
       </div>