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.
- 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.
- React: JavaScript framework for building user interfaces.
- CoinGecko API (or any other crypto API).
- CSS for styling.
git clone https://github.com/gdgpce/crypto-price-tracker.git
cd CryptoPriceTracker
Ensure you have Node.js and npm installed. Run the following command to install necessary packages:
npm install
- Go to the CoinGecko API and sign up (if required).
- Read the API documentation and obtain the API endpoint for fetching cryptocurrency prices.
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
.
npm start
Open http://localhost:3000 to view the CryptoPriceTracker in your browser.
CryptoPriceTracker/
├── public/
├── src/
│ ├── components/
│ │ └── CryptoPriceTracker.js
│ ├── App.js
│ ├── index.js
├── .env
├── package.json
└── README.md
The app fetches data from the CoinGecko API. For detailed documentation, visit the CoinGecko API Docs.
-
Install Create-React-App: If you don’t already have a React app setup, you can create one using:
npx create-react-app CryptoPriceTracker
-
Install Axios: Install the Axios library for making API requests:
npm install axios
-
Create CryptoPriceTracker Component: Inside the
src/components
folder, create aCryptoPriceTracker.js
file to manage API requests and display crypto prices. -
Fetching Data: Use the
useEffect
React hook to fetch crypto prices from the API when the component is mounted. -
Display Data: Map over the fetched data and display it inside an HTML element (e.g.,
<ul>
or<table>
). -
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.