Crypto token portfolio

Built a pixel-perfect crypto portfolio tracker using React, TypeScript, Redux Toolkit, TailwindCSS, wagmi, RainbowKit and the CoinGecko API. allowing users to search over 18,000+ tokens, connect wallets and manage real-time portfolios with optimized performance

Preview

Project Insight

This project showcases advanced frontend architecture, state management and real-time data handling with crypto APIs. It reflects my focus on pixel-perfect UI, scalable component design, and performance tuning in production-level applications.

Tech Stack

• Frontend: React (Vite) + TypeScript
• State Management: Redux Toolkit
• Styling: Tailwind CSS
• Wallet Integration: wagmi + RainbowKit
• API: CoinGecko
• Charts: Custom SVG Donut Chart

Features

• Search 18,000+ cryptocurrencies using CoinGecko API with intelligent debounce.
• Add / remove tokens to your personal watchlist with one click.
• Real-time price updates every 60 seconds for accurate portfolio tracking.
• Custom SVG donut chart to visualize portfolio distribution dynamically.
• Paginated & optimized table view (10 tokens per page).
• Connect crypto wallet via wagmi + RainbowKit for real-time token interaction.
• Pixel-perfect & fully responsive UI designed for clarity and speed.

How to Install

git clone https://github.com/devdignesh/token_portfolio.git
cd token_portfolio
npm install
npm run dev

Performance & Optimization

• Lazy Loading: Dynamically import modal and chart components.
• React Optimizations: Used React.memo, useCallback, and useMemo to minimize re-renders.
• Infinite Scroll: Auto-fetch tokens in AddTokenModal when scrolling.
• Bundle Optimization: Manual chunking in Vite config to separate vendor libs.
• Build Efficiency: Increased Vite chunk size limit for smoother performance.