GitHub
Fulfillment Dashboard
Customer-facing SaaS dashboard for OneSource's API platform. Magic link authentication, API key management, subscription and billing flows, real-time usage tracking with progress visualizations, and plan comparison. Built with a custom design token system featuring the OneSource brand palette.
React
TypeScript
Vite
Chakra UI
Apollo/GraphQL
Overview
When Blockparty pivoted from an NFT marketplace to the OneSource blockchain data platform, existing API customers needed a way to manage their subscriptions, monitor usage, and handle billing without going through support. I built the fulfillment dashboard to replace that manual process with self-service flows — from passwordless authentication to real-time consumption tracking.
Wireframes came from the technical lead, but the complete UI — palette, interactions, component library, and design token system — was my design work. I built a custom Chakra UI theme with the OneSource brand language: Data Green accents, Desert Sand backgrounds, Figtree typography, and an elegant grid-based layout system that carries through every screen.
Screenshots
Magic Link Authentication — 50/50 Split Layout
Architecture
┌──────────────────────────────────────────────┐
│ REACT / VITE FRONTEND │
│ Chakra UI · Design Tokens · Framer Motion │
└──────────────────────┬───────────────────────┘
│
┌──────────────────────┴───────────────────────┐
│ APOLLO / GRAPHQL │
│ Auth · API Keys · Subscriptions · Usage │
└──────────────────────┬───────────────────────┘
│
┌──────────────────────┴───────────────────────┐
│ ONESOURCE FULFILLMENT API │
│ Magic Link · Billing · Rate Limiting │
└──────────────────────────────────────────────┘
Three-layer stack — React/Vite front-end communicating through Apollo/GraphQL to the OneSource Fulfillment API.
Features
Magic Link Auth
Email-based passwordless authentication with verification flow and reCAPTCHA. No passwords to manage — users receive a secure link and are logged in instantly.
API Key Management
Create, view, and delete API keys with secure token display. Keys are masked by default with copy-to-clipboard and regeneration support.
Subscription Plans
Plan comparison from Sandbox to Enterprise with pricing, rate limits, and monthly request quotas. Self-service upgrades and downgrades with prorated billing.
Usage Tracking
Real-time monthly API request utilization with progress visualization and billing cycle display. Overage alerts and historical usage trends.
Design System
Custom design token system built on Chakra UI with the OneSource brand language. Figtree as the primary typeface, a restrained three-color palette, and consistent spacing and shadow scales across every component.
Data Green — #19DFAE
Desert Sand — #F9F5F1
Dark Brown — #311D19
Figtree — Primary Typeface