{"id":31552294,"url":"https://github.com/taypyc/crypto-live-trades","last_synced_at":"2026-04-05T08:33:44.029Z","repository":{"id":315601312,"uuid":"1060168965","full_name":"taypyc/crypto-live-trades","owner":"taypyc","description":null,"archived":false,"fork":false,"pushed_at":"2025-09-19T13:45:46.000Z","size":48,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-09-19T15:44:21.461Z","etag":null,"topics":["eslint","lucide-react","postcss","react","react-dom","tailwindcss","typescript","typescript-eslint","vercel-deployment","vitejs-react","websockets"],"latest_commit_sha":null,"homepage":"https://crypto-live-trades.vercel.app","language":null,"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/taypyc.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-19T13:40:09.000Z","updated_at":"2025-09-19T13:54:35.000Z","dependencies_parsed_at":"2025-09-19T15:44:23.117Z","dependency_job_id":"d9788694-1dc9-40f0-9908-147d8881a900","html_url":"https://github.com/taypyc/crypto-live-trades","commit_stats":null,"previous_names":["taypyc/crypto-live-trades"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/taypyc/crypto-live-trades","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taypyc%2Fcrypto-live-trades","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taypyc%2Fcrypto-live-trades/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taypyc%2Fcrypto-live-trades/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taypyc%2Fcrypto-live-trades/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taypyc","download_url":"https://codeload.github.com/taypyc/crypto-live-trades/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taypyc%2Fcrypto-live-trades/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31430009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T08:13:15.228Z","status":"ssl_error","status_checked_at":"2026-04-05T08:13:11.839Z","response_time":75,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["eslint","lucide-react","postcss","react","react-dom","tailwindcss","typescript","typescript-eslint","vercel-deployment","vitejs-react","websockets"],"created_at":"2025-10-04T19:50:28.075Z","updated_at":"2026-04-05T08:33:44.021Z","avatar_url":"https://github.com/taypyc.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Crypto Live Trades WebSocket\n\nA real-time cryptocurrency trading dashboard that displays live trade data from Binance using WebSocket connections. Built with React, TypeScript, and Tailwind CSS.\n\n## ✨ Features\n\n- **Real-time Data**: Live cryptocurrency trade updates via Binance WebSocket API\n- **Multiple Pairs**: Track 8 popular trading pairs simultaneously:\n  - BTC/USDT, ETH/USDT, BNB/USDT, XRP/USDT\n  - ADA/USDT, DOGE/USDT, MATIC/USDT, SOL/USDT\n- **Multi-Currency Support**: View prices in USD, EUR, GBP, JPY, AUD, CAD, CHF, CNY\n- **Responsive Design**: Beautiful, modern UI that works on all devices\n- **Animated Background**: Dynamic visual effects for enhanced user experience\n- **Auto-Reconnection**: Robust WebSocket connection with automatic reconnection\n- **Type-Safe**: Full TypeScript implementation for better development experience\n\n## 🛠️ Tech Stack\n\n- **Frontend**: React 18 with TypeScript\n- **Styling**: Tailwind CSS\n- **Icons**: Lucide React\n- **Build Tool**: Vite\n- **Linting**: ESLint with TypeScript support\n- **WebSocket**: Native WebSocket API with Binance streams\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js (version 16 or higher)\n- npm or yarn package manager\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd crypto-live-trades-websocket\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Start the development server**\n   ```bash\n   npm run dev\n   ```\n\n4. **Open your browser**\n   Navigate to `http://localhost:5173` to view the application\n\n### Available Scripts\n\n- `npm run dev` - Start the development server\n- `npm run build` - Build the project for production\n- `npm run preview` - Preview the production build locally\n- `npm run lint` - Run ESLint for code quality checks\n\n## 📁 Project Structure\n\n```\nsrc/\n├── components/          # React components\n│   ├── AnimatedBackground.tsx\n│   ├── CurrencySelector.tsx\n│   ├── Footer.tsx\n│   ├── TradeCard.tsx\n│   └── TradeGrid.tsx\n├── config/             # Configuration files\n│   ├── currencies.ts   # Supported currencies\n│   └── pairs.ts       # Trading pairs\n├── hooks/              # Custom React hooks\n│   ├── useBinanceWebSocket.ts\n│   ├── useCurrency.ts\n│   └── useMultiWebSocket.ts\n├── types/              # TypeScript type definitions\n│   └── trade.ts\n├── utils/              # Utility functions\n│   └── formatters.ts\n├── App.tsx            # Main application component\n└── main.tsx          # Application entry point\n```\n\n## 🔌 WebSocket Integration\n\nThe application connects to Binance's WebSocket API using the combined streams endpoint:\n- **Endpoint**: `wss://stream.binance.com:9443/ws`\n- **Streams**: Individual trade streams for each supported pair\n- **Format**: `{symbol}@trade` (e.g., `btcusdt@trade`)\n\n### WebSocket Features\n\n- **Multi-stream Subscription**: Subscribe to multiple trading pairs with a single connection\n- **Automatic Reconnection**: Handles connection drops with exponential backoff\n- **Error Handling**: Comprehensive error handling and logging\n- **Clean Disconnection**: Proper unsubscription and cleanup on component unmount\n\n## 🎨 UI Components\n\n### TradeGrid\nDisplays all trading pairs in a responsive grid layout with real-time updates.\n\n### TradeCard\nIndividual card component showing:\n- Trading pair symbol\n- Current price\n- Buy/sell indicator\n- Trade quantity\n- Timestamp\n\n### CurrencySelector\nDropdown component for switching between different fiat currencies.\n\n### AnimatedBackground\nDynamic background with floating elements for visual appeal.\n\n## 🌍 Multi-Currency Support\n\nThe application supports price display in multiple currencies:\n- USD (US Dollar) - Default\n- EUR (Euro)\n- GBP (British Pound)\n- JPY (Japanese Yen)\n- AUD (Australian Dollar)\n- CAD (Canadian Dollar)\n- CHF (Swiss Franc)\n- CNY (Chinese Yuan)\n\n*Note: Currency conversion rates are fetched from external APIs and may have slight delays.*\n\n## 🔧 Configuration\n\n### Adding New Trading Pairs\n\nTo add new trading pairs, edit `src/config/pairs.ts`:\n\n```typescript\nexport const tradingPairs = [\n  'btcusdt',\n  'ethusdt',\n  // Add new pairs here\n  'newpairusdt',\n] as const;\n```\n\n### Adding New Currencies\n\nTo add new currencies, edit `src/config/currencies.ts`:\n\n```typescript\nexport const currencies = [\n  { code: 'USD', symbol: '$', name: 'US Dollar' },\n  // Add new currencies here\n  { code: 'NEW', symbol: '¤', name: 'New Currency' },\n] as const;\n```\n\n## 📱 Responsive Design\n\nThe application is fully responsive and optimized for:\n- **Desktop**: Full grid layout with all features\n- **Tablet**: Adapted grid with touch-friendly interactions\n- **Mobile**: Stacked layout optimized for small screens\n\n## 🚦 Performance\n\n- **Efficient Updates**: Only re-renders components when trade data changes\n- **Memory Management**: Proper cleanup of WebSocket connections\n- **Optimized Rendering**: Uses React's built-in optimization techniques\n- **Lazy Loading**: Components are loaded as needed\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m '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 open source and available under the [MIT License](LICENSE).\n\n## ⚠️ Disclaimer\n\nThis application is for educational and informational purposes only. It displays real-time cryptocurrency data but should not be used as the sole basis for trading decisions. Always conduct your own research and consider consulting with financial advisors before making investment decisions.\n\n## 🙏 Acknowledgments\n\n- [Binance API](https://binance-docs.github.io/apidocs/) for providing real-time data\n- [React](https://reactjs.org/) for the amazing framework\n- [Tailwind CSS](https://tailwindcss.com/) for the utility-first CSS framework\n- [Lucide React](https://lucide.dev/) for the beautiful icons\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaypyc%2Fcrypto-live-trades","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaypyc%2Fcrypto-live-trades","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaypyc%2Fcrypto-live-trades/lists"}