Skip to main content

​
Quick Start

Get CryptoTracker running on your development machine in just a few steps. This guide will take you from cloning the repository to seeing live cryptocurrency data on your device or emulator.
Make sure you have Node.js (v18 or later) installed on your machine before starting.

​
Getting Started

1

Clone the Repository

Clone the CryptoTracker repository to your local machine:
git clone https://github.com/sebas9526/CryptoTracker.git
cd CryptoTracker
2

Install Dependencies

Install all required packages using your preferred package manager:
npm install
This will install all dependencies including:
  • React Native 0.79.2
  • Expo ~53.0
  • Expo Router
  • TypeScript
  • And all other required packages
3

Start the Development Server

Launch the Expo development server:
npm start
This will start Metro Bundler and open the Expo DevTools in your browser.
4

Run on Your Device or Emulator

Choose how you want to run the app:Option 1: Physical Device (Recommended)
  • Install the Expo Go app from the App Store (iOS) or Google Play (Android)
  • Scan the QR code shown in your terminal with Expo Go
Option 2: iOS Simulator (Mac only)
npm run ios
Option 3: Android Emulator
npm run android
Option 4: Web Browser
npm run web

​
Understanding the App Structure

Once the app is running, you’ll see the home screen with a list of cryptocurrencies. Here’s what you can do:

​
Home Screen Features

The home screen (src/screens/HomeScreen.tsx) displays a scrollable list of cryptocurrencies: 
const HomeScreen = () => {
  // Fetch cryptocurrency data
  const { data, loading, error } = useCryptoData();
  
  // Get current filter state
  const { filter } = useFilter();
  
  // Filter cryptocurrencies based on user input
  const filtered = data.filter((crypto) => {
    const nameMatch = crypto.name.toLowerCase().includes(filter.text.toLowerCase());
    const symbolMatch = crypto.symbol.toLowerCase().includes(filter.text.toLowerCase());
    const minOk = filter.minPrice === null || Number(crypto.price_usd) >= filter.minPrice;
    const maxOk = filter.maxPrice === null || Number(crypto.price_usd) <= filter.maxPrice;
    
    return (nameMatch || symbolMatch) && minOk && maxOk;
  });
  
  // ... render filtered cryptocurrencies
};

​
Search and Filter

Use the search bar to filter cryptocurrencies by:
  • Name - Search for “Bitcoin”, “Ethereum”, etc.
  • Symbol - Search for “BTC”, “ETH”, etc.
  • Price Range - Set minimum and maximum price filters
interface Filter {
  text: string;           // Search by name or symbol
  minPrice: number | null; // Minimum price in USD
  maxPrice: number | null; // Maximum price in USD
}

​
Cryptocurrency Cards

Each cryptocurrency is displayed in a card showing:
  • Name and symbol
  • Current price in USD
  • 24-hour price change percentage
  • Market ranking
Tap any card to view detailed information: 
<Pressable onPress={() => router.push(`/crypto/${crypto.id}`)}>
  <TouchableOpacity style={styles.card}>
    <View style={styles.topRow}>
      <Text style={styles.name}>{crypto.name}</Text>
      <Text style={styles.rank}>#{crypto.rank}</Text>
    </View>
    <View style={styles.bottomRow}>
      <Text style={styles.price}>{formatToUSD(price)}</Text>
      <Text style={styles.change}>
        {change.toFixed(2)}% <Text style={styles.sub}>(24h)</Text>
      </Text>
    </View>
  </TouchableOpacity>
</Pressable>

​
Data Fetching

CryptoTracker uses a custom hook to fetch data from the CoinLore API: 
export const useCryptoData = () => {
  const [data, setData] = useState<CryptoApiResponse[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch('https://api.coinlore.net/api/tickers/');
        const json = await res.json();
        const cryptos = json.data.map(
          (item: any) => new Crypto(
            item.id, 
            item.name, 
            item.rank, 
            item.symbol, 
            item.price_usd, 
            item.percent_change_24h
          )
        );
        setData(cryptos);
      } catch (err) {
        setError('Error al obtener criptomonedas');
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  return { data, loading, error };
};
The CoinLore API is free and doesn’t require authentication, but it has rate limits. Avoid making too many requests in a short period.

​
Next Steps

Installation Guide

Learn about platform-specific setup for iOS and Android

Features

Explore all features in detail

Architecture

Understand the app’s architecture and design patterns

API Reference

Deep dive into the CoinLore API integration

​
Troubleshooting

Try clearing the cache and reinstalling dependencies:
# Clear npm cache
npm cache clean --force

# Remove node_modules and package-lock
rm -rf node_modules package-lock.json

# Reinstall
npm install

# Clear Expo cache
npx expo start -c
Make sure:
  • Your phone and computer are on the same network
  • Firewall isn’t blocking the connection
  • You’re using the latest version of Expo Go
Try using tunnel mode:
npx expo start --tunnel

Build docs developers (and LLMs) love

Get started for freeTalk to us