Architecture · ops.tradeit.gg

Frontend Engineering

Frontend engineering at tradeit.gg — the main marketplace (Nuxt 3) and admin panel (Vue 3).

Last updated: 2026-04-14

Applications

new-tradeit (tradeit.gg)

The main user-facing marketplace for CS2/TF2/Rust skin trading.

Stack: Nuxt 3 + Vue 3 + TypeScript, SSR mode, PM2 cluster

graph TB
    subgraph Browser
        UI[Vue 3 Components]
        Store[State Management]
        WS[Socket.IO Client]
    end

    subgraph "Nuxt SSR (PM2 Cluster)"
        SSR[Server-Side Rendering]
        API_PROXY[API Proxy Layer]
    end

    subgraph Backend
        BE[tradeit-backend]
        SS[tradeit-socket-server]
    end

    UI --> Store
    UI --> WS
    WS --> SS
    SSR --> API_PROXY
    API_PROXY --> BE
    Store --> API_PROXY

Key Features

• SSR (Server-Side Rendering) for SEO and initial load performance
• Socket.IO for real-time inventory updates, trade status, leaderboard
• i18n via Localazy + Vue I18n
• Payments: Stripe, Braintree, Coinbase integrations
• SEO pages: CS2 skins wiki, item browser, leaderboard
• PM2 cluster mode for production scaling

Performance Concerns

• Core Web Vitals (LCP) optimization
• ES2020 build target
• Third-party script optimization (Termly, CookieYes)
• Hydration issues in SSR
• Skeleton loaders for perceived performance

tradeit-admin

Internal admin dashboard for managing items, users, bots, and pricing overrides.

Stack: Vue 3 + Vite + TypeScript (SPA, no SSR)

Key Features

• Role-based access via JWT authentication
• Item management: Pricing overrides, stock levels, item attributes
• User management: Account lookup, balance adjustments, trade history
• Bot management: Bot status, inventory view, restart triggers
• Pricing overrides: Manual price adjustments, tag management

API Backend

• tradeit-admin-backend — Express + Prisma (dual schemas: main + pricing)
• Separate from tradeit-backend (different auth, different data access patterns)

Architecture Patterns

Component Organization

• Feature-based directory structure
• Composition API (Vue 3 <script setup>)
• Shared composables for reusable logic

State Management

• Pinia stores (migrated from Vuex in new-tradeit)
• Socket.IO events update state reactively

API Client Layer

• network/ modules for API calls
• Proxy configuration for development
• Error handling and retry logic

Build & Development

Styling & UI

• CSS/SCSS for styling
• No component library (custom components)
• Responsive design
• Dark theme primary

Related Pages

• System Architecture — Where frontend fits in the system
• Microservices & Repos — Frontend repos
• Coding & Project Standards — TypeScript and Vue conventions

ops.tradeit.gg — Internal Engineering Docs