Skip to content

Latest commit

 

History

History
146 lines (99 loc) · 5.35 KB

README.md

File metadata and controls

146 lines (99 loc) · 5.35 KB
Raw

Banner

🪙 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.

demo page link

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. Homepage

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

🛠 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.