A modern, responsive cryptocurrency portfolio tracker built with React, TypeScript, and Redux. Features real-time token data, interactive charts, wallet integration, and persistent storage for tracking your crypto investments.
📊 Token Portfolio Dashboard – Real-time crypto tracking
- Portfolio Overview: Interactive donut chart showing portfolio breakdown with real-time calculations
- Token Management: Add, remove, and track cryptocurrency tokens with CoinGecko integration
- Holdings Tracking: Edit and manage token holdings with automatic value calculations
- Price Updates: Real-time price data with 24h change indicators and 7-day sparkline charts
- Wallet Integration: Connect cryptocurrency wallets using RainbowKit and Wagmi
- Responsive Design: Fully responsive UI matching provided Figma designs for desktop and mobile
- Data Persistence: LocalStorage integration to maintain watchlist across sessions
- Search & Discovery: Token search with trending tokens display in modal interface
- React 19 - Latest React with modern features
- TypeScript - Type-safe development
- Vite - Fast build tool and development server
- Tailwind CSS - Utility-first CSS framework with custom design system
- Redux Toolkit - Predictable state container
- React Redux - Official React bindings for Redux
- Recharts - Responsive charts built on D3
- Custom Sparklines - Real-time 7-day price trends
- RainbowKit - Wallet connection UI
- Wagmi - React hooks for Ethereum
- Viem - TypeScript interface for Ethereum
- CoinGecko API - Real-time cryptocurrency data
- Axios - HTTP client for API requests
- Radix UI - Unstyled, accessible components
- Lucide React - Beautiful icon library
- Custom Components - Optimized, reusable UI components
components/
├── watchlist/ # Watchlist-specific components
│ ├── WatchlistTable.tsx
│ ├── TokenRow.tsx
│ ├── TokenImage.tsx
│ └── ...
├── PortfolioCard.tsx # Portfolio overview
└── AddTokenModal.tsx # Token search and addition
- React.memo for component memoization
- useMemo for expensive calculations
- useCallback for stable function references
- Custom hooks for reusable logic
- Component splitting for better bundle sizing
- Centralized Redux store with TypeScript
- LocalStorage persistence middleware
- Optimistic UI updates for better UX
- Node.js 18+ and npm
- Clone the repository
git clone https://github.com/naveensing575/token-portfolio.git
cd token-portfolio- Install dependencies
npm install- Environment Setup
cp .env.example .env
VITE_WALLETCONNECT_PROJECT_ID=your_walletconnect_project_id_here
VITE_COINGECKO_API_URL=https://api.coingecko.com/api/v3- Start development server
npm run dev- Build for production
npm run buildsrc/
├── components/ # React components
├── hooks/ # Custom React hooks
├── features/ # Redux slices and features
├── services/ # API services and external integrations
├── store/ # Redux store configuration
├── utils/ # Utility functions
├── assets/ # Static assets (SVGs, images)
└── types/ # TypeScript type definitions
- Token search and trending data
- Real-time price information
- Historical price charts (sparklines)
- Market data and statistics
- Multi-wallet support via RainbowKit
- Ethereum mainnet integration
- Connection state management
- Custom styled wallet buttons
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'feat: add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Built with ❤️ using modern React and TypeScript