Crypto Tracker | APIVerve API Tutorial

A sleek Bitcoin price tracker built with React. View real-time price, market cap, 24h volume, and price changes in multiple currencies.

---

Get Your Free API Key

This tutorial requires an APIVerve API key. Sign up free - no credit card required.

---

Features

• Real-time Bitcoin price data
• Support for 8 currencies (USD, EUR, GBP, JPY, etc.)
• 24h price change with color indicators
• Market cap and trading volume
• Last updated timestamp
• Auto-refresh every 60 seconds
• Dark theme crypto-style UI
• Built with React 18 and Vite

Quick Start

1. Clone this repository

   git clone https://github.com/apiverve/crypto-tracker-react-tutorial.git
   cd crypto-tracker-react-tutorial

2. Install dependencies

   npm install

3. Add your API key

   Open .env and add your API key:

   VITE_API_KEY=your-api-key-here
   

4. Start the development server

   npm run dev

5. Open in browser

   Visit http://localhost:5173 and track Bitcoin!

Project Structure

crypto-tracker-react-tutorial/
├── src/
│   ├── App.jsx         # Main React component
│   ├── App.css         # Styles
│   └── main.jsx        # Entry point
├── index.html          # HTML template
├── package.json        # Dependencies
├── vite.config.js      # Vite configuration
├── .env                # Environment variables (add your API key)
├── screenshot.jpg      # Preview image
├── LICENSE             # MIT license
├── .gitignore          # Git ignore rules
└── README.md           # This file

How It Works

1. App loads and fetches current Bitcoin price
2. User can switch between currencies
3. Data auto-refreshes every 60 seconds
4. Price changes are color-coded (green/red)
5. Large numbers are formatted (1.2T, 45.6B, etc.)

The API Call

const response = await fetch(`${API_URL}?currency=USD`, {
  method: 'GET',
  headers: {
    'x-api-key': API_KEY
  }
});

API Reference

Endpoint: GET https://api.apiverve.com/v1/bitcoin

Query Parameters:

Parameter	Type	Required	Description
currency	string	No	Currency code (default: USD)

Example Response:

{
  "status": "ok",
  "error": null,
  "data": {
    "currency": "USD",
    "price": 97250.43,
    "marketCap": 1928000000000,
    "volume24h": 35420000000,
    "change24h": -1.52,
    "lastUpdated": "2026-02-07T12:00:00.000Z"
  }
}

Supported Currencies

Code	Currency
USD	US Dollar
EUR	Euro
GBP	British Pound
JPY	Japanese Yen
CAD	Canadian Dollar
AUD	Australian Dollar
CHF	Swiss Franc
CNY	Chinese Yuan

Customization Ideas

• Add more cryptocurrencies (Ethereum, etc.)
• Add price alerts/notifications
• Add historical price charts
• Save favorite currency to localStorage
• Add portfolio tracking
• Implement price predictions

Related APIs

Explore more APIs at APIVerve:

• Ethereum Price - Track Ethereum prices
• Exchange Rate - Currency conversion
• Gold Price - Track gold prices

Free Plan Note

This tutorial works with the free APIVerve plan. Some APIs may have:

• Locked fields: Premium response fields return null on free plans
• Ignored parameters: Some optional parameters require a paid plan

The API response includes a premium object when limitations apply. Upgrade anytime to unlock all features.

License

MIT - see LICENSE

Links

• Get API Key - Sign up free
• APIVerve Marketplace - Browse 300+ APIs
• Bitcoin API - API details