sample-example

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

# 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

REACT_APP_API_URL=http://backend:5000  # API endpoint

Backend

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

Database

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

🐳 Docker Commands

Build individual images:

# Frontend
docker build -t byop-sample-frontend ./frontend

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

Run with Docker Compose:

# 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

# 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! 🎉