CryptoTracker

A modern, fast, and interactive cryptocurrency tracking web application built with React. It allows users to monitor real-time market data, view detailed coin metrics, compare multiple cryptocurrencies, and maintain a personal, persistent watchlist.

🚀 Key Features

• Real-Time Market Data: Live cryptocurrency prices, market caps, and volume metrics powered reliably by the CoinGecko API.
• Interactive Dashboards: Dynamic tables and intuitive grids to view the top 100 trending cryptocurrencies.
• Detailed Coin Analysis: Dedicated coin pages populated with interactive historical price charts (built with Chart.js).
• Crypto Comparison Utility: Side-by-side comparison of two cryptocurrencies to dissect their historical performance and current live metrics.
• Personal Watchlist: Instantly save your favorite coins to a local watchlist for rapid tracking over time.
• Dynamic Animations: Fluid UI transitions, list re-ordering, and micro-animations integrated natively with Framer Motion.
• Custom Cursor Interaction: A smooth, custom-built animated cursor implementation that scales correctly to interactive DOM elements.

🛠️ Tech Stack & Architecture

Core Technologies

• Frontend Framework: React.js (Create React App)
• Routing System: React Router DOM (v6)
• Styling & UI Components: Material-UI (MUI), pure CSS (App.css, index.css)
• Interactive Animations: Framer Motion
• Charting Engine: Chart.js wrapped with react-chartjs-2
• Network Interface: Axios
• Notifications: React Toastify (react-toastify)
• Native Sharing: React Web Share (react-web-share)

Directory Structure & Layout

The application follows a strictly modular architecture, separating the concern boundary between pages, granular UI elements, and core business utility functions:

src/
├── assets/           # Static assets, vector vectors, and local images
├── components/       # Reusable, scalable UI components grouped functionally
│   ├── Common/       # Global presentation components (Headers, Buttons, Loaders)
│   ├── Dashboard/    # Tabular and Grid view components for the main market dashboard
│   ├── LandingPage/  # Animated hero elements and introductory banners
│   ├── CoinPage/     # Granular coin statistics and responsive Chart modules
│   └── ComparePage/  # Interactive select/dropdowns and dual-chart configurations
├── functions/        # Core business logic, utility classes, data transformations
│   ├── get100Coins.js           # Polls CoinGecko for top 100 market coins
│   ├── getCoinData.js           # Fetches granular meta-details for a targeted coin 
│   ├── getPrices.js             # Compiles array of historical price series data
│   ├── settingChartData.js      # Translates API response into optimized Chart.js schemas
│   ├── convertNumber.js         # Text/financial localization formatter
│   └── saveItemToWatchlist.js   # LocalStorage mutation and synchronization
├── pages/            # Top-level application route containers
│   ├── Home.js       # Main introductory page
│   ├── Dashboard.js  # Core market overview and filtering
│   ├── Coin.js       # Isolated profile for an individual cryptocurrency
│   ├── Compare.js    # Multi-asset analytic comparison window
│   └── Watchlist.js  # Dedicated view reflecting the user's saved items
├── App.js            # Main application router and core Global event listener binding
└── index.js          # React DOM mounting entry point

⚙️ Core Modules & Application Logic

1. Data Acquisition Layer (src/functions/): Data seamlessly flows into the app primarily via Axios wrappers polling the CoinGecko V3 API endpoints (coins/markets, coins/{id}/market_chart). Specialized map-reduce functions convert the extensive API parameters into lean arrays tailor-made for mapping into React components and constructing optimized Chart.js objects.

2. State & Local Persistence Engine: The Watchlist system fundamentally utilizes the HTML5 localStorage Web API. State synchronization utilities safely parse and mutate a structured JSON array representing saved Coin identifiers across multiple browser sessions.

3. Global Layout Wrappers & Custom DOM Hooks (App.js): React useEffect lifecycle methods bind highly optimized vanilla DOM listeners (mousemove, mousedown) right at the application root (document.body). This logic effectively overrides default CSS pointers globally to achieve the premium, scaling "bubble" cursor seen in the UI.

4. Theming Architecture: The application intercepts MUI's ThemeProvider at its root level enforcing a uniform brand palette configuration globally (primary color injected as #3a80e9).

💻 Running the Application Locally

System Prerequisites

Ensure your local environment has the baseline package runners:

• Node.js (v14 or above strictly recommended)
• npm or yarn

Setup Instructions

1. Clone the specific repository branch locally:

   git clone <repository_url>
   cd cryptotracker

2. Hydrate all development and production dependencies:

   npm install
   # or
   yarn install

3. Launch the core development server:

   npm start
   # or
   yarn start

   The local React testing ecosystem will automatically proxy and boot onto http://localhost:3000.