Cryptocurrency Tracker

A real-time cryptocurrency tracker built with React that displays live cryptocurrency prices using the CoinGecko API. This application allows users to search for specific coins, view their current market data, and manage a list of favorite coins. An interactive price chart provides insights into historical trends.

Table of Contents

• Overview
• Features
• Installation
• Usage
• Project Structure
• Technologies Used
• License

Overview

The Cryptocurrency Tracker is a single-page React application that fetches live market data from the CoinGecko API. Users can:

• Browse a list of cryptocurrencies with details such as current price, market capitalization, and more.
• Search for coins by name or symbol.
• Add coins to a favorites list for quick reference.
• View interactive price charts to analyze trends over the past 7 days.

Features

• Live Data: Fetches real-time cryptocurrency data from the CoinGecko API.
• Search: Filter cryptocurrencies by name or symbol.
• Favorites Management: Add or remove coins from your favorites list with persistence via localStorage.
• Interactive Charts: Displays historical price data in a responsive line chart.
• Responsive UI: Designed to work on various screen sizes for a seamless user experience.

Technologies Used

React: Library for building the user interface.

Vite: Fast build tool and development server.

React Router DOM: For client-side routing.

Context API & localStorage: For state management and persistence.

Chart.js & react-chartjs-2: For rendering interactive price charts.

CoinGecko API: Public API for real-time cryptocurrency market data.

Installation

Ensure you have Node.js installed.

1. Clone the repository:

   git clone https://github.com/AdnanSattar/crypto-tracker.git
   cd crypto-tracker

Install dependencies:

npm install

Run the development server:

npm run dev

Open your browser:

Visit http://localhost:3000 (or the port specified by Vite) to view the application.

Usage

Home Page: Browse the list of cryptocurrencies. Use the search bar to filter coins by name or symbol.

Favorites: Add coins to your favorites list by clicking the "Add to Favorites" button. Access your favorites via the navigation bar.

Price Chart: Click on a coin (or view its details) to see an interactive price chart displaying historical data for the past 7 days.

Project Structure

crypto-tracker/
├── package.json
├── index.html
└── src/
    ├── main.jsx               # Application entry point
    ├── App.jsx                # Main app component with routing
    ├── index.css              # Global styles
    ├── contexts/
    │   └── CryptoContext.jsx  # Context API for managing coin data and favorites
    ├── services/
    │   └── api.js             # API functions to fetch data from CoinGecko
    ├── components/
    │   ├── NavBar.jsx         # Navigation bar component
    │   ├── SearchBar.jsx      # Search input component
    │   ├── CoinCard.jsx       # Card component for individual coin details
    │   └── PriceChart.jsx     # Component to display interactive price charts using Chart.js
    └── pages/
        ├── Home.jsx           # Home page displaying coin list and search functionality
        └── Favorites.jsx      # Favorites page to manage and view favorite coins