Charcoal
DESCRIPTION
Design Marketplace — AI Platform
DURATION
Jun 2026 - Jul 2026
MY ROLE
- Full marketplace service planning and UI/UX design.
- Full-stack development — GPT-4o brief and translation pipeline, Stripe payment and refunds, realtime chat.
- Prisma and Supabase data modelling, RLS security policy design, admin console build and Vercel deployment.
TECH
Next.js 14 (App Router) · React · TypeScript · Tailwind CSS · GSAP · Lenis
Prisma ORM · Supabase (PostgreSQL · Auth · Storage · Realtime · RLS)
OpenAI GPT-4o · Stripe (Checkout · Webhook · Refunds)
Resend · Vercel
Project Purpose
Charcoal is a global design marketplace connecting overseas clients with Korean designers. Its premise is that the bottleneck in outsourced design is not talent but the brief: a non-specialist writes something loose, and the work fails before it starts. Here an AI rebuilds that request into a working design brief, and designers bid against the brief rather than the guess. Request, brief, proposal, payment, delivery, settlement and refund all resolve inside one platform, across two languages.
Scope
- · Marketplace UI/UX Planning & Design
- · Next.js 14 Full-Stack Development
- · GPT-4o Brief Generation Pipeline
- · Bidding, Matching, Stripe Payment & Refund Lifecycle
- · Realtime Chat, Bilingual Architecture, Admin Console
Key Technical Features
AI Brief Generation Pipeline
- · An 18-field request is converted by GPT-4o into a structured design brief, with the model judging where information is missing and recommending follow-up questions in JSON mode.
- · The same brief also generates a designer-facing work guide. Generation is best-effort — a failure never breaks the request flow.
Bidding & Payment Lifecycle
- · Project posting, designer proposal, selection, Stripe Checkout, deliverable upload with signed-URL download, completion approval, and fee-split settlement are connected as a state machine.
- · Permissions at each stage are verified by server guards rather than trusted from the client.
Refund Workflow & Stripe Refunds API
- · Customer refund request through admin full/partial/reject decision is modelled as three states.
- · On approval, stripe.refunds.create issues the real refund, followed by in-app and email notification.
Realtime Chat & Notification
- · One-to-one messaging on Supabase Realtime.
- · Proposal, award, deliverable, completion, refund and settlement events fire in-app notifications alongside Resend email, with DKIM and SPF authenticated on the sending domain.
Store-both i18n Architecture
- · Static UI uses a key dictionary; user-generated content — requests, briefs, proposals — is stored in both languages in a general Translation side-table.
- · The source language is detected and the opposite translated automatically. Adding a language adds rows, not a schema migration.
Security Hardening
- · Row-level access is controlled by 21 RLS policies across 7 tables.
- · A privilege escalation path — the signup trigger trusting a user-supplied role — was closed. The admin console is fully separated from the user app by private-path rewrite, role guard and session isolation.
Design Points
Warm Coral & Cream Palette
Outsourcing platforms default to a clerical, transactional look. A coral and cream base with GSAP and Lenis inertial scrolling and reveal motion was used instead — the first impression argues that this is a place where design work is respected.
Dual-Audience UX
Client and designer want opposite things from the same service, so each gets a dedicated landing, contextual header and dashboard. Splitting the routes was cheaper than compromising both.