EntertainmentMarketplace

Artist Digital Trading Card Marketplace

Developed a marketplace for selling artist digital trading cards.

Challenge

Music fans had limited ways to maintain connections with artists. There was a lack of digital content that fans could "own" beyond live events and merchandise, creating demand for new fan engagement mechanisms.

Solution

Built a mobile-first marketplace for selling artist digital trading cards using Next.js 16 + React 19. Implemented rarity-based CSS effects (hologram, sparkle) and buyer-exclusive content features.

Result

Launched MVP with near-zero fixed costs. Built a 3-tier rarity card auto-generation system

Team

1 member, 1 month

Design, implementation, operations

Role

Responsible for everything from requirements to design, implementation, and operations.

Led visual/frame dual-layer design, Stripe payment integration, and RLS-based security architecture.

Tech Stack

FrontendNext.js / React / TypeScript
StylingTailwind CSS
Auth / DBSupabase / PostgreSQL / Auth / Storage / RLS
PaymentStripe (Checkout Session / Webhook)
HostingVercel

Key Features

01

Dual-layer card structure (visual + frame): Creating one visual from the admin panel auto-generates 3 rarity tiers (NORMAL / RARE / SUPER_RARE)

02

Rarity-specific CSS effects: Hologram and sparkle effects implemented in pure CSS without external libraries

03

Buyer-exclusive content: Live footage, unreleased tracks, etc. available only to purchasers

04

Stripe Checkout payments: Secure transactions with webhook signature verification, server-side amount determination, and idempotency guarantees

05

Atomic inventory management with PostgreSQL FOR UPDATE locks to prevent serial number duplication

06

Mobile-first UI: 3:4 aspect ratio for real trading card feel, fixed BottomNav, 44x44px touch targets

Technical Highlights

Visual × Frame Separation Design

Separated content (artist images, track names) from design (frame borders, effects), enabling flexible frame additions and seasonal limited cards through code-side management.

Data Protection via RLS

Enabled Row Level Security on all tables, enforcing policies at the DB layer that only purchasers can view exclusive content.

Zero Fixed-Cost Architecture

Achieved near-zero initial fixed costs for MVP operations using Vercel + Supabase Free + Stripe usage-based billing.