> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nolme.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Roadmap

> Tracera's development roadmap from foundation to full platform

<style>
  {`
    @keyframes gradient-shift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 6px rgba(6, 182, 212, 0.3); }
      50% { box-shadow: 0 0 18px rgba(6, 182, 212, 0.5), 0 0 36px rgba(59, 130, 246, 0.15); }
    }
    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    .gradient-heading {
      background: linear-gradient(135deg, #06B6D4, #3B82F6, #8B5CF6);
      background-size: 200% 200%;
      animation: gradient-shift 5s ease infinite;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .gradient-divider {
      height: 3px;
      border: none;
      border-radius: 4px;
      background: linear-gradient(90deg, #06B6D4, #3B82F6, #8B5CF6, #6366F1, #3B82F6, #06B6D4);
      background-size: 300% 100%;
      animation: gradient-shift 4s linear infinite;
      margin: 2rem 0;
    }
    .fade-up { animation: fade-in-up 0.7s ease-out both; }
    .fade-up-d1 { animation: fade-in-up 0.7s ease-out 0.2s both; }
    .fade-up-d2 { animation: fade-in-up 0.7s ease-out 0.4s both; }
    .fade-up-d3 { animation: fade-in-up 0.7s ease-out 0.6s both; }
    .done-badge {
      display: inline-block;
      padding: 3px 12px;
      border-radius: 999px;
      font-size: 0.75em;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: #fff;
      background: linear-gradient(135deg, #06B6D4, #3B82F6);
      background-size: 200% 200%;
      animation: gradient-shift 3s ease infinite, pulse-glow 2.5s ease-in-out infinite;
    }
    .mvp-badge {
      display: inline-block;
      padding: 3px 12px;
      border-radius: 999px;
      font-size: 0.75em;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: #fff;
      background: linear-gradient(135deg, #3B82F6, #8B5CF6);
      background-size: 200% 200%;
      animation: gradient-shift 3s ease infinite, pulse-glow 2.5s ease-in-out infinite;
    }
    .planned-badge {
      display: inline-block;
      padding: 3px 12px;
      border-radius: 999px;
      font-size: 0.75em;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: #a78bfa;
      background: rgba(139, 92, 246, 0.12);
      border: 1px solid rgba(139, 92, 246, 0.25);
    }
    .timeline-bar {
      height: 6px;
      border-radius: 6px;
      background: linear-gradient(90deg, #06B6D4, #3B82F6, #8B5CF6, #6366F1);
      background-size: 300% 100%;
      animation: gradient-shift 5s linear infinite;
      margin: 1.5rem 0;
      position: relative;
    }
    .timeline-bar::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
      background-size: 200% 100%;
      animation: shimmer 3s linear infinite;
      border-radius: 6px;
    }
    .phase-card {
      border: 1px solid rgba(6, 182, 212, 0.2);
      border-radius: 12px;
      padding: 1.25rem;
      margin: 0.75rem 0;
      background: linear-gradient(135deg, rgba(6, 182, 212, 0.04), rgba(59, 130, 246, 0.04));
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .phase-card:hover {
      border-color: rgba(6, 182, 212, 0.5);
      box-shadow: 0 0 20px rgba(6, 182, 212, 0.1);
    }
    .hero-title {
      font-size: 2em;
      font-weight: 800;
      background: linear-gradient(135deg, #06B6D4, #3B82F6, #8B5CF6, #06B6D4);
      background-size: 300% 300%;
      animation: gradient-shift 5s ease infinite;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 0.5rem;
    }
    `}
</style>

<div className="fade-up">
  <p className="hero-title">Roadmap</p>

  Tracera is being built in phases, each unlocking new capabilities. The foundation is complete — the core platform and differentiating features are next.
</div>

<div className="timeline-bar" />

<div className="fade-up">
  ## <span className="gradient-heading">Phase Overview</span>

  ```
  Foundation (Done)     Core Platform (Done)      Tier 1 Differentiators       Tier 2 Engagement
  ─────────────────     ──────────────────────     ──────────────────────       ──────────────────
  Phase 1: Scaffold     Phase 3: Volatility       Phase 6: Portfolio ✓         Phase 12: Trade Journal
  Phase 1.5: Auth       Phase 4: REST API         Phase 7: Portfolio Score     Phase 13: Weekly Digest
  Phase 2: Ingestion    Phase 5: WebSocket        Phase 8: Smart Alerts        Phase 14: Rarity Pricing
                                                   Phase 9: Trade Simulator
                                                   Phase 10: Correlation Map
                                                   Phase 11: Sentiment Index
  ```
</div>

<div className="gradient-divider" />

<div className="fade-up-d1">
  ## <span className="gradient-heading">Foundation</span> <span className="done-badge">✦ Complete</span>

  <div className="phase-card">
    **Phase 1 — Project Scaffolding**

    Go project structure, Docker Compose, Makefile, CI/CD pipelines.

    <span className="done-badge">Done</span>
  </div>

  <div className="phase-card">
    **Phase 1.5 — Session-Based Auth**

    Google OAuth, GitHub OAuth, Steam OpenID, magic links, Redis-backed sessions, CSRF protection.

    <span className="done-badge">Done</span>
  </div>

  <div className="phase-card">
    **Phase 2 — Price Ingestion**

    Steam Market API and PriceEmpire API integration. Concurrent provider fetching, batch inserts, Redis caching and pub/sub.

    <span className="done-badge">Done</span>
  </div>
</div>

<div className="timeline-bar" />

<div className="fade-up-d2">
  ## <span className="gradient-heading">Core Platform</span> <span className="done-badge">✦ Complete</span>

  <div className="phase-card">
    **Phase 3 — Volatility Engine**

    Compute rolling standard deviation, Bollinger bands, percentage change, trend score, and coefficient of variation per item. Results cached in Redis.

    <span className="done-badge">Done</span>
  </div>

  <div className="phase-card">
    **Phase 4 — REST API**

    Full item, price history, and volatility query endpoints. Rankings for most volatile items.

    <span className="done-badge">Done</span>
  </div>

  <div className="phase-card">
    **Phase 5 — WebSocket Real-Time Feed**

    Live price and volatility push to connected clients. Hub architecture with Redis pub/sub subscriber.

    <span className="done-badge">Done</span>
  </div>
</div>

<div className="timeline-bar" />

<div className="fade-up-d3">
  ## <span className="gradient-heading">Tier 1 — Core Differentiators</span>

  These features set Tracera apart from basic price trackers.

  <div className="phase-card">
    | Phase  | Feature                    | Description                                                                 | Status                                         |
    | ------ | -------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------- |
    | **6**  | Portfolio System           | Link Steam account, import inventory, view portfolio value                  | <span className="mvp-badge">MVP Done</span>    |
    | **7**  | Portfolio Volatility Score | Single-number portfolio risk score. Percentile ranking vs other users.      | <span className="planned-badge">Planned</span> |
    | **8**  | Price Alerts with Context  | Intelligent alerts that explain *why* a price move is significant.          | <span className="planned-badge">Planned</span> |
    | **9**  | What-If Trade Simulator    | Simulate swapping items and see how portfolio volatility/value changes.     | <span className="planned-badge">Planned</span> |
    | **10** | Skin Correlation Map       | Pearson correlation matrix across item categories.                          | <span className="planned-badge">Planned</span> |
    | **11** | Market Sentiment Index     | Fear/greed index from volume spikes, listing count changes, price velocity. | <span className="planned-badge">Planned</span> |
  </div>
</div>

<div className="gradient-divider" />

## <span className="gradient-heading">Tier 2 — Engagement & Retention</span>

Features that keep users coming back.

<div className="phase-card">
  | Phase  | Feature                 | Description                                                             | Status                                         |
  | ------ | ----------------------- | ----------------------------------------------------------------------- | ---------------------------------------------- |
  | **12** | Trade Journal           | Log trades with notes, track P\&L, win/loss ratio, best/worst trades.   | <span className="planned-badge">Planned</span> |
  | **13** | Weekly Digest Email     | Portfolio summary, watchlist alerts, market trends — delivered weekly.  | <span className="planned-badge">Planned</span> |
  | **14** | Rarity-Adjusted Pricing | Factor in float value, pattern index, stickers for true item valuation. | <span className="planned-badge">Planned</span> |
</div>

<div className="gradient-divider" />

## <span className="gradient-heading">Data Sources</span>

<div className="phase-card">
  | Source           | Status                                          | Type        |
  | ---------------- | ----------------------------------------------- | ----------- |
  | Steam Market API | <span className="done-badge">Implemented</span> | Official    |
  | PriceEmpire API  | <span className="done-badge">Implemented</span> | Aggregator  |
  | CSFloat API      | <span className="planned-badge">Planned</span>  | Marketplace |
  | Skinport API     | <span className="planned-badge">Planned</span>  | Marketplace |
</div>