Add React frontend to Docker Compose

- Created frontend/Dockerfile with multi-stage build for optimized production bundle
- Created frontend/.dockerignore to exclude node_modules and build artifacts
- Added frontend service to docker-compose.yml with:
  - Auto-build from frontend/Dockerfile
  - Port 3000 mapping
  - Health checks (wget to http://localhost:3000)
  - Dependency on healthy Kafka and Redis
  - Production environment (NODE_ENV=production)
  - Auto-restart on failure
  - Proper network connectivity
- Created DOCKER_QUICK_START.md with simplified setup guide:
  - Single docker compose up starts infrastructure + frontend
  - Cleaner workflow (2-3 terminals instead of 4)
  - Production-like testing (not dev mode)
  - Complete troubleshooting section
- Updated FULLSTACK_GUIDE.md to highlight Docker-integrated frontend
- Frontend now runs as optimized 63KB gzip production build in Docker

All components now start together:
  docker compose up      # Infrastructure + React frontend (Docker)
  uvicorn api.main:app   # API (your terminal)
  python pipeline.py     # Consumer (your terminal)

Access frontend at: http://localhost:3000

Co-authored-by: Copilot <[email protected]>

DOCKER_QUICK_START.md

@@ -0,0 +1,239 @@
+# PayGuard Docker-Complete Quick Start
+
+Run the **entire system** (Infrastructure + API + Frontend) with a single Docker command.
+
+## What's Included
+
+```
+docker compose up
+    ├─ Zookeeper (port 2181)
+    ├─ Kafka (port 9092)
+    ├─ Redis (port 6379)
+    └─ React Frontend (port 3000) ✨ NEW!
+```
+
+## Prerequisites
+
+- **Docker Desktop** installed and running
+- **Python 3.9+** (for API and consumer - run separately)
+- **Terminal** (you'll need 2-3 windows)
+
+## Super Quick Start (3 Steps)
+
+### Step 1: Start Docker Infrastructure + Frontend
+
+```bash
+cd /Users/pat/Projects/PAT/payguard-poc
+docker compose up
+```
+
+**Wait for output:**
+```
+frontend    | ✓ Ready on http://0.0.0.0:3000
+```
+
+This starts:
+- ✅ Zookeeper
+- ✅ Kafka
+- ✅ Redis
+- ✅ React Frontend (auto-built and running)
+
+### Step 2: Start API (New Terminal)
+
+```bash
+source venv/bin/activate
+uvicorn api.main:app --reload --port 8000
+```
+
+### Step 3: Start Consumer (New Terminal)
+
+```bash
+cd consumer
+python pipeline.py
+```
+
+## Access the System
+
+- **Frontend**: http://localhost:3000
+- **API**: http://localhost:8000
+- **Kafka**: localhost:9092
+- **Redis**: localhost:6379
+
+## Using the Frontend
+
+1. **Frontend loads automatically** at http://localhost:3000
+2. Click "Generate Token"
+3. Select a scenario or enter custom transaction
+4. Click "Submit Transaction"
+5. Watch consumer terminal for 6-step pipeline execution
+
+## What's Different?
+
+### Before (Manual Docker)
+```bash
+docker compose up -d  # Just infra
+npm run dev          # Frontend in dev mode
+uvicorn ...          # API
+cd consumer && python pipeline.py  # Consumer
+```
+
+### Now (Complete Docker)
+```bash
+docker compose up  # Everything (infra + frontend)
+uvicorn ...        # API (separate terminal)
+python pipeline.py # Consumer (separate terminal)
+```
+
+## Docker Compose Features
+
+✅ **Frontend Service**
+- Automatically built from `frontend/Dockerfile`
+- Optimized production build (63KB gzip)
+- Health checks enabled
+- Auto-restart on failure
+- Runs on port 3000
+
+✅ **Service Dependencies**
+- Frontend waits for Kafka and Redis to be healthy
+- Proper startup order maintained
+- All services on `payguard-network`
+
+✅ **Health Checks**
+- Zookeeper: Ready when port 2181 responds
+- Kafka: Ready when broker API responds
+- Redis: Ready when redis-cli ping succeeds
+- Frontend: Ready when HTTP 200 on port 3000
+
+## Commands
+
+```bash
+# Start everything
+docker compose up
+
+# Start in background
+docker compose up -d
+
+# View logs
+docker compose logs -f frontend
+docker compose logs -f kafka
+docker compose logs -f redis
+
+# Stop all services
+docker compose down
+
+# Remove volumes (reset Redis)
+docker compose down -v
+
+# Rebuild frontend (if you change code)
+docker compose up --build frontend
+
+# View service status
+docker compose ps
+```
+
+## Benefits
+
+✨ **Single Command**: Start infra + frontend with one command
+✨ **Faster**: No manual npm dev server startup
+✨ **Cleaner**: One window for infra, one for API, one for consumer
+✨ **Production-Like**: Frontend runs as optimized production build
+✨ **Better Testing**: Test the real build, not dev mode
+✨ **Teamwork**: Non-developers just run `docker compose up`
+
+## Development Notes
+
+If you need to develop the frontend:
+
+```bash
+# Option 1: Stop Docker frontend, run npm dev locally
+docker compose stop frontend
+cd frontend && npm run dev
+
+# Option 2: Rebuild Docker image
+docker compose up --build frontend
+```
+
+## Troubleshooting
+
+### Frontend won't start
+```bash
+docker compose logs frontend
+# Check for build errors
+docker compose up --build frontend
+```
+
+### Frontend can't connect to API
+```bash
+# Make sure API is running
+curl http://localhost:8000/health
+# Should return: {"status": "healthy", ...}
+```
+
+### Port 3000 already in use
+```bash
+# Find and kill process
+kill -9 $(lsof -t -i :3000)
+
+# Or use different port in docker-compose.yml
+# Change: "3000:3000" to "3001:3000"
+```
+
+## Full System Architecture
+
+```
+User Browser
+    ↓
+http://localhost:3000
+    ↓
+    ┌─ React Frontend ────────────────────┐
+    │  (Running in Docker on port 3000)   │
+    └─────────────────┬────────────────────┘
+                      │ REST API calls
+                      ↓
+    ┌─ FastAPI Backend ──────────────────┐
+    │  (Your Python process on port 8000) │
+    └─────────────────┬────────────────────┘
+                      │ Kafka messages
+                      ↓
+    ┌─ Kafka (Docker) ───────────────────┐
+    │  Port: 9092                         │
+    └─────────┬───────────────────────────┘
+              │
+    ┌─────────┴──────────┐
+    ↓                    ↓
+Kafka Topic        Zookeeper
+                  (Docker)
+    
+    Consumer Pipeline (Your Python process)
+    ↓
+    Redis (Docker - Port 6379)
+```
+
+## Next Steps
+
+1. ✅ Run: `docker compose up`
+2. ✅ View: http://localhost:3000
+3. ✅ API: `uvicorn api.main:app --reload`
+4. ✅ Consumer: `cd consumer && python pipeline.py`
+5. ✅ Test: Use frontend to submit transactions
+6. ✅ Watch: Consumer terminal for pipeline execution
+
+---
+
+**Quick Reference:**
+
+| Command | What it does |
+|---------|-------------|
+| `docker compose up` | Start all services (infra + frontend) |
+| `docker compose up -d` | Start in background |
+| `docker compose down` | Stop all services |
+| `docker compose logs -f frontend` | Watch frontend logs |
+| `docker compose ps` | Show service status |
+| `docker compose up --build frontend` | Rebuild frontend |
+
+---
+
+**Support Files:**
+- Full guide: `FULLSTACK_GUIDE.md`
+- Frontend docs: `frontend/README.md`
+- Architecture: `README_IMPLEMENTATION.md`

FULLSTACK_GUIDE.md

@@ -2,6 +2,28 @@
 
 Complete guide for running the PayGuard fraud detection system with the React web interface.
 
+## 🎉 FASTEST START - Docker-Integrated Frontend
+
+**NEW**: The React frontend is now integrated into Docker Compose!
+
+```bash
+# Start EVERYTHING (infrastructure + frontend) with ONE command
+docker compose up
+
+# In another terminal, start the API
+source venv/bin/activate
+uvicorn api.main:app --reload
+
+# In another terminal, start the consumer
+cd consumer && python pipeline.py
+
+# Open browser: http://localhost:3000
+```
+
+✨ **No manual npm dev server needed!** The frontend runs as an optimized production build inside Docker.
+
+For more details: See `DOCKER_QUICK_START.md`
+
 ## System Architecture
 
 ```

docker-compose.yml

@@ -47,6 +47,28 @@ services:
     volumes:
       - redis_data:/data
 
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+    networks:
+      - payguard-network
+    depends_on:
+      kafka:
+        condition: service_healthy
+      redis:
+        condition: service_healthy
+    healthcheck:
+      test: wget --quiet --tries=1 --spider http://localhost:3000 || exit 1
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    environment:
+      - NODE_ENV=production
+    restart: unless-stopped
+
 volumes:
   redis_data:
 

frontend/.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+npm-debug.log
+dist
+.git
+.gitignore
+README.md
+.DS_Store
+.vscode
+.idea
+*.local

frontend/Dockerfile

@@ -0,0 +1,37 @@
+# Stage 1: Build
+FROM node:18-alpine as builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Stage 2: Run
+FROM node:18-alpine
+
+WORKDIR /app
+
+# Install serve to run the application
+RUN npm install -g serve
+
+# Copy built application from builder
+COPY --from=builder /app/dist ./dist
+
+# Expose port
+EXPOSE 3000
+
+# Health check
+HEALTHCHECK --interval=10s --timeout=5s --retries=5 \
+  CMD node -e "require('http').get('http://localhost:3000', (r) => {if (r.statusCode !== 200) throw new Error(r.statusCode)})"
+
+# Start the application
+CMD ["serve", "-s", "dist", "-l", "3000"]