🪙 Cryptocurrency Dashboard

The Cryptocurrency Dashboard is a front-end web application built using React, Vite, and Bootstrap. It fetches real-time cryptocurrency data from the CoinPaprika API, allowing users to explore up-to-date cryptocurrency information like prices, symbols, rankings, and more.

GitHub Repository

📚 Technologies

• React — A JavaScript library for building user interfaces and managing component states.
• Vite — A modern front-end build tool for fast development and build processes.
• Bootstrap — A CSS framework for building responsive and styled web applications.
• CoinPaprika API — A public API used to fetch current cryptocurrency data, including prices, symbols, and rankings.

📈 Key Features

• List of Cryptocurrencies: Displays a comprehensive list of cryptocurrencies with sortable columns (e.g., by symbol, name, rank).
• Search Functionality: Allows users to quickly search for a specific cryptocurrency by name or symbol.
• Detailed Coin Information: Clicking on a cryptocurrency opens a detailed page with more information about the selected coin.

🌐 Live Demo

Check out the live version of the app: Live Demo Link

🛠 Installation and Setup

To run this project locally, follow these steps:

1. Clone the repository

git clone https://github.com/visualGravitySense/crypto-data.git
cd crypto-data

2. Install dependencies

npm install

3. Run the project

npm run dev

Now open http://localhost:5173 in your browser to view the application.

🔗 API Reference

This project relies on the CoinPaprika API to fetch live cryptocurrency data. You can find the official API documentation here: CoinPaprika API Documentation.

Endpoints used:

• /v1/coins: Fetches a list of all available coins.
• /v1/tickers/{coin_id}: Fetches detailed information for a specific coin.

Example request to fetch detailed coin information:

GET https://api.coinpaprika.com/v1/tickers/{coin_id}

🖥️ Screenshots

• Homepage: Displays a list of cryptocurrencies with search and sorting features.

• Cryptocurrency Detail Page: Shows detailed information for a selected cryptocurrency.

🛠 Project Structure

The application follows a component-based architecture, making it modular and easy to extend.

/src
  /components     # Reusable React components (e.g., CoinList, CoinDetail)
  /pages          # Application pages (e.g., Home, CoinDetailPage)
  /styles         # SCSS files for component-specific styling
  /api            # API helper functions for fetching data

Key Files:

• App.jsx — Main application file that contains routing and theme management.
• CoinList.jsx — Displays a table of cryptocurrencies with sorting and search functionality.
• CoinDetailPage.jsx — Displays detailed data for a specific coin.
• api.js — Contains functions to interact with the CoinPaprika API.

🧑‍💻 Usage

• Homepage:

  • Displays a searchable and sortable list of cryptocurrencies.
  • Search by symbol or name.
  • Sort by cryptocurrency rank, symbol, or name.

• Coin Detail Page:

  • Click on any cryptocurrency to view detailed information, including price, rank, market cap, and more.

🔄 Future Plans

• Price Visualization: Add charts to display historical price changes for each cryptocurrency.
• Dark Mode: Implement dark mode for a better user experience in low-light environments.
• Expanded Coin Details: Show more information such as trading volume, supply, and price change trends.

🛠 Development Workflow

1. Branching: When adding a new feature or fixing a bug, always create a new branch:

   git checkout -b feature/add-new-feature

2. Commits: Write meaningful commit messages. For example:

   git commit -m "Add search functionality to cryptocurrency list"

3. Pull Requests: After completing your feature, push your branch and open a pull request on GitHub:

   git push origin feature/add-new-feature

👥 Contributing

Contributions are welcome! If you'd like to improve the project or fix any issues, please feel free to fork the repository and submit a pull request. Here’s how:

1. Fork the repository.
2. Create your feature branch (git checkout -b feature/your-feature-name).
3. Commit your changes (git commit -m 'Add feature').
4. Push to the branch (git push origin feature/your-feature-name).
5. Open a pull request.

📝 License

This project is licensed under the MIT License. See the LICENSE file for details.

---

Notes

1. Screenshots: Add project screenshots in the relevant section to visually represent your application.
2. API Key: If your API requires a key, provide instructions for configuring it. In this case, CoinPaprika does not require one, but if you add APIs requiring keys, explain the setup.
3. Future Plans: Regularly update the "Future Plans" section to reflect ongoing and planned improvements.