CryptoTracker

A powerful crypto tracker built with React, Axios, Framer Motion, and Chart.js. Keep an eye on your favorite cryptocurrencies with customizable watchlists and dynamic, real-time data visualizations.

Features

• Customizable Watchlists: Track your favorite cryptocurrencies and manage them effortlessly with watchlists.
• Real-Time Data: Get up-to-date price data, market cap, and total volumes of your selected cryptocurrencies.
• Dynamic Charts: Visualize the historical price data of cryptocurrencies using interactive and responsive charts.
• Price Toggle: Switch between viewing prices, market caps, or total volumes.
• Multi-Axis Charts: Compare two cryptocurrencies simultaneously using multi-axis charts.
• React-Toastify: Notifiy user with pop-up messages about the action result (Success/Error/Alert).

Technologies Used

• React: For building the UI components.
• Axios: For handling API requests.
• Framer Motion: For smooth and engaging animations.
• Chart.js: For rendering dynamic cryptocurrency charts.
• Material UI: Used for various UI components such as:
  • ToggleButton: To switch between different price types.
  • Select: For dropdown menus and selecting cryptocurrencies.
  • Icons: For enhancing the user interface with recognizable icons.
  • Switch: For toggling between different UI elements.
  • Drawer: For navigation and watchlist management.
  • Loader: To show a loading state when data is being fetched.
  • Tooltip: For providing additional information on hover.
  • Pagination: For navigating through pages of data.
  • Tab: For switching between different sections of the application.
• React-Toastify: For displaying action results with pop-up messages.

Project Structure

├── public
├── src
│   ├── apis                 # API calls to fetch cryptocurrency data
│   ├── components            # Reusable UI components such as charts, buttons, etc.
│   ├── pages                 # Pages such as Dashboard, Watchlist, etc.
│   ├── styles                # Global CSS and style modules
│   └── utils                 # Utility functions like number conversion, data formatting
└── README.md

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/cryptotracker.git

2. Navigate to the project directory:

   cd cryptotracker

3. Install the dependencies:

   npm install

4. Run the app:

   npm start

Pictures

Here are some screenshots of the application:

1. Homepage

2. Dashboard Grid View

3. Dashboard List View

4. Coin Details

5. Price Comparison

6. Price Comparison Graph

License

This project is licensed under the MIT License.