> ## 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.

# Tracera

> Real-time CS2 skin price tracking, volatility analysis, and portfolio management

<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(24px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 8px rgba(6, 182, 212, 0.3); }
      50% { box-shadow: 0 0 24px rgba(6, 182, 212, 0.6), 0 0 48px rgba(59, 130, 246, 0.2); }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }
    .hero-gradient-text {
      background: linear-gradient(135deg, #06B6D4, #3B82F6, #8B5CF6, #06B6D4);
      background-size: 300% 300%;
      animation: gradient-shift 6s ease infinite;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: 1.3em;
      font-weight: 600;
      line-height: 1.6;
    }
    .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-1 { animation: fade-in-up 0.7s ease-out both; }
    .fade-up-2 { animation: fade-in-up 0.7s ease-out 0.15s both; }
    .fade-up-3 { animation: fade-in-up 0.7s ease-out 0.3s both; }
    .fade-up-4 { animation: fade-in-up 0.7s ease-out 0.45s both; }
    .live-badge {
      display: inline-block;
      padding: 4px 14px;
      border-radius: 999px;
      font-size: 0.8em;
      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;
    }
    .planned-badge {
      display: inline-block;
      padding: 4px 14px;
      border-radius: 999px;
      font-size: 0.8em;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: #c4b5fd;
      background: rgba(139, 92, 246, 0.15);
      border: 1px solid rgba(139, 92, 246, 0.3);
    }
    .gradient-border-card {
      border: 2px solid transparent;
      border-radius: 12px;
      background-image: linear-gradient(var(--tw-gradient-stops, #fff), var(--tw-gradient-stops, #fff)), linear-gradient(135deg, #06B6D4, #3B82F6, #8B5CF6);
      background-origin: border-box;
      background-clip: padding-box, border-box;
      padding: 1.5rem;
      margin: 1rem 0;
    }
    .float-icon {
      display: inline-block;
      animation: float 3s ease-in-out infinite;
    }
    .section-heading {
      background: linear-gradient(135deg, #06B6D4, #3B82F6);
      background-size: 200% 200%;
      animation: gradient-shift 5s ease infinite;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    `}
</style>

<div className="fade-up-1">
  <p className="hero-gradient-text">
    Real-time CS2 skin price tracking, volatility analysis, and portfolio management. Ingest prices from multiple markets, compute volatility metrics, and get live updates over WebSockets — the data edge traders need.
  </p>
</div>

<div className="gradient-divider" />

<div className="fade-up-2">
  ## <span className="section-heading">What Tracera Does</span>

  <CardGroup cols={2}>
    <Card title="Multi-Source Price Ingestion" icon="arrows-rotate">
      Aggregates prices from Steam Market, PriceEmpire, and more — giving you the complete market picture.
    </Card>

    <Card title="Volatility Engine" icon="chart-line">
      Computes rolling standard deviation, Bollinger bands, trend scores, and coefficient of variation per item.
    </Card>

    <Card title="Real-Time Feed" icon="bolt">
      WebSocket-based live push of price changes and volatility shifts — no page refreshes needed.
    </Card>

    <Card title="Portfolio Management" icon="wallet">
      Link your Steam account, import your inventory, and track your total portfolio value in real time.
    </Card>
  </CardGroup>
</div>

<div className="gradient-divider" />

<div className="fade-up-3">
  ## <span className="section-heading">Platform Status</span>

  ### <span className="live-badge">✦ Live</span> Production-Ready

  * **Authentication** — Google OAuth, GitHub OAuth, Steam OpenID, and magic links with session management
  * **Infrastructure** — Docker-based deployment with TimescaleDB, Redis, and Go backend
  * **Frontend** — Next.js 16 with React 19, server-side rendering, theme support, and auth flows
  * **Security** — CSRF protection, rate limiting, secure session cookies, and security headers

  ### <span className="planned-badge">◇ In Progress</span> Architected

  The following features have finalized API contracts and architecture designs. See the [Roadmap](/vision/roadmap) for implementation timeline.

  * **Price Ingestion** — Steam Market and PriceEmpire API integration
  * **Volatility Engine** — Rolling standard deviation, Bollinger bands, trend scores, and coefficient of variation
  * **Real-Time Feed** — WebSocket hub for live price and volatility push
  * **Portfolio** — Steam inventory import and live portfolio value tracking
</div>

<div className="gradient-divider" />

<div className="fade-up-4">
  ## <span className="section-heading">Get Started</span>

  <CardGroup cols={2}>
    <Card title="Installation" icon="rocket" href="/quickstart/installation">
      Be up and running in under 5 minutes with Docker.
    </Card>

    <Card title="Local Development" icon="code" href="/quickstart/local-development">
      Run services outside Docker for faster iteration.
    </Card>
  </CardGroup>

  ## <span className="section-heading">Explore</span>

  <CardGroup cols={2}>
    <Card title="API Reference" icon="terminal" href="/api-reference/overview">
      REST and WebSocket API documentation.
    </Card>

    <Card title="Architecture" icon="diagram-project" href="/architecture/system-overview">
      System design and data flow.
    </Card>

    <Card title="Authentication" icon="lock" href="/authentication/overview">
      OAuth providers, Steam OpenID, and magic links.
    </Card>

    <Card title="Configuration" icon="gear" href="/configuration/environment-variables">
      Complete environment variable reference.
    </Card>
  </CardGroup>
</div>