HTTP Tiger Blueprint

· 3 min · httptiger.com

Architecture

Frontend: Tailwind CSS + Vanilla JS → S3/CloudFront
Backend:  API Gateway → Lambda → DynamoDB
Config:   SSM Parameter Store
Auth:     Google OAuth + JWT

Frontend Design System

Built with Tailwind CSS for rapid development. The UI uses a consistent design language across the URL checker, results display, and dashboard views.

/* Result status indicators */
.status-badge {
    @apply inline-flex items-center px-2.5 py-0.5
           rounded-full text-xs font-medium;
}
.status-success { @apply bg-green-100 text-green-800; }
.status-error { @apply bg-red-100 text-red-800; }

Progressive Results

Instead of waiting for all URLs to finish, results stream into the UI as each check completes. This keeps the interface responsive during large batch operations.

function updateProgress(completed, total) {
    const pct = (completed / total) * 100;
    progressBar.style.width = `${pct}%`;
    progressText.textContent = `${completed}/${total} checked`;
}

Key Features