{"id":51126553,"url":"https://github.com/apiverve/crypto-tracker-react-tutorial","last_synced_at":"2026-06-25T08:02:00.180Z","repository":{"id":338744095,"uuid":"1158967081","full_name":"apiverve/crypto-tracker-react-tutorial","owner":"apiverve","description":"Bitcoin price tracker with real-time data built with React","archived":false,"fork":false,"pushed_at":"2026-02-16T07:40:26.000Z","size":18,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-16T14:17:28.333Z","etag":null,"topics":["apiverve","bitcoin","crypto-tracker","cryptocurrency","finance","price-tracker","react","tutorial"],"latest_commit_sha":null,"homepage":"https://apiverve.com/marketplace/bitcoin","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/apiverve.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2026-02-16T06:23:26.000Z","updated_at":"2026-02-16T07:40:29.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/apiverve/crypto-tracker-react-tutorial","commit_stats":null,"previous_names":["apiverve/crypto-tracker-react-tutorial"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/apiverve/crypto-tracker-react-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Fcrypto-tracker-react-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Fcrypto-tracker-react-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Fcrypto-tracker-react-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Fcrypto-tracker-react-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apiverve","download_url":"https://codeload.github.com/apiverve/crypto-tracker-react-tutorial/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Fcrypto-tracker-react-tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34765322,"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-06-25T02:00:05.521Z","response_time":101,"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":["apiverve","bitcoin","crypto-tracker","cryptocurrency","finance","price-tracker","react","tutorial"],"created_at":"2026-06-25T08:01:59.328Z","updated_at":"2026-06-25T08:02:00.174Z","avatar_url":"https://github.com/apiverve.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Crypto Tracker | APIVerve API Tutorial\r\n\r\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\r\n[![Build](https://img.shields.io/badge/Build-Passing-brightgreen.svg)]()\r\n[![React](https://img.shields.io/badge/React-18-61dafb)](https://react.dev)\r\n[![Vite](https://img.shields.io/badge/Vite-5-646cff)](https://vitejs.dev)\r\n[![APIVerve | Bitcoin](https://img.shields.io/badge/APIVerve-Bitcoin-purple)](https://apiverve.com/marketplace/bitcoin?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=crypto-tracker-react-tutorial)\r\n\r\nA sleek Bitcoin price tracker built with React. View real-time price, market cap, 24h volume, and price changes in multiple currencies.\r\n\r\n![Screenshot](https://raw.githubusercontent.com/apiverve/crypto-tracker-react-tutorial/main/screenshot.jpg)\r\n\r\n---\r\n\r\n### Get Your Free API Key\r\n\r\nThis tutorial requires an APIVerve API key. **[Sign up free](https://dashboard.apiverve.com?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=crypto-tracker-react-tutorial)** - no credit card required.\r\n\r\n---\r\n\r\n## Features\r\n\r\n- Real-time Bitcoin price data\r\n- Support for 8 currencies (USD, EUR, GBP, JPY, etc.)\r\n- 24h price change with color indicators\r\n- Market cap and trading volume\r\n- Last updated timestamp\r\n- Auto-refresh every 60 seconds\r\n- Dark theme crypto-style UI\r\n- Built with React 18 and Vite\r\n\r\n## Quick Start\r\n\r\n1. **Clone this repository**\r\n   ```bash\r\n   git clone https://github.com/apiverve/crypto-tracker-react-tutorial.git\r\n   cd crypto-tracker-react-tutorial\r\n   ```\r\n\r\n2. **Install dependencies**\r\n   ```bash\r\n   npm install\r\n   ```\r\n\r\n3. **Add your API key**\r\n\r\n   Open `.env` and add your API key:\r\n   ```\r\n   VITE_API_KEY=your-api-key-here\r\n   ```\r\n\r\n4. **Start the development server**\r\n   ```bash\r\n   npm run dev\r\n   ```\r\n\r\n5. **Open in browser**\r\n\r\n   Visit http://localhost:5173 and track Bitcoin!\r\n\r\n## Project Structure\r\n\r\n```\r\ncrypto-tracker-react-tutorial/\r\n├── src/\r\n│   ├── App.jsx         # Main React component\r\n│   ├── App.css         # Styles\r\n│   └── main.jsx        # Entry point\r\n├── index.html          # HTML template\r\n├── package.json        # Dependencies\r\n├── vite.config.js      # Vite configuration\r\n├── .env                # Environment variables (add your API key)\r\n├── screenshot.jpg      # Preview image\r\n├── LICENSE             # MIT license\r\n├── .gitignore          # Git ignore rules\r\n└── README.md           # This file\r\n```\r\n\r\n## How It Works\r\n\r\n1. App loads and fetches current Bitcoin price\r\n2. User can switch between currencies\r\n3. Data auto-refreshes every 60 seconds\r\n4. Price changes are color-coded (green/red)\r\n5. Large numbers are formatted (1.2T, 45.6B, etc.)\r\n\r\n### The API Call\r\n\r\n```javascript\r\nconst response = await fetch(`${API_URL}?currency=USD`, {\r\n  method: 'GET',\r\n  headers: {\r\n    'x-api-key': API_KEY\r\n  }\r\n});\r\n```\r\n\r\n## API Reference\r\n\r\n**Endpoint:** `GET https://api.apiverve.com/v1/bitcoin`\r\n\r\n**Query Parameters:**\r\n\r\n| Parameter | Type | Required | Description |\r\n|-----------|------|----------|-------------|\r\n| `currency` | string | No | Currency code (default: USD) |\r\n\r\n**Example Response:**\r\n\r\n```json\r\n{\r\n  \"status\": \"ok\",\r\n  \"error\": null,\r\n  \"data\": {\r\n    \"currency\": \"USD\",\r\n    \"price\": 97250.43,\r\n    \"marketCap\": 1928000000000,\r\n    \"volume24h\": 35420000000,\r\n    \"change24h\": -1.52,\r\n    \"lastUpdated\": \"2026-02-07T12:00:00.000Z\"\r\n  }\r\n}\r\n```\r\n\r\n## Supported Currencies\r\n\r\n| Code | Currency |\r\n|------|----------|\r\n| USD | US Dollar |\r\n| EUR | Euro |\r\n| GBP | British Pound |\r\n| JPY | Japanese Yen |\r\n| CAD | Canadian Dollar |\r\n| AUD | Australian Dollar |\r\n| CHF | Swiss Franc |\r\n| CNY | Chinese Yuan |\r\n\r\n## Customization Ideas\r\n\r\n- Add more cryptocurrencies (Ethereum, etc.)\r\n- Add price alerts/notifications\r\n- Add historical price charts\r\n- Save favorite currency to localStorage\r\n- Add portfolio tracking\r\n- Implement price predictions\r\n\r\n## Related APIs\r\n\r\nExplore more APIs at [APIVerve](https://apiverve.com/marketplace?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=crypto-tracker-react-tutorial):\r\n\r\n- [Ethereum Price](https://apiverve.com/marketplace/ethereum?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=crypto-tracker-react-tutorial) - Track Ethereum prices\r\n- [Exchange Rate](https://apiverve.com/marketplace/exchangerate?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=crypto-tracker-react-tutorial) - Currency conversion\r\n- [Gold Price](https://apiverve.com/marketplace/goldprice?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=crypto-tracker-react-tutorial) - Track gold prices\r\n\r\n## Free Plan Note\r\n\r\nThis tutorial works with the free APIVerve plan. Some APIs may have:\r\n- **Locked fields**: Premium response fields return `null` on free plans\r\n- **Ignored parameters**: Some optional parameters require a paid plan\r\n\r\nThe API response includes a `premium` object when limitations apply. [Upgrade anytime](https://dashboard.apiverve.com/plans) to unlock all features.\r\n\r\n## License\r\n\r\nMIT - see [LICENSE](LICENSE)\r\n\r\n## Links\r\n\r\n- [Get API Key](https://dashboard.apiverve.com?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=crypto-tracker-react-tutorial) - Sign up free\r\n- [APIVerve Marketplace](https://apiverve.com/marketplace?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=crypto-tracker-react-tutorial) - Browse 300+ APIs\r\n- [Bitcoin API](https://apiverve.com/marketplace/bitcoin?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=crypto-tracker-react-tutorial) - API details\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapiverve%2Fcrypto-tracker-react-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapiverve%2Fcrypto-tracker-react-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapiverve%2Fcrypto-tracker-react-tutorial/lists"}