지금까지 만든 첫 번째 바이브 코딩 프로젝트...
First vibe-coded proj so far...
핵심 요약
금융 데이터를 감정 상태로 시각화하는 사이버 터미널 앱 'TEMPO' 개발기입니다.
- 프로젝트 개념 — 금융 데이터를 감정 상태에 따라 색상으로 시각화하는 터미널 앱임
- 기술 스택 — TanStack Start, React, Vite 및 Tailwind CSS를 활용함
- 핵심 기능 — 실시간 시장 데이터 추적, 감정 점수 계산, 다중 통화 변환기 제공
- 배포 과정 — 의존성 충돌 및 보안 취약점 해결 후 Vercel에 성공적으로 배포함
# 🛠️ Building TEMPO: From Concept to Production Deployment
## 1. Project Genesis & Architecture (The "Why" & "What")
* **The Concept:** Traditional financial terminals (crypto/forex) are often sterile, text-heavy grids. TEMPO was conceptualized as a cyber-terminal market intelligence app designed to bridge raw financial data with human psychology[span_0](start_span)[span_0](end_span).
* **The Emotional Color System:** Built around a 3-tier emotional telemetry engine mapping asset volatility into distinct states—**Severe Panic** (Crimson Red), **Neutral** (Ice Blue), and **Silent Euphoria** (Grass Green)[span_1](start_span)[span_1](end_span).
* **Tech Stack Selection:**
* **Framework & Routing:** TanStack Start, React, and Vite for lightning-fast server-side rendering and static performance[span_2](start_span)[span_2](end_span).
* **Styling & UI:** Tailwind CSS paired with custom cyber-themed bento components[span_3](start_span)[span_3](end_span).
* **Data Providers:** CoinGecko API for real-time cryptocurrency data and Frankfurter API for forex exchange rates[span_4](start_span)[span_4](end_span).
---
## 2. Core Feature Engineering (The "How")
* **Cyber-Terminal Landing & WebGL Grid:** Developed an immersive, cursor-reactive neon background grid coupled with a custom radiant wordmark logo featuring a multi-stop gradient and atmospheric glow[span_5](start_span)[span_5](end_span).
* **Cross-Market Radar & Carousel:** Engineered a smooth autoplay card carousel allowing users to inspect trending markets, live pricing, and real-time vibe scores[span_6](start_span)[span_6](end_span).
* **Universal Search & Watchlist Combobox:** Implemented a global combobox enabling users to query, select, and track *any* cryptocurrency or forex instrument on demand[span_7](start_span)[span_7](end_span)[span_8](start_span)[span_8](end_span).
