https://github.com/devdignesh/token_portfolio
App to track your favorite cryptocurrencies, view their prices, and manage a portfolio with a clean UI.
https://github.com/devdignesh/token_portfolio
Last synced: 6 months ago
JSON representation
App to track your favorite cryptocurrencies, view their prices, and manage a portfolio with a clean UI.
- Host: GitHub
- URL: https://github.com/devdignesh/token_portfolio
- Owner: devdignesh
- Created: 2025-08-29T08:06:29.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-09-10T04:08:33.000Z (7 months ago)
- Last Synced: 2025-09-10T08:11:33.861Z (7 months ago)
- Language: TypeScript
- Homepage: https://token-portfolio-seven.vercel.app
- Size: 164 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Token portfolio
A modern, pixel-perfect crypto portfolio dashboard to track, manage, and visualize your favorite tokens — all in real time.
## Tech Stack
- **Frontend**: React (Vite) + TypeScript
- **State Management**: Redux Toolkit
- **Styling**: Tailwind CSS
- **Wallet Integration**: wagmi + RainbowKit
- **API**: CoinGecko
- **Charts**: Custom SVG Donut Chart
## Preview
## 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
```bash
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.
## 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.