Setup Comprehensive CI/CD Pipeline for Frontend, Backend & Contracts

[grantfox-oss]

Type: DevOps | Priority: HIGH | Effort: 10 hours
Component: .github/workflows/, CI configuration files

Problem:
No unified CI/CD pipeline covering all project components. Quality issues slip through to production:

• No automated testing before merge
• Breaking changes deployed to production
• Security vulnerabilities not caught early
• Type errors in TypeScript not detected
• Contract regressions not prevented
• Inconsistent code style across team
• No build verification before deployment
• Manual testing is time-consuming and error-prone

Current State:

• Backend CI exists but incomplete (Issue [Contract] Add Metadata Support for Stream References #14)
• Frontend CI missing entirely
• Contract CI missing entirely
• No integration between different CI jobs
• No deployment automation
• Manual quality gates

Desired State:
Comprehensive, automated CI/CD pipeline that:

• Runs on every pull request and push to main
• Tests all components (frontend, backend, contracts)
• Enforces code quality standards
• Provides fast feedback (< 10 minutes)
• Prevents broken code from merging
• Automates deployments after successful builds

Acceptance Criteria:

1. Frontend CI Pipeline (.github/workflows/frontend-ci.yml)

• Lint Check:
  • ESLint with strict rules
  • Prettier code formatting check
  • Import ordering validation
  • Fail on warnings in CI
• Type Check:
  • TypeScript strict mode compilation
  • No implicit any types
  • Check all .ts/.tsx files
• Unit Tests:
  • Run Vitest test suite
  • Generate coverage report
  • Fail if coverage < 70%
  • Upload coverage to Codecov
• Build Verification:
  • Next.js production build
  • Check bundle size (fail if > 500KB increase)
  • Generate build artifacts
  • Verify no build warnings
• E2E Tests (on main branch only):
  • Run Cypress tests
  • Test critical user flows
  • Screenshot on failure
• Security Scanning:
  • npm audit for vulnerabilities
  • Dependency license check
  • Secret detection
• Performance Check:
  • Lighthouse CI
  • Core Web Vitals check
  • Fail if performance score < 90
• Parallel Execution:
  • Run lint, type-check, test in parallel
  • Total time < 8 minutes
• Caching:
  • Cache node_modules
  • Cache Next.js build cache
  • Cache Cypress binary

2. Backend CI Pipeline (.github/workflows/backend-ci.yml)

• Lint Check:
  • ESLint on all .ts files
  • Prettier formatting check
  • Fail on any lint errors
• Type Check:
  • TypeScript compilation
  • Strict mode enabled
  • Check migrations
• Unit Tests:
  • Run Jest test suite
  • Minimum 70% coverage
  • Upload coverage report
  • Test individual services
• Integration Tests:
  • Run with test database
  • Test API endpoints
  • Test database operations
  • Transaction rollback after tests
• Build Verification:
  • Compile TypeScript
  • Check for build errors
  • Verify all dependencies resolve
• Database Migration Tests:
  • Run migrations on test DB
  • Verify schema changes
  • Test rollback procedures
• Security Scanning:
  • npm audit
  • OWASP dependency check
  • Secret scanning
  • SQL injection detection
• API Contract Testing:
  • Verify OpenAPI spec
  • Test against contracts
  • Breaking change detection
• Docker Build:
  • Build Docker image
  • Scan for vulnerabilities
  • Push to registry on success
• Performance:
  • Parallel test execution
  • Total time < 10 minutes

3. Smart Contract CI Pipeline (.github/workflows/contracts-ci.yml)

• Rust Format Check:
  • cargo fmt --check
  • Enforce consistent formatting
• Rust Clippy Linting:
  • cargo clippy --all-targets
  • Fail on warnings
  • Check for common mistakes
• Build Verification:
  • cargo build --release
  • Verify all contracts compile
  • Check WASM output size
• Unit Tests:
  • cargo test --all
  • Run snapshot tests
  • 90% coverage requirement
• Integration Tests:
  • Test contract interactions
  • V1 + V3 integration
  • Nested split scenarios
• Fuzz Testing:
  • Run property-based tests
  • Test with random inputs
  • Check invariants
• Security Audit:
  • cargo audit for vulnerabilities
  • Check for unsafe code usage
  • Reentrancy detection
  • Overflow detection
• Gas Benchmarking:
  • Measure gas usage per function
  • Fail if > 10% regression
  • Generate benchmark report
• Performance:
  • Parallel test execution
  • Total time < 12 minutes

4. Unified Quality Gate (.github/workflows/quality-gate.yml)

• All Checks Must Pass:
  • Frontend CI ✓
  • Backend CI ✓
  • Contracts CI ✓
• Pull Request Requirements:
  • All tests passing
  • No security vulnerabilities
  • Coverage thresholds met
  • No linting errors
  • Approved by 1+ reviewers
• Branch Protection:
  • Require status checks
  • Require up-to-date branches
  • No force pushes to main
  • Require signed commits
• Automated Comments:
  • Post coverage report on PR
  • Post bundle size changes
  • Post gas usage changes
  • Link to deployment preview

5. Deployment Pipeline (.github/workflows/deploy.yml)

• Staging Deployment (on PR):
  • Deploy frontend to Vercel preview
  • Deploy backend to staging environment
  • Run smoke tests
  • Comment preview URL on PR
• Production Deployment (on main merge):
  • Deploy frontend to Vercel production
  • Deploy backend with blue-green strategy
  • Run health checks
  • Rollback on failure
  • Notify team on success/failure

Workflow Structure:

# .github/workflows/frontend-ci.yml
name: Frontend CI

on:
  pull_request:
    paths:
      - 'frontend/**'
      - '.github/workflows/frontend-ci.yml'
  push:
    branches: [main]
    paths:
      - 'frontend/**'

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
          cache-dependency-path: frontend/package-lock.json
      - run: cd frontend && npm ci
      - run: cd frontend && npm run lint
      - run: cd frontend && npm run format:check

  type-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: cd frontend && npm ci
      - run: cd frontend && npm run type-check

  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: cd frontend && npm ci
      - run: cd frontend && npm run test -- --coverage
      - uses: codecov/codecov-action@v3
        with:
          files: ./frontend/coverage/coverage-final.json
          fail_ci_if_error: true

  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: cd frontend && npm ci
      - run: cd frontend && npm run build
      - uses: actions/upload-artifact@v3
        with:
          name: frontend-build
          path: frontend/.next

  security:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: cd frontend && npm ci
      - run: cd frontend && npm audit --audit-level=high
      - uses: trufflesecurity/trufflehog@main
        with:
          path: ./frontend

# .github/workflows/backend-ci.yml
name: Backend CI

on:
  pull_request:
    paths:
      - 'backend/**'
  push:
    branches: [main]
    paths:
      - 'backend/**'

jobs:
  lint-and-test:
    runs-on: ubuntu-latest
    services:
      postgres:
        image: postgres:15
        env:
          POSTGRES_PASSWORD: test_password
          POSTGRES_DB: test_db
        options: >-
          --health-cmd pg_isready
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5
      redis:
        image: redis:7
        options: >-
          --health-cmd "redis-cli ping"
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5
    
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: cd backend && npm ci
      - run: cd backend && npm run lint
      - run: cd backend && npm run type-check
      - run: cd backend && npm run test -- --coverage
        env:
          DATABASE_URL: postgresql://postgres:test_password@localhost:5432/test_db
          REDIS_URL: redis://localhost:6379
      - run: cd backend && npm run test:integration

# .github/workflows/contracts-ci.yml
name: Contracts CI

on:
  pull_request:
    paths:
      - 'contracts/**'
  push:
    branches: [main]
    paths:
      - 'contracts/**'

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions-rs/toolchain@v1
        with:
          toolchain: stable
          components: rustfmt, clippy
      - uses: Swatinem/rust-cache@v2
      
      - name: Format Check
        run: cd contracts && cargo fmt --all -- --check
      
      - name: Clippy
        run: cd contracts && cargo clippy --all-targets -- -D warnings
      
      - name: Build
        run: cd contracts && cargo build --release
      
      - name: Run Tests
        run: cd contracts && cargo test --all
      
      - name: Security Audit
        run: cd contracts && cargo audit
      
      - name: Gas Benchmarks
        run: cd contracts && cargo bench --no-run

Success Metrics:

• CI runs on 100% of pull requests
• CI failure rate < 5% (false positives)
• Average CI runtime < 10 minutes
• Zero broken builds reach main branch
• Deployment success rate > 99%
• Team satisfaction with CI/CD: 8/10+

Related Files:

• .github/workflows/frontend-ci.yml (create)
• .github/workflows/backend-ci.yml (update from Issue [Contract] Add Metadata Support for Stream References #14)
• .github/workflows/contracts-ci.yml (create)
• .github/workflows/quality-gate.yml (create)
• .github/workflows/deploy.yml (create)
• docs/CI_CD_GUIDE.md (create documentation)

Documentation Requirements:

• CI/CD architecture diagram
• How to run CI locally
• Troubleshooting failed builds
• Adding new checks
• Deployment procedures
• Rollback procedures

[2TheMoom]

I maintain six live products across multiple chains simultaneously (Vercel + Railway deployments), including Soroban/Stellar smart contracts, Next.js frontends, and Node.js backends. I've directly managed CI gaps -- broken deploys, missing test gates, and contract regressions -- so this issue maps to real pain I've solved.

I'll implement all five workflow files: frontend-ci.yml (ESLint, Vitest, Next.js build, Lighthouse CI), backend-ci.yml (Jest + Postgres/Redis service containers, migration tests), contracts-ci.yml (cargo fmt, clippy, cargo test, cargo audit), quality-gate.yml (unified status checks, branch protection), and deploy.yml (Vercel preview on PR, production on main merge with rollback). Plus docs/CI_CD_GUIDE.md. PR within 48 hours.

[Franker24]

Hi! I'd like to work on this issue.

I have experience working with TypeScript, React, Next.js, automated testing, ESLint, Prettier, and GitHub-based collaborative workflows. Recently I've contributed to several open-source issues involving component development, refactoring, accessibility improvements, unit testing, and CI-related quality checks.

For this task, I'll implement the requested GitHub Actions workflows in a clean and modular way, ensuring the frontend, backend, and smart contracts are validated independently while keeping the pipeline efficient through parallel jobs and caching. I'll also verify that quality gates, deployment workflows, and documentation are properly integrated without disrupting the existing project structure.

My focus is to deliver a maintainable, well-documented solution that satisfies all acceptance criteria and is easy for the team to extend in the future. I'm comfortable following contribution guidelines, writing clear commits, and ensuring the pipeline is reliable before opening the PR.

I'd be happy to work on this enhancement. Thank you for your consideration!

[grantfox-oss]

🦊 GrantFox — @Franker24 has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #1231)
2. Your PR will be reviewed by the StellarStream-HQ maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@Franker24's PR #1237 was approved and merged by @Folex1275.

🏆 @Franker24: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (86 total points). Track your full progress on GrantFox.

👏 Great work, @Franker24! Keep contributing to StellarStream-HQ.