CASE STUDY
Vibranium
MY ROLE
Frontend Product Engineering
Product UI Systems
Trading Interface Development
Data Visualization and Responsive UX
CLIENT
Vibranium (via v21 Studio)
YEAR
2025
TECH STACK
OVERVIEW
Vibranium explored a sports-trading product where athlete performance becomes a live market surface rather than a traditional betting or fantasy flow. The frontend needed to make that idea legible across home discovery, trading, portfolio, leaderboard, and educational surfaces.
I worked across the application frontend, building the main shell, responsive navigation, onboarding and splash flow, athlete detail and trade interfaces, portfolio views, discover tables, leaderboard screens, and learn pages.
A core challenge was turning a speculative product concept into something that felt operational. Dense metrics, charts, tables, search, league switching, wallet prompts, tabs, sliders, and live-event surfaces all had to read as one coherent interface.
WHAT I OWNED
- -Built the main app shell with sticky header navigation, scrolling market ticker, search, notifications, wallet and balance popovers, and responsive mobile menu patterns.
- -Implemented the home, discover, leaderboard, portfolio, and learn experiences with reusable cards, tables, charts, filters, and content modules shaped for sports-market workflows.
- -Built the athlete trading surface across banner state, stats cards, multi-line price chart tabs, index-weight and active-position panels, and a long/short trading panel with order size, leverage, advanced parameters, and trade summary.
- -Handled onboarding-oriented frontend flows such as splash state, explainer sequence, wallet-connect modal, and route-specific state handoffs so the product felt navigable even before backend integration.
KEY OUTCOMES
- -Delivered a full multi-page frontend prototype that made the athlete-index trading concept feel substantially more concrete and testable.
- -Created a consistent interface system across dense product areas including discovery, charting, rankings, portfolio management, learning, and trading actions.
- -Turned multiple abstract product ideas into usable frontend flows with responsive layouts, clearer hierarchy, and interaction patterns that could support future backend integration.
Product Walkthrough
Discover Markets and News
Discover Onboarding Flow
Find More Athlete
Athlete Trading Surface
Leaderboard Analytics
Portfolio Tracking
Learn Experience
Wallet Connect Flow
