ReactViteTypeScriptTailwind CSSRadix UITradingViewFintechGlassmorphismUI/UXResponsive
Stock Dashboard
這是一款使用 React、Vite 與 TypeScript 打造的專業級股市監控系統。專案核心在於提供「Premium 級別的視覺體驗」，透過深色模式與 Glassmorphism（玻璃擬態）設計風格，整合豐富的 TradingView Widgets。使用者可從宏觀的市場熱力圖、全球指數概覽，深入到個股的 K 線技術分析與財報數據，並針對各類行動裝置進行了完美的響應式優化。
使用技術
前端框架React + TypeScript
樣式與 UITailwind CSS / Radix UI
上線部署Netlify
金融數據整合TradingView Widgets (Advanced Charts, Heatmaps)
負責角色
負責從視覺風格定義到技術架構實作的完整開發過程。
- ◆定義深色模式與玻璃擬態視覺規範
- ◆封裝高品質的 TradingView React 組件
- ◆基於 Radix UI 建構無障礙性互動元件
- ◆優化複雜金融圖表的渲染效能與響應式排版
解決的問題
一般看盤工具常面臨介面資訊過於擁擠、缺乏美感，或是在不同裝置間轉換體驗不佳的痛點。本專案致力於：
資訊層級優化
透過組件化設計，將繁雜的金融資訊分類為市場脈動、熱力圖、個股分析等區塊，提升閱讀效率。
視覺體驗升級
採用深色玻璃擬態風格與微動畫，減少長時間盯盤的視覺疲勞並提升質感。
專業分析平民化
整合專業級 K 線圖與技術指標，讓一般用戶也能享有機構級的圖表工具。
跨平台無縫監控
完整響應式設計，確保在桌面、平板與手機端都能獲得一致且流暢的操作體驗。
專案成果
技術亮點：
- 利用 Vite 提供極速的 HMR 開發體驗
- 採用 TypeScript 強型別系統，確保複雜數據流的健壯性
- 整合多種 TradingView 模組，包含進階燭光圖與財務報表分析
產品特色：
- 即時全球市場趨勢掃描與股票熱力圖顯示
- 支援智慧搜尋功能，流暢切換個股詳情
- 沉浸式玻璃質感 UI 搭配細膩的漸層效果與互動
開發成果：
- 成功打造兼具美感與實用性的金融儀表板
- 高度可維護的 Component-based 架構，便於擴充新模組
- 展現對前端效能與 Premium UI 實作的高標準要求