Web · E-Commerce//2025

TokoPowkeymon

Pokemon TCG vault e-commerce & WhatsApp automated parser.

Engineering Role
Full-Stack Web Developer
Delivery Timeline
4 weeks (Production Storefront)
Architectural Stack
Next.js App Router, TypeScript, Tailwind CSS
Release Status
ARCHIVED / INTERNAL

The System Bottleneck & Problem Statement

Trading card game collectors and sellers struggled with listing hundreds of individual card variants across Instagram stories, resulting in chaotic price haggling and unreadable order DMs.

Architected Solution & Execution Mechanics

Built TokoPowkeymon: an editorial digital catalog where collectors can filter cards by rarity, condition (Near Mint, Lightly Played), and expansion set, adding cards to a cart that compiles directly into a structured WhatsApp order invoice.

INTERACTIVE ARCHITECTURE FLOW (CLICK NODE TO INSPECT SPEC):
Next.js App Router & Tailwind

Collector Catalog

Fast image gallery showcasing holographic card scans and condition notes.

Key Engineering Responsibilities

[01]

Designed high-contrast, card-collector-friendly interface with holo-foil card sheen CSS animations.

[02]

Engineered multi-attribute filtering (Rarity, Type, Price, Set) executing with sub-second response times.

[03]

Created client-side order invoice compiler formatting item names, quantities, and totals into WhatsApp text.

[04]

Configured PostgreSQL database for rapid inventory management and card status updates.

Non-Trivial Trade-Offs & Decisions

CASE // 01

Optimizing Card High-Resolution Image Loading on Mobile

System Friction: TCG collectors scrutinize card edges and surface condition, demanding high-resolution images that originally caused heavy page bloat and slow scrolling.

Architectural Decision: Implemented Next.js Image optimization with responsive WebP sizing, blur placeholders, and aggressive lazy loading for off-screen cards.

Measured Outcome: Page load size reduced by 78% while preserving crystal-clear card detail upon zooming.

Quantified Production Telemetry

300+
Card Listings Managed
<500ms
Rarity & Set Filter Speed
1-Click
WhatsApp Checkout Format
Zero
Manual Pricing Discrepancies
SUBSEQUENT CASE STUDY
SIMRS Klinik

A comprehensive healthcare ERP module managing outpatient registration, medical records, doctor scheduling, and pharmacy inventory.

Next Case Study →