Memento - Crypto Portfolio Tracker

A modern, professional cryptocurrency portfolio tracker with real-time price alerts, advanced analytics, and comprehensive portfolio management. Powered by Binance real-time data streaming.

---

How It Works

Memento provides a seamless experience for tracking your digital assets. It connects directly to market oracles to bring you institutional-grade data without the need for complex API keys.

Data Lifecycle

Market (Binance)
  └─► ImprovedCryptoOracle (WebSocket/REST)
        └─► Custom React Hooks (use-crypto-data)
              └─► Real-time Dashboard Updates
                    └─► Price Alert Triggers

Intelligent Tracking

• Real-time Price Engine: Leveraging Binance WebSockets for instant price updates.
• Smart Alerts: Set thresholds and receive visual notifications the moment they are hit.
• Advanced Analytics: Instant calculation of 24h/7d performance, volatility, and risk metrics.

---

System Architecture

graph TD
    User([User])
    Frontend[Next.js App Router]
    Oracle[ImprovedCryptoOracle]
    BinanceAPI[Binance REST API]
    BinanceWS[Binance WebSocket]
    LocalState[Local Storage / Hooks]

    User -- "View Dashboard / Set Alerts" --> Frontend
    Frontend -- "Fetch Data" --> Oracle
    Oracle -- "HTTP GET" --> BinanceAPI
    Oracle -- "Stream Prices" --> BinanceWS
    Oracle -- "Update State" --> LocalState
    LocalState -- "Reactive UI" --> Frontend

Loading

---

Technology Stack

Frontend & UI

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• Components: shadcn/ui (Radix UI)
• Charts: Recharts with CSS fallbacks

Data & Oracle

• Price Feed: Binance API (Free & High Limit)
• Streaming: Native WebSocket implementation
• Icons: CoinGecko & Lucide React
• Logic: Custom ImprovedCryptoOracle with automatic failover

Infrastructure

• Backend/Auth: Supabase (Optional/Extensible)
• Deployment: Vercel

---

Features

• Premium Responsive UI: A dark, high-end aesthetic inspired by modern financial apps.
• Real-time Oracle Status: Visual connectivity indicator (Online/Simulated/Error).
• Flexible Data Modes: Toggle between live Binance data and simulated movement for testing.
• Comprehensive Analytics: Performance tracking, risk assessment, and diversification analysis.
• No-Cost Integration: Built using zero-cost APIs, making it perfect for personal use and learning.

---

Getting Started

1. Clone & Install

git clone https://github.com/CallejaJ/crypto-tracker.git
cd crypto-tracker
npm install

2. Environment Setup

Copy the example environment file and configure your preference:

cp .env.example .env.local

3. Configure Data Source

Toggle the oracle mode in .env.local:

# Set to 'true' for real Binance data, 'false' for simulated prices
PUBLIC_USE_REAL_ORACLE=true

4. Run Development

npm run dev

---

Built with precision for the Crypto Community.