Back to Projects
Token Portfolio crypto dashboard interface

Case Study · Personal Project

Token Portfolio

Interactive crypto dashboard for tracking token holdings, live prices, portfolio value, and watchlist data.

Helps users monitor a personalized portfolio with live data, visual summaries, and real-time updates.

Tech Stack

React + ViteRedux ToolkitTanStack QueryTailwind CSSWagmiRainbowKit

Role

Frontend Engineer · Sole Developer

Links

Live Demo

crypto-dashboard-taupe-theta.vercel.app

Source Code

github.com

Figma Design

figma.com

Core Contribution

  • 01Built the dashboard UI for portfolio value, holdings, and watchlist management.
  • 02Implemented token search, add-token flow, and editable holdings.
  • 03Created responsive views with a clean Figma-to-code implementation.
  • 04Designed the watchlist and portfolio summary interface for clarity and fast scanning.

Engineering Decisions

  • 01Used Redux Toolkit for centralized state management across portfolio and watchlist.
  • 02Used TanStack Query for caching and reducing unnecessary API calls to CoinGecko.
  • 03Integrated CoinGecko API for live token data and price updates.
  • 04Persisted user watchlist and portfolio data in local storage for cross-session continuity.
  • 05Used Wagmi + RainbowKit for wallet connection flow.

Product Thinking

  • 01Built a portfolio overview with a donut chart for quick visual understanding of asset allocation.
  • 02Added last-updated metadata to make refresh state visible and reduce user uncertainty.
  • 03Designed the watchlist for fast comparison of price, change percentage, and holdings.
  • 04Focused on keeping the UI readable and efficient for data-heavy usage.

Technical Highlights

  • 01Reusable UI components for buttons, modals, and inputs.
  • 02Infinite scrolling search for tokens.
  • 03Responsive layout with clean mobile and desktop behavior.
  • 04Custom donut chart implementation for portfolio allocation.
  • 05Smooth state transitions and price refresh behavior.

Challenges

  • 01Keeping portfolio and watchlist state in sync across interactions.
  • 02Handling live API data without unnecessary rerenders.
  • 03Maintaining a clean and readable layout while showing many token metrics.
  • 04Ensuring local persistence worked reliably after refresh.