Cryptoverse Dashboard

A modern cryptocurrency dashboard built with React 19, TypeScript, Vite, Tailwind CSS v4, and shadcn/ui.

This project is configured as a high-fidelity learning playground, featuring a clean folder structure and predefined custom styling matching the classic 2021 Adrian Hajdin design aesthetic with modern refinements and dark-mode support.

---

🎨 Theme & Styling Configuration

The styling for this project uses Tailwind CSS v4 and is fully dynamic (supporting light and dark mode toggling).

Core Color Palette

• Sidebar: Dark navy-blue (#001529) with hover states at #002140 and borders at #002b4d.
• Content Background: Cool light gray (#f0f2f5) in Light Mode, and Slate-900 (#0f172a) in Dark Mode.
• Card Background: Pure white (#ffffff) in Light Mode, and Slate-800 (#1e293b) in Dark Mode.
• Primary Accent: Ant Design classic blue (#1890ff), hover (#40a9ff), and active (#096dd9).
• Headings & Text: Charcoal (#1f1f1f) / slate-100 (#f1f5f9) for headings; body text at #595959 / slate-300 (#cbd5e1).
• Financial Status Indication: Ant Design Success Green (#52c41a) and Destructive Red (#ff4d4f).
• Border Radius: 6px (0.375rem) for a clean, professional financial look.

---

📂 Folder & Component Hierarchy

To support structured, scaleable development, the project contains empty placeholder files featuring descriptive headers detailing the purpose of each layer:

src/
├── components/          # Reusable UI components
│   ├── ui/             # shadcn/ui components (Card, Button, Input, Select, etc.)
│   ├── layout/         # Layout shells (Sidebar, Header, MainContent, Breadcrumb)
│   ├── crypto/         # Crypto-specific components (CryptoCard, CryptoList, PriceChart)
│   ├── stats/          # Stats components (StatCard, StatsGrid, TrendIndicator)
│   ├── news/           # News components (NewsCard, NewsGrid)
│   ├── exchange/       # Exchange components (ExchangeCard, ExchangeList)
│   ├── common/         # Shared items (LoadingSkeleton, ErrorFallback, ScrollToTop)
│   └── charts/         # Chart wrappers (Sparkline, AreaChart, CustomTooltip)
├── pages/              # Route-level page components
│   ├── HomePage.tsx
│   ├── CryptocurrenciesPage.tsx
│   ├── CryptoDetailPage.tsx
│   ├── ExchangesPage.tsx
│   └── NewsPage.tsx
├── hooks/              # Custom state & network query hooks
│   ├── useGlobalStats.ts
│   ├── useCoins.ts
│   ├── useCoinDetails.ts
│   ├── useCoinHistory.ts
│   ├── useExchanges.ts
│   ├── useDebounce.ts
│   └── useScrollToTop.ts
├── services/           # Axios instance & CoinGecko service requests
│   └── coinGeckoApi.ts
├── types/              # TypeScript interfaces for API payloads
│   └── crypto.ts
├── lib/                # Shared utilities
│   ├── utils.ts        # cn() helper
│   └── formatters.ts   # Currency, decimal, and date formatters
├── providers/          # TanStack Query client context provider
│   └── QueryProvider.tsx
├── routes/             # Client-side router declarations
│   └── AppRouter.tsx
├── data/               # Project constants and endpoints
│   └── constants.ts
└── assets/             # Static local asset resources

---

🚀 Installed Dependencies

The following core packages are pre-installed and configured:

• State & Networking: @tanstack/react-query & axios
• Routing: react-router-dom (React Router v7)
• UI Components: lucide-react, recharts (visualization), date-fns (dates), and sonner (notifications)

---

🔧 Path Aliases & Configurations

All subdirectories are mapped under the @/ prefix to prevent directory-relative imports (e.g. ../../../).

• @/components/* maps to src/components/*
• @/hooks/* maps to src/hooks/*
• @/services/* maps to src/services/*
• @/types/* maps to src/types/*
• @/lib/* maps to src/lib/*
• @/providers/* maps to src/providers/*
• @/routes/* maps to src/routes/*
• @/data/* maps to src/data/*
• @/assets/* maps to src/assets/*

These configurations can be verified inside vite.config.ts and tsconfig.app.json.

---

🛠️ Getting Started

1. Configure Environments

Create a .env file in the root directory (based on .env.example):

VITE_COINGECKO_API_KEY=your_coingecko_api_key_here
VITE_COINGECKO_API_URL=https://api.coingecko.com/api/v3

2. Install & Run

To launch the development server:

pnpm install
pnpm dev

To run compilation checks and ESLint verification:

pnpm build
pnpm lint

---

📈 Project Status

• TypeScript Interfaces: Defined inside crypto.ts for Coin, CoinDetail, Exchange, NewsArticle, and GlobalStats.
• API Service Layer: Implemented inside coinGeckoApi.ts using Axios. Fetches global stats, coin list, coin details, history charts, exchanges, and trending coins.
• React Query Hooks: Setup custom state & networking hooks to fetch data on demand.
• UI Pages & Components: Built core layouts and common helper components:
  • RootLayout: Shell structure wrapping navigation components with a responsive main viewport and footer.
  • Sidebar: Responsive collapsible sidebar navigation panel with custom active routing states.
  • LoadingSkeleton: Modular fallback skeleton structures supporting stats, list, chart, and detail variants.
  • ErrorFallback: Type-safe error interface catching Axios rate limit (429), server offline, and page not found errors.