A modern, responsive cryptocurrency portfolio tracker built with React, TypeScript, and Vite. Track your token holdings, view real-time prices, and manage your watchlist with an intuitive interface.
- 📊 Portfolio Overview: Real-time portfolio valuation with interactive donut chart
- 📈 Watchlist Management: Add, remove, and track your favorite tokens
- 💰 Real-time Prices: Live price updates from CoinGecko API with 24h change indicators
- 📱 Responsive Design: Optimized for both desktop and mobile devices
- 🔗 Wallet Integration: Connect your wallet using RainbowKit and Wagmi
- 💾 Data Persistence: Watchlist and holdings persist across sessions
- 🎨 Modern UI: Beautiful interface with dark theme and smooth animations
- ⚡ Performance: Optimized rendering with React Query and Redux Toolkit
- Node.js 22+
- npm or yarn
-
Clone the repository
git clone https://github.com/haroonwaves/token-portfolio cd token-portfolio -
Install dependencies
npm install
-
Configure environment variables
# Create .env.local file VITE_WALLETCONNECT_PROJECT_ID=your_project_id_here -
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173
- React 19.1.1 - UI library with latest features
- TypeScript 5.8.3 - Type-safe JavaScript
- Vite 7.1.6 - Fast build tool and dev server
- Redux Toolkit 2.9.0 - Predictable state container
- React Redux 9.2.0 - React bindings for Redux
- Tailwind CSS 4.1.13 - Utility-first CSS framework
- Radix UI - Accessible component primitives
- Lucide React - Beautiful icon library
- Recharts 2.15.4 - Composable charting library
- Wagmi 2.17.1 - React hooks for Ethereum
- RainbowKit 2.2.8 - Wallet connection UI
- Ethers 6.15.0 - Ethereum library
- TanStack Query 5.89.0 - Data synchronization
- Axios 1.12.2 - HTTP client
- ESLint - Code linting
- Prettier - Code formatting
- TypeScript ESLint - TypeScript-specific linting
src/
├── api/ # API integration (CoinGecko)
├── components/ # React components
│ ├── modal/ # Modal components
│ ├── portfolio/ # Portfolio-related components
│ ├── ui/ # Reusable UI components
│ └── watchlist/ # Watchlist components
├── hooks/ # Custom React hooks
├── lib/ # Utility libraries
├── store/ # Redux store and slices
└── assets/ # Static assets
- Total Value Display: Real-time portfolio valuation
- Interactive Chart: Donut chart showing token allocation
- Last Updated: Timestamp of latest price update
- Token Table: Sortable table with price, change, and sparkline
- Add Tokens: Search and add tokens from CoinGecko
- Edit Holdings: Update token quantities
- Pagination: Navigate through large token lists
- Multi-wallet Support: Connect various wallet types
- Network Switching: Support for multiple networks
- Account Management: Display connected wallet info
# Development
npm run dev # Start development server
npm run preview # Preview production build
# Code Quality
npm run lint # Run ESLint
npm run format # Format code with Prettier
npm run typecheck # Run TypeScript compiler
npm run validate # Run all checks (typecheck + lint + format)
# Build
npm run build # Build for production- Push your changes to the main branch
- Cloudflare Pages will automatically build and deploy your site
Create a .env.local file:
# WalletConnect Project ID (optional)
VITE_WALLETCONNECT_PROJECT_ID=your_project_id_here
- CoinGecko for providing the cryptocurrency API
- RainbowKit for wallet connection UI
- Radix UI for accessible components
- Tailwind CSS for styling utilities
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue with detailed information
Built with ❤️ using React, TypeScript, and modern web technologies