{"id":31548786,"url":"https://github.com/naveensing575/token-portfolio","last_synced_at":"2026-07-13T05:02:02.650Z","repository":{"id":315098856,"uuid":"1057993817","full_name":"naveensing575/token-portfolio","owner":"naveensing575","description":"Token Portfolio – Cryptocurrency Portfolio Tracker","archived":false,"fork":false,"pushed_at":"2025-09-18T07:39:56.000Z","size":190,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-04T16:55:29.057Z","etag":null,"topics":["rainbowkit","reactjs","reactquery","recharts","redux","tailwindcss","typescript","vercel-deployment","wagmi"],"latest_commit_sha":null,"homepage":"https://token-portfolio-ten.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/naveensing575.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-16T13:34:41.000Z","updated_at":"2025-09-18T07:40:00.000Z","dependencies_parsed_at":"2025-09-16T19:05:39.738Z","dependency_job_id":"40f6c11a-28d2-4354-a035-8f3bb1ff6691","html_url":"https://github.com/naveensing575/token-portfolio","commit_stats":null,"previous_names":["naveensing575/token-portfolio"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/naveensing575/token-portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naveensing575%2Ftoken-portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naveensing575%2Ftoken-portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naveensing575%2Ftoken-portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naveensing575%2Ftoken-portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/naveensing575","download_url":"https://codeload.github.com/naveensing575/token-portfolio/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naveensing575%2Ftoken-portfolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35410672,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-13T02:00:06.543Z","response_time":119,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["rainbowkit","reactjs","reactquery","recharts","redux","tailwindcss","typescript","vercel-deployment","wagmi"],"created_at":"2025-10-04T16:53:59.775Z","updated_at":"2026-07-13T05:02:02.631Z","avatar_url":"https://github.com/naveensing575.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Token Portfolio\n\nA 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.\n\n## Live Demo\n\n[**View Live Application**](https://token-portfolio-ten.vercel.app/)\n\n\u003cp align=\"center\"\u003e\n \u003cimg width=\"500\" height=\"496\" alt=\"image\" src=\"https://github.com/user-attachments/assets/24cfcdc8-0763-47a3-83d2-218677892635\" /\u003e\n  \u003cbr/\u003e\n  \u003cem\u003e📊 Token Portfolio Dashboard – Real-time crypto tracking\u003c/em\u003e\n\u003c/p\u003e\n\n\n\n## Features\n\n- **Portfolio Overview**: Interactive donut chart showing portfolio breakdown with real-time calculations\n- **Token Management**: Add, remove, and track cryptocurrency tokens with CoinGecko integration\n- **Holdings Tracking**: Edit and manage token holdings with automatic value calculations\n- **Price Updates**: Real-time price data with 24h change indicators and 7-day sparkline charts\n- **Wallet Integration**: Connect cryptocurrency wallets using RainbowKit and Wagmi\n- **Responsive Design**: Fully responsive UI matching provided Figma designs for desktop and mobile\n- **Data Persistence**: LocalStorage integration to maintain watchlist across sessions\n- **Search \u0026 Discovery**: Token search with trending tokens display in modal interface\n\n## Tech Stack\n\n### Frontend\n- **React 19** - Latest React with modern features\n- **TypeScript** - Type-safe development\n- **Vite** - Fast build tool and development server\n- **Tailwind CSS** - Utility-first CSS framework with custom design system\n\n### State Management\n- **Redux Toolkit** - Predictable state container\n- **React Redux** - Official React bindings for Redux\n\n### Charts \u0026 Visualization\n- **Recharts** - Responsive charts built on D3\n- **Custom Sparklines** - Real-time 7-day price trends\n\n### Wallet Integration\n- **RainbowKit** - Wallet connection UI\n- **Wagmi** - React hooks for Ethereum\n- **Viem** - TypeScript interface for Ethereum\n\n### Data \u0026 API\n- **CoinGecko API** - Real-time cryptocurrency data\n- **Axios** - HTTP client for API requests\n\n### UI Components\n- **Radix UI** - Unstyled, accessible components\n- **Lucide React** - Beautiful icon library\n- **Custom Components** - Optimized, reusable UI components\n\n## Architecture\n\n### Component Structure\n```\ncomponents/\n├── watchlist/           # Watchlist-specific components\n│   ├── WatchlistTable.tsx\n│   ├── TokenRow.tsx\n│   ├── TokenImage.tsx\n│   └── ...\n├── PortfolioCard.tsx    # Portfolio overview\n└── AddTokenModal.tsx    # Token search and addition\n```\n\n### Performance Optimizations\n- **React.memo** for component memoization\n- **useMemo** for expensive calculations\n- **useCallback** for stable function references\n- **Custom hooks** for reusable logic\n- **Component splitting** for better bundle sizing\n\n### State Management\n- Centralized Redux store with TypeScript\n- LocalStorage persistence middleware\n- Optimistic UI updates for better UX\n\n## Getting Started\n\n### Prerequisites\n- Node.js 18+ and npm\n\n### Installation\n\n1. **Clone the repository**\n```bash\ngit clone https://github.com/naveensing575/token-portfolio.git\ncd token-portfolio\n```\n\n2. **Install dependencies**\n```bash\nnpm install\n```\n\n3. **Environment Setup**\n```bash\ncp .env.example .env\nVITE_WALLETCONNECT_PROJECT_ID=your_walletconnect_project_id_here\nVITE_COINGECKO_API_URL=https://api.coingecko.com/api/v3\n```\n\n4. **Start development server**\n```bash\nnpm run dev\n```\n\n5. **Build for production**\n```bash\nnpm run build\n```\n\n## Project Structure\n\n```\nsrc/\n├── components/          # React components\n├── hooks/              # Custom React hooks\n├── features/           # Redux slices and features\n├── services/           # API services and external integrations\n├── store/              # Redux store configuration\n├── utils/              # Utility functions\n├── assets/             # Static assets (SVGs, images)\n└── types/              # TypeScript type definitions\n```\n\n## API Integration\n\n### CoinGecko API\n- Token search and trending data\n- Real-time price information\n- Historical price charts (sparklines)\n- Market data and statistics\n\n### Wallet Integration\n- Multi-wallet support via RainbowKit\n- Ethereum mainnet integration\n- Connection state management\n- Custom styled wallet buttons\n\n## Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'feat: add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\nBuilt with ❤️ using modern React and TypeScript\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaveensing575%2Ftoken-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnaveensing575%2Ftoken-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaveensing575%2Ftoken-portfolio/lists"}