admin dashboard fixed

maybe we need another design for this page

ADMINISTRATOR_GUIDE.md

@@ -0,0 +1,276 @@
+# Administrator Guide - Placebo.mk
+
+## Overview
+Placebo.mk is a Macedonian news site with a sarcastic tone. This guide covers system administration, user management, and technical operations.
+
+## System Architecture
+- **Frontend**: TanStack (React 19, Query, Router) + Vite + Tailwind CSS
+- **Backend**: NestJS + TypeORM + SQLite
+- **CMS**: Strapi for content management
+- **Database**: SQLite with TypeORM entities
+
+## Environment Setup
+
+### Backend Configuration
+```bash
+cd backend
+cp .env.example .env
+# Configure environment variables:
+# DATABASE_PATH=./data/app.db
+# PORT=3000
+# NODE_ENV=development
+npm install
+npm run start:dev
+```
+
+### Frontend Configuration
+```bash
+cd frontend
+cp .env.example .env
+# Configure environment variables:
+# VITE_API_URL=http://localhost:3000
+npm install
+npm run dev
+```
+
+### CMS (Strapi) Configuration
+```bash
+cd cms/cms
+cp .env.example .env
+# Configure Strapi environment variables:
+# DATABASE_CLIENT=sqlite
+# DATABASE_FILENAME=./data/app.db
+# API_TOKEN_SALT=
+# ADMIN_JWT_SECRET=
+npm run develop
+```
+
+## Database Management
+
+### Entities Overview
+- **Articles**: News articles with status (draft/published/archived)
+- **Authors**: Writer profiles with permissions
+- **Categories**: Hierarchical content organization
+- **Live Blogs**: Real-time event coverage
+- **Live Blog Updates**: Individual updates within live blogs
+
+### Database Operations
+```bash
+# Run migrations (if implemented)
+npm run migration:run
+
+# Check database schema
+npm run schema:sync
+
+# Backup database
+cp backend/data/app.db backend/data/backup-$(date +%Y%m%d).db
+```
+
+## User Management
+
+### Author Management
+Authors are stored in the `authors` table with:
+- Basic profile (name, bio, avatar)
+- Unique slug for URLs
+- `isActive` flag for permissions
+- Relations to articles and live blogs
+
+### CMS User Roles
+1. **Super Admin**: Full system access
+2. **Admin**: Content and user management
+3. **Editor**: Content creation and editing
+4. **Author**: Limited to assigned content
+
+### Creating New Authors
+```sql
+INSERT INTO authors (id, name, slug, bio, avatar, isActive, createdAt, updatedAt)
+VALUES (
+  uuid(),
+  'Author Name',
+  'author-slug',
+  'Author bio',
+  'avatar-url.jpg',
+  true,
+  datetime('now'),
+  datetime('now')
+);
+```
+
+## Content Management
+
+### Article Workflow
+1. **Draft**: Initial creation phase
+2. **Published**: Publicly visible
+3. **Archived**: No longer public but retained
+
+### Live Blog Management
+Live blogs support real-time updates:
+- **Draft**: Preparation phase
+- **Live**: Active event coverage
+- **Ended**: Coverage complete
+- **Archived**: Historical reference
+
+## API Management
+
+### Available Endpoints
+```
+GET    /api/v1/articles              # List articles
+GET    /api/v1/articles/:id          # Get single article
+GET    /api/v1/articles/slug/:slug   # Get article by slug
+POST   /api/v1/articles              # Create article
+PUT    /api/v1/articles/:id          # Update article
+DELETE /api/v1/articles/:id          # Delete article
+
+GET    /api/v1/live-blogs            # List live blogs
+GET    /api/v1/live-blogs/:id        # Get live blog
+POST   /api/v1/live-blogs            # Create live blog
+PUT    /api/v1/live-blogs/:id        # Update live blog
+
+GET    /api/v1/authors                # List authors
+GET    /api/v1/categories             # List categories
+```
+
+### API Authentication
+Configure JWT tokens for secure API access:
+```typescript
+// In .env
+JWT_SECRET=your-secret-key
+JWT_EXPIRES_IN=24h
+```
+
+## CMS Administration
+
+### Strapi Admin Panel
+Access at: `http://localhost:1337/admin`
+
+### Content Types Configuration
+Articles support:
+- Rich text content
+- Multiple media files (images, files, videos, audio)
+- Featured images
+- Author attribution
+
+### Media Management
+- Upload limits configured in Strapi settings
+- Image optimization handled automatically
+- File organization in `/uploads` directory
+
+## Performance Monitoring
+
+### Backend Monitoring
+```bash
+# Check application logs
+npm run start:prod
+
+# Monitor performance
+npm run start:prod -- --inspect
+```
+
+### Frontend Performance
+```bash
+# Build for production
+cd frontend
+npm run build
+
+# Analyze bundle size
+npm run build:analyze
+```
+
+## Security Considerations
+
+### Authentication
+- Implement proper JWT handling
+- Use secure password hashing
+- Set appropriate CORS policies
+
+### Data Protection
+- Regular database backups
+- Environment variable protection
+- Input validation and sanitization
+
+### CMS Security
+- Regular Strapi updates
+- Role-based access control
+- Media file scanning
+
+## Backup and Recovery
+
+### Automated Backups
+```bash
+# Create backup script
+#!/bin/bash
+DATE=$(date +%Y%m%d_%H%M%S)
+mkdir -p backups
+cp backend/data/app.db backups/app_$DATE.db
+tar -czf backups/uploads_$DATE.tar.gz cms/cms/public/uploads/
+```
+
+### Recovery Process
+1. Stop all services
+2. Restore database from backup
+3. Restore media files
+4. Restart services
+5. Verify functionality
+
+## Troubleshooting
+
+### Common Issues
+
+#### Database Connection Errors
+```bash
+# Check database file exists
+ls -la backend/data/app.db
+
+# Verify permissions
+chmod 664 backend/data/app.db
+```
+
+#### Strapi Admin Access
+```bash
+# Reset admin password
+npm run strapi admin:reset-password
+```
+
+#### Frontend Build Issues
+```bash
+# Clear cache
+rm -rf node_modules package-lock.json
+npm install
+
+# Check environment variables
+cat .env
+```
+
+## Maintenance Tasks
+
+### Daily
+- Monitor system logs
+- Check backup completion
+- Review performance metrics
+
+### Weekly
+- Update dependencies
+- Review content moderation queue
+- Security scan
+
+### Monthly
+- Database maintenance
+- Archive old content
+- Performance optimization review
+
+## Scaling Considerations
+
+### Database Scaling
+- Consider PostgreSQL for high traffic
+- Implement read replicas
+- Optimize queries and indexes
+
+### CDN Integration
+- Configure CDN for static assets
+- Optimize image delivery
+- Implement caching strategies
+
+### Monitoring Setup
+- Application performance monitoring
+- Error tracking and alerting
+- User analytics and reporting

AGENTS.md

@@ -8,39 +8,75 @@ News site in Macedonia with sarcastic tone. Minimalistic design using TanStack s
 - **Backend**: NestJS + TypeORM + SQLite
 - **CMS**: Strapi (in /cms)
 
+## Root-Level Commands
+```bash
+# Docker development
+npm run docker:up           # Start all services
+npm run docker:down         # Stop all services
+npm run docker:build        # Rebuild containers
+npm run docker:logs         # View logs
+npm run dev:docker          # Start docker dev (alias)
+
+# Local development
+npm run dev:local           # Start backend & frontend locally
+npm run dev:backend:local   # Backend only (local env)
+npm run dev:frontend:local  # Frontend only (local env)
+
+# Code quality
+npm run lint                # Lint both projects
+npm run lint:fix            # Auto-fix lint issues
+npm run type-check          # Type check both projects
+
+# Database operations
+npm run db:backup           # Backup database
+npm run db:restore          # Restore database
+npm run db:reset            # Reset database
+
+# Environment
+npm run reset:env           # Reset to docker environment
+```
+
 ## Build Commands
 
 ### Backend (NestJS)
 ```bash
 cd backend
 npm install
-npm run start:dev    # Watch mode
+npm run start:dev           # Watch mode
+npm run start:debug         # Debug 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 run lint                # Lint
+npm run lint:fix            # Auto-fix
+npm run type-check          # TypeScript check
+npm test                    # All tests
+npm test:watch              # Watch mode tests
+npm test:cov                # Coverage
+npm test:e2e                # E2E 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 test -t "should return"    # By test name pattern
+npm run format              # Format with Prettier
+npm run dev:local           # Local env with .env.local
+npm run dev:docker          # Docker env with .env.docker
 ```
 
 ### Frontend (TanStack)
 ```bash
 cd frontend
 npm install
-npm run dev         # Vite dev server
+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 lint                # Lint
+npm run lint:fix            # Auto-fix
+npm run type-check          # TypeScript check
+npm test                    # All tests (Vitest)
+npm test:ui                 # Vitest UI
+npm test:coverage           # Test coverage
+npm test Header.test.tsx    # Single file
+npm test -t "renders"       # By test name pattern
+npm run dev:local           # Local env with .env.local
+npm run dev:docker          # Docker env with .env.docker
 ```
 
 ## Code Style
@@ -51,6 +87,8 @@ npm run test:ui     # Vitest UI
 - Explicit return types for public methods
 - Prefer interfaces over types for objects
 - Use `readonly` for immutable properties
+- Backend: `noImplicitAny: true`, `strictNullChecks: true`
+- Frontend: Path alias `@/*` maps to `./src/*`
 
 ### Naming Conventions
 - **Files**: kebab-case (`user-profile.ts`, `auth.service.ts`)
@@ -62,6 +100,20 @@ npm run test:ui     # Vitest UI
 
 ### Import Order
 - External libraries first, then internal modules, then relative imports
+- Group imports with blank lines between groups
+- Example:
+  ```typescript
+  // External
+  import { Module } from '@nestjs/common';
+  import { TypeOrmModule } from '@nestjs/typeorm';
+  
+  // Internal modules
+  import { AuthModule } from '../auth/auth.module';
+  
+  // Relative imports
+  import { UserService } from './user.service';
+  import { UserController } from './user.controller';
+  ```
 
 
 ### File Structure
@@ -104,12 +156,16 @@ frontend/src/
   ```
 
 ### Testing
+- **Backend**: Jest with ts-jest transformer
+- **Frontend**: Vitest with React Testing Library patterns
 - 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
+- Descriptive test names that explain what is tested (e.g., `should return user data when valid ID provided`)
 - Mock external dependencies (use Jest for backend, Vitest for frontend)
 - Run `npm test` for all tests or target specific files/names
+- Test files: `*.spec.ts` (backend), `*.test.tsx` (frontend)
+- Coverage reports: `npm test:cov` (backend), `npm test:coverage` (frontend)
 
 ### Git Workflow
 - Conventional commits: `feat:`, `fix:`, `refactor:`, `test:`, `docs:`, `chore:`
@@ -147,5 +203,16 @@ frontend/src/
 - Example backend env: `DATABASE_PATH=./data.db`
 - Store sensitive config in `.env` files
 - Use `DATABASE_PATH` for SQLite location
+- Use `@nestjs/config` for backend environment management
+- Frontend env vars must be prefixed with `VITE_`
+
+## Agent-Specific Instructions
+- **ALWAYS** run `npm run lint` and `npm run type-check` after making changes
+- **NEVER** commit changes without explicit user request
+- **ALWAYS** follow existing code patterns and conventions
+- **PREFER** editing existing files over creating new ones
+- **VERIFY** tests pass before considering work complete
+- **USE** the root-level commands for common operations
+- **CHECK** both backend and frontend when making API changes
 
 

DEPLOYMENT.md

@@ -0,0 +1,461 @@
+# Placebo.mk Deployment Guide
+
+## Overview
+This document outlines the deployment strategy for Placebo.mk - a Macedonian news site with sarcastic tone, built with TanStack (React), NestJS, and Strapi CMS.
+
+## Architecture
+- **Frontend**: TanStack (React 19 + Query + Router) + Vite + Tailwind CSS
+- **Backend**: NestJS + TypeORM + PostgreSQL (migrated from SQLite)
+- **CMS**: Strapi with PostgreSQL
+- **Deployment**: Docker + Coolify on VPS
+
+## Deployment Options
+
+### Option 1: Coolify + VPS (Recommended)
+**Pros**: Self-hosted, cost-effective, full control, Macedonian audience optimized  
+**Cons**: Requires server management
+
+### Option 2: Platform-as-a-Service
+**Pros**: No server management, automatic scaling  
+**Cons**: More expensive, less control
+
+## Coolify + VPS Deployment
+
+### Phase 1: Infrastructure Setup
+
+#### 1.1 VPS Requirements
+- **Provider**: Hetzner (Germany) or DigitalOcean (Amsterdam)
+- **Specs**: 4GB RAM, 2 vCPU, 80GB SSD (€10-15/month)
+- **OS**: Ubuntu 22.04 LTS
+- **Domain**: placebo.mk
+
+#### 1.2 Install Coolify
+```bash
+# On VPS
+curl -fsSL https://cdn.coollabs.io/coolify/install.sh | bash
+```
+
+Coolify automatically installs:
+- Docker and Docker Compose
+- Traefik reverse proxy
+- Let's Encrypt SSL
+- Admin interface
+
+#### 1.3 Domain Configuration
+1. Purchase `placebo.mk` domain
+2. Configure DNS A records:
+   - `placebo.mk` → VPS IP
+   - `www.placebo.mk` → VPS IP
+   - `api.placebo.mk` → VPS IP
+   - `cms.placebo.mk` → VPS IP
+
+### Phase 2: Database Migration
+
+#### 2.1 PostgreSQL Setup
+Create PostgreSQL database via Coolify one-click apps:
+- Database name: `placebomk`
+- Username: `placebo`
+- Password: Generate secure password
+
+#### 2.2 Migrate from SQLite
+Detailed migration plan available in `scripts/migrate-to-postgres.md`
+
+Run migration script:
+```bash
+# Test migration locally first
+docker-compose up -d postgres
+./scripts/migrate-data.sh
+
+# Production migration
+cd backend
+npm run migrate:postgres
+```
+
+#### 2.3 Migration Strategy
+1. **Development**: Use SQLite for local development
+2. **Staging**: PostgreSQL with test data
+3. **Production**: PostgreSQL with migrated data
+4. **Backup**: Maintain SQLite backups during transition
+
+### Phase 3: Application Deployment
+
+#### 3.1 Connect GitHub Repository
+1. Connect your GitHub repo to Coolify
+2. Create three applications:
+   - `placebo-frontend` (from `/frontend`)
+   - `placebo-backend` (from `/backend`)
+   - `placebo-cms` (from `/cms/cms`)
+
+#### 3.2 Configure Applications
+
+**Backend Configuration:**
+- **Build Command**: `npm run build`
+- **Start Command**: `npm run start:prod`
+- **Port**: 3000
+- **Environment Variables**:
+  ```
+  NODE_ENV=production
+  DATABASE_URL=postgresql://placebo:PASSWORD@postgres:5432/placebomk
+  CORS_ORIGIN=https://placebo.mk
+  JWT_SECRET=your-secure-jwt-secret
+  ```
+
+**Frontend Configuration:**
+- **Build Command**: `npm run build`
+- **Output Directory**: `dist`
+- **Environment Variables**:
+  ```
+  VITE_API_URL=https://api.placebo.mk/api/v1
+  VITE_STRAPI_URL=https://cms.placebo.mk
+  ```
+
+**CMS Configuration:**
+- **Build Command**: `npm run build`
+- **Start Command**: `npm run start`
+- **Port**: 1337
+- **Environment Variables**:
+  ```
+  DATABASE_CLIENT=postgres
+  DATABASE_HOST=postgres
+  DATABASE_PORT=5432
+  DATABASE_NAME=strapi
+  DATABASE_USERNAME=placebo
+  DATABASE_PASSWORD=PASSWORD
+  ```
+
+#### 3.3 Configure Domains in Coolify
+- `placebo.mk` → Frontend application
+- `api.placebo.mk` → Backend API
+- `cms.placebo.mk` → Strapi CMS admin
+
+### Phase 4: Security Configuration
+
+#### 4.1 Environment Variables
+Store sensitive data in Coolify environment variables:
+- Database passwords
+- JWT secrets
+- API keys
+- Strapi secrets
+
+#### 4.2 SSL Certificates
+Coolify automatically:
+- Requests Let's Encrypt certificates
+- Configures HTTPS redirect
+- Auto-renews certificates
+
+#### 4.3 Security Headers
+Configure in Coolify:
+- HSTS enabled
+- CSP headers
+- X-Frame-Options
+- X-Content-Type-Options
+
+### Phase 5: Monitoring & Backup
+
+#### 5.1 Monitoring
+- **Coolify built-in monitoring**: Resource usage, uptime
+- **Application logs**: Access via Coolify UI
+- **Health checks**: Configure endpoints
+
+#### 5.2 Backup Strategy
+1. **Database backups**: Daily via Coolify to S3-compatible storage
+2. **Media files**: Strapi uploads to cloud storage
+3. **Configuration**: Export Coolify settings regularly
+
+#### 5.3 Backup Configuration
+```yaml
+# Coolify backup settings
+backup:
+  schedule: "0 2 * * *"  # Daily at 2 AM
+  retention: 30           # Keep 30 days
+  destination: s3://backup-bucket/placebo-mk
+```
+
+## Docker Setup
+
+### Docker Files Created
+```
+placeboMk/
+├── docker-compose.yml           # Production setup with PostgreSQL
+├── docker-compose.dev.yml       # Development setup with hot reload
+├── backend/
+│   ├── Dockerfile              # Production Dockerfile
+│   └── Dockerfile.dev          # Development Dockerfile
+├── frontend/
+│   ├── Dockerfile              # Production Dockerfile (Nginx)
+│   ├── Dockerfile.dev          # Development Dockerfile
+│   └── nginx.conf              # Nginx configuration
+└── cms/cms/
+    ├── Dockerfile              # Production Dockerfile
+    └── Dockerfile.dev          # Development Dockerfile
+```
+
+### Local Development with Docker
+
+#### Prerequisites
+- Docker Desktop
+- Docker Compose
+- Node.js 20+ (optional, for local development without Docker)
+
+#### Quick Start - Development Mode
+```bash
+# Clone repository
+git clone https://github.com/your-org/placeboMk.git
+cd placeboMk
+
+# Start development environment with hot reload
+docker-compose -f docker-compose.dev.yml up -d
+
+# Access applications:
+# Frontend: http://localhost:5173
+# Backend API: http://localhost:3000
+# Strapi CMS: http://localhost:1337/admin
+```
+
+#### Quick Start - Production Mode (Local Testing)
+```bash
+# Start production environment
+docker-compose up -d
+
+# Access applications:
+# Frontend: http://localhost:3001
+# Backend API: http://localhost:3000
+# Strapi CMS: http://localhost:1337
+# PostgreSQL: localhost:5432
+```
+
+#### Test Docker Setup
+```bash
+# Run comprehensive test
+./scripts/test-docker.sh
+
+# Or manually test
+docker-compose build
+docker-compose up -d
+docker-compose ps
+```
+
+### Development Commands
+```bash
+# Development environment
+docker-compose -f docker-compose.dev.yml up -d      # Start dev
+docker-compose -f docker-compose.dev.yml down       # Stop dev
+docker-compose -f docker-compose.dev.yml logs -f    # View dev logs
+
+# Production environment (local testing)
+docker-compose up -d                                # Start prod
+docker-compose down                                 # Stop prod
+docker-compose logs -f                              # View prod logs
+docker-compose build                                # Rebuild images
+
+# Database operations
+docker-compose exec postgres psql -U placebo_user -d placebo_db  # PostgreSQL shell
+docker-compose exec backend npm run migration:run                # Run migrations
+
+# Service management
+docker-compose restart backend    # Restart backend
+docker-compose restart frontend   # Restart frontend
+docker-compose restart cms        # Restart CMS
+```
+
+## Production Checklist
+
+### Pre-Deployment
+- [ ] Domain DNS propagated (48 hours)
+- [ ] SSL certificates issued
+- [ ] Database migrated and tested
+- [ ] Environment variables configured
+- [ ] Backup system tested
+- [ ] Monitoring configured
+
+### Deployment Day
+1. **Morning**: Final testing of staging environment
+2. **Afternoon**: Deploy to production (low traffic time)
+3. **Evening**: Monitor performance and fix issues
+
+### Post-Deployment
+- [ ] Verify all services are running
+- [ ] Test critical user flows
+- [ ] Check SSL certificates
+- [ ] Verify backups are working
+- [ ] Monitor error rates
+
+## Troubleshooting
+
+### Common Issues
+
+#### 1. Database Connection Failed
+```bash
+# Check PostgreSQL logs
+docker-compose logs postgres
+
+# Test connection
+docker-compose exec postgres psql -U placebo -d placebomk
+```
+
+#### 2. Build Failures
+- Check Node.js version compatibility
+- Verify package.json dependencies
+- Check build logs in Coolify
+
+#### 3. SSL Certificate Issues
+- Verify DNS records
+- Check Traefik logs: `docker-compose logs traefik`
+- Manually renew: `docker-compose exec traefik traefik cert`
+
+#### 4. CORS Errors
+- Verify CORS_ORIGIN environment variable
+- Check backend CORS configuration
+- Test API calls from frontend
+
+### Debug Commands
+```bash
+# Check container status
+docker-compose ps
+
+# View application logs
+docker-compose logs --tail=100 backend
+
+# Shell into container
+docker-compose exec backend sh
+
+# Check network connectivity
+docker-compose exec backend curl http://postgres:5432
+```
+
+## Performance Optimization
+
+### Frontend
+- Enable Vite build optimization
+- Configure CDN for static assets
+- Implement code splitting
+- Optimize images
+
+### Backend
+- Implement Redis caching
+- Database query optimization
+- Enable compression
+- Configure connection pooling
+
+### Database
+- Add appropriate indexes
+- Regular vacuum and analyze
+- Connection pool tuning
+- Read replicas for high traffic
+
+## Scaling Strategy
+
+### Vertical Scaling (First Step)
+- Upgrade VPS: 8GB RAM, 4 vCPU
+- Increase PostgreSQL memory
+- Add Redis cache
+
+### Horizontal Scaling
+- Add application replicas
+- Load balancing with Traefik
+- Database read replicas
+- CDN for static assets
+
+### Cost Optimization
+- Right-size VPS resources
+- Use object storage for media
+- Implement caching to reduce database load
+- Monitor and optimize queries
+
+## Maintenance Schedule
+
+### Daily
+- Check application logs
+- Verify backup completion
+- Monitor resource usage
+- Review error rates
+
+### Weekly
+- Update dependencies (security patches)
+- Review access logs
+- Test restore from backup
+- Clean up old logs
+
+### Monthly
+- Security audit
+- Performance review
+- Cost optimization review
+- Update deployment documentation
+
+## Emergency Procedures
+
+### Database Corruption
+1. Stop affected services
+2. Restore from latest backup
+3. Verify data integrity
+4. Restart services
+
+### Application Crash
+1. Check logs for root cause
+2. Rollback to previous version
+3. Fix issue in development
+4. Deploy fix
+
+### DDoS Attack
+1. Enable rate limiting
+2. Block malicious IPs
+3. Scale up resources temporarily
+4. Contact hosting provider
+
+## Support Contacts
+
+### Technical Support
+- **Coolify Documentation**: https://coolify.io/docs
+- **Docker Support**: https://docs.docker.com
+- **PostgreSQL Docs**: https://www.postgresql.org/docs
+
+### Macedonian Hosting Providers
+- **Hetzner**: German-based, good for Macedonian audience
+- **DigitalOcean**: Amsterdam datacenter
+- **Local Providers**: Check for Macedonian hosting companies
+
+## Cost Estimates
+
+| Resource | Monthly Cost | Annual Cost |
+|----------|-------------|-------------|
+| VPS (4GB/2CPU) | €12 | €144 |
+| Domain (placebo.mk) | €15/year | €15 |
+| Backup Storage (100GB) | €5 | €60 |
+| **Total** | **€17/month** | **€219/year** |
+
+## Success Metrics
+
+### Technical Metrics
+- Uptime: >99.9%
+- Page load time: <2 seconds
+- API response time: <200ms
+- Error rate: <0.1%
+
+### Business Metrics
+- Monthly visitors
+- Article publication rate
+- User engagement
+- Revenue (if applicable)
+
+## Next Steps
+
+1. **Set up development environment** with Docker
+2. **Test migration** from SQLite to PostgreSQL
+3. **Deploy to staging** environment
+4. **Perform load testing**
+5. **Go live** with production deployment
+
+## Changelog
+
+### v1.0.0 - Initial Deployment
+- Dockerized application stack
+- PostgreSQL migration
+- Coolify deployment configuration
+- Basic monitoring and backup
+
+### Future Improvements
+- Redis caching implementation
+- CDN integration
+- Advanced monitoring (Prometheus/Grafana)
+- Automated testing pipeline
+- Macedonian language optimization

DOCKER-README.md

@@ -0,0 +1,441 @@
+# Placebo.mk Docker Setup
+
+## Overview
+Complete Docker configuration for Placebo.mk - a Macedonian news site with sarcastic tone. Includes both development and production setups.
+
+## Architecture
+- **Frontend**: TanStack (React 19) + Vite + Tailwind CSS
+- **Backend**: NestJS + TypeORM
+- **CMS**: Strapi
+- **Database**: PostgreSQL (production), SQLite (development)
+- **Reverse Proxy**: Nginx (production)
+
+## Quick Start
+
+### Development Environment (Hot Reload)
+```bash
+# Start development environment
+docker-compose -f docker-compose.dev.yml up -d
+
+# Services available at:
+# Frontend: http://localhost:5173
+# Backend API: http://localhost:3000
+# CMS Admin: http://localhost:1337/admin
+# PostgreSQL: localhost:5432
+```
+
+### Production Environment (Local Testing)
+```bash
+# Start production environment
+docker-compose up -d
+
+# Services available at:
+# Frontend: http://localhost:3001
+# Backend API: http://localhost:3000
+# CMS: http://localhost:1337
+```
+
+### Test Everything
+```bash
+# Run comprehensive test
+chmod +x scripts/test-docker.sh
+./scripts/test-docker.sh
+```
+
+## Docker Files Structure
+
+### Production Dockerfiles
+- `backend/Dockerfile` - NestJS API with Node.js 20 Alpine
+- `frontend/Dockerfile` - React app built with Vite, served by Nginx
+- `cms/cms/Dockerfile` - Strapi CMS with PostgreSQL support
+- `frontend/nginx.conf` - Nginx configuration for frontend
+
+### Development Dockerfiles
+- `backend/Dockerfile.dev` - Development with hot reload
+- `frontend/Dockerfile.dev` - Development with Vite dev server
+- `cms/cms/Dockerfile.dev` - Strapi development mode
+
+### Docker Compose Files
+- `docker-compose.yml` - Production setup with all services
+- `docker-compose.dev.yml` - Development setup with volume mounts
+
+## Services
+
+### 1. PostgreSQL Database
+- **Image**: `postgres:16-alpine`
+- **Port**: 5432
+- **Database**: `placebo_db`
+- **User**: `placebo_user`
+- **Password**: `placebo_password`
+- **Volume**: `postgres_data` (persistent storage)
+
+### 2. Backend API (NestJS)
+- **Production Port**: 3000
+- **Development Port**: 3000 (hot reload)
+- **Health Check**: `GET /health`
+- **Environment**: See `backend/.env.example`
+
+### 3. Frontend (TanStack React)
+- **Production Port**: 3001 (via Nginx)
+- **Development Port**: 5173 (Vite dev server)
+- **Build Tool**: Vite
+- **Environment**: See `frontend/.env.example`
+
+### 4. CMS (Strapi)
+- **Port**: 1337
+- **Admin**: `/admin`
+- **Health Check**: `GET /_health`
+- **Environment**: See `cms/cms/.env.example`
+
+### 5. Nginx (Production Only)
+- **Port**: 80
+- **Configuration**: `frontend/nginx.conf`
+- **Features**: SSL, compression, security headers, React Router support
+
+## Environment Variables
+
+### Backend (.env)
+```bash
+NODE_ENV=production
+DATABASE_TYPE=postgres
+DATABASE_HOST=postgres
+DATABASE_PORT=5432
+DATABASE_USERNAME=placebo_user
+DATABASE_PASSWORD=placebo_password
+DATABASE_NAME=placebo_db
+JWT_SECRET=your-jwt-secret-key-change-in-production
+CORS_ORIGIN=http://localhost:5173,http://localhost:3001
+```
+
+### Frontend (.env)
+```bash
+NODE_ENV=production
+VITE_API_URL=http://localhost:3000
+VITE_CMS_URL=http://localhost:1337
+```
+
+### CMS (.env)
+```bash
+NODE_ENV=production
+DATABASE_CLIENT=postgres
+DATABASE_HOST=postgres
+DATABASE_PORT=5432
+DATABASE_NAME=placebo_db
+DATABASE_USERNAME=placebo_user
+DATABASE_PASSWORD=placebo_password
+JWT_SECRET=your-jwt-secret-key-change-in-production
+```
+
+## Common Commands
+
+### Development
+```bash
+# Start development environment
+docker-compose -f docker-compose.dev.yml up -d
+
+# View logs
+docker-compose -f docker-compose.dev.yml logs -f
+
+# Stop development
+docker-compose -f docker-compose.dev.yml down
+
+# Rebuild development images
+docker-compose -f docker-compose.dev.yml build
+```
+
+### Production (Local Testing)
+```bash
+# Start production environment
+docker-compose up -d
+
+# View logs
+docker-compose logs -f
+
+# Stop production
+docker-compose down
+
+# Rebuild production images
+docker-compose build
+```
+
+### Database Operations
+```bash
+# Access PostgreSQL shell
+docker-compose exec postgres psql -U placebo_user -d placebo_db
+
+# Backup database
+docker-compose exec postgres pg_dump -U placebo_user placebo_db > backup.sql
+
+# Restore database
+docker-compose exec -T postgres psql -U placebo_user placebo_db < backup.sql
+```
+
+### Service Management
+```bash
+# Restart specific service
+docker-compose restart backend
+docker-compose restart frontend
+docker-compose restart cms
+
+# View service status
+docker-compose ps
+
+# View resource usage
+docker-compose stats
+```
+
+## Health Checks
+
+All services include health checks:
+
+### Backend
+```bash
+curl http://localhost:3000/health
+```
+
+### CMS
+```bash
+curl http://localhost:1337/_health
+```
+
+### Frontend
+```bash
+curl http://localhost:3001
+```
+
+### PostgreSQL
+```bash
+docker-compose exec postgres pg_isready -U placebo_user -d placebo_db
+```
+
+## Database Migration
+
+### SQLite to PostgreSQL Migration
+Detailed migration plan in `scripts/migrate-to-postgres.md`
+
+```bash
+# Export SQLite data
+sqlite3 backend/data.db .dump > backend-data.sql
+
+# Transform for PostgreSQL
+python scripts/transform-sqlite-to-postgres.py backend-data.sql > backend-postgres.sql
+
+# Import to PostgreSQL
+docker-compose exec -T postgres psql -U placebo_user placebo_db < backend-postgres.sql
+```
+
+## Troubleshooting
+
+### Common Issues
+
+#### 1. Port Conflicts
+```bash
+# Check what's using port 3000
+sudo lsof -i :3000
+
+# Or use different ports in docker-compose.yml
+```
+
+#### 2. Docker Build Failures
+```bash
+# Clear Docker cache
+docker system prune -a
+
+# Rebuild with no cache
+docker-compose build --no-cache
+```
+
+#### 3. Database Connection Issues
+```bash
+# Check PostgreSQL logs
+docker-compose logs postgres
+
+# Test connection from backend
+docker-compose exec backend node -e "console.log('Testing DB connection...')"
+```
+
+#### 4. Permission Issues
+```bash
+# Fix volume permissions
+sudo chown -R $USER:$USER .
+
+# Rebuild containers
+docker-compose down && docker-compose up -d
+```
+
+### Debug Commands
+```bash
+# Shell into container
+docker-compose exec backend sh
+docker-compose exec frontend sh
+docker-compose exec cms sh
+
+# View container details
+docker-compose exec backend env
+docker-compose exec frontend env
+
+# Check network connectivity
+docker-compose exec backend curl http://postgres:5432
+docker-compose exec frontend curl http://backend:3000/health
+```
+
+## Deployment to Coolify
+
+### 1. Prepare for Production
+```bash
+# Update environment variables for production
+cp backend/.env.example backend/.env.production
+cp frontend/.env.example frontend/.env.production
+cp cms/cms/.env.example cms/cms/.env.production
+
+# Build production images
+docker-compose build
+
+# Test locally
+docker-compose up -d
+./scripts/test-docker.sh
+```
+
+### 2. Coolify Configuration
+1. Connect GitHub repository to Coolify
+2. Create three applications:
+   - Frontend (from `/frontend`)
+   - Backend (from `/backend`)
+   - CMS (from `/cms/cms`)
+3. Configure environment variables
+4. Set up PostgreSQL database
+5. Configure domains and SSL
+
+### 3. Database Migration
+1. Export production SQLite data
+2. Transform for PostgreSQL
+3. Import to Coolify PostgreSQL
+4. Verify data integrity
+
+## Performance Optimization
+
+### Frontend
+- Nginx gzip compression enabled
+- Static asset caching (1 year)
+- Security headers configured
+- React Router support
+
+### Backend
+- Health checks every 30 seconds
+- Connection pooling with PostgreSQL
+- CORS configured for frontend domains
+
+### Database
+- PostgreSQL connection pooling
+- Regular backups via volumes
+- Health checks with `pg_isready`
+
+## Security
+
+### Implemented Security Features
+1. **Non-root users**: All containers run as non-root
+2. **Health checks**: Automatic service monitoring
+3. **Environment variables**: Secrets stored in .env files
+4. **Network isolation**: Services on internal network
+5. **Security headers**: X-Frame-Options, CSP, etc.
+6. **SSL ready**: Nginx configured for HTTPS
+
+### Security Best Practices
+1. Never commit `.env` files to Git
+2. Use strong passwords for PostgreSQL
+3. Regular security updates
+4. Monitor Docker logs
+5. Backup database regularly
+
+## Monitoring
+
+### Built-in Monitoring
+```bash
+# View container logs
+docker-compose logs -f
+
+# Check container status
+docker-compose ps
+
+# Monitor resource usage
+docker-compose stats
+
+# View health check status
+docker inspect --format='{{.State.Health.Status}}' placebo-backend
+```
+
+### Custom Monitoring
+Add to `docker-compose.yml`:
+```yaml
+monitoring:
+  image: prom/prometheus
+  ports:
+    - "9090:9090"
+  volumes:
+    - ./prometheus.yml:/etc/prometheus/prometheus.yml
+```
+
+## Backup and Recovery
+
+### Database Backup
+```bash
+# Daily backup script
+docker-compose exec postgres pg_dump -U placebo_user placebo_db > backup-$(date +%Y%m%d).sql
+
+# Compress backup
+gzip backup-$(date +%Y%m%d).sql
+```
+
+### Volume Backup
+```bash
+# Backup PostgreSQL volume
+docker run --rm -v postgres_data:/source -v $(pwd)/backups:/backup alpine tar czf /backup/postgres-$(date +%Y%m%d).tar.gz -C /source .
+```
+
+### Recovery
+```bash
+# Restore database
+docker-compose exec -T postgres psql -U placebo_user placebo_db < backup.sql
+
+# Restore volume
+docker run --rm -v postgres_data:/target -v $(pwd)/backups:/backup alpine tar xzf /backup/postgres-backup.tar.gz -C /target
+```
+
+## Contributing
+
+### Adding New Services
+1. Create Dockerfile in service directory
+2. Add service to `docker-compose.yml`
+3. Configure environment variables
+4. Add health check
+5. Test locally
+6. Update documentation
+
+### Updating Dependencies
+```bash
+# Rebuild with updated dependencies
+docker-compose build --no-cache
+
+# Update package.json in mounted volumes
+docker-compose exec backend npm update
+docker-compose exec frontend npm update
+docker-compose exec cms npm update
+```
+
+## Support
+
+### Documentation
+- `DEPLOYMENT.md` - Complete deployment guide
+- `scripts/migrate-to-postgres.md` - Database migration plan
+- `AGENTS.md` - Development guidelines
+
+### Troubleshooting Resources
+- Docker Documentation: https://docs.docker.com
+- PostgreSQL Documentation: https://www.postgresql.org/docs
+- Strapi Documentation: https://docs.strapi.io
+- Coolify Documentation: https://coolify.io/docs
+
+### Macedonian Resources
+- Local hosting providers
+- Macedonian domain registration
+- GDPR compliance for Macedonian users

PUBLISHER_GUIDE.md

@@ -0,0 +1,314 @@
+# Publisher & Content Creator Guide - Placebo.mk
+
+## Overview
+Placebo.mk is a Macedonian news site with a sarcastic tone. This guide covers content creation, publishing workflows, and best practices for writers and editors.
+
+## Getting Started
+
+### Accessing the CMS
+1. Navigate to: `http://your-domain.com/admin`
+2. Log in with your credentials
+3. Select "Content Manager" from the sidebar
+
+### Your Dashboard
+- **Content Manager**: Create and edit articles
+- **Media Library**: Upload and manage images/files
+- **Profile**: Update your author information
+
+## Content Creation Workflow
+
+### 1. Planning Your Article
+Before writing:
+- Choose a compelling headline
+- Research your topic thoroughly
+- Gather supporting images/media
+- Plan your article structure
+
+### 2. Creating a New Article
+
+#### Basic Article Setup
+1. Click **+ Create new entry** in Content Manager
+2. Select **Article** content type
+3. Fill in required fields:
+   - **Title**: Catchy, SEO-friendly headline
+   - **Author**: Your name (auto-populated)
+   - **Content**: Main article body
+
+#### Article Fields Explained
+- **Title**: Maximum 100 characters, include keywords
+- **Content**: Rich text editor with formatting options
+- **Media**: Upload images, videos, documents
+- **Featured Image**: Main article thumbnail
+- **Status**: Draft → Published → Archived
+
+### 3. Writing Best Practices
+
+#### Headline Guidelines
+- Use active voice and strong verbs
+- Include location if relevant (e.g., "Скопје:")
+- Keep under 100 characters
+- Ask questions or make bold statements
+
+#### Content Structure
+```
+1. Lead Paragraph (2-3 sentences)
+   - Who, what, where, when, why
+   - Most important information first
+
+2. Body Paragraphs (3-5 paragraphs)
+   - Supporting details and quotes
+   - Background information
+   - Analysis and context
+
+3. Conclusion (1-2 paragraphs)
+   - Summary or call to action
+   - Future implications
+```
+
+#### Writing Style
+- **Tone**: Sarcastic but informative
+- **Language**: Macedonian with local context
+- **Length**: 300-800 words for news, 800-1500 for features
+- **Voice**: Conversational, engaging, slightly cynical
+
+### 4. Media Integration
+
+#### Adding Images
+1. Click **Media** field in article editor
+2. Click **Add new** or select from library
+3. Drag and drop or browse files
+4. Add alt text for accessibility
+5. Choose image size and alignment
+
+#### Image Guidelines
+- **Featured Image**: 1200x630px minimum
+- **Inline Images**: 800px width maximum
+- **File Size**: Under 2MB per image
+- **Formats**: JPG, PNG, WebP
+
+#### Video and Audio
+- Upload MP4 videos (under 100MB)
+- Embed YouTube/Vimeo links
+- Add MP3 audio files for interviews
+
+## Publishing Workflow
+
+### Article Status Management
+
+#### Draft Status
+- Initial creation phase
+- Auto-saves every 30 seconds
+- Only visible to you and editors
+
+#### Review Process
+1. Submit for review when ready
+2. Editor reviews content and style
+3. Request changes or approve
+4. Editor may edit directly
+
+#### Published Status
+- Live on the website
+- Publicly accessible
+- Appears in category listings
+- Indexed by search engines
+
+#### Archived Status
+- No longer public
+- Retained for reference
+- Can be republished if needed
+
+### Publishing Best Practices
+
+#### Before Publishing
+- [ ] Proofread for spelling/grammar
+- [ ] Check all facts and sources
+- [ ] Test all links
+- [ ] Optimize images for web
+- [ ] Add relevant tags
+- [ ] Set appropriate category
+
+#### Publishing Schedule
+- **Breaking News**: Publish immediately
+- **Features**: Schedule for peak traffic (10:00-14:00)
+- **Analysis**: Publish by 17:00 for evening readers
+
+## Live Blogging
+
+### When to Use Live Blogs
+- Ongoing events (protests, sports, conferences)
+- Developing news stories
+- Election coverage
+- Emergency situations
+
+### Creating a Live Blog
+1. Navigate to **Live Blogs** in Content Manager
+2. Click **+ Create new entry**
+3. Fill in basic information:
+   - **Title**: Event name + "LIVE"
+   - **Description**: Brief event summary
+   - **Status**: Set to "Live" when ready
+
+### Live Blog Updates
+Each update should include:
+- **Timestamp**: Auto-generated
+- **Content**: New information (1-3 sentences)
+- **Author**: Your attribution
+- **Media**: Relevant photos/videos
+
+#### Update Guidelines
+- Keep updates concise and factual
+- Post major developments immediately
+- Use quotes when available
+- Add context for new followers
+- Pin important updates
+
+## Content Categories
+
+### Available Categories
+- **Политика**: Government, elections, policy
+- **Економија**: Business, markets, finance
+- **Друштво**: Social issues, culture, lifestyle
+- **Спорт**: Sports news and events
+- **Технологија**: Tech news and innovations
+- **Свет**: International news
+- **Култура**: Arts, entertainment, events
+
+### Category Selection
+- Choose primary category carefully
+- Use tags for additional context
+- Consider audience interests
+- Follow editorial calendar
+
+## SEO and Discoverability
+
+### Title Optimization
+- Include primary keywords
+- Use location when relevant
+- Ask questions or make statements
+- Avoid clickbait (maintain credibility)
+
+### Content SEO
+- Naturally include keywords
+- Use header tags (H2, H3)
+- Add internal links to related articles
+- Include external sources when relevant
+
+### Meta Information
+- **Excerpt**: 150-character summary
+- **Featured Image**: Optimized for social sharing
+- **Tags**: 3-5 relevant keywords
+
+## Author Profile Management
+
+### Updating Your Profile
+1. Click **Profile** in sidebar
+2. Update information:
+   - **Display Name**: Your byline name
+   - **Bio**: 100-word professional summary
+   - **Avatar**: Professional headshot
+   - **Social Links**: Twitter, LinkedIn, etc.
+
+### Author Best Practices
+- Maintain consistent voice across articles
+- Build expertise in specific topics
+- Engage with reader comments
+- Share published articles on social media
+
+## Content Moderation
+
+### Comment Policy
+- Comments are enabled on published articles
+- Inappropriate content is filtered automatically
+- Editors can approve/reject comments manually
+
+### Handling Corrections
+1. Mark errors immediately
+2. Correct factual mistakes
+3. Add correction note at top
+4. Notify editor of significant changes
+
+## Analytics and Performance
+
+### Article Metrics
+- **Views**: Total page reads
+- **Engagement**: Time on page, scroll depth
+- **Shares**: Social media interactions
+- **Comments**: Reader engagement
+
+### Improving Performance
+- Write compelling headlines
+- Use relevant, high-quality images
+- Publish at optimal times
+- Share on social media
+- Engage with reader comments
+
+## Tools and Shortcuts
+
+### Editor Shortcuts
+- **Ctrl+B**: Bold text
+- **Ctrl+I**: Italic text
+- **Ctrl+K**: Insert link
+- **Ctrl+Z**: Undo
+- **Ctrl+Y**: Redo
+
+### Media Management
+- Drag and drop uploads
+- Bulk image optimization
+- Automatic alt text suggestions
+- Image cropping and resizing
+
+## Troubleshooting
+
+### Common Issues
+
+#### Editor Not Saving
+- Check internet connection
+- Refresh page and try again
+- Contact administrator if persistent
+
+#### Image Upload Errors
+- Verify file size under 2MB
+- Check file format (JPG, PNG, WebP)
+- Clear browser cache and retry
+
+#### Publishing Problems
+- Ensure all required fields completed
+- Check article status permissions
+- Contact editor for approval
+
+## Best Practices Summary
+
+### Do's
+- Write factually accurate content
+- Use engaging, sarcastic tone appropriately
+- Include relevant, high-quality media
+- Proofread thoroughly before publishing
+- Engage with reader feedback
+- Follow ethical journalism standards
+
+### Don'ts
+- Publish unverified information
+- Use excessive clickbait
+- Ignore reader comments
+- Publish without editor review
+- Violate copyright laws
+- Share confidential information
+
+## Support and Resources
+
+### Getting Help
+- **Editor**: Primary contact for content questions
+- **Administrator**: Technical support and system issues
+- **Style Guide**: Detailed writing and formatting guidelines
+
+### Training Resources
+- CMS video tutorials
+- Writing style workshops
+- SEO best practices guide
+- Social media sharing strategies
+
+### Community
+- Regular writer meetings
+- Content planning sessions
+- Feedback and improvement discussions
+- Collaboration opportunities

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`

README-DEVELOPMENT.md

@@ -0,0 +1,188 @@
+# Placebo.mk - Development Setup
+
+This project supports two development modes:
+1. **Docker Mode** (Recommended): All services run in Docker containers
+2. **Local Mode**: Services run locally with npm, PostgreSQL in Docker
+
+## Quick Start
+
+### Option 1: Docker Mode (Recommended)
+```bash
+# Start all services in Docker
+npm run docker:up
+
+# Or use the alias
+npm run dev:docker
+```
+
+Services will be available at:
+- Frontend: http://localhost:5173
+- Backend API: http://localhost:3000
+- CMS (Strapi): http://localhost:1337/admin
+- PostgreSQL: localhost:5432
+
+### Option 2: Local Mode
+```bash
+# Start PostgreSQL in Docker
+docker-compose -f docker-compose.dev.yml up postgres
+
+# In another terminal, start backend and frontend locally
+npm run dev:local
+```
+
+## Environment Configuration
+
+### Backend Configuration
+The backend uses `.env` files for configuration:
+
+- `.env` - Default Docker configuration (committed)
+- `.env.local` - Local development configuration (not committed)
+- `.env.docker` - Docker configuration template
+- `.env.example` - Example configuration
+
+**Switching between modes:**
+```bash
+# Switch to local mode
+cd backend && npm run dev:local
+
+# Switch back to Docker mode
+cd backend && npm run dev:reset-env
+```
+
+### Frontend Configuration
+The frontend also uses `.env` files:
+
+- `.env` - Default Docker configuration (committed)
+- `.env.local` - Local development configuration (not committed)
+- `.env.docker` - Docker configuration template
+
+**API URL differences:**
+- Docker: `VITE_API_URL=http://backend:3000/api/v1`
+- Local: `VITE_API_URL=http://localhost:3000/api/v1`
+
+## Development Scripts
+
+### Root Level Scripts
+```bash
+# Docker commands
+npm run docker:up          # Start all services
+npm run docker:down        # Stop all services
+npm run docker:build       # Rebuild containers
+npm run docker:logs        # View logs
+npm run docker:ps          # Check container status
+
+# Development modes
+npm run dev:docker         # Docker mode (alias for docker:up)
+npm run dev:local          # Local mode
+
+# Utility
+npm run reset:env          # Reset .env files to Docker defaults
+npm run lint               # Run linting on all services
+npm run type-check         # Run TypeScript checks
+```
+
+### Backend Scripts (in backend/ directory)
+```bash
+npm run dev:docker         # Start in Docker mode (uses .env)
+npm run dev:local          # Start in local mode (uses .env.local)
+npm run start:dev          # Original NestJS dev command
+npm run dev:reset-env      # Reset .env to Docker defaults
+```
+
+### Frontend Scripts (in frontend/ directory)
+```bash
+npm run dev:docker         # Start in Docker mode
+npm run dev:local          # Start in local mode
+npm run dev                # Original Vite dev command
+npm run dev:reset-env      # Reset .env to Docker defaults
+```
+
+## Database Management
+
+### PostgreSQL in Docker
+The PostgreSQL container is configured with:
+- Host: `localhost:5432` (from host) or `postgres:5432` (from Docker)
+- Database: `placebo_backend_db` (backend), `placebo_cms_db` (CMS)
+- User: `placebo_user`
+- Password: `placebo_password`
+
+### Connecting to Database
+```bash
+# From host machine
+psql -h localhost -p 5432 -U placebo_user -d placebo_backend_db
+
+# From within Docker container
+psql -h postgres -p 5432 -U placebo_user -d placebo_backend_db
+```
+
+## Project Structure
+
+```
+placeboMk/
+├── backend/              # NestJS backend API
+│   ├── .env             # Docker configuration (default)
+│   ├── .env.local       # Local development configuration
+│   └── src/
+├── frontend/            # React/Vite frontend
+│   ├── .env             # Docker configuration (default)
+│   ├── .env.local       # Local development configuration
+│   └── src/
+├── cms/cms/             # Strapi CMS
+├── docker-compose.yml       # Production configuration
+├── docker-compose.dev.yml   # Development configuration
+└── package.json         # Root scripts
+```
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Port conflicts**
+   - Check if ports 3000, 5173, 1337, 5432 are free
+   - Use `lsof -i :3000` to check what's using a port
+
+2. **Database connection errors**
+   - Ensure PostgreSQL container is running: `docker ps`
+   - Check logs: `docker logs placebo-postgres-dev`
+   - Verify credentials in `.env` files
+
+3. **Environment configuration**
+   - Run `npm run reset:env` to reset to Docker defaults
+   - Ensure `.env.local` exists for local development
+
+4. **Docker container issues**
+   - Rebuild containers: `npm run docker:build`
+   - Clear Docker cache: `docker system prune -f`
+
+### Reset Everything
+```bash
+# Stop and remove containers
+npm run docker:down
+docker system prune -f
+
+# Reset environment files
+npm run reset:env
+
+# Start fresh
+npm run docker:up
+```
+
+## Production Deployment
+
+For production, use:
+```bash
+docker-compose -f docker-compose.yml up -d
+```
+
+Production configuration:
+- Uses separate `docker-compose.yml`
+- Includes Nginx reverse proxy
+- No hot reload, optimized builds
+- Health checks and proper logging
+
+## Notes
+
+- **Docker-first approach**: `.env` files are configured for Docker by default
+- **Local development**: Uses `.env.local` files when running services locally
+- **PostgreSQL**: Always runs in Docker for consistency
+- **Secrets**: Never commit actual secrets to repository

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/.env.example

@@ -1,7 +1,34 @@
-PORT=3000
-DATABASE_PATH=./database.sqlite
-NODE_ENV=development
-FRONTEND_URL=http://localhost:5173
+# Environment Configuration Template
+# Copy to .env and adjust values for your setup
 
+# ===== DOCKER MODE (services in containers) =====
+# Use these values when running in Docker Compose
+# DATABASE_HOST=postgres
+# STRAPI_URL=http://cms:1337
+
+# ===== LOCAL MODE (backend locally, DB in Docker) =====
+# Use these values when running backend locally with npm run dev
+DATABASE_HOST=localhost
 STRAPI_URL=http://localhost:1337
+
+# ===== COMMON CONFIGURATION =====
+NODE_ENV=development
+PORT=3000
+
+# Database Configuration
+DATABASE_PORT=5432
+DATABASE_USERNAME=placebo_user
+DATABASE_PASSWORD=placebo_password
+DATABASE_NAME=placebo_backend_db
+DATABASE_SYNCHRONIZE=true
+DATABASE_LOGGING=true
+
+# JWT Configuration
+JWT_SECRET=dev-jwt-secret-change-in-production
+JWT_EXPIRATION=3600
+
+# CORS Configuration
+CORS_ORIGIN=http://localhost:5173
+
+# Strapi CMS Configuration
 STRAPI_API_TOKEN=your-strapi-api-token-here

backend/Dockerfile

@@ -0,0 +1,49 @@
+# Backend Dockerfile for Placebo.mk NestJS API
+
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+COPY package-lock.json* ./
+
+# Install dependencies
+RUN npm ci --only=production
+
+# Copy source code
+COPY . .
+
+# Build TypeScript
+RUN npm run build
+
+# Production stage
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Create non-root user
+RUN addgroup -g 1001 -S nodejs && \
+    adduser -S nodejs -u 1001
+
+# Copy built application from builder stage
+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
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD node -e "require('http').get('http://localhost:3000/health', (r) => {if(r.statusCode !== 200) throw new Error()})"
+
+# Expose port
+EXPOSE 3000
+
+# Start application
+CMD ["node", "dist/main.js"]

backend/Dockerfile.dev

@@ -0,0 +1,31 @@
+# Backend Development Dockerfile for Placebo.mk NestJS API
+
+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* ./
+
+# Clear npm cache and install dependencies
+RUN npm cache clean --force && \
+    npm install
+
+# Copy source code
+COPY . .
+
+# Fix permissions - use node user that exists in base image
+RUN chown -R node:node /app
+
+# Switch to non-root user that exists in base image
+USER node
+
+# Expose port
+EXPOSE 3000
+
+# Start development server
+CMD ["npm", "run", "start:dev"]

backend/package.json

@@ -19,7 +19,12 @@
     "test:watch": "jest --watch",
     "test:cov": "jest --coverage",
     "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
-    "test:e2e": "jest --config ./test/jest-e2e.json"
+    "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",
+    "seed:admin": "ts-node scripts/seed-admin.ts",
+    "seed:categories": "ts-node scripts/seed-categories.ts"
   },
   "dependencies": {
     "@nestjs/axios": "^4.0.1",
@@ -27,10 +32,20 @@
     "@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",
+    "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",

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

@@ -6,13 +6,21 @@ 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 {
   Article,
   Author,
   Category,
   LiveBlog,
   LiveBlogUpdate,
+  User,
+  Comment,
+  Reaction,
 } from './modules/entities';
+import { ShareEvent } from './modules/analytics/analytics.entity';
 
 @Module({
   imports: [
@@ -20,15 +28,33 @@ import {
       isGlobal: true,
     }),
     TypeOrmModule.forRoot({
-      type: 'sqlite',
-      database: process.env.DATABASE_PATH ?? './database.sqlite',
-      entities: [Article, Author, Category, LiveBlog, LiveBlogUpdate],
-      synchronize: process.env.NODE_ENV !== 'production',
-      logging: process.env.NODE_ENV === 'development',
+      type: 'postgres',
+      host: process.env.DATABASE_HOST || 'localhost',
+      port: parseInt(process.env.DATABASE_PORT || '5432', 10),
+      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,
+        User,
+        Comment,
+        Reaction,
+        ShareEvent,
+      ],
+      synchronize: process.env.DATABASE_SYNCHRONIZE === 'true',
+      logging: process.env.DATABASE_LOGGING === 'true',
     }),
     ArticlesModule,
     StrapiModule,
     LiveBlogModule,
+    UserModule,
+    AuthModule,
+    CommentModule,
+    AnalyticsModule,
   ],
   controllers: [AppController],
   providers: [AppService],

backend/src/main.ts

@@ -1,5 +1,7 @@
-import { NestFactory } from '@nestjs/core';
+import { NestFactory, Reflector } from '@nestjs/core';
+import { ValidationPipe } from '@nestjs/common';
 import { AppModule } from './app.module';
+import { JwtAuthPublicGuard } from './modules/auth/jwt-auth-public.guard';
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
@@ -15,6 +17,24 @@ async function bootstrap() {
   });
 
   app.setGlobalPrefix('api/v1');
-  await app.listen(process.env.PORT ?? 3000);
+
+  // Apply global validation pipe
+  app.useGlobalPipes(
+    new ValidationPipe({
+      whitelist: true,
+      transform: true,
+      forbidNonWhitelisted: true,
+    }),
+  );
+
+  // Apply global authentication guard
+  const reflector = app.get(Reflector);
+  app.useGlobalGuards(new JwtAuthPublicGuard(reflector));
+
+  const port = process.env.PORT ?? 3000;
+  const host = '0.0.0.0'; // Bind to all interfaces for Docker
+  await app.listen(port, host);
+
+  console.log(`Application is running on: http://${host}:${port}`);
 }
 void bootstrap();

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,47 @@
+import { IsEnum, IsOptional, IsString, IsUUID } from 'class-validator';
+import type { SharePlatform } from './analytics.entity';
+
+export class TrackShareDto {
+  @IsUUID()
+  articleId: string;
+
+  @IsEnum(['facebook', 'twitter', 'whatsapp', '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;
+  whatsappShares: 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,57 @@
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
+import { Article } from '../entities';
+
+export type SharePlatform =
+  | 'facebook'
+  | 'twitter'
+  | 'whatsapp'
+  | '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;
+  whatsappShares: 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,266 @@
+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 'whatsapp':
+        return 'whatsappShares';
+      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.whatsappShares as "whatsappShares"',
+        'article.telegramShares as "telegramShares"',
+        'article.views as "views"',
+        'article.createdAt as "createdAt"',
+        'article.updatedAt as "updatedAt"',
+      ])
+      .addSelect(
+        `(article.facebookShares + article.twitterShares + article.whatsappShares + article.telegramShares) as "totalShares"`,
+      )
+      .addSelect(
+        `CASE 
+          WHEN article.views > 0 
+          THEN ROUND(
+            (article.facebookShares + article.twitterShares + article.whatsappShares + 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;
+      whatsappShares: 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 whatsappShares = parseInt(rawResult.whatsappShares) || 0;
+      const telegramShares = parseInt(rawResult.telegramShares) || 0;
+      const views = parseInt(rawResult.views) || 0;
+      const baseTotalShares =
+        facebookShares + twitterShares + whatsappShares + 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,
+        whatsappShares,
+        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;
+    whatsappShares: number;
+    telegramShares: number;
+    linkShares: number;
+  }> {
+    interface ArticleStatsRaw {
+      facebookShares: string;
+      twitterShares: string;
+      whatsappShares: string;
+      telegramShares: string;
+    }
+
+    const articleStats = (await this.articleRepository
+      .createQueryBuilder('article')
+      .select([
+        'SUM(article.facebookShares) as facebookShares',
+        'SUM(article.twitterShares) as twitterShares',
+        'SUM(article.whatsappShares) as whatsappShares',
+        '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 whatsappShares = parseInt(articleStats?.whatsappShares || '0') || 0;
+    const telegramShares = parseInt(articleStats?.telegramShares || '0') || 0;
+
+    const totalShares =
+      facebookShares +
+      twitterShares +
+      whatsappShares +
+      telegramShares +
+      linkShares;
+
+    return {
+      totalShares,
+      facebookShares,
+      twitterShares,
+      whatsappShares,
+      telegramShares,
+      linkShares,
+    };
+  }
+}

backend/src/modules/articles.controller.ts

@@ -4,10 +4,11 @@ import {
   Post,
   Put,
   Delete,
+  Patch,
   Body,
   Param,
   Query,
-  ValidationPipe,
+  UseGuards,
 } from '@nestjs/common';
 import { ArticlesService } from './articles.service';
 import {
@@ -16,42 +17,72 @@ import {
   FindArticlesDto,
 } from './articles.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';
+
 @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')
+  @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,9 +6,15 @@ import {
   IsUUID,
   IsNumber,
   IsBoolean,
-  IsDate,
+  IsDateString,
 } from 'class-validator';
-import { ArticleStatus, LiveBlogStatus } from './entities';
+import {
+  ArticleStatus,
+  LiveBlogStatus,
+  ImagePosition,
+  ImageSize,
+  VideoPosition,
+} from './entities';
 
 export class CreateArticleDto {
   @IsString()
@@ -42,6 +48,10 @@ export class CreateArticleDto {
   @IsString()
   strapiId?: string;
 
+  @IsOptional()
+  @IsBoolean()
+  isHero?: boolean;
+
   @IsOptional()
   @IsUUID()
   authorId?: string;
@@ -49,6 +59,50 @@ export class CreateArticleDto {
   @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;
+
+  @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 {
@@ -85,6 +139,10 @@ export class UpdateArticleDto {
   @IsString()
   strapiId?: string;
 
+  @IsOptional()
+  @IsBoolean()
+  isHero?: boolean;
+
   @IsOptional()
   @IsUUID()
   authorId?: string;
@@ -92,6 +150,50 @@ export class UpdateArticleDto {
   @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;
+
+  @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 {
@@ -108,8 +210,37 @@ export class FindArticlesDto {
   tag?: string;
 
   @IsOptional()
-  @IsEnum(ArticleStatus)
-  status?: ArticleStatus;
+  @IsString()
+  status?: string;
+
+  @IsOptional()
+  @IsString()
+  search?: string;
+
+  @IsOptional()
+  @IsNumber()
+  page?: number;
+
+  @IsOptional()
+  limit?: number;
+}
+
+export class FindLiveBlogsDto {
+  @IsOptional()
+  @IsString()
+  category?: string;
+
+  @IsOptional()
+  @IsString()
+  author?: string;
+
+  @IsOptional()
+  @IsString()
+  status?: string;
+
+  @IsOptional()
+  @IsBoolean()
+  isPinned?: boolean;
 
   @IsOptional()
   @IsString()
@@ -153,6 +284,30 @@ export class CreateLiveBlogDto {
   @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 {
@@ -187,6 +342,30 @@ export class UpdateLiveBlogDto {
   @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 {
@@ -198,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 {
@@ -220,43 +407,18 @@ export class UpdateLiveBlogUpdateDto {
   isPinned?: boolean;
 
   @IsOptional()
-  @IsUUID()
+  @IsString()
   authorId?: string;
 
   @IsOptional()
-  @IsDate()
-  scheduledAt?: Date;
+  @IsString()
+  image?: string;
 
   @IsOptional()
   @IsString()
-  strapiId?: string;
-}
+  videoUrl?: 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;
+  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

@@ -1,11 +1,15 @@
-import { Module } from '@nestjs/common';
+import { Module, forwardRef } from '@nestjs/common';
 import { TypeOrmModule } from '@nestjs/typeorm';
 import { ArticlesService } from './articles.service';
 import { ArticlesController } from './articles.controller';
 import { Article, Author, Category } from './entities';
+import { StrapiModule } from './strapi.module';
 
 @Module({
-  imports: [TypeOrmModule.forFeature([Article, Author, Category])],
+  imports: [
+    TypeOrmModule.forFeature([Article, Author, Category]),
+    forwardRef(() => StrapiModule),
+  ],
   controllers: [ArticlesController],
   providers: [ArticlesService],
   exports: [ArticlesService],

backend/src/modules/articles.service.ts

@@ -1,7 +1,14 @@
-import { Injectable, NotFoundException } from '@nestjs/common';
+import {
+  Injectable,
+  NotFoundException,
+  Logger,
+  Inject,
+  forwardRef,
+} from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Repository } from 'typeorm';
 import { Article, ArticleStatus } from './entities';
+import { StrapiService } from './strapi.service';
 import {
   CreateArticleDto,
   UpdateArticleDto,
@@ -10,9 +17,13 @@ import {
 
 @Injectable()
 export class ArticlesService {
+  private readonly logger = new Logger(ArticlesService.name);
+
   constructor(
     @InjectRepository(Article)
     private readonly articleRepository: Repository<Article>,
+    @Inject(forwardRef(() => StrapiService))
+    private readonly strapiService: StrapiService,
   ) {}
 
   async create(dto: CreateArticleDto): Promise<Article> {
@@ -26,21 +37,23 @@ export class ArticlesService {
   async findAll(
     dto: FindArticlesDto,
   ): Promise<{ data: Article[]; total: number }> {
-    const {
-      category,
-      author,
-      tag,
-      status = ArticleStatus.PUBLISHED,
-      search,
-      page = 1,
-      limit = 10,
-    } = dto;
+    const { category, author, tag, status, search, page = 1, limit = 10 } = dto;
 
     const queryBuilder = this.articleRepository
       .createQueryBuilder('article')
       .leftJoinAndSelect('article.author', 'author')
-      .leftJoinAndSelect('article.category', 'category')
-      .where('article.status = :status', { status });
+      .leftJoinAndSelect('article.category', 'category');
+
+    // Handle status filter - can be single value or comma-separated list
+    if (status) {
+      if (typeof status === 'string' && status.includes(',')) {
+        const statuses = status.split(',').map((s) => s.trim());
+        queryBuilder.where('article.status IN (:...statuses)', { statuses });
+      } else {
+        queryBuilder.where('article.status = :status', { status });
+      }
+    }
+    // If no status specified, return all articles (for admin dashboard)
 
     if (category) {
       queryBuilder.andWhere('category.slug = :category', { category });
@@ -98,31 +111,197 @@ export class ArticlesService {
 
   async update(id: string, dto: UpdateArticleDto): Promise<Article> {
     const article = await this.findOne(id);
+    const oldStatus = article.status;
     Object.assign(article, dto);
-    return await this.articleRepository.save(article);
+    const savedArticle = await this.articleRepository.save(article);
+
+    // Update Strapi if status changed and article has strapiId
+    if (
+      dto.status !== undefined &&
+      dto.status !== oldStatus &&
+      article.strapiId
+    ) {
+      try {
+        await this.strapiService.updateArticleStatusInStrapi(
+          article.strapiId,
+          dto.status,
+        );
+      } catch (error) {
+        // Log error but don't fail - backend status is updated
+        this.logger.error(
+          `Failed to update Strapi status for article ${id}:`,
+          error,
+        );
+      }
+    }
+
+    return savedArticle;
   }
 
   async remove(id: string): Promise<void> {
     const article = await this.findOne(id);
+
+    // Delete from Strapi if article has strapiId
+    if (article.strapiId) {
+      try {
+        await this.strapiService.deleteArticleFromStrapi(article.strapiId);
+      } catch (error) {
+        // Log error but don't fail - we still want to delete from backend
+        this.logger.error(`Failed to delete article ${id} from Strapi:`, error);
+      }
+    }
+
     await this.articleRepository.remove(article);
   }
 
+  async archive(id: string): Promise<Article> {
+    const article = await this.findOne(id);
+    article.status = ArticleStatus.ARCHIVED;
+    const savedArticle = await this.articleRepository.save(article);
+
+    // Update Strapi if article has strapiId
+    if (article.strapiId) {
+      try {
+        await this.strapiService.updateArticleStatusInStrapi(
+          article.strapiId,
+          ArticleStatus.ARCHIVED,
+        );
+      } catch (error) {
+        // Log error but don't fail - backend status is updated
+        this.logger.error(
+          `Failed to update Strapi status for article ${id}:`,
+          error,
+        );
+      }
+    }
+
+    return savedArticle;
+  }
+
+  async publish(
+    id: string,
+    status: ArticleStatus = ArticleStatus.PUBLISHED,
+  ): Promise<Article> {
+    const article = await this.findOne(id);
+    article.status = status;
+    const savedArticle = await this.articleRepository.save(article);
+
+    // Update Strapi if article has strapiId
+    if (article.strapiId) {
+      try {
+        await this.strapiService.updateArticleStatusInStrapi(
+          article.strapiId,
+          status,
+        );
+      } catch (error) {
+        // Log error but don't fail - backend status is updated
+        this.logger.error(
+          `Failed to update Strapi status for article ${id}:`,
+          error,
+        );
+      }
+    }
+
+    return savedArticle;
+  }
+
   async syncFromStrapi(
     strapiId: string,
     data: Partial<CreateArticleDto>,
   ): Promise<Article> {
-    let article = await this.articleRepository.findOne({ where: { strapiId } });
+    // Use upsert to handle race conditions and ensure uniqueness
+    try {
+      // First try to find existing article by strapiId
+      const article = await this.articleRepository.findOne({
+        where: { strapiId },
+      });
+
+      if (article) {
+        // Update existing article
+        const currentStatus = article.status;
+        Object.assign(article, data);
+
+        // Preserve archived status if article is already archived in our system
+        // unless Strapi explicitly sends a different status
+        if (
+          currentStatus === ArticleStatus.ARCHIVED &&
+          data.status !== ArticleStatus.ARCHIVED
+        ) {
+          article.status = ArticleStatus.ARCHIVED;
+        }
+
+        return await this.articleRepository.save(article);
+      } else {
+        // Create new article
+        const newArticle = this.articleRepository.create({
+          strapiId,
+          ...data,
+          status: data.status || ArticleStatus.DRAFT,
+        });
+
+        return await this.articleRepository.save(newArticle);
+      }
+    } catch (error: unknown) {
+      // If we get a unique constraint violation, try to find and update again
+      // This handles race conditions where two syncs happen simultaneously
+      const dbError = error as { code?: string; constraint?: string };
+      if (
+        dbError.code === '23505' &&
+        dbError.constraint?.includes('strapiId')
+      ) {
+        this.logger.warn(
+          `Race condition detected for strapiId ${strapiId}, retrying...`,
+        );
+
+        // Wait a bit and retry
+        await new Promise((resolve) => setTimeout(resolve, 100));
+
+        const existingArticle = await this.articleRepository.findOne({
+          where: { strapiId },
+        });
+
+        if (existingArticle) {
+          const currentStatus = existingArticle.status;
+          Object.assign(existingArticle, data);
+
+          if (
+            currentStatus === ArticleStatus.ARCHIVED &&
+            data.status !== ArticleStatus.ARCHIVED
+          ) {
+            existingArticle.status = ArticleStatus.ARCHIVED;
+          }
+
+          return await this.articleRepository.save(existingArticle);
+        }
+      }
+
+      // Re-throw other errors
+      throw error;
+    }
+  }
+
+  async removeByStrapiId(strapiId: string): Promise<void> {
+    const article = await this.articleRepository.findOne({
+      where: { strapiId },
+    });
 
     if (!article) {
-      article = this.articleRepository.create({
-        strapiId,
-        ...data,
-        status: data.status || ArticleStatus.DRAFT,
-      });
-    } else {
-      Object.assign(article, data);
+      this.logger.warn(`Article with strapiId ${strapiId} not found`);
+      return;
     }
 
-    return await this.articleRepository.save(article);
+    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

@@ -36,6 +36,37 @@ export enum LiveBlogStatus {
   ARCHIVED = 'archived',
 }
 
+export enum ImagePosition {
+  TOP = 'top',
+  LEFT = 'left',
+  RIGHT = 'right',
+  NONE = 'none',
+}
+
+export enum ImageSize {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+}
+
+export enum VideoPosition {
+  TOP = 'top',
+  INLINE = 'inline',
+  BOTTOM = 'bottom',
+  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')
@@ -94,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')
@@ -114,6 +175,30 @@ export class Article {
   @Column({ default: '' })
   featuredImage: string;
 
+  @Column({
+    type: 'text',
+    default: 'top',
+  })
+  imagePosition: ImagePosition;
+
+  @Column({
+    type: 'text',
+    default: 'medium',
+  })
+  imageSize: ImageSize;
+
+  @Column({ default: '' })
+  videoUrl: string;
+
+  @Column({
+    type: 'text',
+    default: 'inline',
+  })
+  videoPosition: VideoPosition;
+
+  @Column({ default: '' })
+  videoCaption: string;
+
   @Column({
     type: 'text',
     default: '[]',
@@ -130,7 +215,7 @@ export class Article {
   @Column({ default: 0 })
   views: number;
 
-  @Column({ nullable: true })
+  @Column({ nullable: true, unique: true })
   strapiId: string;
 
   @Column({ nullable: true })
@@ -139,6 +224,39 @@ 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 })
+  whatsappShares: number;
+
+  @Column({ default: 0 })
+  telegramShares: number;
+
+  @Column({ default: false })
+  isHero: boolean;
+
   @CreateDateColumn()
   createdAt: Date;
 
@@ -152,6 +270,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')
@@ -177,7 +301,7 @@ export class LiveBlog {
   @Column({ default: false })
   isPinned: boolean;
 
-  @Column({ nullable: true })
+  @Column({ nullable: true, unique: true })
   strapiId: string;
 
   @Column({ nullable: true })
@@ -186,6 +310,33 @@ export class LiveBlog {
   @Column({ nullable: true })
   categoryId: string;
 
+  @Column({ default: '' })
+  featuredImage: string;
+
+  @Column({
+    type: 'text',
+    default: 'top',
+  })
+  imagePosition: ImagePosition;
+
+  @Column({
+    type: 'text',
+    default: 'medium',
+  })
+  imageSize: ImageSize;
+
+  @Column({ default: '' })
+  videoUrl: string;
+
+  @Column({
+    type: 'text',
+    default: 'inline',
+  })
+  videoPosition: VideoPosition;
+
+  @Column({ default: '' })
+  videoCaption: string;
+
   @Column({ default: 0 })
   viewCount: number;
 
@@ -207,6 +358,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')
@@ -223,7 +380,7 @@ export class LiveBlogUpdate {
   @Column({ nullable: true })
   authorId: string;
 
-  @Column({ type: 'datetime', nullable: true })
+  @Column({ type: 'timestamp', nullable: true })
   scheduledAt: Date;
 
   @Column({ nullable: true })
@@ -243,3 +400,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

@@ -4,13 +4,14 @@ import {
   Post,
   Put,
   Delete,
+  Patch,
   Body,
   Param,
   Query,
-  ValidationPipe,
   Res,
   Logger,
   Headers,
+  UseGuards,
 } from '@nestjs/common';
 import type { Response as ExpressResponse } from 'express';
 import { LiveBlogService } from './live-blog.service';
@@ -21,6 +22,11 @@ import {
   CreateLiveBlogUpdateDto,
   UpdateLiveBlogUpdateDto,
 } from './articles.dto';
+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 {
@@ -30,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,
@@ -105,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,
@@ -121,8 +139,23 @@ export class LiveBlogController {
     return this.liveBlogService.removeUpdate(liveBlogId, updateId);
   }
 
+  @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

@@ -1,14 +1,16 @@
-import { Module } from '@nestjs/common';
+import { Module, forwardRef } from '@nestjs/common';
 import { TypeOrmModule } from '@nestjs/typeorm';
 import { EventEmitterModule } from '@nestjs/event-emitter';
 import { LiveBlogService } from './live-blog.service';
 import { LiveBlogController } from './live-blog.controller';
 import { LiveBlog, LiveBlogUpdate, Author, Category } from './entities';
+import { StrapiModule } from './strapi.module';
 
 @Module({
   imports: [
     TypeOrmModule.forFeature([LiveBlog, LiveBlogUpdate, Author, Category]),
     EventEmitterModule.forRoot(),
+    forwardRef(() => StrapiModule),
   ],
   controllers: [LiveBlogController],
   providers: [LiveBlogService],

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

@@ -3,12 +3,15 @@ import {
   NotFoundException,
   Logger,
   OnModuleInit,
+  Inject,
+  forwardRef,
 } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Repository, In } from 'typeorm';
 import { EventEmitter2 } from '@nestjs/event-emitter';
 import { Response } from 'express';
 import { LiveBlog, LiveBlogUpdate, LiveBlogStatus } from './entities';
+import { StrapiService } from './strapi.service';
 import {
   CreateLiveBlogDto,
   UpdateLiveBlogDto,
@@ -50,6 +53,8 @@ export class LiveBlogService implements OnModuleInit {
     @InjectRepository(LiveBlogUpdate)
     private readonly liveBlogUpdateRepository: Repository<LiveBlogUpdate>,
     private readonly eventEmitter: EventEmitter2,
+    @Inject(forwardRef(() => StrapiService))
+    private readonly strapiService: StrapiService,
   ) {}
 
   onModuleInit() {
@@ -116,13 +121,9 @@ export class LiveBlogService implements OnModuleInit {
       } else {
         queryBuilder.where('liveBlog.status = :status', { status });
       }
-    } else if (!isPinned) {
-      // Default to live blogs if no status specified AND not querying for pinned blogs
-      // Pinned blogs can be either live or ended
-      queryBuilder.where('liveBlog.status = :status', {
-        status: LiveBlogStatus.LIVE,
-      });
     }
+    // If no status specified, return all live blogs (for admin dashboard)
+    // Note: Pinned blogs query should still work without status filter
 
     if (category) {
       queryBuilder.andWhere('category.slug = :category', { category });
@@ -252,6 +253,22 @@ export class LiveBlogService implements OnModuleInit {
         blogId: id,
         status: dto.status,
       });
+
+      // Update Strapi if live blog has strapiId
+      if (liveBlog.strapiId) {
+        try {
+          await this.strapiService.updateLiveBlogStatusInStrapi(
+            liveBlog.strapiId,
+            dto.status,
+          );
+        } catch (error) {
+          // Log error but don't fail - backend status is updated
+          this.logger.error(
+            `Failed to update Strapi status for live blog ${id}:`,
+            error,
+          );
+        }
+      }
     }
 
     return updatedBlog;
@@ -259,9 +276,74 @@ export class LiveBlogService implements OnModuleInit {
 
   async remove(id: string): Promise<void> {
     const liveBlog = await this.findOne(id);
+
+    // Delete from Strapi if live blog has strapiId
+    if (liveBlog.strapiId) {
+      try {
+        await this.strapiService.deleteLiveBlogFromStrapi(liveBlog.strapiId);
+      } catch (error) {
+        // Log error but don't fail - we still want to delete from backend
+        this.logger.error(
+          `Failed to delete live blog ${id} from Strapi:`,
+          error,
+        );
+      }
+    }
+
     await this.liveBlogRepository.remove(liveBlog);
   }
 
+  async archive(id: string): Promise<LiveBlog> {
+    const liveBlog = await this.findOne(id);
+    liveBlog.status = LiveBlogStatus.ARCHIVED;
+    const savedLiveBlog = await this.liveBlogRepository.save(liveBlog);
+
+    // Update Strapi if live blog has strapiId
+    if (liveBlog.strapiId) {
+      try {
+        await this.strapiService.updateLiveBlogStatusInStrapi(
+          liveBlog.strapiId,
+          LiveBlogStatus.ARCHIVED,
+        );
+      } catch (error) {
+        // Log error but don't fail - backend status is updated
+        this.logger.error(
+          `Failed to update Strapi status for live blog ${id}:`,
+          error,
+        );
+      }
+    }
+
+    return savedLiveBlog;
+  }
+
+  async publish(
+    id: string,
+    status: LiveBlogStatus = LiveBlogStatus.DRAFT,
+  ): Promise<LiveBlog> {
+    const liveBlog = await this.findOne(id);
+    liveBlog.status = status;
+    const savedLiveBlog = await this.liveBlogRepository.save(liveBlog);
+
+    // Update Strapi if live blog has strapiId
+    if (liveBlog.strapiId) {
+      try {
+        await this.strapiService.updateLiveBlogStatusInStrapi(
+          liveBlog.strapiId,
+          status,
+        );
+      } catch (error) {
+        // Log error but don't fail - backend status is updated
+        this.logger.error(
+          `Failed to update Strapi status for live blog ${id}:`,
+          error,
+        );
+      }
+    }
+
+    return savedLiveBlog;
+  }
+
   // Live Blog Update CRUD operations
   async createUpdate(
     dto: CreateLiveBlogUpdateDto,
@@ -376,8 +458,19 @@ export class LiveBlogService implements OnModuleInit {
       blogId: liveBlogId,
     });
 
+    // Send periodic keep-alive messages to prevent timeout
+    const keepAliveInterval = setInterval(() => {
+      try {
+        response.write(`: keep-alive\n\n`);
+      } catch {
+        // Client disconnected, stop sending keep-alive
+        clearInterval(keepAliveInterval);
+      }
+    }, 15000); // Send keep-alive every 15 seconds
+
     // Handle client disconnect
     response.on('close', () => {
+      clearInterval(keepAliveInterval);
       this.sseClients.delete(clientId);
       this.logger.log(
         `Client ${clientId} disconnected from live blog ${liveBlogId}`,
@@ -414,21 +507,91 @@ export class LiveBlogService implements OnModuleInit {
     strapiId: string,
     data: Partial<CreateLiveBlogDto>,
   ): Promise<LiveBlog> {
-    let liveBlog = await this.liveBlogRepository.findOne({
+    // Use upsert to handle race conditions and ensure uniqueness
+    try {
+      // First try to find existing live blog by strapiId
+      const liveBlog = await this.liveBlogRepository.findOne({
+        where: { strapiId },
+      });
+
+      if (liveBlog) {
+        // Update existing live blog
+        const currentStatus = liveBlog.status;
+        Object.assign(liveBlog, data);
+
+        // Preserve archived status if live blog is already archived in our system
+        // unless Strapi explicitly sends a different status
+        if (
+          currentStatus === LiveBlogStatus.ARCHIVED &&
+          data.status !== LiveBlogStatus.ARCHIVED
+        ) {
+          liveBlog.status = LiveBlogStatus.ARCHIVED;
+        }
+
+        return await this.liveBlogRepository.save(liveBlog);
+      } else {
+        // Create new live blog
+        const newLiveBlog = this.liveBlogRepository.create({
+          strapiId,
+          ...data,
+          status: data.status || LiveBlogStatus.DRAFT,
+        });
+
+        return await this.liveBlogRepository.save(newLiveBlog);
+      }
+    } catch (error: unknown) {
+      // If we get a unique constraint violation, try to find and update again
+      // This handles race conditions where two syncs happen simultaneously
+      const dbError = error as { code?: string; constraint?: string };
+      if (
+        dbError.code === '23505' &&
+        dbError.constraint?.includes('strapiId')
+      ) {
+        this.logger.warn(
+          `Race condition detected for strapiId ${strapiId}, retrying...`,
+        );
+
+        // Wait a bit and retry
+        await new Promise((resolve) => setTimeout(resolve, 100));
+
+        const existingLiveBlog = await this.liveBlogRepository.findOne({
+          where: { strapiId },
+        });
+
+        if (existingLiveBlog) {
+          const currentStatus = existingLiveBlog.status;
+          Object.assign(existingLiveBlog, data);
+
+          if (
+            currentStatus === LiveBlogStatus.ARCHIVED &&
+            data.status !== LiveBlogStatus.ARCHIVED
+          ) {
+            existingLiveBlog.status = LiveBlogStatus.ARCHIVED;
+          }
+
+          return await this.liveBlogRepository.save(existingLiveBlog);
+        }
+      }
+
+      // Re-throw other errors
+      throw error;
+    }
+  }
+
+  async removeByStrapiId(strapiId: string): Promise<void> {
+    const liveBlog = await this.liveBlogRepository.findOne({
       where: { strapiId },
     });
 
     if (!liveBlog) {
-      liveBlog = this.liveBlogRepository.create({
-        strapiId,
-        ...data,
-        status: data.status || LiveBlogStatus.DRAFT,
-      });
-    } else {
-      Object.assign(liveBlog, data);
+      this.logger.warn(`LiveBlog with strapiId ${strapiId} not found`);
+      return;
     }
 
-    return await this.liveBlogRepository.save(liveBlog);
+    await this.liveBlogRepository.remove(liveBlog);
+    this.logger.log(
+      `Successfully deleted live blog with strapiId: ${strapiId}`,
+    );
   }
 
   // Utility methods

backend/src/modules/strapi.controller.ts

@@ -1,8 +1,14 @@
-import { Controller, Post, Body } from '@nestjs/common';
+import { Controller, Post, Body, Logger } from '@nestjs/common';
 import { StrapiService } from './strapi.service';
+import { Public } from './auth/public.decorator';
 
 interface WebhookBody {
-  event: 'entry.create' | 'entry.update' | 'entry.delete';
+  event:
+    | 'entry.create'
+    | 'entry.update'
+    | 'entry.delete'
+    | 'entry.publish'
+    | 'entry.unpublish';
   model: string;
   entry: {
     documentId: string;
@@ -11,17 +17,105 @@ interface WebhookBody {
 
 @Controller('webhooks/strapi')
 export class StrapiController {
+  private readonly logger = new Logger(StrapiController.name);
+
   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;
 
     if (model !== 'article') {
+      this.logger.warn(`Ignored: not an article, model: ${model}`);
       return { message: 'Ignored: not an article' };
     }
 
-    await this.strapiService.handleWebhook(event, entry);
+    await this.strapiService.handleWebhook(event, {
+      documentId: entry.documentId,
+      model,
+    });
+    return { message: 'Webhook processed successfully' };
+  }
+
+  @Post('live-blog')
+  @Public()
+  async handleLiveBlogWebhook(@Body() body: WebhookBody) {
+    this.logger.log(`Received live-blog webhook: ${JSON.stringify(body)}`);
+    const { event, model, entry } = body;
+
+    if (model !== 'live-blog') {
+      this.logger.warn(`Ignored: not a live blog, model: ${model}`);
+      return { message: 'Ignored: not a live blog' };
+    }
+
+    await this.strapiService.handleWebhook(event, {
+      documentId: entry.documentId,
+      model,
+    });
+    return { message: 'Live blog webhook processed successfully' };
+  }
+
+  @Post()
+  @Public()
+  async handleGenericWebhook(@Body() body: unknown) {
+    this.logger.log(`Received generic webhook: ${JSON.stringify(body)}`);
+
+    // Type guard to check if body is an object
+    if (typeof body !== 'object' || body === null) {
+      this.logger.warn(`Invalid webhook payload: ${JSON.stringify(body)}`);
+      return { message: 'Invalid payload' };
+    }
+
+    const bodyObj = body as Record<string, unknown>;
+
+    // Try to extract event and model from different possible payload structures
+    const event = (bodyObj.event || bodyObj.type) as string;
+    const model = (bodyObj.model || bodyObj.contentType) as string;
+    const entry = bodyObj.entry || bodyObj.data || bodyObj;
+
+    if (!event || !model) {
+      this.logger.warn(
+        `Cannot process webhook: missing event or model. Payload: ${JSON.stringify(body)}`,
+      );
+      return { message: 'Cannot process: missing event or model' };
+    }
+
+    const entryObj = entry as Record<string, unknown>;
+    const documentId = (entryObj.documentId ||
+      entryObj.id ||
+      (entryObj.document as Record<string, unknown>)?.id) as string;
+
+    if (!documentId) {
+      this.logger.warn(
+        `Cannot process webhook: missing documentId. Payload: ${JSON.stringify(body)}`,
+      );
+      return { message: 'Cannot process: missing documentId' };
+    }
+
+    // Validate event type
+    const validEvents = [
+      'entry.create',
+      'entry.update',
+      'entry.delete',
+      'entry.publish',
+      'entry.unpublish',
+    ];
+    if (!validEvents.includes(event)) {
+      this.logger.warn(`Invalid event type: ${event}`);
+      return { message: 'Invalid event type' };
+    }
+
+    await this.strapiService.handleWebhook(
+      event as
+        | 'entry.create'
+        | 'entry.update'
+        | 'entry.delete'
+        | 'entry.publish'
+        | 'entry.unpublish',
+      { documentId, model },
+    );
     return { message: 'Webhook processed successfully' };
   }
 
@@ -31,18 +125,6 @@ export class StrapiController {
     return { message: 'Articles sync completed' };
   }
 
-  @Post('live-blog')
-  async handleLiveBlogWebhook(@Body() body: WebhookBody) {
-    const { event, model, entry } = body;
-
-    if (model !== 'live-blog') {
-      return { message: 'Ignored: not a live blog' };
-    }
-
-    await this.strapiService.handleWebhook(event, entry);
-    return { message: 'Live blog webhook processed successfully' };
-  }
-
   @Post('sync/live-blogs')
   async syncAllLiveBlogs() {
     await this.strapiService.syncLiveBlogs();

backend/src/modules/strapi.module.ts

@@ -1,12 +1,19 @@
-import { Module } from '@nestjs/common';
+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, ArticlesModule, LiveBlogModule],
+  imports: [
+    HttpModule,
+    TypeOrmModule.forFeature([Category]),
+    forwardRef(() => ArticlesModule),
+    forwardRef(() => LiveBlogModule),
+  ],
   controllers: [StrapiController],
   providers: [StrapiService],
   exports: [StrapiService],

backend/src/modules/strapi.service.ts

@@ -1,11 +1,35 @@
-import { Injectable, Logger } from '@nestjs/common';
+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';
 import { CreateArticleDto, CreateLiveBlogDto } from './articles.dto';
-import { ArticleStatus, LiveBlogStatus } from './entities';
+import {
+  ArticleStatus,
+  LiveBlogStatus,
+  ImagePosition,
+  ImageSize,
+  VideoPosition,
+  Category,
+} from './entities';
+
+interface StrapiImage {
+  url: string;
+  alternativeText?: string;
+  caption?: string;
+  width?: number;
+  height?: number;
+  formats?: Record<string, StrapiImageFormat>;
+}
+
+interface StrapiImageFormat {
+  url: string;
+  width: number;
+  height: number;
+}
 
 interface StrapiArticle {
   id: number;
@@ -17,6 +41,14 @@ interface StrapiArticle {
   publishedAt: string | null;
   createdAt: string;
   updatedAt: string;
+  img?: StrapiImage;
+  media?: StrapiImage[];
+  imagePosition?: string;
+  imageSize?: string;
+  videoUrl?: string;
+  videoPosition?: string;
+  videoCaption?: string;
+  category?: string;
 }
 
 interface StrapiLiveBlog {
@@ -29,6 +61,14 @@ interface StrapiLiveBlog {
   publishedAt: string | null;
   createdAt: string;
   updatedAt: string;
+  img?: StrapiImage;
+  media?: StrapiImage[];
+  imagePosition?: string;
+  imageSize?: string;
+  videoUrl?: string;
+  videoPosition?: string;
+  videoCaption?: string;
+  category?: string;
 }
 
 interface StrapiResponse<T> {
@@ -52,8 +92,12 @@ export class StrapiService {
   constructor(
     private readonly configService: ConfigService,
     private readonly httpService: HttpService,
+    @Inject(forwardRef(() => ArticlesService))
     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';
@@ -62,13 +106,105 @@ export class StrapiService {
   }
 
   private getHeaders() {
-    const headers: Record<string, string> = {
-      'Content-Type': 'application/json',
+    return {
+      Authorization: `Bearer ${this.strapiApiToken}`,
     };
-    if (this.strapiApiToken) {
-      headers['Authorization'] = `Bearer ${this.strapiApiToken}`;
+  }
+
+  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 }> = {
+      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 {
+    // Try to get image from img field first (single image)
+    let imageUrl: string | undefined;
+
+    if (strapiArticle.img?.url) {
+      imageUrl = strapiArticle.img.url;
+    } else if (strapiArticle.media?.[0]?.url) {
+      // Try to get first image from media field (multiple images)
+      imageUrl = strapiArticle.media[0].url;
+    }
+
+    if (!imageUrl) {
+      return undefined;
+    }
+
+    // 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}`;
+    }
+
+    return imageUrl;
+  }
+
+  private extractLiveBlogImageUrl(
+    strapiLiveBlog: StrapiLiveBlog,
+  ): string | undefined {
+    // Try to get image from img field first (single image)
+    let imageUrl: string | undefined;
+
+    if (strapiLiveBlog.img?.url) {
+      imageUrl = strapiLiveBlog.img.url;
+    } else if (strapiLiveBlog.media?.[0]?.url) {
+      // Try to get first image from media field (multiple images)
+      imageUrl = strapiLiveBlog.media[0].url;
+    }
+
+    if (!imageUrl) {
+      return undefined;
+    }
+
+    // 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}`;
+    }
+
+    return imageUrl;
   }
 
   async syncArticles(): Promise<void> {
@@ -77,7 +213,7 @@ export class StrapiService {
 
       const response = await lastValueFrom(
         this.httpService.get<StrapiResponse<StrapiArticle[]>>(
-          `${this.strapiUrl}/api/articles`,
+          `${this.strapiUrl}/api/articles?populate=*`,
           {
             headers: this.getHeaders(),
           },
@@ -88,6 +224,19 @@ export class StrapiService {
       let syncedCount = 0;
 
       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;
+          }
+        }
+
         const articleData: Partial<CreateArticleDto> = {
           title: strapiArticle.title,
           excerpt: strapiArticle.description,
@@ -97,6 +246,15 @@ export class StrapiService {
             ? ArticleStatus.PUBLISHED
             : ArticleStatus.DRAFT,
           tags: [],
+          featuredImage: imageUrl,
+          imagePosition: (strapiArticle.imagePosition ||
+            'top') as ImagePosition,
+          imageSize: (strapiArticle.imageSize || 'medium') as ImageSize,
+          videoUrl: strapiArticle.videoUrl || '',
+          videoPosition: (strapiArticle.videoPosition ||
+            'inline') as VideoPosition,
+          videoCaption: strapiArticle.videoCaption || '',
+          categoryId,
         };
 
         await this.articlesService.syncFromStrapi(
@@ -115,13 +273,23 @@ export class StrapiService {
     }
   }
 
-  async syncSingleArticle(strapiId: string): Promise<void> {
+  async syncSingleArticle(
+    strapiId: string,
+    event?:
+      | 'entry.create'
+      | 'entry.update'
+      | 'entry.delete'
+      | 'entry.publish'
+      | 'entry.unpublish',
+  ): Promise<void> {
     try {
-      this.logger.log(`Syncing single article from Strapi: ${strapiId}`);
+      this.logger.log(
+        `Syncing single article from Strapi: ${strapiId}, event: ${event}`,
+      );
 
       const response = await lastValueFrom(
         this.httpService.get<StrapiResponse<StrapiArticle>>(
-          `${this.strapiUrl}/api/articles/${strapiId}`,
+          `${this.strapiUrl}/api/articles/${strapiId}?populate=*`,
           {
             headers: this.getHeaders(),
           },
@@ -129,28 +297,89 @@ export class StrapiService {
       );
 
       const strapiArticle = response.data.data;
+
+      // Determine status based on publishedAt and event type
+      let status: ArticleStatus;
+      if (event === 'entry.unpublish') {
+        // If it's an unpublish event, always mark as draft
+        status = ArticleStatus.DRAFT;
+      } else if (strapiArticle.publishedAt) {
+        // If publishedAt exists, it's published
+        status = ArticleStatus.PUBLISHED;
+      } else {
+        // Otherwise it's a draft
+        status = ArticleStatus.DRAFT;
+      }
+
+      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;
+        }
+      }
+
       const articleData: Partial<CreateArticleDto> = {
         title: strapiArticle.title,
         excerpt: strapiArticle.description,
         content: strapiArticle.content,
         slug: strapiArticle.slug,
-        status: strapiArticle.publishedAt
-          ? ArticleStatus.PUBLISHED
-          : ArticleStatus.DRAFT,
+        status,
         tags: [],
+        featuredImage: imageUrl,
+        imagePosition: (strapiArticle.imagePosition || 'top') as ImagePosition,
+        imageSize: (strapiArticle.imageSize || 'medium') as ImageSize,
+        videoUrl: strapiArticle.videoUrl || '',
+        videoPosition: (strapiArticle.videoPosition ||
+          'inline') as VideoPosition,
+        videoCaption: strapiArticle.videoCaption || '',
+        categoryId,
       };
 
       await this.articlesService.syncFromStrapi(
         strapiArticle.documentId,
         articleData,
       );
-      this.logger.log(`Successfully synced article: ${strapiArticle.title}`);
-    } catch (error) {
-      this.logger.error(
-        `Failed to sync article ${strapiId} from Strapi`,
-        error,
+      this.logger.log(
+        `Successfully synced article: ${strapiArticle.title} with status: ${status}`,
       );
-      throw error;
+    } catch (error: unknown) {
+      // If we get a 404 and it's an unpublish event, we can still mark it as draft
+      const axiosError = error as { response?: { status: number } };
+      if (event === 'entry.unpublish' && axiosError.response?.status === 404) {
+        this.logger.log(
+          `Article ${strapiId} not found in Strapi, marking as draft based on unpublish event`,
+        );
+
+        // Try to update the article status to draft directly
+        try {
+          const articleData: Partial<CreateArticleDto> = {
+            status: ArticleStatus.DRAFT,
+          };
+
+          await this.articlesService.syncFromStrapi(strapiId, articleData);
+          this.logger.log(
+            `Marked article ${strapiId} as draft based on unpublish event`,
+          );
+        } catch (syncError) {
+          this.logger.error(
+            `Failed to mark article ${strapiId} as draft:`,
+            syncError,
+          );
+          throw syncError;
+        }
+      } else {
+        this.logger.error(
+          `Failed to sync article ${strapiId} from Strapi`,
+          error,
+        );
+        throw error;
+      }
     }
   }
 
@@ -160,7 +389,7 @@ export class StrapiService {
 
       const response = await lastValueFrom(
         this.httpService.get<StrapiResponse<StrapiLiveBlog[]>>(
-          `${this.strapiUrl}/api/live-blogs`,
+          `${this.strapiUrl}/api/live-blogs?populate=*`,
           {
             headers: this.getHeaders(),
           },
@@ -171,11 +400,33 @@ export class StrapiService {
       let syncedCount = 0;
 
       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,
           slug: strapiLiveBlog.slug,
           status: this.mapStrapiStatusToLiveBlogStatus(strapiLiveBlog.status),
+          featuredImage: imageUrl,
+          imagePosition: (strapiLiveBlog.imagePosition ||
+            'top') as ImagePosition,
+          imageSize: (strapiLiveBlog.imageSize || 'medium') as ImageSize,
+          videoUrl: strapiLiveBlog.videoUrl || '',
+          videoPosition: (strapiLiveBlog.videoPosition ||
+            'inline') as VideoPosition,
+          videoCaption: strapiLiveBlog.videoCaption || '',
+          categoryId,
         };
 
         await this.liveBlogService.syncFromStrapi(
@@ -194,13 +445,23 @@ export class StrapiService {
     }
   }
 
-  async syncSingleLiveBlog(strapiId: string): Promise<void> {
+  async syncSingleLiveBlog(
+    strapiId: string,
+    event?:
+      | 'entry.create'
+      | 'entry.update'
+      | 'entry.delete'
+      | 'entry.publish'
+      | 'entry.unpublish',
+  ): Promise<void> {
     try {
-      this.logger.log(`Syncing single live blog from Strapi: ${strapiId}`);
+      this.logger.log(
+        `Syncing single live blog from Strapi: ${strapiId}, event: ${event}`,
+      );
 
       const response = await lastValueFrom(
         this.httpService.get<StrapiResponse<StrapiLiveBlog>>(
-          `${this.strapiUrl}/api/live-blogs/${strapiId}`,
+          `${this.strapiUrl}/api/live-blogs/${strapiId}?populate=*`,
           {
             headers: this.getHeaders(),
           },
@@ -208,24 +469,83 @@ export class StrapiService {
       );
 
       const strapiLiveBlog = response.data.data;
+
+      // For live blogs, we use the status from Strapi directly
+      // but we might want to handle unpublish events differently
+      let status = this.mapStrapiStatusToLiveBlogStatus(strapiLiveBlog.status);
+
+      // If it's an unpublish event, set to draft
+      if (event === 'entry.unpublish') {
+        status = LiveBlogStatus.DRAFT;
+      }
+
+      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,
         slug: strapiLiveBlog.slug,
-        status: this.mapStrapiStatusToLiveBlogStatus(strapiLiveBlog.status),
+        status,
+        featuredImage: imageUrl,
+        imagePosition: (strapiLiveBlog.imagePosition || 'top') as ImagePosition,
+        imageSize: (strapiLiveBlog.imageSize || 'medium') as ImageSize,
+        videoUrl: strapiLiveBlog.videoUrl || '',
+        videoPosition: (strapiLiveBlog.videoPosition ||
+          'inline') as VideoPosition,
+        videoCaption: strapiLiveBlog.videoCaption || '',
+        categoryId,
       };
 
       await this.liveBlogService.syncFromStrapi(
         strapiLiveBlog.documentId,
         liveBlogData,
       );
-      this.logger.log(`Successfully synced live blog: ${strapiLiveBlog.title}`);
-    } catch (error) {
-      this.logger.error(
-        `Failed to sync live blog ${strapiId} from Strapi`,
-        error,
+      this.logger.log(
+        `Successfully synced live blog: ${strapiLiveBlog.title} with status: ${status}`,
       );
-      throw error;
+    } catch (error: unknown) {
+      // If we get a 404 and it's an unpublish event, we can still mark it as draft
+      const axiosError = error as { response?: { status: number } };
+      if (event === 'entry.unpublish' && axiosError.response?.status === 404) {
+        this.logger.log(
+          `Live blog ${strapiId} not found in Strapi, marking as draft based on unpublish event`,
+        );
+
+        // Try to update the live blog status to draft directly
+        try {
+          const liveBlogData: Partial<CreateLiveBlogDto> = {
+            status: LiveBlogStatus.DRAFT,
+          };
+
+          await this.liveBlogService.syncFromStrapi(strapiId, liveBlogData);
+          this.logger.log(
+            `Marked live blog ${strapiId} as draft based on unpublish event`,
+          );
+        } catch (syncError) {
+          this.logger.error(
+            `Failed to mark live blog ${strapiId} as draft:`,
+            syncError,
+          );
+          throw syncError;
+        }
+      } else {
+        this.logger.error(
+          `Failed to sync live blog ${strapiId} from Strapi`,
+          error,
+        );
+        throw error;
+      }
     }
   }
 
@@ -245,7 +565,12 @@ export class StrapiService {
   }
 
   async handleWebhook(
-    event: 'entry.create' | 'entry.update' | 'entry.delete',
+    event:
+      | 'entry.create'
+      | 'entry.update'
+      | 'entry.delete'
+      | 'entry.publish'
+      | 'entry.unpublish',
     data: { documentId: string; model?: string },
   ): Promise<void> {
     this.logger.log(
@@ -253,17 +578,185 @@ export class StrapiService {
     );
 
     if (event === 'entry.delete') {
-      this.logger.log(`Handling delete for document: ${data.documentId}`);
+      this.logger.log(
+        `Handling delete for document: ${data.documentId}, model: ${data.model}`,
+      );
+
+      if (data.model === 'article') {
+        await this.articlesService.removeByStrapiId(data.documentId);
+      } else if (data.model === 'live-blog') {
+        await this.liveBlogService.removeByStrapiId(data.documentId);
+      } else {
+        this.logger.warn(`Cannot delete: unknown model type: ${data.model}`);
+      }
       return;
     }
 
     // Route to appropriate sync method based on model
     if (data.model === 'article') {
-      await this.syncSingleArticle(data.documentId);
+      await this.syncSingleArticle(data.documentId, event);
     } else if (data.model === 'live-blog') {
-      await this.syncSingleLiveBlog(data.documentId);
+      await this.syncSingleLiveBlog(data.documentId, event);
     } else {
       this.logger.warn(`Unknown model type in webhook: ${data.model}`);
     }
   }
+
+  async updateArticleStatusInStrapi(
+    strapiId: string,
+    status: ArticleStatus,
+  ): Promise<void> {
+    try {
+      this.logger.log(
+        `Updating article ${strapiId} status in Strapi to: ${status}`,
+      );
+
+      // Map our status to Strapi status
+      let strapiStatus: string;
+      switch (status) {
+        case ArticleStatus.DRAFT:
+          strapiStatus = 'draft';
+          break;
+        case ArticleStatus.PUBLISHED:
+          strapiStatus = 'published';
+          break;
+        case ArticleStatus.ARCHIVED:
+          strapiStatus = 'archived';
+          break;
+        default:
+          strapiStatus = 'draft';
+      }
+
+      // For archived status, we need to unpublish first if it's published
+      if (status === ArticleStatus.ARCHIVED) {
+        await lastValueFrom(
+          this.httpService.patch(
+            `${this.strapiUrl}/api/articles/${strapiId}/unpublish`,
+            {},
+            { headers: this.getHeaders() },
+          ),
+        );
+      }
+
+      // Update the status
+      await lastValueFrom(
+        this.httpService.patch(
+          `${this.strapiUrl}/api/articles/${strapiId}`,
+          { data: { status: strapiStatus } },
+          { headers: this.getHeaders() },
+        ),
+      );
+
+      this.logger.log(
+        `Successfully updated article ${strapiId} status in Strapi to: ${status}`,
+      );
+    } catch (error) {
+      this.logger.error(
+        `Failed to update article ${strapiId} status in Strapi:`,
+        error,
+      );
+      throw error;
+    }
+  }
+
+  async updateLiveBlogStatusInStrapi(
+    strapiId: string,
+    status: LiveBlogStatus,
+  ): Promise<void> {
+    try {
+      this.logger.log(
+        `Updating live blog ${strapiId} status in Strapi to: ${status}`,
+      );
+
+      // Map our status to Strapi status
+      let strapiStatus: string;
+      switch (status) {
+        case LiveBlogStatus.DRAFT:
+          strapiStatus = 'draft';
+          break;
+        case LiveBlogStatus.LIVE:
+          strapiStatus = 'live';
+          break;
+        case LiveBlogStatus.ENDED:
+          strapiStatus = 'ended';
+          break;
+        case LiveBlogStatus.ARCHIVED:
+          strapiStatus = 'archived';
+          break;
+        default:
+          strapiStatus = 'draft';
+      }
+
+      // For archived status, we need to unpublish first if it's published
+      if (status === LiveBlogStatus.ARCHIVED) {
+        await lastValueFrom(
+          this.httpService.patch(
+            `${this.strapiUrl}/api/live-blogs/${strapiId}/unpublish`,
+            {},
+            { headers: this.getHeaders() },
+          ),
+        );
+      }
+
+      // Update the status
+      await lastValueFrom(
+        this.httpService.patch(
+          `${this.strapiUrl}/api/live-blogs/${strapiId}`,
+          { data: { status: strapiStatus } },
+          { headers: this.getHeaders() },
+        ),
+      );
+
+      this.logger.log(
+        `Successfully updated live blog ${strapiId} status in Strapi to: ${status}`,
+      );
+    } catch (error) {
+      this.logger.error(
+        `Failed to update live blog ${strapiId} status in Strapi:`,
+        error,
+      );
+      throw error;
+    }
+  }
+
+  async deleteArticleFromStrapi(strapiId: string): Promise<void> {
+    try {
+      this.logger.log(`Deleting article ${strapiId} from Strapi`);
+
+      await lastValueFrom(
+        this.httpService.delete(`${this.strapiUrl}/api/articles/${strapiId}`, {
+          headers: this.getHeaders(),
+        }),
+      );
+
+      this.logger.log(`Successfully deleted article ${strapiId} from Strapi`);
+    } catch (error) {
+      this.logger.error(
+        `Failed to delete article ${strapiId} from Strapi:`,
+        error,
+      );
+      throw error;
+    }
+  }
+
+  async deleteLiveBlogFromStrapi(strapiId: string): Promise<void> {
+    try {
+      this.logger.log(`Deleting live blog ${strapiId} from Strapi`);
+
+      await lastValueFrom(
+        this.httpService.delete(
+          `${this.strapiUrl}/api/live-blogs/${strapiId}`,
+          { headers: this.getHeaders() },
+        ),
+      );
+
+      this.logger.log(`Successfully deleted live blog ${strapiId} from Strapi`);
+    } catch (error) {
+      this.logger.error(
+        `Failed to delete live blog ${strapiId} from Strapi:`,
+        error,
+      );
+      throw error;
+    }
+  }
 }

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

@@ -0,0 +1,57 @@
+# CMS Dockerfile for Placebo.mk Strapi CMS
+
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+COPY package-lock.json* ./
+
+# Install dependencies
+RUN npm ci --only=production
+
+# Copy source code
+COPY . .
+
+# Build Strapi
+RUN npm run build
+
+# Production stage
+FROM node:20-alpine
+
+WORKDIR /app
+
+# 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/public ./public
+COPY --from=builder --chown=nodejs:nodejs /app/node_modules ./node_modules
+COPY --from=builder --chown=nodejs:nodejs /app/package*.json ./
+
+# Copy environment configuration
+COPY --chown=nodejs:nodejs .env.example .env
+
+# Create data directory for SQLite
+RUN mkdir -p /app/.tmp && \
+    chown -R nodejs:nodejs /app/.tmp
+
+# Switch to non-root user
+USER nodejs
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD node -e "require('http').get('http://localhost:1337/_health', (r) => {if(r.statusCode !== 200) throw new Error()})"
+
+# Expose port
+EXPOSE 1337
+
+# Start Strapi
+CMD ["npm", "run", "start"]

cms/cms/Dockerfile.dev

@@ -0,0 +1,35 @@
+# CMS Development Dockerfile for Placebo.mk Strapi CMS
+
+FROM node:20-slim
+
+WORKDIR /app
+
+# Install Python and build tools for any native modules
+RUN apt-get update && apt-get install -y \
+    python3 \
+    make \
+    g++ \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install dependencies with better error handling
+COPY package*.json ./
+COPY package-lock.json* ./
+
+# Fix permissions before npm install
+RUN chown -R node:node /app
+
+# Switch to non-root user for npm install
+USER node
+
+# Clear npm cache and install dependencies
+RUN npm cache clean --force && \
+    npm install
+
+# Copy source code as node user
+COPY --chown=node:node . .
+
+# Expose port
+EXPOSE 1337
+
+# Start development server
+CMD ["npm", "run", "develop"]

cms/cms/package.json

@@ -18,7 +18,7 @@
     "@strapi/plugin-cloud": "5.33.0",
     "@strapi/plugin-users-permissions": "5.33.0",
     "@strapi/strapi": "5.33.0",
-    "better-sqlite3": "12.4.1",
+    "pg": "^8.13.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.0.0",

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

@@ -29,6 +29,46 @@
     },
     "author": {
       "type": "string"
+    },
+    "img": {
+      "type": "media",
+      "multiple": false,
+      "allowedTypes": [
+        "images",
+        "files",
+        "videos",
+        "audios"
+      ]
+    },
+    "imagePosition": {
+      "type": "enumeration",
+      "enum": ["top", "left", "right", "none"],
+      "default": "top"
+    },
+    "imageSize": {
+      "type": "enumeration",
+      "enum": ["small", "medium", "large"],
+      "default": "medium"
+    },
+    "videoUrl": {
+      "type": "string",
+      "regex": "^(https?:\\/\\/)?(www\\.)?(youtube\\.com\\/watch\\?v=|youtu\\.be\\/|youtube\\.com\\/embed\\/)[a-zA-Z0-9_-]{11}",
+      "default": ""
+    },
+    "videoPosition": {
+      "type": "enumeration",
+      "enum": ["top", "inline", "bottom", "none"],
+      "default": "inline"
+    },
+    "videoCaption": {
+      "type": "string",
+      "default": ""
+    },
+    "category": {
+      "type": "enumeration",
+      "enum": ["sport", "art", "science"],
+      "default": "sport",
+      "required": true
     }
   }
 }

cms/cms/types/generated/contentTypes.d.ts

@@ -446,6 +446,13 @@ export interface ApiArticleArticle extends Struct.CollectionTypeSchema {
     createdAt: Schema.Attribute.DateTime;
     createdBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> &
       Schema.Attribute.Private;
+    imagePosition: Schema.Attribute.Enumeration<
+      ['top', 'left', 'right', 'none']
+    > &
+      Schema.Attribute.DefaultTo<'top'>;
+    imageSize: Schema.Attribute.Enumeration<['small', 'medium', 'large']> &
+      Schema.Attribute.DefaultTo<'medium'>;
+    img: Schema.Attribute.Media<'images' | 'files' | 'videos' | 'audios'>;
     locale: Schema.Attribute.String & Schema.Attribute.Private;
     localizations: Schema.Attribute.Relation<
       'oneToMany',
@@ -461,6 +468,12 @@ export interface ApiArticleArticle extends Struct.CollectionTypeSchema {
     updatedAt: Schema.Attribute.DateTime;
     updatedBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> &
       Schema.Attribute.Private;
+    videoCaption: Schema.Attribute.String & Schema.Attribute.DefaultTo<''>;
+    videoPosition: Schema.Attribute.Enumeration<
+      ['top', 'inline', 'bottom', 'none']
+    > &
+      Schema.Attribute.DefaultTo<'inline'>;
+    videoUrl: Schema.Attribute.String & Schema.Attribute.DefaultTo<''>;
   };
 }
 

docker-compose.dev.yml

@@ -0,0 +1,115 @@
+version: '3.8'
+
+services:
+  # PostgreSQL database for development
+  postgres:
+    image: postgres:16-alpine
+    container_name: placebo-postgres-dev
+    environment:
+      POSTGRES_USER: placebo_user
+      POSTGRES_PASSWORD: placebo_password
+      POSTGRES_DB: placebo_backend_db
+    volumes:
+      - postgres_data_dev:/var/lib/postgresql/data
+      - ./scripts/init-postgres-dev.sql:/docker-entrypoint-initdb.d/init-postgres-dev.sql
+    ports:
+      - "5432:5432"
+    networks:
+      - placebo-network-dev
+
+  # Backend API (NestJS) - Development with hot reload
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile.dev
+    container_name: placebo-backend-dev
+    env_file:
+      - ./backend/.env.docker  # Use the .env.docker file for Docker configuration
+    environment:
+      # Only override if needed, most config is in .env.docker file
+      NODE_ENV: development
+    ports:
+      - "3000:3000"
+    depends_on:
+      - postgres
+    volumes:
+      - ./backend/src:/app/src
+      - ./backend/package.json:/app/package.json
+      - ./backend/package-lock.json:/app/package-lock.json
+      - ./backend/.env.docker:/app/.env  # Mount .env.docker file as .env in container
+    command: npm run dev:docker
+    networks:
+      - placebo-network-dev
+
+  # Frontend (TanStack React) - Development with hot reload
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile.dev
+    container_name: placebo-frontend-dev
+    env_file:
+      - ./frontend/.env  # Use the .env file for configuration
+    environment:
+      NODE_ENV: development
+    ports:
+      - "5173:5173"
+    depends_on:
+      - backend
+    volumes:
+      - ./frontend/src:/app/src
+      - ./frontend/public:/app/public
+      - ./frontend/package.json:/app/package.json
+      - ./frontend/package-lock.json:/app/package-lock.json
+      - ./frontend/index.html:/app/index.html
+      - ./frontend/vite.config.ts:/app/vite.config.ts
+      - ./frontend/tsconfig.json:/app/tsconfig.json
+      - ./frontend/tsconfig.node.json:/app/tsconfig.node.json
+      - ./frontend/tailwind.config.js:/app/tailwind.config.js
+      - ./frontend/.env:/app/.env
+    command: npm run dev:docker
+    networks:
+      - placebo-network-dev
+
+  # CMS (Strapi) - Development with hot reload
+  cms:
+    build:
+      context: ./cms/cms
+      dockerfile: Dockerfile.dev
+    container_name: placebo-cms-dev
+    environment:
+      NODE_ENV: development
+      DATABASE_CLIENT: postgres
+      DATABASE_HOST: postgres
+      DATABASE_PORT: 5432
+      DATABASE_NAME: placebo_cms_db
+      DATABASE_USERNAME: placebo_user
+      DATABASE_PASSWORD: placebo_password
+      DATABASE_SSL: "false"
+      JWT_SECRET: dev-jwt-secret
+      ADMIN_JWT_SECRET: dev-admin-jwt-secret
+      APP_KEYS: dev-app-keys
+      API_TOKEN_SALT: dev-api-token-salt
+      TRANSFER_TOKEN_SALT: dev-transfer-token-salt
+      CORS_ORIGIN: http://localhost:5173
+      PORT: 1337
+    ports:
+      - "1337:1337"
+    depends_on:
+      - postgres
+    volumes:
+      - ./cms/cms/src:/app/src
+      - ./cms/cms/config:/app/config
+      - ./cms/cms/public:/app/public
+      - ./cms/cms/package.json:/app/package.json
+      - ./cms/cms/package-lock.json:/app/package-lock.json
+    command: npm run develop
+    networks:
+      - placebo-network-dev
+
+volumes:
+  postgres_data_dev:
+    driver: local
+
+networks:
+  placebo-network-dev:
+    driver: bridge

docker-compose.yml

@@ -0,0 +1,149 @@
+version: '3.8'
+
+services:
+  # PostgreSQL database for production
+  postgres:
+    image: postgres:16-alpine
+    container_name: placebo-postgres
+    environment:
+      POSTGRES_DB: placebo_backend_db
+      POSTGRES_USER: placebo_user
+      POSTGRES_PASSWORD: placebo_password
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+      - ./scripts/init-db.sql:/docker-entrypoint-initdb.d/init-db.sql
+    ports:
+      - "5432:5432"
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U placebo_user -d placebo_backend_db"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    networks:
+      - placebo-network
+
+  # Backend API (NestJS)
+  backend:
+    build:
+      context: ./backend
+      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_backend_db
+       DATABASE_SYNCHRONIZE: "false"
+       DATABASE_LOGGING: "false"
+       CORS_ORIGIN: http://localhost:5173,http://localhost:3001
+       PORT: 3000
+    ports:
+      - "3000:3000"
+    depends_on:
+      postgres:
+        condition: service_healthy
+    volumes:
+      - ./backend/.env:/app/.env:ro
+      - ./backend/uploads:/app/uploads
+    healthcheck:
+      test: ["CMD", "node", "-e", "require('http').get('http://localhost:3000/health', (r) => {if(r.statusCode !== 200) throw new Error()})"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+    networks:
+      - placebo-network
+
+  # Frontend (TanStack React)
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    container_name: placebo-frontend
+    environment:
+      NODE_ENV: production
+      VITE_API_URL: http://localhost:3000
+      VITE_CMS_URL: http://localhost:1337
+    ports:
+      - "3001:80"
+    depends_on:
+      - backend
+    volumes:
+      - ./frontend/.env:/app/.env:ro
+    healthcheck:
+      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:80/"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+    networks:
+      - placebo-network
+
+  # CMS (Strapi)
+  cms:
+    build:
+      context: ./cms/cms
+      dockerfile: Dockerfile
+    container_name: placebo-cms
+    environment:
+      NODE_ENV: production
+      DATABASE_CLIENT: postgres
+      DATABASE_HOST: postgres
+      DATABASE_PORT: 5432
+      DATABASE_NAME: placebo_db
+      DATABASE_USERNAME: placebo_user
+      DATABASE_PASSWORD: placebo_password
+      DATABASE_SSL: "false"
+      JWT_SECRET: ${JWT_SECRET:-your-jwt-secret-key-change-in-production}
+      ADMIN_JWT_SECRET: ${ADMIN_JWT_SECRET:-your-admin-jwt-secret-key-change-in-production}
+      APP_KEYS: ${APP_KEYS:-your-app-keys-change-in-production}
+      API_TOKEN_SALT: ${API_TOKEN_SALT:-your-api-token-salt-change-in-production}
+      TRANSFER_TOKEN_SALT: ${TRANSFER_TOKEN_SALT:-your-transfer-token-salt-change-in-production}
+      CORS_ORIGIN: http://localhost:5173,http://localhost:3001
+      PORT: 1337
+    ports:
+      - "1337:1337"
+    depends_on:
+      postgres:
+        condition: service_healthy
+    volumes:
+      - ./cms/cms/.env:/app/.env:ro
+      - ./cms/cms/public/uploads:/app/public/uploads
+      - ./cms/cms/.tmp:/app/.tmp
+    healthcheck:
+      test: ["CMD", "node", "-e", "require('http').get('http://localhost:1337/_health', (r) => {if(r.statusCode !== 200) throw new Error()})"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 60s
+    networks:
+      - placebo-network
+
+  # Nginx reverse proxy (for production)
+  nginx:
+    image: nginx:alpine
+    container_name: placebo-nginx
+    ports:
+      - "80:80"
+      - "443:443"
+    volumes:
+      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
+      - ./nginx/ssl:/etc/nginx/ssl:ro
+      - ./frontend/dist:/usr/share/nginx/html:ro
+    depends_on:
+      - frontend
+      - backend
+      - cms
+    networks:
+      - placebo-network
+
+volumes:
+  postgres_data:
+    driver: local
+
+networks:
+  placebo-network:
+    driver: bridge

frontend/.env.example

@@ -1 +1,13 @@
+# Frontend Environment Configuration
+# Copy to .env and adjust for your setup
+
+# ===== DOCKER MODE (frontend in container) =====
+# Use when frontend runs in Docker container
+# VITE_API_URL=http://backend:3000/api/v1
+
+# ===== LOCAL MODE (frontend runs locally) =====
+# Use when frontend runs locally with npm run dev
 VITE_API_URL=http://localhost:3000/api/v1
+
+# ===== COMMON =====
+VITE_CMS_URL=http://localhost:1337

frontend/Dockerfile

@@ -0,0 +1,45 @@
+# Frontend Dockerfile for Placebo.mk TanStack React App
+
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+COPY package-lock.json* ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code
+COPY . .
+
+# Build application
+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
+
+# Expose port
+EXPOSE 80
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

frontend/Dockerfile.dev

@@ -0,0 +1,28 @@
+# Frontend Development Dockerfile for Placebo.mk TanStack React App
+
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Install dependencies with better error handling
+COPY package*.json ./
+COPY package-lock.json* ./
+
+# Clear npm cache and install dependencies
+RUN npm cache clean --force && \
+    npm install
+
+# Copy source code
+COPY . .
+
+# Fix permissions - use node user that exists in base image
+RUN chown -R node:node /app
+
+# Switch to non-root user that exists in base image
+USER node
+
+# Expose port
+EXPOSE 5173
+
+# Start development server with host flag
+CMD ["npm", "run", "dev", "--", "--host"]

frontend/nginx.conf

@@ -0,0 +1,107 @@
+worker_processes auto;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    # Logging
+    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+    
+    access_log /var/log/nginx/access.log main;
+    error_log /var/log/nginx/error.log warn;
+
+    # Basic settings
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    types_hash_max_size 2048;
+    client_max_body_size 100M;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
+    gzip_disable "MSIE [1-6]\.";
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+
+    # Frontend server
+    server {
+        listen 80;
+        server_name localhost;
+        root /usr/share/nginx/html;
+        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;
+
+        # Handle React Router
+        location / {
+            try_files $uri $uri/ /index.html;
+            expires -1;
+        }
+
+        # Cache static assets
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+            expires 1y;
+            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;
+        }
+
+        # 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;
+        }
+
+        # Health check endpoint
+        location /health {
+            access_log off;
+            return 200 "healthy\n";
+            add_header Content-Type text/plain;
+        }
+
+        # Error pages
+        error_page 404 /index.html;
+        error_page 500 502 503 504 /50x.html;
+        location = /50x.html {
+            root /usr/share/nginx/html;
+        }
+    }
+}

frontend/package.json

@@ -12,7 +12,10 @@
     "type-check": "tsc --noEmit",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "test:coverage": "vitest --coverage"
+    "test:coverage": "vitest --coverage",
+    "dev:docker": "vite",
+    "dev:local": "cp -f .env.local .env && vite",
+    "dev:reset-env": "cp -f .env.docker .env"
   },
   "dependencies": {
     "@radix-ui/react-label": "^2.1.8",
@@ -23,8 +26,11 @@
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-query": "^5.90.14",
     "@tanstack/react-router": "^1.144.0",
+    "date-fns": "^4.1.0",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

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,32 @@ 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}`}
-                  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}`}
-                  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/${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/${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>

frontend/src/components/admin/live-blog/LiveBlogManager.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { 
   useLiveBlog, 
   useDeleteLiveBlogUpdate, 

frontend/src/components/auth/LoginForm.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { useAuth } from '../../contexts/AuthContext';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
+import { Label } from '../ui/label';
+
+interface LoginFormProps {
+  onSuccess?: () => void;
+  onSwitchToRegister?: () => void;
+}
+
+export function LoginForm({ onSuccess, onSwitchToRegister }: LoginFormProps) {
+  const { login, isLoading } = useAuth();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    try {
+      await login(username, password);
+      onSuccess?.();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Login failed');
+    }
+  };
+
+  return (
+    <Card className="w-full max-w-md mx-auto">
+      <CardHeader>
+        <CardTitle>Login</CardTitle>
+        <CardDescription>
+          Enter your credentials to access your account
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {error && (
+            <div className="p-3 text-sm bg-destructive/10 text-destructive rounded-md">
+              {error}
+            </div>
+          )}
+          
+          <div className="space-y-2">
+            <Label htmlFor="username">Username</Label>
+            <Input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="Enter your username"
+              required
+              disabled={isLoading}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter your password"
+              required
+              disabled={isLoading}
+            />
+          </div>
+
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading ? 'Logging in...' : 'Login'}
+          </Button>
+
+          {onSwitchToRegister && (
+            <div className="text-center text-sm text-muted-foreground">
+              Don't have an account?{' '}
+              <button
+                type="button"
+                onClick={onSwitchToRegister}
+                className="text-primary hover:underline"
+                disabled={isLoading}
+              >
+                Register here
+              </button>
+            </div>
+          )}
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

frontend/src/components/auth/ProtectedRoute.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Navigate } from '@tanstack/react-router';
+import { useAuth } from '../../contexts/AuthContext';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+  requiredRole?: 'admin' | 'contributor' | 'user';
+  redirectTo?: string;
+}
+
+export function ProtectedRoute({ 
+  children, 
+  requiredRole, 
+  redirectTo = '/' 
+}: ProtectedRouteProps) {
+  const { isAuthenticated, user, isLoading } = useAuth();
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
+          <p className="mt-4 text-muted-foreground">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to={redirectTo} />;
+  }
+
+  if (requiredRole && user?.role !== requiredRole) {
+    return <Navigate to="/" />;
+  }
+
+  return <>{children}</>;
+}

frontend/src/components/auth/RegisterForm.tsx

@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import { useAuth } from '../../contexts/AuthContext';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
+import { Label } from '../ui/label';
+
+interface RegisterFormProps {
+  onSuccess?: () => void;
+  onSwitchToLogin?: () => void;
+}
+
+export function RegisterForm({ onSuccess, onSwitchToLogin }: RegisterFormProps) {
+  const { register, isLoading } = useAuth();
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    if (password.length < 6) {
+      setError('Password must be at least 6 characters');
+      return;
+    }
+
+    try {
+      await register(username, email, password);
+      onSuccess?.();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Registration failed');
+    }
+  };
+
+  return (
+    <Card className="w-full max-w-md mx-auto">
+      <CardHeader>
+        <CardTitle>Register</CardTitle>
+        <CardDescription>
+          Create a new account to start commenting and reacting
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {error && (
+            <div className="p-3 text-sm bg-destructive/10 text-destructive rounded-md">
+              {error}
+            </div>
+          )}
+          
+          <div className="space-y-2">
+            <Label htmlFor="username">Username</Label>
+            <Input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="Choose a username"
+              required
+              disabled={isLoading}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter your email"
+              required
+              disabled={isLoading}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Choose a password (min 6 characters)"
+              required
+              disabled={isLoading}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="confirmPassword">Confirm Password</Label>
+            <Input
+              id="confirmPassword"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="Confirm your password"
+              required
+              disabled={isLoading}
+            />
+          </div>
+
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading ? 'Creating account...' : 'Register'}
+          </Button>
+
+          {onSwitchToLogin && (
+            <div className="text-center text-sm text-muted-foreground">
+              Already have an account?{' '}
+              <button
+                type="button"
+                onClick={onSwitchToLogin}
+                className="text-primary hover:underline"
+                disabled={isLoading}
+              >
+                Login here
+              </button>
+            </div>
+          )}
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

frontend/src/components/features/comments/CommentItem.tsx

@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+import { useAuth } from '../../../contexts/AuthContext';
+import { useCreateComment } from '../../../queries/comments';
+import { Button } from '../../ui/button';
+import { Textarea } from '../../ui/textarea';
+import { Card, CardContent } from '../../ui/card';
+import { format } from 'date-fns';
+import { mk } from 'date-fns/locale';
+import type { Comment } from '../../../lib/api';
+
+interface CommentItemProps {
+  comment: Comment;
+  articleId?: string;
+  liveBlogId?: string;
+  depth?: number;
+}
+
+export function CommentItem({ comment, articleId, liveBlogId, depth = 0 }: CommentItemProps) {
+  const { isAuthenticated } = useAuth();
+  const [showReplyForm, setShowReplyForm] = useState(false);
+  const [replyContent, setReplyContent] = useState('');
+  const [isSubmittingReply, setIsSubmittingReply] = useState(false);
+  
+  const createCommentMutation = useCreateComment();
+  
+  const handleSubmitReply = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!replyContent.trim() || !isAuthenticated) return;
+    
+    setIsSubmittingReply(true);
+    try {
+      await createCommentMutation.mutateAsync({
+        content: replyContent,
+        articleId,
+        liveBlogId,
+        parentCommentId: comment.id,
+      });
+      setReplyContent('');
+      setShowReplyForm(false);
+    } catch (error) {
+      console.error('Failed to post reply:', error);
+    } finally {
+      setIsSubmittingReply(false);
+    }
+  };
+  
+  // Maximum depth to prevent infinite nesting (optional)
+  const maxDepth = 5;
+  const canReply = depth < maxDepth;
+  
+  return (
+    <div className={depth > 0 ? 'ml-8 mt-4 border-l-2 border-border pl-4' : ''}>
+      <Card>
+        <CardContent className="pt-6">
+          <div className="flex items-start justify-between mb-4">
+            <div>
+              <div className="font-medium">
+                {comment.user?.username || 'Анонимен корисник'}
+              </div>
+              <div className="text-sm text-muted-foreground">
+                {format(new Date(comment.createdAt), 'dd MMMM yyyy, HH:mm', { locale: mk })}
+              </div>
+            </div>
+            {comment.user?.role === 'admin' && (
+              <span className="px-2 py-1 text-xs rounded-full bg-primary/10 text-primary">
+                Администратор
+              </span>
+            )}
+          </div>
+          
+          <p className="whitespace-pre-wrap mb-4">{comment.content}</p>
+          
+          {/* Reply button and form */}
+          {isAuthenticated && canReply && (
+            <div className="mt-4">
+              {!showReplyForm ? (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowReplyForm(true)}
+                  className="text-sm"
+                >
+                  Одговори
+                </Button>
+              ) : (
+                <div className="mt-4 p-4 border rounded-lg bg-muted/20">
+                  <form onSubmit={handleSubmitReply}>
+                    <Textarea
+                      placeholder="Вашиот одговор..."
+                      value={replyContent}
+                      onChange={(e) => setReplyContent(e.target.value)}
+                      className="min-h-[80px] mb-3"
+                      disabled={isSubmittingReply}
+                      autoFocus
+                    />
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                          setShowReplyForm(false);
+                          setReplyContent('');
+                        }}
+                        disabled={isSubmittingReply}
+                      >
+                        Откажи
+                      </Button>
+                      <Button
+                        type="submit"
+                        size="sm"
+                        disabled={!replyContent.trim() || isSubmittingReply}
+                      >
+                        {isSubmittingReply ? 'Поставување...' : 'Постави одговор'}
+                      </Button>
+                    </div>
+                  </form>
+                </div>
+              )}
+            </div>
+          )}
+          
+          {/* Reactions (if implemented) */}
+          {comment.reactions && (
+            <div className="flex items-center gap-4 mt-4 pt-4 border-t">
+              <div className="flex items-center gap-1">
+                <span className="text-sm text-muted-foreground">👍 {comment.reactions.likes}</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <span className="text-sm text-muted-foreground">👎 {comment.reactions.dislikes}</span>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+      
+      {/* Render replies recursively */}
+      {comment.replies && comment.replies.length > 0 && (
+        <div className="mt-4">
+          {comment.replies.map((reply) => (
+            <CommentItem
+              key={reply.id}
+              comment={reply}
+              articleId={articleId}
+              liveBlogId={liveBlogId}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/features/comments/CommentSection.tsx

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { useAuth } from '../../../contexts/AuthContext';
+import { useComments, useCreateComment } from '../../../queries/comments';
+import { Button } from '../../ui/button';
+import { Textarea } from '../../ui/textarea';
+import { Card, CardContent } from '../../ui/card';
+import { CommentItem } from './CommentItem';
+
+interface CommentSectionProps {
+  articleId?: string;
+  liveBlogId?: string;
+}
+
+export function CommentSection({ articleId, liveBlogId }: CommentSectionProps) {
+  const { isAuthenticated } = useAuth();
+  const [newComment, setNewComment] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  
+  const { data: commentsData, isLoading } = useComments({
+    articleId,
+    liveBlogId,
+    limit: 50,
+  });
+  
+  const createCommentMutation = useCreateComment();
+  
+  const comments = commentsData?.data || [];
+  
+  const handleSubmitComment = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!newComment.trim() || !isAuthenticated) return;
+    
+    setIsSubmitting(true);
+    try {
+      await createCommentMutation.mutateAsync({
+        content: newComment,
+        articleId,
+        liveBlogId,
+      });
+      setNewComment('');
+    } catch (error) {
+      console.error('Failed to post comment:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  
+  return (
+    <div className="mt-12 pt-8 border-t">
+      <h2 className="text-2xl font-bold mb-6">Коментари</h2>
+      
+      {isAuthenticated ? (
+        <Card className="mb-8">
+          <CardContent className="pt-6">
+            <form onSubmit={handleSubmitComment}>
+              <Textarea
+                placeholder="Што мислите за овој напис?"
+                value={newComment}
+                onChange={(e) => setNewComment(e.target.value)}
+                className="min-h-[100px] mb-4"
+                disabled={isSubmitting}
+              />
+              <div className="flex justify-end">
+                <Button 
+                  type="submit" 
+                  disabled={!newComment.trim() || isSubmitting}
+                >
+                  {isSubmitting ? 'Поставување...' : 'Постави коментар'}
+                </Button>
+              </div>
+            </form>
+          </CardContent>
+        </Card>
+      ) : (
+        <Card className="mb-8">
+          <CardContent className="pt-6 text-center">
+            <p className="text-muted-foreground mb-4">
+              Најавете се за да можете да коментирате
+            </p>
+            <Button asChild>
+              <a href="/auth">Најави се</a>
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+      
+      {isLoading ? (
+        <div className="text-center py-8">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
+          <p className="mt-2 text-sm text-muted-foreground">Вчитување коментари...</p>
+        </div>
+      ) : comments.length === 0 ? (
+        <Card>
+          <CardContent className="pt-6 text-center">
+            <p className="text-muted-foreground">
+              Сè уште нема коментари. Бидете првиот што ќе коментира!
+            </p>
+          </CardContent>
+        </Card>
+       ) : (
+        <div className="space-y-6">
+          {comments.map((comment) => (
+            <CommentItem
+              key={comment.id}
+              comment={comment}
+              articleId={articleId}
+              liveBlogId={liveBlogId}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/features/comments/ReactionButtons.tsx

@@ -0,0 +1,111 @@
+
+import { useAuth } from '../../../contexts/AuthContext';
+import { useReactionCounts, useUserReaction, useAddReaction } from '../../../queries/comments';
+import { Button } from '../../ui/button';
+import { ThumbsUp, ThumbsDown } from 'lucide-react';
+
+interface ReactionButtonsProps {
+  articleId?: string;
+  liveBlogId?: string;
+  commentId?: string;
+  compact?: boolean;
+}
+
+export function ReactionButtons({ 
+  articleId, 
+  liveBlogId, 
+  commentId,
+  compact = false 
+}: ReactionButtonsProps) {
+  const { isAuthenticated } = useAuth();
+  
+  const { data: counts } = useReactionCounts(articleId, liveBlogId, commentId);
+  const { data: userReaction } = useUserReaction(articleId, liveBlogId, commentId);
+  const addReactionMutation = useAddReaction();
+  
+  const userReactionType = userReaction?.type;
+  
+  const handleReaction = async (type: 'like' | 'dislike') => {
+    if (!isAuthenticated) {
+      window.location.href = '/auth';
+      return;
+    }
+    
+    try {
+      await addReactionMutation.mutateAsync({
+        type,
+        articleId,
+        liveBlogId,
+        commentId,
+      });
+    } catch (error) {
+      console.error('Failed to add reaction:', error);
+    }
+  };
+  
+  const likes = counts?.likes || 0;
+  const dislikes = counts?.dislikes || 0;
+  
+  if (compact) {
+    return (
+      <div className="flex items-center gap-2">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => handleReaction('like')}
+          className={`h-8 px-2 ${userReactionType === 'like' ? 'text-primary' : ''}`}
+        >
+          <ThumbsUp className="w-4 h-4 mr-1" />
+          {likes > 0 && <span>{likes}</span>}
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => handleReaction('dislike')}
+          className={`h-8 px-2 ${userReactionType === 'dislike' ? 'text-destructive' : ''}`}
+        >
+          <ThumbsDown className="w-4 h-4 mr-1" />
+          {dislikes > 0 && <span>{dislikes}</span>}
+        </Button>
+      </div>
+    );
+  }
+  
+  return (
+    <div className="flex items-center gap-4">
+      <div className="flex items-center gap-2">
+        <Button
+          variant={userReactionType === 'like' ? 'default' : 'outline'}
+          size="sm"
+          onClick={() => handleReaction('like')}
+          className="gap-2"
+        >
+          <ThumbsUp className="w-4 h-4" />
+          <span>Допаѓа ми</span>
+          {likes > 0 && (
+            <span className="ml-1 bg-primary/20 px-2 py-0.5 rounded-full text-xs">
+              {likes}
+            </span>
+          )}
+        </Button>
+      </div>
+      
+      <div className="flex items-center gap-2">
+        <Button
+          variant={userReactionType === 'dislike' ? 'destructive' : 'outline'}
+          size="sm"
+          onClick={() => handleReaction('dislike')}
+          className="gap-2"
+        >
+          <ThumbsDown className="w-4 h-4" />
+          <span>Не ми се допаѓа</span>
+          {dislikes > 0 && (
+            <span className="ml-1 bg-destructive/20 px-2 py-0.5 rounded-full text-xs">
+              {dislikes}
+            </span>
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}

frontend/src/components/features/live-blog/LiveBlogTicker.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Link } from '@tanstack/react-router';
 import { useActiveLiveBlogs } from '@/queries/live-blogs';
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Play, Pause, ChevronRight, Radio } from 'lucide-react';
 
@@ -9,7 +8,7 @@ interface LiveBlogTickerProps {
   className?: string;
   maxItems?: number;
   autoScroll?: boolean;
-  scrollSpeed?: number; // pixels per second
+  scrollSpeed?: number;
 }
 
 export function LiveBlogTicker({ 
@@ -23,9 +22,8 @@ export function LiveBlogTicker({
   const [scrollPosition, setScrollPosition] = useState(0);
   const tickerRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
-  const animationRef = useRef<number>();
+  const animationRef = useRef<number | undefined>(undefined);
 
-  // Calculate total width needed for scrolling
   const [totalWidth, setTotalWidth] = useState(0);
   
   useEffect(() => {
@@ -35,7 +33,6 @@ export function LiveBlogTicker({
     }
   }, [activeBlogs]);
 
-  // Auto-scroll animation
   useEffect(() => {
     if (!autoScroll || isPaused || !activeBlogs || activeBlogs.length === 0) {
       if (animationRef.current) {
@@ -53,9 +50,8 @@ export function LiveBlogTicker({
       setScrollPosition(prev => {
         let newPos = prev + (scrollSpeed * delta) / 1000;
         
-        // Reset when scrolled past content
         if (newPos > totalWidth) {
-          newPos = -tickerRef.current?.offsetWidth || 0;
+          newPos = -(tickerRef.current?.offsetWidth || 0);
         }
         
         return newPos;
@@ -75,7 +71,7 @@ export function LiveBlogTicker({
 
   if (isLoading) {
     return (
-      <div className={`bg-muted/50 border rounded-lg p-3 ${className}`}>
+      <div className={`border-brutal-sm bg-card p-3 ${className}`}>
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             <div className="animate-pulse h-4 w-24 bg-muted rounded"></div>
@@ -87,7 +83,7 @@ export function LiveBlogTicker({
   }
 
   if (!activeBlogs || activeBlogs.length === 0) {
-    return null; // Don't show ticker if no active blogs
+    return null;
   }
 
   const displayBlogs = activeBlogs.slice(0, maxItems);
@@ -97,56 +93,48 @@ export function LiveBlogTicker({
   };
 
   const handleBlogClick = () => {
-    // Reset scroll position when user interacts
     setScrollPosition(0);
   };
 
   return (
-    <div className={`bg-background border rounded-lg overflow-hidden ${className}`}>
-      {/* Ticker header */}
-      <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/30">
-        <div className="flex items-center gap-2">
-          <Radio className="w-4 h-4 text-primary" />
-          <span className="font-medium text-sm">Live Now</span>
-          <Badge variant="secondary" className="text-xs">
-            {activeBlogs.length} active
-          </Badge>
+    <div className={`border-brutal-sm bg-card overflow-hidden ${className}`}>
+      <div className="flex items-center justify-between px-4 py-2 border-b-2 border-foreground/10 bg-secondary">
+        <div className="flex items-center gap-3">
+          <Radio className="w-4 h-4 text-accent animate-pulse" />
+          <span className="font-body text-sm font-bold uppercase tracking-wider">LIVE</span>
+          <span className="px-2 py-0.5 bg-accent text-foreground text-xs font-body font-bold uppercase">
+            {activeBlogs.length}
+          </span>
         </div>
         
         <div className="flex items-center gap-2">
           {autoScroll && (
             <Button
-              variant="ghost"
+              variant="brutal"
               size="sm"
               onClick={handlePauseToggle}
-              className="h-7 px-2"
+              className="h-7 px-2 text-xs"
             >
               {isPaused ? (
                 <Play className="w-3 h-3" />
               ) : (
                 <Pause className="w-3 h-3" />
               )}
-              <span className="ml-1 text-xs">{isPaused ? 'Play' : 'Pause'}</span>
             </Button>
           )}
           
           <Link to="/live-blogs">
-            <Button variant="ghost" size="sm" className="h-7 px-2">
-              <span className="text-xs">View All</span>
+            <Button variant="brutal" size="sm" className="h-7 px-2 text-xs">
+              Сите
               <ChevronRight className="w-3 h-3 ml-1" />
             </Button>
           </Link>
         </div>
       </div>
 
-      {/* Ticker content */}
       <div 
         ref={tickerRef}
         className="relative h-12 overflow-hidden"
-        style={{ 
-          maskImage: 'linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent)',
-          WebkitMaskImage: 'linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent)'
-        }}
       >
         <div
           ref={contentRef}
@@ -156,76 +144,63 @@ export function LiveBlogTicker({
             transition: isPaused ? 'transform 0.3s ease' : 'none'
           }}
         >
-          {displayBlogs.map((blog, index) => (
+          {displayBlogs.map((blog) => (
             <React.Fragment key={blog.id}>
               <Link
                 to="/live-blogs/$slug"
                 params={{ slug: blog.slug }}
                 onClick={handleBlogClick}
-                className="inline-flex items-center gap-2 px-4 py-1 rounded-full hover:bg-accent transition-colors group"
+                className="inline-flex items-center gap-2 px-4 py-1 border-r-2 border-foreground/10 hover:bg-accent transition-colors group"
               >
                 <div className="flex items-center gap-2">
                   <div className="relative">
-                    <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
-                    <div className="absolute inset-0 w-2 h-2 bg-green-500 rounded-full animate-ping"></div>
+                    <div className="w-2 h-2 bg-accent rounded-full animate-pulse"></div>
                   </div>
-                  <span className="font-medium text-sm group-hover:text-primary transition-colors">
+                  <span className="font-body text-sm font-medium group-hover:text-foreground transition-colors">
                     {blog.title}
                   </span>
                   {blog.updates && blog.updates.length > 0 && (
-                    <Badge variant="outline" className="text-xs">
-                      {blog.updates.length} updates
-                    </Badge>
+                    <span className="px-2 py-0.5 border border-foreground bg-background text-xs font-body">
+                      {blog.updates.length}
+                    </span>
                   )}
                 </div>
               </Link>
-              
-              {/* Separator (except after last item) */}
-              {index < displayBlogs.length - 1 && (
-                <div className="mx-2 text-muted-foreground">•</div>
-              )}
             </React.Fragment>
           ))}
           
-          {/* Duplicate content for seamless looping */}
-          {displayBlogs.map((blog, index) => (
+          {displayBlogs.map((blog) => (
             <React.Fragment key={`${blog.id}-dup`}>
               <Link
                 to="/live-blogs/$slug"
                 params={{ slug: blog.slug }}
                 onClick={handleBlogClick}
-                className="inline-flex items-center gap-2 px-4 py-1 rounded-full hover:bg-accent transition-colors group"
+                className="inline-flex items-center gap-2 px-4 py-1 border-r-2 border-foreground/10 hover:bg-accent transition-colors group"
               >
                 <div className="flex items-center gap-2">
                   <div className="relative">
-                    <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
-                    <div className="absolute inset-0 w-2 h-2 bg-green-500 rounded-full animate-ping"></div>
+                    <div className="w-2 h-2 bg-accent rounded-full animate-pulse"></div>
                   </div>
-                  <span className="font-medium text-sm group-hover:text-primary transition-colors">
+                  <span className="font-body text-sm font-medium group-hover:text-foreground transition-colors">
                     {blog.title}
                   </span>
                   {blog.updates && blog.updates.length > 0 && (
-                    <Badge variant="outline" className="text-xs">
-                      {blog.updates.length} updates
-                    </Badge>
+                    <span className="px-2 py-0.5 border border-foreground bg-background text-xs font-body">
+                      {blog.updates.length}
+                    </span>
                   )}
                 </div>
               </Link>
-              
-              {index < displayBlogs.length - 1 && (
-                <div className="mx-2 text-muted-foreground">•</div>
-              )}
             </React.Fragment>
           ))}
         </div>
       </div>
 
-      {/* Progress indicator */}
       {autoScroll && totalWidth > 0 && (
         <div className="px-4 pb-2">
-          <div className="h-1 bg-muted rounded-full overflow-hidden">
+          <div className="h-1 bg-foreground/10">
             <div 
-              className="h-full bg-primary transition-all duration-300"
+              className="h-full bg-accent transition-all duration-300"
               style={{ 
                 width: `${Math.min(100, (scrollPosition / totalWidth) * 100 * 2)}%` 
               }}

frontend/src/components/features/live-blog/LiveBlogUpdate.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+
 import type { LiveBlogUpdate as ApiLiveBlogUpdate } from '@/lib/api';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';

frontend/src/components/features/live-blog/LiveBlogViewer.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { useLiveBlogStream } from '@/hooks/useLiveBlogStream';
 import { useLiveBlog, useLiveBlogUpdates } from '@/queries/live-blogs';
 import type { LiveBlogUpdate as ApiLiveBlogUpdate } from '@/lib/api';
@@ -214,7 +214,7 @@ export function LiveBlogViewer({ slug, className }: LiveBlogViewerProps) {
 
         <div
           ref={updatesContainerRef}
-          className="max-h-[600px] overflow-y-auto px-6 pb-6"
+          className="px-6 pb-6"
           onScroll={handleScroll}
         >
           {updates.length === 0 && !updatesLoading ? (

frontend/src/components/features/live-blog/PinnedLiveBlogSidebar.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
 import { Link } from '@tanstack/react-router';
 import { usePinnedLiveBlogs } from '@/queries/live-blogs';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import type { LiveBlog } from '@/lib/api';
 import { 
   Clock, 
   MessageSquare, 
@@ -49,11 +49,49 @@ export function PinnedLiveBlogSidebar({
     );
   }
 
-  if (error || !pinnedBlogs || pinnedBlogs.length === 0) {
-    return null; // Don't show sidebar if no pinned blogs
+  if (isLoading) {
+    return (
+      <Card className={className}>
+        <CardHeader>
+          <CardTitle className="text-lg flex items-center gap-2">
+            <Pin className="w-4 h-4" />
+            Live Coverage
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="animate-pulse space-y-2">
+                <div className="h-4 bg-muted rounded w-3/4"></div>
+                <div className="h-3 bg-muted rounded w-1/2"></div>
+                <div className="h-2 bg-muted rounded w-1/4"></div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
   }
 
-  const displayBlogs = pinnedBlogs.slice(0, maxItems);
+  if (error) {
+    return (
+      <Card className={className}>
+        <CardHeader>
+          <CardTitle className="text-lg flex items-center gap-2">
+            <Pin className="w-4 h-4" />
+            Live Coverage
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground text-center py-4">
+            Error loading live coverage
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const displayBlogs = (pinnedBlogs || []).slice(0, maxItems);
 
   const getStatusColor = (status: string) => {
     switch (status) {
@@ -99,99 +137,100 @@ export function PinnedLiveBlogSidebar({
             <Pin className="w-4 h-4" />
             Live Coverage
           </CardTitle>
-          <Badge variant="outline" className="text-xs">
-            {pinnedBlogs.length} pinned
+           <Badge variant="outline" className="text-xs">
+            {(pinnedBlogs || []).length} pinned
           </Badge>
         </div>
       </CardHeader>
       
-      <CardContent className="pt-0">
-        <div className="space-y-4">
-          {displayBlogs.map((blog) => {
-            const latestUpdate = getLatestUpdate(blog);
+       <CardContent className="pt-0">
+        {displayBlogs.length === 0 ? (
+          <div className="py-6 text-center">
+            <p className="text-sm text-muted-foreground">
+              No pinned live blogs at the moment
+            </p>
+            <p className="text-xs text-muted-foreground mt-1">
+              Check back later for live coverage
+            </p>
+          </div>
+        ) : (
+          <>
+            <div className="space-y-4">
+              {displayBlogs.map((blog) => {
+                const latestUpdate = getLatestUpdate(blog);
                 
-            return (
-              <Link
-                key={blog.id}
-                to="/live-blogs/$slug"
-                params={{ slug: blog.slug }}
-                className="block group"
-              >
-                <div className="p-3 rounded-lg border hover:border-primary/50 hover:bg-accent/50 transition-colors">
-                  {/* Header */}
-                  <div className="flex items-start justify-between mb-2">
-                    <div className="flex-1">
-                      <h3 className="font-medium text-sm leading-tight group-hover:text-primary transition-colors line-clamp-2">
-                        {blog.title}
-                      </h3>
+                return (
+                  <Link
+                    key={blog.id}
+                    to="/live-blogs/$slug"
+                    params={{ slug: blog.slug }}
+                    className="block p-3 rounded-lg border hover:bg-accent/50 transition-colors group"
+                  >
+                    <div className="flex items-start justify-between mb-2">
+                      <div className="flex-1">
+                        <h4 className="font-medium text-sm mb-1 group-hover:text-primary transition-colors line-clamp-2">
+                          {blog.title}
+                        </h4>
+                        {blog.description && (
+                          <p className="text-xs text-muted-foreground line-clamp-2">
+                            {blog.description}
+                          </p>
+                        )}
+                      </div>
                       
-                      {blog.description && (
-                        <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
-                          {blog.description}
-                        </p>
-                      )}
+                      <Badge 
+                        className={`${getStatusColor(blog.status)} text-xs`} 
+                        variant="outline"
+                      >
+                        <div className="flex items-center gap-1">
+                          {getStatusIcon(blog.status)}
+                          {blog.status}
+                        </div>
+                      </Badge>
                     </div>
 
-                    <Badge 
-                      className={getStatusColor(blog.status)} 
-                      variant="outline"
-                      size="sm"
-                    >
-                      <div className="flex items-center gap-1">
-                        {getStatusIcon(blog.status)}
-                        {blog.status}
-                      </div>
-                    </Badge>
-                  </div>
-
-                  {/* Latest update preview */}
-                  {latestUpdate && (
-                    <div className="mt-2 p-2 bg-muted/50 rounded text-xs">
-                      <div className="flex items-center gap-1 text-muted-foreground mb-1">
-                        <Clock className="w-3 h-3" />
-                        <span>{formatTime(latestUpdate.createdAt)}</span>
-                      </div>
-                      <p className="line-clamp-2">{latestUpdate.content}</p>
-                    </div>
-                  )}
-
-                  {/* Stats */}
-                  <div className="flex items-center justify-between mt-3 text-xs text-muted-foreground">
-                    <div className="flex items-center gap-3">
-                      <div className="flex items-center gap-1">
-                        <Eye className="w-3 h-3" />
-                        <span>{blog.viewCount}</span>
+                    {/* Latest update preview */}
+                    {latestUpdate && (
+                      <div className="mt-2 p-2 bg-muted/50 rounded text-xs">
+                        <div className="flex items-center gap-1 text-muted-foreground mb-1">
+                          <Clock className="w-3 h-3" />
+                          <span>{formatTime(latestUpdate.createdAt)}</span>
+                        </div>
+                        <p className="line-clamp-2">{latestUpdate.content}</p>
                       </div>
+                    )}
 
+                    {/* Stats */}
+                    <div className="mt-2 flex items-center gap-3 text-xs text-muted-foreground">
                       <div className="flex items-center gap-1">
                         <MessageSquare className="w-3 h-3" />
-                        <span>{blog.updates?.length || 0}</span>
+                        <span>{blog.updates?.length || 0} updates</span>
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <Eye className="w-3 h-3" />
+                        <span>{blog.viewCount} views</span>
                       </div>
                     </div>
+                  </Link>
+                );
+              })}
+            </div>
 
-                    <div className="flex items-center gap-1 text-primary">
-                      <span className="text-xs">View live</span>
-                      <ChevronRight className="w-3 h-3" />
-                    </div>
-                  </div>
-                </div>
-              </Link>
-            );
-          })}
-        </div>
-
-        {pinnedBlogs.length > maxItems && (
-          <div className="mt-4 pt-3 border-t">
-            <Link
-              to="/live-blogs"
-              className="w-full"
-            >
-              <Button variant="ghost" size="sm" className="w-full justify-between">
-                <span>View all pinned blogs</span>
-                <ChevronRight className="w-4 h-4" />
+            {/* View all button */}
+            {(pinnedBlogs || []).length > maxItems && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="w-full mt-4"
+                asChild
+              >
+                <Link to="/live-blogs">
+                  View all pinned blogs
+                  <ChevronRight className="w-3 h-3 ml-1" />
+                </Link>
               </Button>
-            </Link>
-          </div>
+            )}
+          </>
         )}
       </CardContent>
     </Card>

frontend/src/components/features/social-share/CopyLinkButton.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Copy, Check } from 'lucide-react';
+import { copyToClipboard } from '@/lib/social-utils';
+
+interface CopyLinkButtonProps {
+  url: string;
+  size?: 'sm' | 'default' | 'lg';
+  variant?: 'default' | 'outline' | 'ghost';
+  className?: string;
+  showLabel?: boolean;
+  onCopy?: (success: boolean) => void;
+}
+
+export function CopyLinkButton({
+  url,
+  size = 'default',
+  variant = 'outline',
+  className = '',
+  showLabel = false,
+  onCopy,
+}: CopyLinkButtonProps) {
+  const [isCopied, setIsCopied] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleCopy = async () => {
+    if (isLoading) return;
+    
+    setIsLoading(true);
+    try {
+      const success = await copyToClipboard(url);
+      setIsCopied(success);
+      
+      if (onCopy) {
+        onCopy(success);
+      }
+      
+      // Reset copied state after 2 seconds
+      if (success) {
+        setTimeout(() => setIsCopied(false), 2000);
+      }
+    } catch (error) {
+      console.error('Failed to copy:', error);
+      if (onCopy) {
+        onCopy(false);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const label = isCopied ? 'Copied!' : 'Copy Link';
+
+  return (
+    <Button
+      type="button"
+      variant={variant}
+      size={size}
+      onClick={handleCopy}
+      disabled={isLoading}
+      className={`relative ${className}`}
+      aria-label={label}
+      title={label}
+    >
+      {isLoading ? (
+        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-current" />
+      ) : isCopied ? (
+        <Check className="h-4 w-4 text-green-600" />
+      ) : (
+        <Copy className="h-4 w-4" />
+      )}
+      {showLabel && <span className="ml-2">{label}</span>}
+    </Button>
+  );
+}

frontend/src/components/features/social-share/ShareButton.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { type SharePlatform, getPlatformLabel } from '@/lib/social-utils';
+import { 
+  Facebook, 
+  Twitter, 
+  MessageCircle, 
+  Send, 
+  Mail, 
+  Link, 
+  Share2 
+} from 'lucide-react';
+
+interface ShareButtonProps {
+  platform: SharePlatform;
+  onClick: () => void;
+  disabled?: boolean;
+  size?: 'sm' | 'default' | 'lg';
+  variant?: 'default' | 'outline' | 'ghost';
+  className?: string;
+  showLabel?: boolean;
+}
+
+export function ShareButton({
+  platform,
+  onClick,
+  disabled = false,
+  size = 'default',
+  variant = 'outline',
+  className = '',
+  showLabel = false,
+}: ShareButtonProps) {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick = async () => {
+    if (disabled || isLoading) return;
+    
+    setIsLoading(true);
+    try {
+      await onClick();
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const label = getPlatformLabel(platform);
+  
+  // Get the appropriate icon component
+  const getIconComponent = () => {
+    switch (platform) {
+      case 'facebook':
+        return Facebook;
+      case 'twitter':
+        return Twitter;
+      case 'whatsapp':
+        return MessageCircle;
+      case 'telegram':
+        return Send;
+      case 'email':
+        return Mail;
+      case 'link':
+        return Link;
+      default:
+        return Share2;
+    }
+  };
+  
+  const IconComponent = getIconComponent();
+
+  return (
+    <Button
+      type="button"
+      variant={variant}
+      size={size}
+      onClick={handleClick}
+      disabled={disabled || isLoading}
+      className={`relative ${className}`}
+      aria-label={label}
+      title={label}
+    >
+      {isLoading ? (
+        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-current" />
+      ) : (
+        <IconComponent className="h-4 w-4" />
+      )}
+      {showLabel && <span className="ml-2">{label}</span>}
+    </Button>
+  );
+}

frontend/src/components/features/social-share/SocialShareButtons.tsx

@@ -0,0 +1,188 @@
+import { useState } from 'react';
+import { ShareButton } from './ShareButton';
+import { CopyLinkButton } from './CopyLinkButton';
+import { type SharePlatform, type ShareData, getShareUrl } from '@/lib/social-utils';
+import { trackShare } from '@/lib/analytics';
+
+export type SocialShareVariant = 'default' | 'compact' | 'footer' | 'floating';
+
+interface SocialShareButtonsProps extends ShareData {
+  articleId: string;
+  variant?: SocialShareVariant;
+  className?: string;
+  onShare?: (platform: SharePlatform) => void;
+}
+
+const PLATFORMS: SharePlatform[] = ['facebook', 'twitter', 'whatsapp', 'telegram', 'email', 'link'];
+
+export function SocialShareButtons({
+  articleId,
+  title,
+  url,
+  excerpt,
+  image,
+  tags,
+  variant = 'default',
+  className = '',
+  onShare,
+}: SocialShareButtonsProps) {
+  const [isTracking, setIsTracking] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const shareData: ShareData = {
+    title,
+    url,
+    excerpt,
+    image,
+    tags,
+  };
+
+  const handleShare = async (platform: SharePlatform) => {
+    try {
+      // Track the share event
+      setIsTracking(true);
+      await trackShare({
+        articleId,
+        platform,
+        userAgent: navigator.userAgent,
+        // Note: We don't send IP address from frontend for privacy reasons
+        // Backend should extract it from the request if needed
+      });
+
+      // Call the onShare callback if provided
+      if (onShare) {
+        onShare(platform);
+      }
+
+      // Open share URL in new window for social platforms
+      if (platform !== 'link') {
+        const shareUrl = getShareUrl(platform, shareData);
+        window.open(shareUrl, '_blank', 'noopener,noreferrer');
+      }
+    } catch (error) {
+      console.error('Failed to track share:', error);
+      // Still open the share URL even if tracking fails
+      if (platform !== 'link') {
+        const shareUrl = getShareUrl(platform, shareData);
+        window.open(shareUrl, '_blank', 'noopener,noreferrer');
+      }
+    } finally {
+      setIsTracking(false);
+    }
+  };
+
+  const handleCopyLink = async (success: boolean) => {
+    if (success) {
+      await handleShare('link');
+    }
+  };
+
+  // Determine layout based on variant
+  const getLayoutClasses = () => {
+    switch (variant) {
+      case 'compact':
+        return 'flex items-center space-x-1';
+      case 'footer':
+        return 'flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-4';
+      case 'floating':
+        return 'fixed right-4 bottom-4 flex flex-col space-y-2 z-50';
+      default:
+        return 'flex flex-wrap items-center gap-2';
+    }
+  };
+
+  const getButtonSize = () => {
+    switch (variant) {
+      case 'compact':
+        return 'sm' as const;
+      case 'footer':
+        return 'default' as const;
+      case 'floating':
+        return 'default' as const;
+      default:
+        return 'default' as const;
+    }
+  };
+
+  const getButtonVariant = () => {
+    switch (variant) {
+      case 'compact':
+        return 'ghost' as const;
+      case 'footer':
+        return 'outline' as const;
+      case 'floating':
+        return 'default' as const;
+      default:
+        return 'outline' as const;
+    }
+  };
+
+  const showLabels = variant === 'footer';
+
+  // For compact variant, only show a single share button that expands on hover
+  if (variant === 'compact') {
+    return (
+      <div 
+        className={`relative ${className}`}
+        onMouseEnter={() => setIsExpanded(true)}
+        onMouseLeave={() => setIsExpanded(false)}
+      >
+        <div className="flex items-center space-x-1">
+          <ShareButton
+            platform="link"
+            onClick={() => handleShare('link')}
+            size={getButtonSize()}
+            variant={getButtonVariant()}
+            disabled={isTracking}
+          />
+          
+          {isExpanded && (
+            <div className="flex items-center space-x-1 animate-in slide-in-from-right-2">
+              {PLATFORMS.filter(p => p !== 'link').map((platform) => (
+                <ShareButton
+                  key={platform}
+                  platform={platform}
+                  onClick={() => handleShare(platform)}
+                  size={getButtonSize()}
+                  variant={getButtonVariant()}
+                  disabled={isTracking}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`${getLayoutClasses()} ${className}`}>
+      {PLATFORMS.map((platform) => {
+        if (platform === 'link') {
+          return (
+            <CopyLinkButton
+              key={platform}
+              url={url}
+              size={getButtonSize()}
+              variant={getButtonVariant()}
+              showLabel={showLabels}
+              onCopy={handleCopyLink}
+            />
+          );
+        }
+
+        return (
+          <ShareButton
+            key={platform}
+            platform={platform}
+            onClick={() => handleShare(platform)}
+            size={getButtonSize()}
+            variant={getButtonVariant()}
+            disabled={isTracking}
+            showLabel={showLabels}
+          />
+        );
+      })}
+    </div>
+  );
+}

frontend/src/components/features/social-share/index.ts

@@ -0,0 +1,4 @@
+export { SocialShareButtons } from './SocialShareButtons';
+export { ShareButton } from './ShareButton';
+export { CopyLinkButton } from './CopyLinkButton';
+export type { SocialShareVariant } from './SocialShareButtons';

frontend/src/components/home/HeroArticle.tsx

@@ -0,0 +1,141 @@
+import { useQuery } from '@tanstack/react-query';
+import { Link } from '@tanstack/react-router';
+import { fetchHeroArticle } from '@/lib/api';
+import { Button } from '@/components/ui/button';
+import { Calendar, User, ArrowRight, Eye } from 'lucide-react';
+
+export function HeroArticle() {
+  const { data: article, isLoading, error } = useQuery({
+    queryKey: ['hero-article'],
+    queryFn: fetchHeroArticle,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="border-brutal bg-card p-0 animate-pulse">
+        <div className="h-80 bg-muted"></div>
+        <div className="p-8">
+          <div className="h-10 bg-muted rounded w-3/4 mb-4"></div>
+          <div className="h-4 bg-muted rounded w-1/2 mb-6"></div>
+          <div className="h-20 bg-muted rounded mb-6"></div>
+          <div className="h-12 bg-muted rounded w-40"></div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="border-brutal bg-card p-8 text-center">
+        <div className="text-destructive text-xl font-display mb-4">ERROR</div>
+        <Button variant="brutal" onClick={() => window.location.reload()}>
+          Retry
+        </Button>
+      </div>
+    );
+  }
+
+  if (!article) {
+    return (
+      <div className="border-brutal bg-card p-12 text-center">
+        <div className="inline-flex items-center justify-center w-20 h-20 border-4 border-foreground mb-6">
+          <span className="font-display text-4xl">?</span>
+        </div>
+        <h2 className="text-3xl font-display mb-4">NO HERO ARTICLE</h2>
+        <p className="font-body text-muted-foreground mb-4">
+          Mark an article as "Hero" in the admin panel to feature it here.
+        </p>
+        <div className="font-body text-xs uppercase tracking-wider text-muted-foreground mt-8 border-t-2 border-foreground/20 pt-4">
+          This space will showcase your most important story
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <article className="group border-brutal bg-card hover:shadow-brutal transition-all duration-200 animate-fade-in-up">
+      {article.featuredImage && (
+        <div className="relative overflow-hidden">
+          <div className="absolute top-0 left-0 z-10">
+              <span className="inline-block px-4 py-2 bg-accent text-foreground font-body text-sm font-bold uppercase tracking-wider border-b-2 border-r-2 border-foreground">
+                Прекршени Вести
+              </span>
+          </div>
+          <div className="relative h-72 md:h-96 overflow-hidden">
+            <img
+              src={article.featuredImage}
+              alt={article.title}
+              className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-foreground/80 via-foreground/20 to-transparent"></div>
+          </div>
+        </div>
+      )}
+
+      <div className="p-6 md:p-8">
+        <h2 className="text-3xl md:text-4xl font-display leading-tight mb-4 line-clamp-2 group-hover:text-accent transition-colors">
+          {article.title}
+        </h2>
+        
+        <div className="flex flex-wrap items-center gap-4 font-body text-sm uppercase tracking-wider text-muted-foreground mb-6 pb-4 border-b-2 border-foreground/10">
+          <div className="flex items-center gap-2">
+            <Calendar className="w-4 h-4" />
+            <span>
+              {new Date(article.createdAt).toLocaleDateString('mk-MK', {
+                day: 'numeric',
+                month: 'short',
+                year: 'numeric',
+              })}
+            </span>
+          </div>
+          
+          {article.author && (
+            <div className="flex items-center gap-2">
+              <User className="w-4 h-4" />
+              <span>{article.author.name}</span>
+            </div>
+          )}
+          
+          <div className="flex items-center gap-2">
+            <Eye className="w-4 h-4" />
+            <span>{article.views} views</span>
+          </div>
+        </div>
+
+        {article.excerpt && (
+          <p className="text-muted-foreground mb-6 line-clamp-3 font-body">
+            {article.excerpt}
+          </p>
+        )}
+
+        {article.tags && article.tags.length > 0 && (
+          <div className="flex flex-wrap gap-2 mb-6">
+            {article.tags.map((tag) => (
+              <span
+                key={tag}
+                className="px-3 py-1 text-xs font-body uppercase tracking-wider border-2 border-foreground bg-background"
+              >
+                #{tag}
+              </span>
+            ))}
+          </div>
+        )}
+
+        <div className="flex items-center justify-between pt-4 border-t-2 border-foreground/10">
+          <Link to={`/articles/${article.id}`}>
+            <Button variant="brutalAccent" className="gap-2">
+              Read Full Story
+              <ArrowRight className="w-4 h-4" />
+            </Button>
+          </Link>
+          
+          <div className="font-body text-xs uppercase tracking-wider text-muted-foreground">
+            <span className="font-bold text-foreground">
+              {(article.facebookShares || 0) + (article.twitterShares || 0) + (article.whatsappShares || 0) + (article.telegramShares || 0)}
+            </span> shares
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}

frontend/src/components/home/LatestArticlesGrid.tsx

@@ -0,0 +1,136 @@
+import { useQuery } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
+import * as api from '@/lib/api'
+import { SocialShareButtons } from '@/components/features/social-share'
+import { ArrowRight } from 'lucide-react'
+
+export function LatestArticlesGrid() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['latest-articles'],
+    queryFn: () => api.fetchLatestArticles(12),
+  })
+
+  if (isLoading) {
+    return (
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        {Array.from({ length: 12 }).map((_, i) => (
+          <div key={i} className="border-brutal-sm bg-card p-4 animate-pulse">
+            <div className="h-40 bg-muted mb-4"></div>
+            <div className="h-6 bg-muted rounded mb-2"></div>
+            <div className="h-4 bg-muted rounded mb-2 w-3/4"></div>
+            <div className="h-3 bg-muted rounded w-1/2"></div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="border-brutal bg-destructive/10 p-8 text-center">
+        <div className="text-destructive text-2xl font-display mb-2">ГРЕШКА</div>
+        <p className="font-body text-sm text-destructive">Обидете се повторно</p>
+      </div>
+    )
+  }
+
+  const articles = data?.data || []
+
+  if (articles.length === 0) {
+    return (
+      <div className="border-brutal bg-card p-8 text-center">
+        <div className="font-display text-2xl mb-2">НЕМА СТАТИИ</div>
+        <p className="font-body text-sm text-muted-foreground">Проверете подоцна</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-8">
+      <div className="flex items-center justify-between border-b-4 border-foreground pb-4">
+        <h2 className="text-3xl md:text-4xl font-display">Најнови</h2>
+        <Link
+          to="/archive"
+          className="font-body text-sm uppercase tracking-wider border-2 border-foreground px-4 py-2 hover:bg-accent hover:border-accent transition-all duration-150 flex items-center gap-2"
+        >
+          Сите
+          <ArrowRight className="w-4 h-4" />
+        </Link>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        {articles.map((article, index) => (
+          <article
+            key={article.id}
+            className={`group border-brutal-sm bg-card hover:shadow-brutal transition-all duration-150 hover:-translate-y-1 animate-fade-in-up stagger-${Math.min(index + 1, 12)}`}
+          >
+            <Link
+              to={`/articles/${article.id}`}
+              className="block"
+            >
+              {article.featuredImage ? (
+                <div className="relative h-40 overflow-hidden border-b-2 border-foreground">
+                  <img
+                    src={article.featuredImage}
+                    alt={article.title}
+                    className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+                  />
+                  <div className="absolute inset-0 bg-foreground/0 group-hover:bg-foreground/10 transition-colors duration-300" />
+                </div>
+              ) : (
+                <div className="h-40 bg-secondary border-b-2 border-foreground flex items-center justify-center relative overflow-hidden">
+                  <div className="absolute inset-0 opacity-10" style={{ backgroundImage: 'repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 0, transparent 50%)', backgroundSize: '10px 10px' }}></div>
+                  <span className="font-display text-4xl text-foreground/30">N</span>
+                </div>
+              )}
+
+              <div className="p-4">
+                <h3 className="text-lg font-display leading-tight mb-2 line-clamp-2 group-hover:text-accent transition-colors">
+                  {article.title}
+                </h3>
+                
+                {article.excerpt && (
+                  <p className="text-muted-foreground text-xs font-body line-clamp-2 mb-3">
+                    {article.excerpt}
+                  </p>
+                )}
+              </div>
+            </Link>
+            
+            <div className="px-4 pb-4 border-t-2 border-foreground/10 pt-3 mt-auto">
+              <div className="flex items-center justify-between font-body text-xs uppercase tracking-wider text-muted-foreground">
+                <span>
+                  {new Date(article.createdAt).toLocaleDateString('mk-MK', {
+                    day: 'numeric',
+                    month: 'short',
+                  })}
+                </span>
+                
+                {article.category && (
+                  <Link
+                    to={`/${article.category.slug}`}
+                    className="px-2 py-0.5 border border-foreground bg-background text-foreground text-[10px] hover:bg-accent hover:border-accent transition-colors"
+                  >
+                    {article.category.name}
+                  </Link>
+                )}
+              </div>
+              
+              <div className="mt-3">
+                <SocialShareButtons
+                  articleId={article.id}
+                  title={article.title}
+                  url={`${window.location.origin}/articles/${article.id}`}
+                  excerpt={article.excerpt}
+                  image={article.featuredImage}
+                  tags={article.tags}
+                  variant="compact"
+                />
+              </div>
+            </div>
+          </article>
+        ))}
+      </div>
+    </div>
+  )
+}

frontend/src/components/home/PinnedLiveBlogsSidebar.tsx

@@ -0,0 +1,187 @@
+import { useQuery } from '@tanstack/react-query';
+import { Link } from '@tanstack/react-router';
+import { fetchPinnedLiveBlogs } from '@/lib/api';
+import { Button } from '@/components/ui/button';
+import { Calendar, Eye, MessageSquare, Pin } from 'lucide-react';
+
+export function PinnedLiveBlogsSidebar() {
+  const { data: liveBlogs, isLoading, error } = useQuery({
+    queryKey: ['pinned-live-blogs'],
+    queryFn: fetchPinnedLiveBlogs,
+  });
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'live':
+        return (
+          <span className="px-2 py-0.5 bg-accent text-foreground text-xs font-body font-bold uppercase">
+            LIVE
+          </span>
+        );
+      case 'ended':
+        return (
+          <span className="px-2 py-0.5 border-2 border-foreground/40 text-foreground/40 text-xs font-body font-bold uppercase">
+            ENDED
+          </span>
+        );
+      case 'archived':
+        return (
+          <span className="px-2 py-0.5 border-2 border-foreground/30 text-foreground/30 text-xs font-body font-bold uppercase">
+            ARCHIVED
+          </span>
+        );
+      default:
+        return (
+          <span className="px-2 py-0.5 border-2 border-foreground text-foreground text-xs font-body font-bold uppercase">
+            DRAFT
+          </span>
+        );
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('mk-MK', {
+      day: 'numeric',
+      month: 'short',
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="border-brutal-sm bg-card p-6">
+        <div className="flex items-center gap-2 mb-6">
+          <Pin className="h-5 w-5" />
+          <h3 className="text-xl font-display">Pinned Live</h3>
+        </div>
+        <div className="space-y-4">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="animate-pulse">
+              <div className="h-4 bg-muted rounded w-3/4 mb-2"></div>
+              <div className="h-3 bg-muted rounded w-1/2"></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="border-brutal-sm bg-card p-6">
+        <div className="flex items-center gap-2 mb-6">
+          <Pin className="h-5 w-5" />
+          <h3 className="text-xl font-display">Pinned Live</h3>
+        </div>
+        <div className="text-center py-4">
+          <div className="text-destructive font-body text-sm mb-2">ERROR</div>
+          <Button variant="brutal" size="sm" onClick={() => window.location.reload()}>
+            Retry
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!liveBlogs || liveBlogs.length === 0) {
+    return (
+      <div className="border-brutal-sm bg-card p-6">
+        <div className="flex items-center gap-2 mb-6">
+          <Pin className="h-5 w-5" />
+          <h3 className="text-xl font-display">Pinned Live</h3>
+        </div>
+        <div className="text-center py-6 border-2 border-dashed border-foreground/20 p-4">
+          <div className="font-body text-muted-foreground mb-2">No pinned live blogs</div>
+          <p className="font-body text-xs text-muted-foreground">
+            Pin live blogs from the admin panel.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="border-brutal-sm bg-card p-6">
+      <div className="flex items-center justify-between mb-6 pb-4 border-b-2 border-foreground/10">
+        <div className="flex items-center gap-2">
+          <Pin className="h-5 w-5 text-accent" />
+          <h3 className="text-xl font-display">Pinned Live</h3>
+        </div>
+        <span className="px-2 py-1 border-2 border-foreground bg-foreground text-background text-xs font-body font-bold uppercase">
+          {liveBlogs.length}
+        </span>
+      </div>
+
+      <div className="space-y-4">
+        {liveBlogs.map((liveBlog) => (
+          <Link
+            key={liveBlog.id}
+            to="/live-blogs/$slug"
+            params={{ slug: liveBlog.slug }}
+            className="block group"
+          >
+            <div className="p-4 border-2 border-foreground/10 hover:border-foreground hover:shadow-brutal-sm transition-all duration-150 group-hover:-translate-y-1">
+              <div className="flex items-start justify-between mb-2">
+                <h4 className="font-body text-sm font-bold leading-tight line-clamp-2 group-hover:text-accent transition-colors">
+                  {liveBlog.title}
+                </h4>
+                {getStatusBadge(liveBlog.status)}
+              </div>
+
+              {liveBlog.description && (
+                <p className="text-xs font-body text-muted-foreground mb-3 line-clamp-2">
+                  {liveBlog.description}
+                </p>
+              )}
+
+              <div className="flex flex-wrap items-center gap-3 text-xs font-body text-muted-foreground">
+                <div className="flex items-center gap-1">
+                  <Calendar className="h-3 w-3" />
+                  <span>{formatDate(liveBlog.createdAt)}</span>
+                </div>
+
+                <div className="flex items-center gap-1">
+                  <Eye className="h-3 w-3" />
+                  <span>{liveBlog.viewCount}</span>
+                </div>
+
+                {liveBlog.updates && liveBlog.updates.length > 0 && (
+                  <div className="flex items-center gap-1">
+                    <MessageSquare className="h-3 w-3" />
+                    <span>{liveBlog.updates.length}</span>
+                  </div>
+                )}
+
+                {liveBlog.author && (
+                  <div className="text-xs text-muted-foreground">
+                    {liveBlog.author.name}
+                  </div>
+                )}
+              </div>
+
+              {liveBlog.featuredImage && (
+                <div className="mt-3">
+                  <div className="relative h-20 border-2 border-foreground/10 overflow-hidden">
+                    <img
+                      src={liveBlog.featuredImage}
+                      alt={liveBlog.title}
+                      className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          </Link>
+        ))}
+      </div>
+
+      <div className="mt-6 pt-4 border-t-2 border-foreground/10">
+        <Link to="/live-blogs" className="block">
+          <Button variant="brutal" className="w-full justify-center">
+            Сите Live
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+}

frontend/src/components/layout/Header.tsx

@@ -0,0 +1,211 @@
+import { useState } from 'react';
+import { Link } from '@tanstack/react-router';
+import { useAuth } from '../../contexts/AuthContext';
+import { Button } from '../ui/button';
+import { ThemeToggle } from './ThemeToggle';
+import { Menu, X, Zap } from 'lucide-react';
+
+const mkMonths = ['Јануари', 'Февруари', 'Март', 'Април', 'Мај', 'Јуни', 'Јули', 'Август', 'Септември', 'Октомври', 'Ноември', 'Декември'];
+const mkWeekdays = ['Понеделник', 'Вторник', 'Среда', 'Четврток', 'Петок', 'Сабота', 'Недела'];
+
+const formatDateMk = () => {
+  const d = new Date();
+  return `${mkWeekdays[d.getDay()]}, ${d.getDate()} ${mkMonths[d.getMonth()]} ${d.getFullYear()}`;
+};
+
+export function Header() {
+  const { user, logout, isAuthenticated, hasRole } = useAuth();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+  };
+
+  const closeMobileMenu = () => {
+    setIsMobileMenuOpen(false);
+  };
+
+  const navLinks = [
+    { to: '/', label: 'Почетна' },
+    { to: '/sport', label: 'Спорт' },
+    { to: '/art', label: 'Уметност' },
+    { to: '/science', label: 'Наука' },
+    { to: '/archive', label: 'Архива' },
+    { to: '/live-blogs', label: 'LIVE' },
+  ];
+
+  const adminLinks = [
+    { to: '/admin', label: 'Admin' },
+    { to: '/admin/live-blogs/create', label: '+ New Live' },
+  ];
+
+  return (
+    <header className="sticky top-0 z-50 border-b-4 border-foreground bg-[hsl(var(--background))]">
+      <div className="border-b-2 border-foreground/20">
+        <div className="container mx-auto max-w-6xl px-4">
+          <div className="flex items-center justify-between py-2">
+            <div className="hidden md:flex items-center gap-2 text-xs font-mono uppercase tracking-wider text-muted-foreground">
+              <Zap className="w-3 h-3" />
+              <span>Сатирични вести од Македонија</span>
+            </div>
+            <div className="text-xs font-mono uppercase tracking-wider text-muted-foreground">
+              {formatDateMk()}
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div className="container mx-auto max-w-6xl px-4 py-4">
+        <div className="flex items-center justify-between">
+          <Link to="/" className="group">
+            <h1 className="text-4xl md:text-5xl font-display tracking-tight">
+              <span className="inline-block transition-transform group-hover:-translate-y-1 group-hover:translate-x-1">P</span>
+              <span className="inline-block transition-transform group-hover:-translate-y-1 group-hover:translate-x-0.5 delay-75">l</span>
+              <span className="inline-block transition-transform group-hover:-translate-y-1 group-hover:translate-x-0 delay-100">a</span>
+              <span className="inline-block transition-transform group-hover:-translate-y-1 group-hover:translate-x-0.5 delay-150">c</span>
+              <span className="inline-block transition-transform group-hover:-translate-y-1 group-hover:translate-x-0 delay-200">e</span>
+              <span className="inline-block transition-transform group-hover:-translate-y-1 group-hover:translate-x-0.5 delay-250">b</span>
+              <span className="inline-block transition-transform group-hover:-translate-y-1 group-hover:translate-x-0 delay-300">o</span>
+              <span className="text-accent inline-block transition-transform group-hover:-translate-y-1 group-hover:translate-x-0.5 delay-350">.</span>
+              <span className="inline-block transition-transform group-hover:-translate-y-1 group-hover:translate-x-1 delay-400">m</span>
+              <span className="inline-block transition-transform group-hover:-translate-y-1 group-hover:translate-x-0.5 delay-500">k</span>
+            </h1>
+          </Link>
+          
+          <div className="hidden md:flex items-center gap-1">
+            {navLinks.map((link, index) => (
+              <Link
+                key={link.to}
+                to={link.to}
+                className="px-4 py-2 font-body text-sm font-medium uppercase tracking-wider border-2 border-transparent hover:border-foreground hover:bg-accent hover:text-foreground transition-all duration-150"
+                style={{ animationDelay: `${index * 50}ms` }}
+              >
+                {link.label}
+              </Link>
+            ))}
+            
+            {isAuthenticated ? (
+              <>
+                {(hasRole('admin') || hasRole('contributor')) && (
+                  <>
+                    {adminLinks.map((link) => (
+                      <Link
+                        key={link.to}
+                        to={link.to}
+                        className="px-3 py-2 font-body text-sm font-medium uppercase tracking-wider border-2 border-accent bg-accent text-foreground hover:bg-foreground hover:text-accent transition-all duration-150"
+                      >
+                        {link.label}
+                      </Link>
+                    ))}
+                  </>
+                )}
+                
+                <div className="flex items-center gap-3 ml-4 pl-4 border-l-2 border-foreground/20">
+                  <span className="font-body text-xs uppercase tracking-wider text-muted-foreground">
+                    {user?.username}
+                  </span>
+                  <Button 
+                    variant="brutal"
+                    size="sm"
+                    onClick={logout}
+                  >
+                    OUT
+                  </Button>
+                </div>
+              </>
+            ) : (
+              <Link to="/auth" className="px-4 py-2 font-body text-sm font-medium uppercase tracking-wider border-2 border-foreground bg-foreground text-background hover:bg-accent hover:text-foreground hover:border-accent transition-all duration-150 ml-2">
+                Login
+              </Link>
+            )}
+            
+            <div className="ml-4 pl-4 border-l-2 border-foreground/20">
+              <ThemeToggle />
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2 md:hidden">
+            <ThemeToggle />
+            <Button
+              variant="brutal"
+              size="icon"
+              onClick={toggleMobileMenu}
+              className="h-10 w-10"
+              aria-label={isMobileMenuOpen ? 'Close menu' : 'Open menu'}
+            >
+              {isMobileMenuOpen ? (
+                <X className="h-5 w-5" />
+              ) : (
+                <Menu className="h-5 w-5" />
+              )}
+            </Button>
+          </div>
+        </div>
+
+        {isMobileMenuOpen && (
+          <div className="md:hidden mt-4 pt-4 border-t-4 border-foreground animate-scale-in">
+            <div className="flex flex-col gap-2">
+              {navLinks.map((link, index) => (
+                <Link
+                  key={link.to}
+                  to={link.to}
+                  className="px-4 py-3 font-body text-sm font-medium uppercase tracking-wider border-2 border-foreground hover:bg-accent hover:border-accent transition-all duration-150"
+                  style={{ animationDelay: `${index * 50}ms` }}
+                  onClick={closeMobileMenu}
+                >
+                  {link.label}
+                </Link>
+              ))}
+              
+              {isAuthenticated ? (
+                <>
+                  {(hasRole('admin') || hasRole('contributor')) && (
+                    <div className="pt-3 mt-2 border-t-4 border-foreground">
+                      <p className="font-body text-xs uppercase tracking-wider text-muted-foreground mb-2 pl-2">Admin</p>
+                      {adminLinks.map((link) => (
+                        <Link
+                          key={link.to}
+                          to={link.to}
+                          className="px-4 py-3 font-body text-sm font-medium uppercase tracking-wider border-2 border-accent bg-accent hover:bg-foreground hover:text-accent transition-all duration-150 block"
+                          onClick={closeMobileMenu}
+                        >
+                          {link.label}
+                        </Link>
+                      ))}
+                    </div>
+                  )}
+                  
+                  <div className="pt-3 mt-2 border-t-4 border-foreground">
+                    <div className="flex items-center justify-between p-2">
+                      <span className="font-body text-xs uppercase tracking-wider text-muted-foreground">
+                        {user?.username}
+                      </span>
+                      <Button 
+                        variant="brutal"
+                        size="sm"
+                        onClick={() => {
+                          logout();
+                          closeMobileMenu();
+                        }}
+                      >
+                        OUT
+                      </Button>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <Link 
+                  to="/auth" 
+                  className="px-4 py-3 font-body text-sm font-medium uppercase tracking-wider border-2 border-foreground bg-foreground text-background hover:bg-accent hover:text-foreground hover:border-accent transition-all duration-150 mt-2"
+                  onClick={closeMobileMenu}
+                >
+                  Login
+                </Link>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}

frontend/src/components/layout/ThemeToggle.tsx

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Sun, Moon } from 'lucide-react';
+import { getInitialTheme, toggleTheme, watchSystemTheme } from '@/lib/theme';
+
+export function ThemeToggle() {
+  const [theme, setTheme] = useState<'light' | 'dark'>(getInitialTheme);
+
+  useEffect(() => {
+    // Watch for system theme changes
+    const cleanup = watchSystemTheme((newTheme) => {
+      setTheme(newTheme);
+    });
+    
+    return cleanup;
+  }, []);
+
+  const handleToggle = () => {
+    const newTheme = toggleTheme();
+    setTheme(newTheme);
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={handleToggle}
+      className="h-9 w-9"
+      aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+    >
+      {theme === 'light' ? (
+        <Moon className="h-4 w-4" />
+      ) : (
+        <Sun className="h-4 w-4" />
+      )}
+    </Button>
+  );
+}

frontend/src/components/routes/AdminDashboardComponent.tsx

@@ -0,0 +1,539 @@
+import { useState } from 'react';
+import { useLiveBlogs } from '@/queries/live-blogs';
+import { useArticles, useDeleteArticle, useArchiveArticle, usePublishArticle, useUpdateArticle } from '@/queries/articles';
+import { useDeleteLiveBlog, useArchiveLiveBlog, usePublishLiveBlog } from '@/queries/live-blogs';
+import { Link } from '@tanstack/react-router';
+import { Button } from '@/components/ui/button';
+import { format } from 'date-fns';
+import { mk } from 'date-fns/locale';
+
+export function AdminDashboardComponent() {
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const [dialogType, setDialogType] = useState<'delete' | 'archive'>('delete');
+  const [itemToDelete, setItemToDelete] = useState<{
+    type: 'article' | 'liveBlog';
+    id: string;
+    title: string;
+  } | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [showArchived, setShowArchived] = useState(false);
+
+  const { data: liveBlogsData, isLoading: loadingLiveBlogs } = useLiveBlogs({
+    limit: 50,
+    status: showArchived ? 'archived' : 'draft,live,ended'
+  });
+  const { data: articlesData, isLoading: loadingArticles } = useArticles({
+    limit: 50,
+    status: showArchived ? 'archived' : 'draft,published'
+  });
+  const deleteArticleMutation = useDeleteArticle();
+  const deleteLiveBlogMutation = useDeleteLiveBlog();
+  const archiveArticleMutation = useArchiveArticle();
+  const archiveLiveBlogMutation = useArchiveLiveBlog();
+  const publishArticleMutation = usePublishArticle();
+  const publishLiveBlogMutation = usePublishLiveBlog();
+  const updateArticleMutation = useUpdateArticle();
+
+  const liveBlogs = liveBlogsData?.data || [];
+  const articles = articlesData?.data || [];
+
+  const handleDeleteClick = (type: 'article' | 'liveBlog', id: string, title: string) => {
+    setItemToDelete({ type, id, title });
+    setDialogType('delete');
+    setShowConfirmDialog(true);
+  };
+
+  const handleArchiveClick = (type: 'article' | 'liveBlog', id: string, title: string) => {
+    setItemToDelete({ type, id, title });
+    setDialogType('archive');
+    setShowConfirmDialog(true);
+  };
+
+  const handlePublishClick = async (type: 'article' | 'liveBlog', id: string) => {
+    setIsProcessing(true);
+    try {
+      if (type === 'article') {
+        await publishArticleMutation.mutateAsync({ id, status: 'published' });
+      } else {
+        await publishLiveBlogMutation.mutateAsync({ id, status: 'draft' });
+      }
+    } catch (error) {
+      console.error('Failed to publish:', error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleConfirmAction = async () => {
+    if (!itemToDelete) return;
+
+    setIsProcessing(true);
+    try {
+      if (dialogType === 'delete') {
+        if (itemToDelete.type === 'article') {
+          await deleteArticleMutation.mutateAsync(itemToDelete.id);
+        } else {
+          await deleteLiveBlogMutation.mutateAsync(itemToDelete.id);
+        }
+      } else {
+        if (itemToDelete.type === 'article') {
+          await archiveArticleMutation.mutateAsync(itemToDelete.id);
+        } else {
+          await archiveLiveBlogMutation.mutateAsync(itemToDelete.id);
+        }
+      }
+      setShowConfirmDialog(false);
+      setItemToDelete(null);
+    } catch (error) {
+      console.error(`Failed to ${dialogType}:`, error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleCancelAction = () => {
+    setShowConfirmDialog(false);
+    setItemToDelete(null);
+  };
+
+  const handleSetHero = async (articleId: string, isHero: boolean) => {
+    setIsProcessing(true);
+    try {
+      await updateArticleMutation.mutateAsync({
+        id: articleId,
+        dto: { isHero }
+      });
+    } catch (error) {
+      console.error('Failed to update hero status:', error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'published':
+      case 'live':
+        return 'bg-green-500 text-white border-2 border-foreground';
+      case 'draft':
+        return 'bg-yellow-400 text-black border-2 border-foreground';
+      case 'archived':
+      case 'ended':
+        return 'bg-gray-400 text-white border-2 border-foreground';
+      default:
+        return 'bg-blue-500 text-white border-2 border-foreground';
+    }
+  };
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'published': return 'Објавено';
+      case 'draft': return 'Нацрт';
+      case 'archived': return 'Архивирано';
+      case 'live': return 'Во живо';
+      case 'ended': return 'Завршено';
+      default: return status;
+    }
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="border-b-4 border-foreground pb-6">
+        <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
+          <div>
+            <h1 className="text-4xl font-display uppercase tracking-tight">Администраторски панел</h1>
+            <p className="font-body text-muted-foreground mt-1">
+              Управување со сите написи и live блогови
+            </p>
+          </div>
+          <div className="flex gap-3 flex-wrap">
+            <Button
+              variant={showArchived ? 'brutal' : 'brutalOutline'}
+              onClick={() => setShowArchived(!showArchived)}
+            >
+              {showArchived ? 'Прикажи активни' : 'Прикажи архивирани'}
+            </Button>
+            <Button asChild variant="brutalAccent">
+              <Link to="/admin/live-blogs/create">+ Нов Live блог</Link>
+            </Button>
+            <Button asChild variant="brutalOutline">
+              <Link to="/">Назад кон сајтот</Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {!showArchived && (
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div className="border-brutal bg-card p-5">
+            <div className="text-4xl font-display">
+              {liveBlogs.filter(b => b.status === 'live').length || 0}
+            </div>
+            <p className="text-xs font-body text-muted-foreground mt-1">Активни live блогови</p>
+          </div>
+          <div className="border-brutal bg-card p-5">
+            <div className="text-4xl font-display">
+              {articles.filter(a => a.status === 'published').length || 0}
+            </div>
+            <p className="text-xs font-body text-muted-foreground mt-1">Објавени написи</p>
+          </div>
+          <div className="border-brutal bg-card p-5">
+            <div className="text-4xl font-display">
+              {liveBlogs.filter(b => b.isPinned).length || 0}
+            </div>
+            <p className="text-xs font-body text-muted-foreground mt-1">Закачени live блогови</p>
+          </div>
+          <div className="border-brutal bg-card p-5">
+            <div className="text-4xl font-display">
+              {(liveBlogs.reduce((sum, b) => sum + b.viewCount, 0) || 0) +
+               (articles.reduce((sum, a) => sum + a.views, 0) || 0)}
+            </div>
+            <p className="text-xs font-body text-muted-foreground mt-1">Вкупни прегледи</p>
+          </div>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        <div className="border-brutal bg-card">
+          <div className="border-b-2 border-foreground/10 p-4 flex items-center justify-between">
+            <h2 className="text-2xl font-display uppercase">
+              {showArchived ? 'Архивирани Live блогови' : 'Live блогови'}
+            </h2>
+            <span className="px-3 py-1 border-2 border-foreground bg-foreground text-background font-body text-sm font-bold uppercase">
+              {liveBlogs.length || 0}
+            </span>
+          </div>
+          <div className="p-4 space-y-3 max-h-[500px] overflow-y-auto">
+            {loadingLiveBlogs ? (
+              <div className="text-center py-8">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
+                <p className="mt-2 text-sm text-muted-foreground">Вчитување...</p>
+              </div>
+            ) : liveBlogs.length === 0 ? (
+              <div className="text-center py-8 border-2 border-dashed border-foreground/30">
+                <p className="text-muted-foreground">
+                  {showArchived ? 'Нема архивирани live блогови' : 'Нема live блогови'}
+                </p>
+              </div>
+            ) : (
+              liveBlogs.map((blog) => (
+                <div key={blog.id} className="p-4 border-brutal-sm bg-background hover:bg-accent/30 transition-colors">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-2 flex-wrap">
+                        <Link
+                          to="/admin/live-blogs/$slug"
+                          params={{ slug: blog.slug }}
+                          className="font-display text-lg hover:underline hover:text-accent-foreground truncate"
+                        >
+                          {blog.title}
+                        </Link>
+                        <span className={`px-2 py-0.5 font-body text-xs font-bold uppercase ${getStatusColor(blog.status)}`}>
+                          {getStatusText(blog.status)}
+                        </span>
+                        {blog.isPinned && (
+                          <span className="px-2 py-0.5 font-body text-xs font-bold uppercase bg-yellow-400 text-black border-2 border-foreground">
+                            Закачено
+                          </span>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2 text-xs font-body text-muted-foreground flex-wrap">
+                        <span>Слаг: {blog.slug}</span>
+                        <span>•</span>
+                        <span>{format(new Date(blog.createdAt), 'dd MMM yyyy', { locale: mk })}</span>
+                        <span>•</span>
+                        <span>Прегледи: {blog.viewCount}</span>
+                      </div>
+                    </div>
+                    <div className="flex gap-1 flex-shrink-0">
+                      <Button asChild size="sm" variant="brutalOutline">
+                        <Link to="/admin/live-blogs/$slug" params={{ slug: blog.slug }}>Уреди</Link>
+                      </Button>
+                      <Button asChild size="sm" variant="ghost">
+                        <Link to="/live-blogs/$slug" params={{ slug: blog.slug }} target="_blank">Преглед</Link>
+                      </Button>
+                      {showArchived ? (
+                        <Button
+                          size="sm"
+                          variant="brutalOutline"
+                          onClick={() => handlePublishClick('liveBlog', blog.id)}
+                          disabled={isProcessing}
+                        >
+                          Објави
+                        </Button>
+                      ) : (
+                        <Button
+                          size="sm"
+                          variant="brutalOutline"
+                          onClick={() => handleArchiveClick('liveBlog', blog.id, blog.title)}
+                          disabled={isProcessing}
+                        >
+                          Архивирај
+                        </Button>
+                      )}
+                      <Button
+                        size="sm"
+                        variant="destructive"
+                        onClick={() => handleDeleteClick('liveBlog', blog.id, blog.title)}
+                        disabled={isProcessing}
+                      >
+                        Избриши
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+        <div className="border-brutal bg-card">
+          <div className="border-b-2 border-foreground/10 p-4 flex items-center justify-between">
+            <h2 className="text-2xl font-display uppercase">
+              {showArchived ? 'Архивирани написи' : 'Написи'}
+            </h2>
+            <span className="px-3 py-1 border-2 border-foreground bg-foreground text-background font-body text-sm font-bold uppercase">
+              {articles.length || 0}
+            </span>
+          </div>
+          <div className="p-4 space-y-3 max-h-[500px] overflow-y-auto">
+            {loadingArticles ? (
+              <div className="text-center py-8">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
+                <p className="mt-2 text-sm text-muted-foreground">Вчитување...</p>
+              </div>
+            ) : articles.length === 0 ? (
+              <div className="text-center py-8 border-2 border-dashed border-foreground/30">
+                <p className="text-muted-foreground">
+                  {showArchived ? 'Нема архивирани написи' : 'Нема написи'}
+                </p>
+              </div>
+            ) : (
+              articles.map((article) => (
+                <div key={article.id} className="p-4 border-brutal-sm bg-background hover:bg-accent/30 transition-colors">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-2 flex-wrap">
+                        <Link
+                          to="/articles/$id"
+                          params={{ id: article.id }}
+                          className="font-display text-lg hover:underline hover:text-accent-foreground truncate"
+                        >
+                          {article.title}
+                        </Link>
+                        <span className={`px-2 py-0.5 font-body text-xs font-bold uppercase ${getStatusColor(article.status)}`}>
+                          {getStatusText(article.status)}
+                        </span>
+                        {article.isHero && (
+                          <span className="px-2 py-0.5 font-body text-xs font-bold uppercase bg-yellow-400 text-black border-2 border-foreground">
+                            ★ Hero
+                          </span>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2 text-xs font-body text-muted-foreground flex-wrap">
+                        <span>Слаг: {article.slug}</span>
+                        <span>•</span>
+                        <span>{format(new Date(article.createdAt), 'dd MMM yyyy', { locale: mk })}</span>
+                        <span>•</span>
+                        <span>Прегледи: {article.views}</span>
+                        <span>•</span>
+                        <span>Shares: {(article.facebookShares || 0) + (article.twitterShares || 0) + (article.whatsappShares || 0) + (article.telegramShares || 0)}</span>
+                      </div>
+                      {article.excerpt && (
+                        <p className="mt-2 text-sm font-body text-muted-foreground line-clamp-2">
+                          {article.excerpt}
+                        </p>
+                      )}
+                    </div>
+                    <div className="flex gap-1 flex-shrink-0 flex-col">
+                      <div className="flex gap-1">
+                        <Button asChild size="sm" variant="brutalOutline">
+                          <Link to="/articles/$id" params={{ id: article.id }}>Уреди</Link>
+                        </Button>
+                        <Button asChild size="sm" variant="ghost">
+                          <Link to="/articles/$id" params={{ id: article.id }} target="_blank">Преглед</Link>
+                        </Button>
+                      </div>
+                      <div className="flex gap-1">
+                        <Button
+                          size="sm"
+                          variant={article.isHero ? 'brutal' : 'brutalOutline'}
+                          onClick={() => handleSetHero(article.id, !article.isHero)}
+                          disabled={isProcessing || updateArticleMutation.isPending}
+                        >
+                          {article.isHero ? '★ Hero' : 'Set Hero'}
+                        </Button>
+                        {showArchived ? (
+                          <Button
+                            size="sm"
+                            variant="brutalOutline"
+                            onClick={() => handlePublishClick('article', article.id)}
+                            disabled={isProcessing}
+                          >
+                            Објави
+                          </Button>
+                        ) : (
+                          <Button
+                            size="sm"
+                            variant="brutalOutline"
+                            onClick={() => handleArchiveClick('article', article.id, article.title)}
+                            disabled={isProcessing}
+                          >
+                            Архивирај
+                          </Button>
+                        )}
+                        <Button
+                          size="sm"
+                          variant="destructive"
+                          onClick={() => handleDeleteClick('article', article.id, article.title)}
+                          disabled={isProcessing}
+                        >
+                          Избриши
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+
+      {!showArchived && (
+        <div className="border-brutal bg-card p-6">
+          <h2 className="text-2xl font-display uppercase mb-6">Social Media Analytics</h2>
+          <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
+            <div className="border-brutal-sm bg-background p-4">
+              <div className="text-3xl font-display">
+                {articles.reduce((sum, a) => sum + (a.facebookShares || 0), 0) || 0}
+              </div>
+              <p className="text-xs font-body text-muted-foreground mt-1">Facebook Shares</p>
+            </div>
+            <div className="border-brutal-sm bg-background p-4">
+              <div className="text-3xl font-display">
+                {articles.reduce((sum, a) => sum + (a.twitterShares || 0), 0) || 0}
+              </div>
+              <p className="text-xs font-body text-muted-foreground mt-1">Twitter Shares</p>
+            </div>
+            <div className="border-brutal-sm bg-background p-4">
+              <div className="text-3xl font-display">
+                {articles.reduce((sum, a) => sum + (a.whatsappShares || 0), 0) || 0}
+              </div>
+              <p className="text-xs font-body text-muted-foreground mt-1">WhatsApp Shares</p>
+            </div>
+            <div className="border-brutal-sm bg-background p-4">
+              <div className="text-3xl font-display">
+                {articles.reduce((sum, a) => sum + (a.telegramShares || 0), 0) || 0}
+              </div>
+              <p className="text-xs font-body text-muted-foreground mt-1">Telegram Shares</p>
+            </div>
+            <div className="border-brutal-sm bg-background p-4">
+              <div className="text-3xl font-display">
+                {articles.reduce((sum, a) =>
+                  sum + (a.facebookShares || 0) + (a.twitterShares || 0) +
+                  (a.whatsappShares || 0) + (a.telegramShares || 0), 0) || 0}
+              </div>
+              <p className="text-xs font-body text-muted-foreground mt-1">Total Shares</p>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-xl font-display uppercase mb-4">Top Shared Articles</h3>
+            <div className="space-y-3">
+              {articles
+                .filter(a => a.status === 'published')
+                .sort((a, b) => {
+                  const aShares = (a.facebookShares || 0) + (a.twitterShares || 0) +
+                                 (a.whatsappShares || 0) + (a.telegramShares || 0);
+                  const bShares = (b.facebookShares || 0) + (b.twitterShares || 0) +
+                                 (b.whatsappShares || 0) + (b.telegramShares || 0);
+                  return bShares - aShares;
+                })
+                .slice(0, 5)
+                .map((article) => {
+                  const totalShares = (article.facebookShares || 0) +
+                                    (article.twitterShares || 0) +
+                                    (article.whatsappShares || 0) +
+                                    (article.telegramShares || 0);
+                  const shareRate = article.views > 0
+                    ? ((totalShares / article.views) * 100).toFixed(2)
+                    : '0.00';
+
+                  return (
+                    <div key={article.id} className="p-4 border-brutal-sm bg-background hover:bg-accent/30 transition-colors">
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="flex-1 min-w-0">
+                          <Link
+                            to="/articles/$id"
+                            params={{ id: article.id }}
+                            className="font-display text-lg hover:underline hover:text-accent-foreground"
+                          >
+                            {article.title}
+                          </Link>
+                          <div className="flex items-center gap-3 text-xs font-body text-muted-foreground mt-2 flex-wrap">
+                            <span>Views: {article.views}</span>
+                            <span>•</span>
+                            <span>Shares: {totalShares}</span>
+                            <span>•</span>
+                            <span>Share Rate: {shareRate}%</span>
+                          </div>
+                          <div className="flex items-center gap-4 mt-2 text-xs flex-wrap">
+                            <span className="flex items-center gap-1">
+                              <span className="w-2 h-2 bg-blue-600"></span>
+                              FB: {article.facebookShares || 0}
+                            </span>
+                            <span className="flex items-center gap-1">
+                              <span className="w-2 h-2 bg-sky-500"></span>
+                              X: {article.twitterShares || 0}
+                            </span>
+                            <span className="flex items-center gap-1">
+                              <span className="w-2 h-2 bg-green-500"></span>
+                              WA: {article.whatsappShares || 0}
+                            </span>
+                            <span className="flex items-center gap-1">
+                              <span className="w-2 h-2 bg-cyan-500"></span>
+                              TG: {article.telegramShares || 0}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showConfirmDialog && itemToDelete && (
+        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
+          <div className="border-brutal bg-background p-6 max-w-md w-full mx-4">
+            <h3 className="text-2xl font-display uppercase mb-3">
+              {dialogType === 'delete' ? 'Потврди бришење' : 'Потврди архивирање'}
+            </h3>
+            <p className="font-body text-muted-foreground mb-6">
+              {dialogType === 'delete'
+                ? `Дали сте сигурни дека сакате да го избришете "${itemToDelete.title}"?`
+                : `Дали сте сигурни дека сакате да го архивирате "${itemToDelete.title}"?`}
+            </p>
+            <div className="flex justify-end gap-3">
+              <Button variant="brutalOutline" onClick={handleCancelAction} disabled={isProcessing}>
+                Откажи
+              </Button>
+              <Button
+                variant={dialogType === 'delete' ? 'destructive' : 'brutal'}
+                onClick={handleConfirmAction}
+                disabled={isProcessing}
+              >
+                {isProcessing
+                  ? (dialogType === 'delete' ? 'Бришење...' : 'Архивирање...')
+                  : (dialogType === 'delete' ? 'Избриши' : 'Архивирај')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/routes/ArchiveComponent.tsx

@@ -0,0 +1,91 @@
+import { useQuery } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
+import * as api from '@/lib/api'
+import { SocialShareButtons } from '@/components/features/social-share'
+
+export function ArchiveComponent() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['articles'],
+    queryFn: () => api.fetchArticles({ status: 'published' }),
+  })
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-lg">Loading articles...</div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-lg text-red-500">Error loading articles</div>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold">Articles</h1>
+        <p className="text-muted-foreground">Latest news and articles</p>
+      </div>
+
+       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+         {data?.data.map((article) => (
+           <div
+             key={article.id}
+             className="p-6 rounded-xl border bg-card hover:shadow-lg transition-shadow"
+           >
+             <Link
+               to={`/articles/${article.id}`}
+               className="block mb-4"
+             >
+               <h2 className="text-xl font-semibold mb-2 line-clamp-2">
+                 {article.title}
+               </h2>
+               {article.excerpt && (
+                 <p className="text-muted-foreground text-sm mb-4 line-clamp-3">
+                   {article.excerpt}
+                 </p>
+               )}
+             </Link>
+             
+             <div className="flex items-center justify-between text-sm text-muted-foreground">
+               <div className="flex items-center space-x-4">
+                 <span>
+                   {new Date(article.createdAt).toLocaleDateString('mk-MK', {
+                     day: 'numeric',
+                     month: 'short',
+                     year: 'numeric',
+                   })}
+                 </span>
+                 <span>•</span>
+                 <span>{article.views} views</span>
+               </div>
+               
+                <SocialShareButtons
+                  articleId={article.id}
+                  title={article.title}
+                  url={`${window.location.origin}/articles/${article.id}`}
+                  excerpt={article.excerpt}
+                  image={article.featuredImage}
+                  tags={article.tags}
+                  variant="compact"
+                />
+             </div>
+           </div>
+         ))}
+       </div>
+
+      {data?.data.length === 0 && (
+        <div className="text-center py-12">
+          <p className="text-muted-foreground text-lg">
+            No articles published yet. Check back soon!
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/routes/ArtComponent.tsx

@@ -0,0 +1,11 @@
+import { CategoryPage } from './CategoryPage'
+
+export function ArtComponent() {
+  return (
+    <CategoryPage
+      categorySlug="art"
+      categoryName="Уметност"
+      categoryDescription="Уметност, култура и забава"
+    />
+  )
+}

frontend/src/components/routes/ArticleDetailComponent.tsx

@@ -1,6 +1,13 @@
 import { useQuery } from '@tanstack/react-query'
 import { Link } from '@tanstack/react-router'
 import * as api from '@/lib/api'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { YouTubeEmbed } from '@/components/ui/youtube-embed'
+import { extractYouTubeVideoId, getVideoPositionClasses } from '@/lib/video-utils'
+import { CommentSection } from '@/components/features/comments/CommentSection'
+import { ReactionButtons } from '@/components/features/comments/ReactionButtons'
+import { SocialShareButtons } from '@/components/features/social-share'
 
 export function ArticleDetailComponent({ id }: { id: string }) {
   const { data, isLoading, error } = useQuery({
@@ -63,21 +70,134 @@ export function ArticleDetailComponent({ id }: { id: string }) {
             <span>By {data.author.name}</span>
           </>
         )}
-      </div>
+       </div>
 
-      {data.featuredImage && (
-        <img
-          src={data.featuredImage}
-          alt={data.title}
-          className="w-full h-64 md:h-96 object-cover rounded-xl mb-8"
-        />
+        {/* Social Sharing */}
+        <div className="mb-8">
+          <SocialShareButtons
+            articleId={data.id}
+            title={data.title}
+            url={typeof window !== 'undefined' ? window.location.href : ''}
+            excerpt={data.excerpt}
+            image={data.featuredImage}
+            tags={data.tags}
+          />
+        </div>
+
+       {data.featuredImage && data.imagePosition !== 'none' && (
+        <div className={`relative mb-4 ${
+          data.imagePosition === 'top' 
+            ? 'w-full mb-8' 
+            : data.imagePosition === 'left' 
+              ? 'float-none md:float-left mr-0 md:mr-6' 
+              : 'float-none md:float-right ml-0 md:ml-6'
+        }`}>
+          <img
+            src={data.featuredImage}
+            alt={data.title}
+            className={`rounded-xl object-cover ${
+              data.imagePosition === 'top'
+                ? data.imageSize === 'small' 
+                  ? 'h-32' 
+                  : data.imageSize === 'medium' 
+                    ? 'h-48' 
+                    : 'h-64 md:h-96'
+                : data.imageSize === 'small' 
+                  ? 'w-full md:w-48 h-32' 
+                  : data.imageSize === 'medium' 
+                    ? 'w-full md:w-64 h-48' 
+                    : 'w-full md:w-96 h-64'
+            }`}
+            onError={(e) => {
+              console.error('Failed to load image:', data.featuredImage, e);
+              e.currentTarget.style.display = 'none';
+              // Show fallback
+              const fallback = e.currentTarget.nextElementSibling as HTMLElement;
+              if (fallback) {
+                fallback.style.display = 'flex';
+              }
+            }}
+          />
+          <div 
+            className="absolute inset-0 bg-gray-100 rounded-xl flex items-center justify-center text-gray-400 hidden"
+            style={{ display: 'none' }}
+          >
+            <span>Image not available</span>
+          </div>
+        </div>
+      )}
+
+      {/* Video rendering */}
+      {data.videoUrl && data.videoPosition !== 'none' && (
+        <div className={getVideoPositionClasses(data.videoPosition)}>
+          <YouTubeEmbed
+            url={data.videoUrl}
+            title={data.title}
+            caption={data.videoCaption}
+            autoplay={false}
+            controls={true}
+            modestbranding={true}
+            showRelated={false}
+          />
+        </div>
       )}
 
       <div className="prose prose-slate max-w-none">
-        <p className="text-lg leading-relaxed mb-6">{data.content}</p>
-      </div>
+        <div className="text-lg leading-relaxed mb-6">
+          <ReactMarkdown 
+            remarkPlugins={[remarkGfm]}
+            components={{
+              img: (props) => (
+                <img 
+                  {...props} 
+                  className="max-w-full h-auto rounded-lg my-4"
+                  alt={props.alt || 'Article image'}
+                />
+              ),
+              a: (props) => {
+                // Check if the link is a YouTube URL
+                const videoId = extractYouTubeVideoId(props.href || '');
+                if (videoId) {
+                  return (
+                    <div className="my-6">
+                      <YouTubeEmbed
+                        url={props.href || ''}
+                        title={props.title || 'YouTube video'}
+                        autoplay={false}
+                        controls={true}
+                        modestbranding={true}
+                        showRelated={false}
+                      />
+                    </div>
+                  );
+                }
+                // Regular link
+                return <a {...props} className="text-blue-600 hover:text-blue-800 underline" />;
+              }
+            }}
+          >
+            {data.content}
+          </ReactMarkdown>
+       </div>
+     </div>
 
-      {data.tags && Array.isArray(data.tags) && data.tags.length > 0 && (
+     {/* Social Sharing Footer */}
+     <div className="mt-8 pt-8 border-t">
+       <div className="flex flex-col items-center">
+         <p className="text-sm text-muted-foreground mb-4">Share this article:</p>
+          <SocialShareButtons
+            articleId={data.id}
+            title={data.title}
+            url={typeof window !== 'undefined' ? window.location.href : ''}
+            excerpt={data.excerpt}
+            image={data.featuredImage}
+            tags={data.tags}
+            variant="footer"
+          />
+       </div>
+     </div>
+
+     {data.tags && Array.isArray(data.tags) && data.tags.length > 0 && (
         <div className="mt-8 pt-8 border-t">
           <h3 className="text-sm font-semibold mb-4 text-muted-foreground">Tags</h3>
           <div className="flex flex-wrap gap-2">
@@ -92,6 +212,17 @@ export function ArticleDetailComponent({ id }: { id: string }) {
           </div>
         </div>
       )}
+
+      {/* Reactions */}
+      <div className="mt-8 pt-8 border-t">
+        <div className="flex items-center justify-between mb-6">
+          <h3 className="text-lg font-semibold">Што мислите за овој напис?</h3>
+          <ReactionButtons articleId={data.id} />
+        </div>
+      </div>
+
+      {/* Comments */}
+      <CommentSection articleId={data.id} />
     </article>
   )
 }

frontend/src/components/routes/ArticlesComponent.tsx

@@ -1,72 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { Link } from '@tanstack/react-router'
-import * as api from '@/lib/api'
-
-export function ArticlesComponent() {
-  const { data, isLoading, error } = useQuery({
-    queryKey: ['articles'],
-    queryFn: () => api.fetchArticles({ status: 'published' }),
-  })
-
-  if (isLoading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-lg">Loading articles...</div>
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-lg text-red-500">Error loading articles</div>
-      </div>
-    )
-  }
-
-  return (
-    <div>
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold">Articles</h1>
-        <p className="text-muted-foreground">Latest news and articles</p>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {data?.data.map((article) => (
-              <Link
-                key={article.id}
-                to={`/articles/${article.id}`}
-                className="p-6 rounded-xl border bg-card hover:shadow-lg transition-shadow cursor-pointer block"
-              >
-            <h2 className="text-xl font-semibold mb-2 line-clamp-2">
-              {article.title}
-            </h2>
-            {article.excerpt && (
-              <p className="text-muted-foreground text-sm mb-4 line-clamp-3">
-                {article.excerpt}
-              </p>
-            )}
-            <div className="flex items-center justify-between text-sm text-muted-foreground">
-              <span>
-                {new Date(article.createdAt).toLocaleDateString('mk-MK', {
-                  day: 'numeric',
-                  month: 'short',
-                  year: 'numeric',
-                })}
-              </span>
-              <span>{article.views} views</span>
-            </div>
-          </Link>
-        ))}
-      </div>
-
-      {data?.data.length === 0 && (
-        <div className="text-center py-12">
-          <p className="text-muted-foreground text-lg">
-            No articles published yet. Check back soon!
-          </p>
-        </div>
-      )}
-    </div>
-  )
-}

frontend/src/components/routes/AuthPage.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { LoginForm } from '../auth/LoginForm';
+import { RegisterForm } from '../auth/RegisterForm';
+import { useAuth } from '../../contexts/AuthContext';
+import { Navigate } from '@tanstack/react-router';
+
+export function AuthPage() {
+  const { isAuthenticated } = useAuth();
+  const [isLogin, setIsLogin] = useState(true);
+
+  if (isAuthenticated) {
+    return <Navigate to="/" />;
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <div className="w-full max-w-lg">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold mb-2">
+            Welcome to <span className="text-primary">Placebo.mk</span>
+          </h1>
+          <p className="text-muted-foreground">
+            {isLogin 
+              ? 'Login to comment, react, and access admin features' 
+              : 'Join our community of sarcastic news enthusiasts'}
+          </p>
+        </div>
+
+        {isLogin ? (
+          <LoginForm 
+            onSuccess={() => window.location.href = '/'}
+            onSwitchToRegister={() => setIsLogin(false)}
+          />
+        ) : (
+          <RegisterForm 
+            onSuccess={() => window.location.href = '/'}
+            onSwitchToLogin={() => setIsLogin(true)}
+          />
+        )}
+
+        <div className="mt-8 text-center text-sm text-muted-foreground">
+          <p>
+            By {isLogin ? 'logging in' : 'registering'}, you agree to our{' '}
+            <a href="#" className="text-primary hover:underline">Terms of Service</a>{' '}
+            and{' '}
+            <a href="#" className="text-primary hover:underline">Privacy Policy</a>.
+          </p>
+          <p className="mt-2">
+            Need help?{' '}
+            <a href="mailto:support@placebo.mk" className="text-primary hover:underline">
+              Contact support
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/routes/CategoryPage.tsx

@@ -0,0 +1,187 @@
+import { useQuery } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
+import * as api from '@/lib/api'
+import { SocialShareButtons } from '@/components/features/social-share'
+import { PinnedLiveBlogsSidebar } from '@/components/home/PinnedLiveBlogsSidebar'
+
+interface CategoryPageProps {
+  categorySlug: string
+  categoryName: string
+  categoryDescription?: string
+}
+
+export function CategoryPage({ categorySlug, categoryName, categoryDescription }: CategoryPageProps) {
+  const { data: articlesData, isLoading: articlesLoading, error: articlesError } = useQuery({
+    queryKey: ['category-articles', categorySlug],
+    queryFn: () => api.fetchArticles({ category: categorySlug, status: 'published' }),
+  })
+
+  const { data: heroData, isLoading: heroLoading } = useQuery({
+    queryKey: ['category-hero', categorySlug],
+    queryFn: () => api.fetchArticles({ category: categorySlug, status: 'published', limit: 1 }),
+    enabled: !!categorySlug,
+  })
+
+  const heroArticle = heroData?.data?.[0]
+  const articles = articlesData?.data || []
+
+  if (articlesLoading || heroLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-lg">Вчитување...</div>
+      </div>
+    )
+  }
+
+  if (articlesError) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-lg text-red-500">Грешка при вчитување на статии</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Category Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold">{categoryName}</h1>
+        {categoryDescription && (
+          <p className="text-muted-foreground mt-2">{categoryDescription}</p>
+        )}
+      </div>
+
+      {/* Hero Section with Pinned Live Blogs Sidebar */}
+      {heroArticle && (
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
+          {/* Hero Article - 2/3 width */}
+          <div className="lg:col-span-2">
+            <div className="rounded-xl border bg-card overflow-hidden group hover:shadow-lg transition-shadow">
+              <Link to={`/articles/${heroArticle.id}`} className="block">
+                {heroArticle.featuredImage ? (
+                  <div className="relative h-64 md:h-80 overflow-hidden">
+                    <img
+                      src={heroArticle.featuredImage}
+                      alt={heroArticle.title}
+                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
+                  </div>
+                ) : (
+                  <div className="h-64 md:h-80 bg-gradient-to-br from-primary/10 to-primary/5 flex items-center justify-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" className="text-primary/30">
+                      <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2" />
+                      <path d="M18 14h-8" />
+                      <path d="M15 18h-5" />
+                      <path d="M10 6h8v4h-8V6Z" />
+                    </svg>
+                  </div>
+                )}
+              </Link>
+              
+              <div className="p-6">
+                <Link to={`/articles/${heroArticle.id}`} className="block">
+                  <h2 className="text-2xl font-bold mb-3 group-hover:text-primary transition-colors">
+                    {heroArticle.title}
+                  </h2>
+                  {heroArticle.excerpt && (
+                    <p className="text-muted-foreground mb-4 line-clamp-3">
+                      {heroArticle.excerpt}
+                    </p>
+                  )}
+                </Link>
+                
+                <div className="flex items-center justify-between text-sm text-muted-foreground">
+                  <div className="flex items-center space-x-4">
+                    <span>
+                      {new Date(heroArticle.createdAt).toLocaleDateString('mk-MK', {
+                        day: 'numeric',
+                        month: 'short',
+                        year: 'numeric',
+                      })}
+                    </span>
+                    <span>•</span>
+                    <span>{heroArticle.views} прегледи</span>
+                  </div>
+                  
+                  <SocialShareButtons
+                    articleId={heroArticle.id}
+                    title={heroArticle.title}
+                    url={`${window.location.origin}/articles/${heroArticle.id}`}
+                    excerpt={heroArticle.excerpt}
+                    image={heroArticle.featuredImage}
+                    tags={heroArticle.tags}
+                    variant="compact"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          {/* Pinned Live Blogs Sidebar - 1/3 width */}
+          <div className="lg:col-span-1">
+            <PinnedLiveBlogsSidebar />
+          </div>
+        </div>
+      )}
+
+      {/* Articles Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {articles
+          .filter(article => article.id !== heroArticle?.id) // Exclude hero article from grid
+          .map((article) => (
+            <div
+              key={article.id}
+              className="p-6 rounded-xl border bg-card hover:shadow-lg transition-shadow group"
+            >
+              <Link
+                to={`/articles/${article.id}`}
+                className="block mb-4"
+              >
+                <h2 className="text-xl font-semibold mb-2 line-clamp-2 group-hover:text-primary transition-colors">
+                  {article.title}
+                </h2>
+                {article.excerpt && (
+                  <p className="text-muted-foreground text-sm mb-4 line-clamp-3">
+                    {article.excerpt}
+                  </p>
+                )}
+              </Link>
+              
+              <div className="flex items-center justify-between text-sm text-muted-foreground">
+                <div className="flex items-center space-x-4">
+                  <span>
+                    {new Date(article.createdAt).toLocaleDateString('mk-MK', {
+                      day: 'numeric',
+                      month: 'short',
+                      year: 'numeric',
+                    })}
+                  </span>
+                  <span>•</span>
+                  <span>{article.views} прегледи</span>
+                </div>
+                
+                <SocialShareButtons
+                  articleId={article.id}
+                  title={article.title}
+                  url={`${window.location.origin}/articles/${article.id}`}
+                  excerpt={article.excerpt}
+                  image={article.featuredImage}
+                  tags={article.tags}
+                  variant="compact"
+                />
+              </div>
+            </div>
+          ))}
+      </div>
+
+      {articles.length === 0 && (
+        <div className="text-center py-12">
+          <p className="text-muted-foreground text-lg">
+            Нема објавени статии во оваа категорија. Проверете подоцна!
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/routes/LiveBlogsComponent.tsx

@@ -36,11 +36,12 @@ export function LiveBlogsComponent() {
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {data?.data.map((liveBlog) => (
-          <Link
-            key={liveBlog.id}
-            to={`/live-blogs/${liveBlog.slug}`}
-            className="p-6 rounded-xl border bg-card hover:shadow-lg transition-shadow cursor-pointer block"
-          >
+           <Link
+             key={liveBlog.id}
+             to="/live-blogs/$slug"
+             params={{ slug: liveBlog.slug }}
+             className="p-6 rounded-xl border bg-card hover:shadow-lg transition-shadow cursor-pointer block"
+           >
             <div className="flex items-start justify-between mb-4">
               <div className="flex-1">
                 <div className="flex items-center gap-2 mb-2">