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]>
This commit is contained in:
John Patrick TeruelandCopilot committed 2026-04-24 19:58:44 +08:00
1 parent 6504ff4c2a
commit e169bc8b36
5 files changed
+330

No files matched your search

+22
View File
@@ -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
```