All work/ Trading platform
STYR
A Vue.js interface for STYR, a marketplace for trading sneakers like stocks, with real-time prices, portfolio tracking and custom charts.
Overview
STYR lets people invest in consumer trends like a pro: building a portfolio of in-demand sneakers and fashion products and trading them the way you'd trade stocks. I built the interface that makes that market legible.
The challenge
Trading interfaces live or die on clarity under pressure. Prices change constantly, there's a lot of data to show, and users need to act quickly without second-guessing what they see.
What I built
- Real-time data. Reactive state keeps prices, holdings and order books current without a refresh.
- Custom charts. Purpose-built chart components surface trends, patterns and key metrics at a glance.
- Responsive dashboard. A fluid grid that works from multi-monitor setups down to a phone.
- Component system. Modular Vue components for fast iteration and a consistent UI.
Under the hood
- Vue.js with the Composition API
- Vuex for centralized state across complex data flows
- SCSS theming with variables and mixins, plus Bootstrap's grid utilities
Hard parts
- Handling high-frequency updates without UI jank
- Balancing information density against cognitive load
- Graceful behaviour on flaky networks
Outcome
A clean, fast market interface that lets users monitor prices and act decisively, with far less noise than a traditional trading screen.
