Nextflow
A modular DeFi product that brought live market intelligence, liquidity discovery, governance, and community mechanics into one readable experience.
Product surfaces
7 modules
Dashboard, market intelligence, analytics, pools, games, lottery, and governance.
Live data breadth
11 tracked tokens
Market feeds are aggregated into a single decision surface with trend signals.
Community mechanics
3 game loops
Play-to-earn concepts were integrated as part of the broader ecosystem.
Trust signals
6 prize tiers
Lottery mechanics and round history were structured for transparent fairness.
The Problem
What this project had to solve
DeFi experiences often split analytics, pool discovery, governance, and community mechanics across disconnected tools. Nextflow was designed to turn that sprawl into a single product with a clear operational rhythm.
Nextflow started from a simple product problem: most DeFi users bounce between dashboards, explorers, pool trackers, and governance tools just to understand what is happening. The goal was to collapse that fragmented experience into a single product that felt fast, expressive, and coherent.
The platform was built as a modular React and TypeScript application where each domain owns its own surface, data layer, and interaction model. TanStack Query handled cache discipline and background refresh, while the wallet and contract layer abstracted on-chain reads and writes into a predictable developer workflow.
The result is a product that feels market-driven rather than page-driven. Users can scan the system state, inspect performance, discover yield opportunities, and participate in governance without losing context or being overwhelmed by raw protocol complexity.
What changed
Instead of forcing users to stitch together third-party dashboards and protocol tools, the platform gave them one coherent place to monitor markets, compare opportunities, take action, and stay engaged with the ecosystem.
Why it was hard
The challenge was not just data integration. It was deciding how much motion, context, and abstraction to add before the product stopped feeling trustworthy. The system had to feel alive without sacrificing scanning speed or decision clarity.
Constraints
- Live data from multiple APIs and on-chain sources had to stay legible at consumer speed.
- The product needed high information density without becoming visually exhausting.
- Each domain had to remain modular enough to ship independently and evolve quickly.
My role
- Owned the end-to-end product architecture and frontend system design.
- Structured market, pool, governance, and game modules around a shared data discipline.
- Designed wallet connectivity and contract interaction flows for repeatable delivery.
- Balanced kinetic UI patterns with the clarity needed for financial decision-making.
Proof
What the product actually looks like
Real screens from the product — each one supports a specific argument about clarity, control, or observability.
Signal SurfaceClick to view full sizeMarket Pulse Dashboard
A landing surface that lets users understand the system state in seconds instead of navigating multiple protocol views.
The KPI and sparkline layout was designed for quick scanning before deeper interaction.
Decision SupportClick to view full sizeAnalytics Layer
Ranked tables and charting views translate noisy pool data into comparative product signals.
This surface reduces raw protocol noise into a reading order users can actually act on.
Yield LensClick to view full sizeLiquidity Discovery
APR-oriented pool views make opportunity discovery feel like a product feature, not a spreadsheet exercise.
Derived metrics are surfaced with explicit assumptions so the interface stays actionable and honest.
Community LoopClick to view full sizeGames Hub
Gamified modules extend product engagement without feeling bolted on or disconnected from the platform identity.
Motion and card choreography were used to create energy while preserving legibility.
Trust LayerClick to view full sizeGovernance Console
Proposal visibility, vote progress, and tagging were designed to make governance participation feel understandable.
The goal was to make governance navigable for users who are not already protocol power users.
Decisions
Tradeoffs that shaped the product
The strongest work is visible in the choices made under pressure, not just in the final interface.
Modular domains over one oversized dashboard
Challenge
The product had too many distinct jobs to force everything into a single interface model.
Decision
Each domain became its own module with dedicated components, hooks, and data contracts.
Tradeoff
This increased coordination around shared patterns, but it prevented the product from collapsing into a brittle monolith.
Derived opportunity signals over raw pool tables
Challenge
Yield hunting becomes unusable when users have to interpret every pool from first principles.
Decision
APR derivations, high-yield filtering, and comparative analytics were elevated into first-class product features.
Tradeoff
Derived metrics require stronger explanation and validation, but they make the product meaningfully more useful.
Kinetic visuals with hard limits on noise
Challenge
A Web3 brand can become unreadable if every surface behaves like a launch animation.
Decision
Motion was concentrated around transitions, card focus, and discovery moments while charts and KPI surfaces stayed disciplined.
Tradeoff
More visual tuning was required, but the result feels energetic without losing trust.
Architecture
How data flows through the system
Live inputs
CoinGecko, DexScreener, and on-chain reads provide the raw market and protocol signals.
→ Fresh multi-source inputs without forcing users into source-level complexity.
Query orchestration
TanStack Query handles polling, stale-time strategy, cache reuse, and background refresh.
→ Real-time feel with predictable network behavior and cleaner UI state management.
Domain modules
Markets, pools, games, and governance each operate as focused product modules.
→ Faster iteration and clearer product boundaries across the experience.
Wallet + contract layer
wagmi, viem, and ethers abstract reads and writes into reusable interaction patterns.
→ Safer, more consistent user actions across the DeFi surface area.
Guided action surfaces
Dashboards, analytics, and governance views turn protocol complexity into readable UI flows.
→ Users can decide and act without bouncing between disconnected tools.
Nextflow uses a feature-based frontend architecture where each domain owns its own interaction model, data hooks, and UI surfaces. TanStack Query is the operational backbone for live data, while wallet and contract interactions are abstracted into repeatable patterns that keep market exploration and user action in sync.
Product surfaces
The interfaces that carry the experience
Dashboard
The main command surface aggregates live market movement, watchlist signals, and high-level KPIs into one fast-scanning view.
Market Intelligence
A broader market view surfaces trend shifts, activity signals, and ranked comparisons across tracked assets.
Analytics
Comparative charts and ranked tables make pool and token performance readable without pushing users into external analytics tooling.
Liquidity Pools
Pool exploration focuses on comparative opportunity discovery with APR derivation, detail views, and direct action pathways.
Games Hub
Community-oriented modules extend retention and platform identity without fragmenting the experience.
Lottery
A transparent lottery surface brings countdowns, prize structure, and fairness signals into one readable interaction loop.
Governance
Governance views make proposals, voting weight, and outcomes feel approachable instead of protocol-native only.
Tech Stack
Built with
Framework
UI
Web3
Data
Languages
TypeScriptSolidity (smart contracts)CSS/TailwindWhat this project proves