From Idea to Production: My DevOps Workflow

# Main branches
main           # Production-ready code
develop         # Development integration

# Feature branches
feature/project-name
fix/bug-description
hotfix/urgent-fix

# Format: <type>(<scope>): <description>
feat(auth): add OAuth2 login flow
fix(api): resolve rate limiting bug
docs(readme): update installation steps
test(auth): add user session tests
security(api): sanitize SQL queries

# Install and set up Husky
npm install husky --save-dev
npx husky init

# Create pre-commit hook
echo "npm run lint && npm run typecheck" > .husky/pre-commit

# .github/workflows/ci.yml
name: CI

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

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
      matrix:
        node-version: [18.x, 20.x, 22.x]

    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'yarn'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Run linter
        run: yarn lint

      - name: Build project
        run: yarn build

      - name: Run tests
        run: yarn test

# .github/workflows/security-scan.yml
name: Security Scan

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main, develop]
  schedule:
    # Run weekly on Sundays at 2 AM UTC
    - cron: '0 2 * * 0'

jobs:
  trivy:
    name: Trivy vulnerability scanner
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write
      security-events: write

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Run Trivy vulnerability scanner
        uses: aquasecurity/trivy-action@master
        with:
          scan-type: 'fs'
          scan-ref: '.'
          format: 'sarif'
          output: 'trivy-results.sarif'
          severity: 'CRITICAL,HIGH'

      - name: Upload Trivy scan results to GitHub Security tab
        uses: github/codeql-action/upload-sarif@v3
        if: always()
        with:
          sarif_file: 'trivy-results.sarif'
          category: 'Trivy'

      - name: Comment PR on failure
        if: failure() && github.event_name == 'pull_request'
        uses: actions/github-script@v7
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: `⚠️ Security vulnerabilities detected! Please review the [Security tab](https://github.com/${context.repo.owner}/${context.repo.repo}/security/code-scanning) for details.`
            })

# .github/workflows/claude-code-review.yml
name: Claude Code Review

on:
  pull_request:
    types: [opened, synchronize]

jobs:
  claude-review:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: read
      issues: read
      id-token: write

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          fetch-depth: 1

      - name: Run Claude Code Review
        uses: anthropics/claude-code-action@beta
        with:
          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
          direct_prompt: |
            Please review this pull request and provide feedback on:
            - Code quality and best practices
            - Potential bugs or issues
            - Performance considerations
            - Security concerns
            - Test coverage

            Be constructive and helpful in your feedback.

// next.config.js
module.exports = {
  reactStrictMode: true,

  // Use Preact in production for smaller bundle
  webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
      Object.assign(config.resolve.alias, {
        react: 'preact/compat',
        'react-dom': 'preact/compat',
      })
    }

    return config
  },
}

// next.config.js
const securityHeaders = [
  {
    key: 'Content-Security-Policy',
    value:
      'default-src "self"; script-src "self" "unsafe-eval" giscus.app analytics.ahrefs.com; style-src "self" "unsafe-inline" cdn.jsdelivr.net; img-src * data:;',
  },
  {
    key: 'Strict-Transport-Security',
    value: 'max-age=31536000; includeSubDomains; preload',
  },
  {
    key: 'X-Frame-Options',
    value: 'DENY',
  },
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff',
  },
]

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: securityHeaders,
      },
    ]
  },
}

# Dockerfile for Node.js service
FROM node:18-alpine

WORKDIR /app

# Install ALL dependencies (including devDependencies for build)
COPY package*.json ./
RUN npm ci

# Copy source with correct ownership
COPY --chown=node:node . .

# Build the project
RUN npm run build

# Remove devDependencies after build
RUN npm prune --production

# Expose port
EXPOSE 3000

# Non-root user for security
USER node

CMD ["npm", "start"]

# docker-compose.yml
services:
  app:
    build: .
    ports:
      - '3000:3000'
    environment:
      - NODE_ENV=development
      - DATABASE_URL=${DATABASE_URL}
    depends_on:
      - db

  db:
    image: postgres:15-alpine
    environment:
      - POSTGRES_PASSWORD=${DB_PASSWORD}
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

- name: Upload Trivy scan results to GitHub Security tab
  uses: github/codeql-action/upload-sarif@v3
  if: always()
  with:
    sarif_file: 'trivy-results.sarif'
    category: 'Trivy'

// renovate.json
{
  "extends": ["config:base"],
  "schedule": ["every weekend"],
  "automerge": false,
  "prConcurrentLimit": 5,
  "labels": ["dependencies"]
}

// Error boundary example
class ErrorBoundary extends React.Component {
  state = { hasError: false, error: null }

  static getDerivedStateFromError(error) {
    return { hasError: true, error }
  }

  componentDidCatch(error, errorInfo) {
    // Log to error tracking service
    logError({
      error: error.toString(),
      stack: error.stack,
      componentStack: errorInfo.componentStack,
      userAgent: navigator.userAgent,
      url: window.location.href,
      timestamp: new Date().toISOString(),
    })
  }

  render() {
    if (this.state.hasError) {
      return <div>Something went wrong. Please refresh the page.</div>
    }
    return this.props.children
  }
}

# 1. Create feature branch
git checkout -b fix/login-timeout

# 2. Make changes
# ... edit code ...

# 3. Pre-commit hooks run
git add .
git commit -m "fix(auth): resolve session timeout issue"
# → Husky runs: npm run lint && npm run typecheck

# 4. Push to remote
git push origin fix/login-timeout

# 5. Open PR on GitHub
# → Automatically triggers:
#   • Matrix tests (Node 18, 20, 22)
#   • Trivy security scan
#   • Claude code review

# 6. Review feedback
# → Claude comments: "Potential race condition in line 42"
# → Security scan: "No vulnerabilities found"

# 7. Fix feedback
# ... edit code ...
git commit -m "fix(auth): address race condition in session check"
git push

# 8. CI passes, merge to main
# → Triggers Vercel deployment

# 9. Production deployment
# → Vercel builds and deploys in ~3 minutes
# → Zero downtime with preview deployments

# 10. Monitor
# → Error tracking confirms fix resolved
# → Security tab shows no new vulnerabilities

# Future workflow
- name: Deploy canary
  run: |
    # Deploy to 10% of traffic
    kubectl patch deployment -p '{"spec":{"replicas":1}}'
    wait 10 minutes
    check_error_rate()
    if error_rate > threshold:
      rollback()
    else:
      full_rollout()

# Create .github/workflows/ci.yml
# Copy matrix testing workflow from above

# Create .github/workflows/security-scan.yml
# Copy Trivy workflow from above

npm install -g vercel
vercel login
vercel link

npm install husky lint-staged --save-dev
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

# Create a test branch
git checkout -b test-pipeline

# Make a trivial change
echo "test" > test.txt
git add test.txt
git commit -m "test(ci): verify pipeline"

# Push and watch everything run
git push origin test-pipeline