Skip to content

gdgpce/crypto-price-tracker

Repository files navigation

CryptoPriceTracker Dashboard

Overview

CryptoPriceTracker is a simple web dashboard that fetches and displays real-time cryptocurrency prices using a public API. It shows the current value of popular cryptocurrencies like Bitcoin, Ethereum, etc. and updates automatically.

Features

  • Real-time cryptocurrency price updates.
  • Easy-to-use React app.
  • Fetch data from a public API (e.g., CoinGecko API).
  • Displays prices for multiple cryptocurrencies.

Technologies To Be Used

  • React: JavaScript framework for building user interfaces.
  • CoinGecko API (or any other crypto API).
  • CSS for styling.

Setup Instructions

1. Clone the repository

git clone https://github.com/gdgpce/crypto-price-tracker.git
cd CryptoPriceTracker

2. Install dependencies

Ensure you have Node.js and npm installed. Run the following command to install necessary packages:

npm install

3. Get the API Key

  • Go to the CoinGecko API and sign up (if required).
  • Read the API documentation and obtain the API endpoint for fetching cryptocurrency prices.

4. Create .env File (optional)

If the API requires an API key, create a .env file at the root of your project and add your API key:

REACT_APP_API_URL=https://api.coingecko.com/api/v3/

Ensure you restart the server if you change .env.

5. Start the React app

npm start

Open http://localhost:3000 to view the CryptoPriceTracker in your browser.

Folder Structure

CryptoPriceTracker/
├── public/
├── src/
│   ├── components/
│   │   └── CryptoPriceTracker.js
│   ├── App.js
│   ├── index.js
├── .env
├── package.json
└── README.md

API Documentation

The app fetches data from the CoinGecko API. For detailed documentation, visit the CoinGecko API Docs.


Guidelines for React Setup

Step-by-Step Guide:

  1. Install Create-React-App: If you don’t already have a React app setup, you can create one using:

    npx create-react-app CryptoPriceTracker
  2. Install Axios: Install the Axios library for making API requests:

    npm install axios
  3. Create CryptoPriceTracker Component: Inside the src/components folder, create a CryptoPriceTracker.js file to manage API requests and display crypto prices.

  4. Fetching Data: Use the useEffect React hook to fetch crypto prices from the API when the component is mounted.

  5. Display Data: Map over the fetched data and display it inside an HTML element (e.g., <ul> or <table>).

  6. Styling: Add CSS to style your dashboard. Keep it simple or customize the design as per your preference.


Happy coding! Let me know if you need any additional details.

About

No description or website provided.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published