CoinScope

LiveLink

Quick overview: CoinScope is a lightweight crypto dashboard built with React 19 + Vite. It pulls data from the CoinGecko API and uses React Router for navigation. The app lists top coins with search, sorting, and page-size controls, and each coin has a detail page with image, description, market stats, official links, and a 7‑day price chart powered by Chart.js + date-fns. Loading states and basic error handling are included, with Vite’s dev proxy handling CoinGecko CORS in local development.

Features

• Coins list with search filter, sort options, and page size limit
• Coin details page with image, description, market stats, and links
• 7‑day price chart (Chart.js) with time scale and tooltips
• Loading states and basic error handling
• Vite dev proxy to avoid CORS during local development

Tech Stack

• React 19 + Vite 7
• React Router 7
• Chart.js 4 + react-chartjs-2 5
• chartjs-adapter-date-fns + date-fns
• react-spinners for loaders
• ESLint (Vite’s React config)

Getting Started

Prerequisites

• Node.js 18+ and npm

Install

• npm install

Environment

• Create .env in the project root (already included here). For development, requests are proxied via Vite to avoid CORS:
  • VITE_API_URL="/api/coins/markets?vs_currency=usd"
  • VITE_COIN_API_URL="/api/coins"

Dev Server

• npm run dev
• Open http://localhost:5173

Build & Preview

• npm run build
• npm run preview

API & CORS

• Coin data is fetched from the CoinGecko API.
• During development, vite.config.js proxies /api/* to https://api.coingecko.com/api/v3 to bypass browser CORS.
• For production, you should serve through a backend or serverless proxy (or configure a reverse proxy) because CoinGecko does not include permissive CORS headers for direct browser calls.

Project Structure

• src/pages/home.jsx – list view with filtering/sorting/limit
• src/pages/coin-details.jsx – single coin view + chart and links
• src/components/CoinChart.jsx – 7‑day price chart
• src/components/Spinner.jsx – loading indicator
• src/App.jsx – routes and top-level data fetching
• vite.config.js – Vite plugins and dev proxy for /api

Scripts

• npm run dev – start dev server
• npm run build – build for production
• npm run preview – preview production build

Notes

• Set VITE_API_URL and VITE_COIN_API_URL appropriately if you deploy behind your own API gateway or serverless proxy.
• Chart uses a time scale; ensure chartjs-adapter-date-fns remains installed and imported.