項目作品/Clofel Creates

Next.jsReact 19TypeScriptNestJSPrisma ORMPostgreSQLCloudflare R2Tailwind CSS v4DockerTraefik

Clofel Creates

live · maintained

語言版本：

為獨立藝術家兼開發者打造嘅全端作品集與電商商店,支援即時庫存與委託追蹤。

造訪網站 ↗

clofelcreates.com

Cover

為獨立藝術家兼網頁開發者打造嘅全端電商與創意作品集平台。具備即時庫存管理嘅互動式公開店面、帶蜜罐反機械人防護、動態預算校驗與多幣種定價嘅公開藝術委託查詢與即時訂單狀態追蹤流程,以及用於管理商品、作品集、媒體上傳、優惠券同財務報表嘅管理後台CMS。

Featured Engineering & Architecture

How the Hardest Problems Were Solved

Key architectural decisions, concrete code implementations, and performance wins behind this project.

Backendapi/src/commissions/commissions.service.ts

Dynamic Tiered Budget Thresholds & Anti-Spam Commission Pipeline

The Challenge

Client commission requests were frequently submitted with unrealistic lowball budgets or missing reference photos for custom portrait art, alongside unsolicited spam submissions targeting public intake endpoints.

The Architectural Solution

Built a specialized multi-tiered validation engine in CommissionsService that programmatically classifies commission categories (art vs. software/web) and enforces custom minimum budget constraints (e.g. ₱500 chibi up to ₱2,600+ large canvas) along with mandatory reference assets. Integrated a zero-friction honeypot field that silently drops automated bot submissions without burdening legitimate clients with intrusive CAPTCHAs.

Impact:100% elimination of zero-reference art submissions and automated bot spam while guaranteeing initial inquiries meet baseline pricing expectations.

api/src/commissions/commissions.service.ts

async createRequest(data: {

email: string;

type: string;

description: string;

budgetCents?: number;

referenceImages?: string[];

website?: string;

}) {

// Anti-spam Honeypot: if website is filled by a bot, silently discard

if (data.website && data.website.trim().length > 0) {

return {

id: 'bot-discarded',

email: data.email,

type: data.type,

status: CommissionStatus.OPEN,

createdAt: new Date(),

};

}

const isArt = this.isArtCommissionType(data.type);

if (isArt && (!data.referenceImages || data.referenceImages.length === 0)) {

throw new BadRequestException(

`At least 1 reference photo is required for art commission requests (${data.type})`,

);

}

const minBudgetCents = this.getMinBudgetCents(data.type);

if (data.budgetCents !== undefined && data.budgetCents < minBudgetCents) {

throw new BadRequestException(

`Target budget must be at least ₱${(minBudgetCents / 100).toLocaleString()} for ${data.type}`,

);

}

return this.prisma.commissionRequest.create({

data: {

email: data.email,

type: data.type,

description: data.description,

budgetCents: data.budgetCents,

referenceImages: data.referenceImages ?? [],

});

}

Discuss this snippet (api/src/commissions/commissions.service.ts)

Securityapi/src/common/filters/all-exceptions.filter.ts

Centralized Defensive Error Masking & Request Correlation

The Challenge

Preventing internal database schemas, Prisma queries, and stack traces from leaking to client responses across unexpected runtime failures while ensuring actionable tracing for operators.

The Architectural Solution

Engineered an application-wide NestJS ExceptionFilter that generates unique request correlation IDs (`requestId`), traps both known HTTP exceptions and raw uncaught runtime errors, logs complete stack traces server-side with structured logging, and formats safe, sanitized JSON contract payloads for the client.

Impact:Zero internal infrastructure leaks in production with instant incident correlation via traceable request IDs.

Architecturedocker-compose.yml

Zero-Downtime Microservice Gateway Routing & S3 Request Buffering

The Challenge

Self-hosting multi-tier services (Next.js client and NestJS API) behind a shared Traefik ingress while supporting large multipart media uploads up to 50MB and maintaining zero-downtime health dependencies.

The Architectural Solution

Configured Docker Compose service definitions with automated HTTP healthcheck probes, Traefik dynamic labels with router priority isolation, automatic Let's Encrypt TLS termination, and custom request buffering with network error retries for high-volume uploads.

Impact:Reliable 50MB image uploads with automatic TLS certificate lifecycle management and automated traffic routing across API and Web containers.

Backendapi/src/commissions/commissions.service.ts

Strict R2 Storage Origin Validation & S3 Presigned Workflows

The Challenge

Preventing hotlinking, unauthenticated external image injection, or arbitrary URL storage in portfolio and commission records.

The Architectural Solution

Enforced strict origin URL verification against configured Cloudflare R2 public endpoints prior to persisting database records, ensuring all media assets pass through authenticated presigned upload pipelines.

Impact:Guarantees 100% of stored media assets originate exclusively from secured, authenticated Cloudflare R2 bucket keys.

// community_discussion

Architecture Feedback & Questions

Have thoughts, questions, or ideas regarding this system's architecture? Leave a comment below with your GitHub account.