/cryptotracker-dashboard

A live crypto tracker application by which you can track the status of different crypto coins

Primary LanguageJavaScript

🌟 Cryptotracker App

📖 Overview

The Cryptotracker App provides a seamless platform to track cryptocurrency prices, compare different cryptocurrencies, and create a personalized watchlist of your preferred coins.


🚀 Features

  • 🏠 Home: The entry point to the application.
  • 📊 Dashboard:
    • Displays a comprehensive list of cryptocurrencies.
    • Each coin is detailed in a separate card with information such as:
      • Coin Name
      • Price Change Percentage
      • Current Price
      • Total Volume
      • Market Capitalization
      • Option to add to your watchlist
  • 🔍 Compare:
    • Compare two cryptocurrencies side by side, showcasing price trends and relevant metrics.
  • ⭐ Watchlist:
    • Create and manage a list of your preferred cryptocurrencies for easy tracking.

🌐 Data Source

Cryptocurrency data is fetched from the CoinGecko API. The application retrieves a list of all available coins upon loading the Dashboard component and displays them using pagination.


⚙️ Tech Stack

Frontend

  • UI Framework: React
  • Styling: Emotion, MUI (Material UI)
  • Routing: React Router
  • State Management: React Context API
  • UI Components: MUI for pre-built components
  • Animations: Framer Motion
  • Charting: Chart.js, react-chartjs-2
  • Notifications: React Toastify for displaying notifications
  • Icons: MUI Icons
  • Testing: React Testing Library, Jest

Backend

  • Data Fetching: Axios for making API calls to CoinGecko
  • State Management: React Context API

Other Dependencies

  • web-vitals: For measuring web performance metrics
  • react-web-share: For sharing content
  • eslint: For code linting

💻 Screenshots

1. Home

crypto-tracker-home-page.png

2. Dashboard

crypto-tracker-dashboard.png

3. Compare

crypto-tracker-compare.png


🤝 Get Involved

Feel free to fork the repository, open issues for enhancements, or contribute with pull requests. Let's build something amazing together!


📫 Contact

If you have any questions or suggestions, feel free to reach out!