Crypto Socket

Crypto Socket 是一個基於 Vite、React 與 SWC 的加密貨幣即時資料展示應用，使用 pnpm 作為套件管理工具，並依賴 Node.js 18 執行環境。專案主要透過 WebSocket 連接 Crypto.com 的交易數據 API，展示以下功能：

• 最佳五檔掛單：即時更新並顯示多個交易對的買賣掛單數據。
• K 線圖 (Candlestick Chart)：繪製 BTCUSD-PERP 的 1 分鐘 (和其他間隔) K 線圖，並隨著資料更新實現即時更新。
• 響應式設計：在大螢幕時圖表與訂單薄並排顯示，螢幕較小時則堆疊排列，並使用 CSS Modules 與 Responsive Container 實現自適應尺寸。

技術棧

• 套件管理：pnpm
• 執行環境：Node.js 18
• 數據視覺化：D3.js

專案結構

crypto-socket
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── assets
│   │   └── react.svg
│   ├── components
│   │   ├── chart
│   │   │   └── CandlestickChart.tsx
│   │   ├── common
│   │   │   ├── ErrorBoundary.tsx
│   │   │   └── ResponsiveContainer.tsx
│   │   ├── currency
│   │   │   ├── CurrencyBoard.tsx
│   │   │   ├── CurrencyChart.tsx
│   │   │   ├── CurrencyIntervalChart.tsx
│   │   │   ├── CurrencyOrderBook.tsx
│   │   │   └── CurrencyPrice.tsx
│   │   └── orderbook
│   │       ├── OrderBook.css
│   │       └── OrderBook.tsx
│   ├── configs
│   │   ├── chart.ts
│   │   └── cryptoWSConfig.ts
│   ├── contexts
│   │   └── CryptoWSContext.tsx
│   ├── hooks
│   │   └── useCryptoWSSubscribe.ts
│   ├── index.css
│   ├── main.tsx
│   ├── types
│   │   └── index.ts
│   ├── utils
│   │   ├── candlestickApi.ts
│   │   └── cryptoMsgHandler.ts
│   └── vite-env.d.ts

安裝與啟動

前置需求

• Node.js 18+
• pnpm

安裝步驟

1. Clone 專案

git clone https://github.com/your-username/crypto-socket.git
cd crypto-socket

2. 安裝依賴

pnpm install

3. 啟動開發環境

pnpm (run) dev

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

• Replace tseslint.configs.recommended to tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked
• Optionally add ...tseslint.configs.stylisticTypeChecked
• Install eslint-plugin-react and update the config:

// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})