DAY 5 — Building a Crypto Tracker with React & Chart.js

Content:

This week, I finished building my Crypto Tracker project, a React.js app that fetches live data from the CoinGecko API. Here’s the full breakdown:

Features built

• Fetched top 10 coins by market cap with CoinGecko’s /coins/markets endpoint

• Displayed prices, 24h change, and market cap in a styled table

• Highlighted gainers in green and losers in red

• Integrated Chart.js (via react-chartjs-2) to visualize 7-day price trends

• Added a dropdown to switch between BTC, ETH, DOGE, ADA, SOL, BNB, and more

• Implemented a search bar for filtering coins

• Deployed final build to Vercel for easy sharing

Problems & Solutions

• CORS errors: Solved by setting up a local proxy in package.json

• 403 Forbidden: Fixed by ensuring correct endpoint usage without auth headers

• Chart consistency: Styled chart colors to match the table’s green/red theme for consistency

Key Takeaways

• API-driven apps come alive with data visualization

• Small UX touches (conditional formatting, dropdowns, search bars) make apps feel polished

• Deployment is as important as coding — making the project live is part of the delivery

👉 [Live Demo Link]
👉 [GitHub Repo]

---