ci-cd.yml

name: SkyNest Frontend CI/CD

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

jobs:
  # Frontend Build and Test
  build:
    name: Build React Application
    runs-on: ubuntu-latest
    
    steps:
      - name: 📥 Checkout repository
        uses: actions/checkout@v4
      
      - name: 🟢 Setup Node.js 18
        uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: 📦 Install dependencies
        run: |
          echo "Installing frontend dependencies..."
          npm ci
      
      - name: 🏗️ Build React application
        run: |
          echo "Building production bundle..."
          npm run build
        env:
          CI: false
          NODE_ENV: production
      
      - name: 📊 Build size report
        run: |
          echo "Build artifacts created:"
          ls -lh build/
          du -sh build/
      
      - name: 📤 Upload build artifacts
        uses: actions/upload-artifact@v4
        with:
          name: react-build-${{ github.sha }}
          path: build/
          retention-days: 7

  # Code Quality Analysis
  quality:
    name: Code Quality Check
    runs-on: ubuntu-latest
    
    steps:
      - name: 📥 Checkout repository
        uses: actions/checkout@v4
      
      - name: 📁 Validate project structure
        run: |
          echo "📁 Checking frontend structure..."
          echo "----------------------------------------"
          
          # Check required directories
          test -d src && echo "✅ src/ directory exists" || echo "❌ src/ directory missing"
          test -d public && echo "✅ public/ directory exists" || echo "❌ public/ directory missing"
          test -f package.json && echo "✅ package.json exists" || echo "❌ package.json missing"
          
          # List structure
          echo ""
          echo "Frontend structure:"
          ls -la src/ 2>/dev/null || echo "Cannot list src/"
          echo ""
          echo "Public files:"
          ls -la public/ 2>/dev/null || echo "Cannot list public/"
      
      - name: 🔍 Check for development artifacts
        run: |
          echo "🔍 Scanning for development artifacts..."
          
          # Check for console.log (non-blocking)
          echo "Checking for console.log statements:"
          grep -rn "console\.log" src/ --include="*.js" --include="*.jsx" || echo "✅ No console.log found"
          
          # Check for debugger statements
          echo ""
          echo "Checking for debugger statements:"
          grep -rn "debugger" src/ --include="*.js" --include="*.jsx" || echo "✅ No debugger statements found"
          
          # Check for TODO/FIXME comments
          echo ""
          echo "Checking for TODO/FIXME comments:"
          grep -rn "TODO\|FIXME" src/ --include="*.js" --include="*.jsx" || echo "✅ No TODO/FIXME found"
        continue-on-error: true

  # Security Scanning
  security:
    name: Security Analysis
    runs-on: ubuntu-latest
    
    steps:
      - name: 📥 Checkout repository
        uses: actions/checkout@v4
      
      - name: 🟢 Setup Node.js 18
        uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: 📦 Install dependencies
        run: npm ci
      
      - name: 🔒 Run npm audit
        run: |
          echo "Running security audit for frontend dependencies..."
          npm audit --production --audit-level=moderate || echo "⚠️ Vulnerabilities detected, review required"
        continue-on-error: true
      
      - name: 🔐 Check for sensitive data
        run: |
          echo "🔐 Scanning for potential security issues..."
          echo "----------------------------------------"
          
          # Check for hardcoded passwords
          echo "Checking for hardcoded passwords..."
          grep -rn "password\s*=\s*['\"]" src/ --include="*.js" --include="*.jsx" || echo "✅ No hardcoded passwords"
          
          # Check for API keys
          echo ""
          echo "Checking for hardcoded API keys..."
          grep -rn "api[_-]key\s*=\s*['\"]" src/ --include="*.js" --include="*.jsx" || echo "✅ No hardcoded API keys"
          
          # Check for tokens
          echo ""
          echo "Checking for hardcoded tokens..."
          grep -rn "token\s*=\s*['\"]" src/ --include="*.js" --include="*.jsx" || echo "✅ No hardcoded tokens"
        continue-on-error: true

  # Deploy to GitHub Pages
  deploy:
    name: Deploy to GitHub Pages
    runs-on: ubuntu-latest
    needs: [build]
    if: github.ref == 'refs/heads/main' && needs.build.result == 'success'
    permissions:
      contents: write
    
    steps:
      - name: 📥 Checkout repository
        uses: actions/checkout@v4
      
      - name: 🟢 Setup Node.js 18
        uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: 📦 Install dependencies
        run: npm ci
      
      - name: 🏗️ Build with production env
        run: npm run build
        env:
          CI: false
          NODE_ENV: production
          REACT_APP_API_BASE: https://skynest-backend-api.onrender.com
          REACT_APP_ENV: production
          REACT_APP_DEBUG: false
      
      - name: 🚀 Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build
          publish_branch: gh-pages
          user_name: 'github-actions[bot]'
          user_email: 'github-actions[bot]@users.noreply.github.com'
          commit_message: 'Deploy from main: ${{ github.event.head_commit.message }}'

  # Final Report
  report:
    name: Pipeline Summary
    runs-on: ubuntu-latest
    needs: [build, quality, security, deploy]
    if: always()
    
    steps:
      - name: 📊 Generate Summary Report
        run: |
          echo "========================================"
          echo "   SkyNest Frontend CI/CD Pipeline     "
          echo "========================================"
          echo ""
          echo "Pipeline Results:"
          echo "  🏗️  Build:    ${{ needs.build.result }}"
          echo "  📊 Quality:   ${{ needs.quality.result }}"
          echo "  🔒 Security:  ${{ needs.security.result }}"
          echo "  🚀 Deploy:    ${{ needs.deploy.result }}"
          echo ""
          echo "Repository: ${{ github.repository }}"
          echo "Branch:     ${{ github.ref_name }}"
          echo "Commit:     ${{ github.sha }}"
          echo "Author:     ${{ github.actor }}"
          echo "========================================"
          
          if [ "${{ needs.build.result }}" == "success" ]; then
            echo "✅ Frontend build completed successfully!"
            echo "✅ React application is ready for deployment"
            if [ "${{ needs.deploy.result }}" == "success" ]; then
              echo "✅ Deployed to GitHub Pages!"
            fi
            echo ""
            echo "💡 Backend validation runs in separate repository:"
            echo "   https://github.com/${{ github.repository_owner }}/Database-Back"
          else
            echo "❌ Build failed - please check the logs above"
            exit 1
          fi
      
      - name: 📝 Create GitHub Summary
        run: |
          echo "## 🎯 SkyNest Frontend CI/CD Report" >> $GITHUB_STEP_SUMMARY
          echo "" >> $GITHUB_STEP_SUMMARY
          echo "### Pipeline Status" >> $GITHUB_STEP_SUMMARY
          echo "" >> $GITHUB_STEP_SUMMARY
          echo "| Job | Status |" >> $GITHUB_STEP_SUMMARY
          echo "|-----|--------|" >> $GITHUB_STEP_SUMMARY
          echo "| 🏗️ Build | ${{ needs.build.result }} |" >> $GITHUB_STEP_SUMMARY
          echo "| 📊 Quality | ${{ needs.quality.result }} |" >> $GITHUB_STEP_SUMMARY
          echo "| 🔒 Security | ${{ needs.security.result }} |" >> $GITHUB_STEP_SUMMARY
          echo "| 🚀 Deploy | ${{ needs.deploy.result }} |" >> $GITHUB_STEP_SUMMARY
          echo "" >> $GITHUB_STEP_SUMMARY
          
          if [ "${{ needs.build.result }}" == "success" ]; then
            echo "### ✅ Build Successful!" >> $GITHUB_STEP_SUMMARY
            echo "" >> $GITHUB_STEP_SUMMARY
            echo "- React application built successfully" >> $GITHUB_STEP_SUMMARY
            echo "- Production bundle ready for deployment" >> $GITHUB_STEP_SUMMARY
            echo "- All frontend checks passed" >> $GITHUB_STEP_SUMMARY
            
            if [ "${{ needs.deploy.result }}" == "success" ]; then
              echo "- ✅ **Deployed to GitHub Pages**" >> $GITHUB_STEP_SUMMARY
              echo "" >> $GITHUB_STEP_SUMMARY
              echo "🌐 **Live URL:** https://${{ github.repository_owner }}.github.io/Database-Project" >> $GITHUB_STEP_SUMMARY
            fi
            
            echo "" >> $GITHUB_STEP_SUMMARY
            echo "---" >> $GITHUB_STEP_SUMMARY
            echo "" >> $GITHUB_STEP_SUMMARY
            echo "💡 **Note:** Backend validation runs separately in [Database-Back](https://github.com/${{ github.repository_owner }}/Database-Back) repository" >> $GITHUB_STEP_SUMMARY
          else
            echo "### ❌ Build Failed" >> $GITHUB_STEP_SUMMARY
            echo "" >> $GITHUB_STEP_SUMMARY
            echo "Please review the error logs above and fix the issues." >> $GITHUB_STEP_SUMMARY
          fi