Cover Craft is a serverless cover image generator built with React, Azure Functions, Azure Queue Storage, MongoDB, and OpenTofu (Terraform-compatible).
It supports fast single-image generation and queued batch processing, with shared validation, accessibility checks, and automated Azure deployment built into the workflow.
Live Project | Full Documentation
| Case Study | Problem | How it was diagnosed | Result |
|---|---|---|---|
| Azure Functions monorepo packaging | The API artifact could deploy with a nested zip, missing production dependencies, or missing @cover-craft/shared output after the move to a workspace-based monorepo. |
Compared the deployed package shape against Azure Functions runtime expectations and the monorepo assumptions captured in ADR 004. | CI now builds a self-contained API package from the correct root, installs production dependencies locally, and copies shared build output into the artifact. |
| Batch API authentication boundary | Batch generation and job-status polling failed after Azure Functions endpoints required function-key authentication. | Traced the BFF request path from Next.js route handlers to the secured Azure Functions API, then verified the proxy was missing x-functions-key for the architecture described in ADR 006. |
Proxy utilities now forward AZURE_FUNCTION_KEY server-side for batch submission and polling while keeping the secret out of the browser. |
| Flex Consumption infrastructure migration | Moving to Azure Functions Flex Consumption and Terraform-managed infrastructure exposed invalid app settings, missing CI authentication, and package execution assumptions. | Traced deployment failures to hosting-plan-specific requirements while implementing the infrastructure model in ADR 007. | CI now authenticates infrastructure deployment explicitly, the API runs from package, and incompatible Flex Consumption settings were removed. |
The platform has two generation paths:
| Path | Use case | Flow |
|---|---|---|
| Single image | Fast interactive generation | User request -> Azure Function -> Canvas renderer -> image response |
| Batch images | Larger workloads | User request -> HTTP 202 -> Azure Queue Storage -> retry-aware worker -> MongoDB job status |
graph TD
User([User])
UI[React UI]
API[Azure Functions API]
Single[Single Image Function]
Batch[Batch Producer Function]
Status[Job Status Function]
Queue[Azure Queue Storage]
Worker[Queue Worker Function]
Render[Canvas Renderer]
DB[(MongoDB Job State)]
User --> UI
UI --> API
API --> Single
Single --> Render
Render --> UI
API --> Batch
API --> Status
Batch --> Queue
Batch --> DB
Status --> DB
Queue --> Worker
Worker --> Render
Worker --> DB
| Layer | Tools |
|---|---|
| Language | TypeScript, Node.js, React, Tailwind CSS |
| Infrastructure | Azure Functions, Azure Queue Storage, Azure hosting, Terraform |
| Data stores | MongoDB for job state and logs |
| Testing | Vitest |
| CI/CD | GitHub Actions |
npm install
npm run build:shared
npm run dev:frontendRun the API locally:
npm run start:apiRun checks:
npm run lint
npm run test