Spectra

Real-time crypto trading dashboard with live Coinbase integration. Track portfolios, execute trades, and visualize markets through interactive heatmaps—all in one responsive interface.

Comment

Spectra Crypto Dashboard

Inspiration

Cryptocurrency trading moves fast, and making informed decisions requires sifting through mountains of data. We wanted to build a tool that brings real-time market visualization together with technical analysis signals in one clean interface. The goal was to empower traders - from beginners to experienced - with actionable insights without the complexity of juggling multiple platforms.

What it does

Spectra is a full-stack crypto trading dashboard that connects to your Coinbase account and provides:

  • Real-time market data with live price updates via WebSocket
  • Technical analysis signals including RSI, volume changes, volatility metrics, and SMA crossover detection (golden cross/death cross)
  • Market insights that generate bullish, bearish, or neutral signals with confidence scores
  • Secure credential storage - your Coinbase API keys are encrypted with AES-256-GCM before touching the database
  • Beautiful dark-mode UI with smooth animations and responsive design

How we built it

Frontend: React 18 with TypeScript, Vite for blazing-fast builds, TailwindCSS for styling, Zustand for state management, Recharts for data visualization, and Framer Motion for animations.

Backend: Node.js with Express, TypeScript, WebSocket for real-time communication, Winston for logging, and PostgreSQL for data persistence.

Security: Passwords hashed with bcrypt (10 salt rounds), API credentials encrypted with AES-256-GCM including proper IV and auth tag storage, JWT for authentication.

Code Quality: ESLint, Prettier with consistent formatting rules, and Vitest for testing.

Challenges we ran into

  1. Encryption done right - Storing Coinbase API credentials securely meant implementing AES-256-GCM with separate storage for initialization vectors and authentication tags. Getting this wrong would compromise user funds.

  2. Real-time data at scale - Balancing WebSocket updates with API rate limits required careful throttling and caching strategies.

  3. Multi-environment deployments - Supporting Railway, Heroku, and AWS RDS meant our migration scripts needed to handle different database provisioning approaches.

  4. Credential UX - Handling the state where users haven't connected their API keys yet without showing confusing errors or broken UI.

Accomplishments that we're proud of

  • Zero plaintext secrets - API credentials are never stored unencrypted
  • Clean component architecture - Small, focused components with custom hooks for reusable logic
  • Developer experience - Comprehensive READMEs, typed interfaces, and consistent code formatting make onboarding smooth
  • Graceful degradation - The CredentialsGate component elegantly handles missing API keys with clear CTAs

What we learned

  • TypeScript interfaces like MarketInsight and MarketData catch bugs at compile time and serve as living documentation
  • Security isn't a feature, it's a foundation - especially when dealing with financial APIs
  • Good logging (Winston with environment-aware transports) saves hours of debugging
  • UX edge cases (like missing credentials) deserve as much attention as happy paths

What's next for Spectra

  • Portfolio tracking - Aggregate holdings across multiple exchanges
  • Trade history - Full transaction logs with P&L calculations
  • Smart alerts - Customizable notifications based on price movements or technical signals
  • Paper trading mode - Practice strategies without risking real funds
  • Mobile optimization - Full responsive experience for trading on the go
Share this project:

Updates