Captured

A modern, performant photography website built with Vue 3 and Cloudflare Workers.

🌐 Live Demo: https://captured.yyin.me

Tech Stack

📌	🚀	📝
🎨 Frontend	Vue + tailwindcss v4
⚡ Backend	tRPC	End-to-end type-safe API
☁️ Runtime	Cloudflare Workers	Serverless backend
🗄 Database	D1 + Drizzle	Cloudflare's SQLite + type-safe ORM
📦 Object Storage	R2	Cloudflare's S3 bucket to store images
🔐 Authentication	WebAuthn	Passkey authentication
🖼 Image Handling	Responsive Images + Blurhash	Optimized delivery with low-bandwidth previews
🎊 Animations	View Transition API	Smooth page transitions powered by the View Transition API

Local Development

This project uses a monorepo setup. All commands should be run from the project root.

1. Install dependencies:

bun install

2. Configure environment: Create server/.dev.vars with:

secret="local"
allowCors=1
proxyR2=1

accountId=<your-cloudflare-account-id>
databaseId=<your-d1-database-id>
token=<your-cloudflare-api-token>

3. Start development server:

bun dev

4. Run database migrations:

bun migrate

Code linting and formatting

1. Auto fix issues with ESLint and Prettier:

bun lint

2. Select esbenp.prettier-vscode as the default formatter to avoid conflicts with other formatters

3. Check for issues without auto-fixing:

bun lint:check

Deployment

1. Verify Cloudflare credentials in server/.dev.vars

2. Run production database migrations:

bun prod:migrate

3. Deploy:

bun prod:deploy

4. (Optional) Update secret key:

bun run wrangler secret --name <project> put secret

Development Notes

When modifying wrangler.jsonc, regenerate types with:

bun types