# BYOP Sample Application

A comprehensive multi-component web application designed to test the **Build Your Own Platform (BYOP)** engine. This project demonstrates various deployment scenarios including single-component and multi-component architectures.

## 🏗️ Architecture

This application consists of three main components:

### 🎨 Frontend (Port 3000)
- **Technology**: React 18 + Nginx
- **Features**: Modern responsive UI, API integration, real-time data
- **Build**: Multi-stage Docker build with production optimization

### 🚀 Backend API (Port 5000)
- **Technology**: Node.js + Express + PostgreSQL
- **Features**: RESTful API, database operations, health checks
- **Security**: Helmet, CORS, input validation

### 🗄️ Database (Port 5432)
- **Technology**: PostgreSQL 15
- **Features**: Persistent data storage, initialization scripts, triggers

## 🚀 Quick Start

### Local Development

```bash
# Install all dependencies
npm run install-all

# Start with Docker Compose (recommended)
npm run dev

# Or start services individually
npm run dev-local
```

### BYOP Engine Testing

1. **Import Components**: Import each component separately into BYOP
   - Frontend: `https://github.com/yourusername/byop-sample-app` (frontend folder)
   - Backend: `https://github.com/yourusername/byop-sample-app` (backend folder)
   - Database: Use the provided PostgreSQL configuration

2. **Create Single-Component Apps**: Test individual component deployment
3. **Create Multi-Component Apps**: Test full-stack application deployment

## 📁 Project Structure

```
byop-sample-app/
├── frontend/                 # React application
│   ├── src/
│   │   ├── App.js           # Main application component
│   │   ├── index.js         # React entry point
│   │   └── index.css        # Global styles
│   ├── public/
│   │   └── index.html       # HTML template
│   ├── Dockerfile           # Frontend container
│   ├── nginx.conf          # Nginx configuration
│   └── package.json        # Frontend dependencies
├── backend/                 # Node.js API
│   ├── server.js           # Express server
│   ├── Dockerfile          # Backend container
│   └── package.json        # Backend dependencies
├── database/               # Database configuration
│   └── init.sql           # Database initialization
├── docker-compose.yml     # Multi-service orchestration
├── package.json          # Root project configuration
└── README.md            # This file
```

## 🔗 API Endpoints

### Base URL: `http://localhost:5000`

- `GET /` - API information and health
- `GET /health` - Health check endpoint
- `GET /api/users` - Get all users
- `GET /api/users/:id` - Get user by ID
- `POST /api/users` - Create new user
- `PUT /api/users/:id` - Update user
- `DELETE /api/users/:id` - Delete user
- `GET /api/stats` - Get application statistics

## 🧪 Testing Scenarios

### Single Component Testing

1. **Frontend Only**: Deploy React app with static API mocking
2. **Backend Only**: Deploy API with external database
3. **Database Only**: Deploy PostgreSQL with initialization

### Multi-Component Testing

1. **Frontend + Backend**: Full-stack without database
2. **Backend + Database**: API with persistent storage
3. **Full Stack**: All three components working together

### BYOP-Specific Tests

- ✅ Docker image building from source
- ✅ Component dependency management
- ✅ Environment variable injection
- ✅ Service discovery and networking
- ✅ Traefik routing and SSL termination
- ✅ Health checks and monitoring
- ✅ Graceful shutdown handling

## 🌐 Environment Variables

### Frontend
```bash
REACT_APP_API_URL=http://backend:5000  # API endpoint
```

### Backend
```bash
NODE_ENV=production                    # Environment mode
DATABASE_URL=postgresql://...          # Database connection
JWT_SECRET=your-secret-key            # JWT secret
PORT=5000                             # Server port
```

### Database
```bash
POSTGRES_USER=postgres                # Database user
POSTGRES_PASSWORD=password            # Database password
POSTGRES_DB=byop_sample              # Database name
```

## 🐳 Docker Commands

### Build individual images:
```bash
# Frontend
docker build -t byop-sample-frontend ./frontend

# Backend  
docker build -t byop-sample-backend ./backend
```

### Run with Docker Compose:
```bash
# Start all services
docker-compose up -d

# View logs
docker-compose logs -f

# Stop all services
docker-compose down
```

## 📊 Monitoring

### Health Checks
- Frontend: `http://localhost:3000` (visual health check)
- Backend: `http://localhost:5000/health` (JSON response)
- Database: Connection test via backend API

### Application URLs
- **Frontend**: http://localhost:3000
- **Backend API**: http://localhost:5000
- **Database**: localhost:5432 (admin tools only)

## 🔧 Troubleshooting

### Common Issues

1. **Port conflicts**: Ensure ports 3000, 5000, 5432 are available
2. **Database connection**: Check PostgreSQL is running and accessible
3. **CORS errors**: Verify API_URL configuration in frontend
4. **Build failures**: Check Docker daemon is running

### Debug Commands
```bash
# Check container status
docker-compose ps

# View container logs
docker-compose logs [service-name]

# Exec into container
docker-compose exec [service-name] sh

# Reset everything
docker-compose down -v
docker system prune -f
```

## 🚀 BYOP Engine Integration

This project is specifically designed to test various BYOP engine scenarios:

### Component Import Testing
- Individual component Dockerfile builds
- Multi-stage builds with optimization
- Health check implementation
- Environment variable handling

### App Creation Testing  
- Single-component app deployment
- Multi-component orchestration
- Service-to-service communication
- Database persistence

### Preview Testing
- Traefik routing configuration
- SSL certificate automation
- Custom domain assignment
- Load balancing (if multiple instances)

## 📝 License

MIT License - Feel free to use this project for testing and learning purposes.

## 🤝 Contributing

This is a testing project for the BYOP engine. Feel free to:
- Add more complex scenarios
- Improve error handling
- Add monitoring capabilities
- Create additional microservices

---

**Happy Testing! 🎉**