Skip to content
LOCEN/Ontario · CAStandbyOK/--:--:--EST
M4M4RK_YUportfolio
  • Projects
    ProjectsOverview
    • WorkSelected case studies and write-ups
    • GamesPlayable prototypes and game-dev logs
  • Gallery
    GalleryOverview
    • ArchivePhoto collections and visual experiments
    • ShopPrints, posters, and one-off objects
  • Logs
    LogsOverview
    • BlogLong-form devlogs and field notes
    • NotesShort observations, links, snippets
  • Resources
    ResourcesOverview
    • Tools38 in-browser developer utilities
    • LinksDaily-use dev and design bookmarks
  • About
  • Contact
中文
← projects
Web app · 2024Draft

M4rketView

A cryptocurrency screener built for quick scanning, watchlist thinking, and market table clarity.

Role
Frontend engineer: data UI, table experience, responsive behavior, and API integration.
Stack
ReactTypeScriptTanStack QueryWebSocketViteVercel
Links
LiveSource
M4rketView monochrome cover

Context

Problem

Crypto dashboards tend to drown users in motion, color, and unstable hierarchy. M4rketView focuses on comparison and scan speed.

Approach

Solution

The interface prioritizes live prices over WebSocket, DeFi analytics, portfolio tracking, and a searchable, comparison-first market table over decorative chart noise.

Features

  • Live prices over WebSocket
  • DeFi analytics and portfolio tracking
  • Searchable market table
  • Readable, comparison-first hierarchy

Architecture notes

  • The project keeps market fetching separate from display formatting.
  • Table rows are designed for repeat comparison rather than one-time browsing.

Challenges

Outcome

A focused market interface that shows comfort with data-heavy products and financial UI constraints.

What I learned

Lessons learned

  1. 01Dense layouts need restraint, not extra animation.
  2. 02Financial interfaces should reveal state changes without shouting.

Next steps

Next steps

  1. 01Add saved views
  2. 02Improve loading skeletons
  3. 03Document API fallback behavior

Related work

Web app

Nimbus

A secure file management platform shaped around calm organization, OTP access, and storage analytics.

Web app

Bloomprint

Turns yard inspiration into a buildable plan — what to buy, how much, what tools, in what order, and what can go wrong.

PreviousBioLoomAn AI-assisted bio generator that turns scattered identity notes into concise, platform-ready personal copy.
Back to archive
NextBloomprintTurns yard inspiration into a buildable plan — what to buy, how much, what tools, in what order, and what can go wrong.
Back to archive
open channel·say hi anytime · 2026
--:--:--EST
get in touch

Saw something here?Tell me about it.

It's a portfolio, not a service · but I read every note — drop a line if anything here resonated, or just to say hi.

Start a conversation

Newsletter

Get the occasional dispatch

Notes and logs from m4rkyu.com — short, dated, no noise. Unsubscribe anytime.

Work

Production builds, games, and visual archives.

  • Projects
  • Games
  • Archive
  • Logs

Resources

Daily-use tools and a personal link library.

  • Search
  • Latest
  • Tools
  • Links
  • Notes
  • Topics
  • RSS
  • JSON feed
  • Shop

Studio

Background, contact, and channels for collaboration.

  • About
  • Contact
  • Changelog
  • Colophon
  • Resumepending

Socials

Find me on the usual feeds.

  • Facebooksoon
  • Instagramsoon
  • YouTubesoon
  • LinkedInsoon
M4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYU
Crafted since 2024
ZhenXiao Mark YuZhenXiao Mark Yu
© 2026 ZhenXiao Mark Yu·Ontario, Canada
  • Email
  • GitHub
  • dev.to
  • LinkedIn (soon)
  • Twitter / X (soon)
  • Instagram (soon)
Built with Next.js 16 · React 19 · Tailwind 4

Built with Next.js 16 · React 19 · Tailwind 4