This document describes the hosting architecture, environment configuration, CI/CD pipeline, and verification checklists for deploying the URL Shortener frontend application.

1. Hosting Architecture

The URL Shortener frontend is hosted on Vercel, which provides native optimization and serverless hosting capabilities for Next.js applications:

• Global CDN Edge Network: Static assets and page files are served directly from edge locations worldwide, minimizing latency.
• Serverless Functions: Next.js App Router API or serverless assets scale automatically without server management.
• Preview Deployments: Every pull request automatically spins up a sandboxed preview environment, allowing pre-merge visual validation.

2. CI/CD Integration Workflow

Our automated deployment pipeline operates via GitHub + Vercel Integration.

graph TD
    A[Developer Push] --> B[GitHub Repository]
    B --> C[Vercel Build Trigger]

    subgraph Vercel ["Vercel Build Phase"]
        C --> D["1. Dependency Install"]
        D --> E["2. Code Linting & Static Types"]
        E --> F["3. Jest Tests"]
        F --> G["4. Build Bundling"]
    end

    G --> H[Deploy Live]

    style A fill:#f9f9f9,stroke:#333,stroke-width:2px
    style B fill:#e1f5fe,stroke:#0288d1,stroke-width:2px
    style C fill:#fff9c4,stroke:#fbc02d,stroke-width:2px
    style H fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
    style Vercel fill:#f5f5f5,stroke:#9e9e9e,stroke-width:1px,stroke-dasharray: 5 5

Pipeline Lifecycle Stages

1. Lint & Type Validation: Runs npm run lint and TypeScript check (tsc) to block builds with syntax errors or code smell.
2. Automated Testing: Runs npm run test to verify unit and integration tests.
3. Production Bundling: Executes next build, which optimizes images, compiles styles, minifies JavaScript, and outputs static pages.

3. Environment Variables Configuration

The frontend communicates with the backend API via HTTP. The URL must be configured correctly depending on the target environment.

Target Environment Variable

• Name: NEXT_PUBLIC_API_URL