CS2 Inspect Web

Architecture System Design ​

This section documents the technical architecture of CS2Inspect. Choose a topic below for detailed information.

Architecture Documentation ​

System Overview Start Here ​

Current Page - High-level system architecture and technology stack.

Topics covered:

  • Technology stack (Frontend, Backend, DevOps)
  • High-level architecture diagram
  • Deployment architecture
  • Core components overview

Frontend Architecture Client-Side ​

Frontend Architecture →

Detailed documentation of the client-side architecture.

Topics covered:

  • Page and component structure
  • State management (Pinia stores)
  • Composables and utilities
  • Internationalization (EN, DE, RU)
  • Styling and theming
  • Visual Customizer
  • Performance optimizations

Backend & Database Server-Side ​

Backend & Database →

Server-side architecture and database schema.

Topics covered:

  • API structure and endpoints
  • Authentication flow
  • Middleware configuration
  • CS2 integration (inspect URLs, Steam GC)
  • Complete database schema
  • Table relationships
  • Database migrations

Deployment, Security & Performance Production ​

Deployment & Security →

Production deployment, security measures, and performance optimization.

Topics covered:

  • Deployment architecture and platforms
  • Security best practices
  • Authentication and API security
  • Performance optimizations
  • Scalability considerations
  • Monitoring and logging
  • Backup and recovery

For Developers ​

For DevOps ​

System Overview ​

CS2Inspect is a full-stack web application built with Nuxt 3 that allows Counter-Strike 2 players to customize and manage their in-game item loadouts. The application provides a comprehensive interface for weapon skins, knives, gloves, agents, music kits, and pins customization with real-time preview capabilities.

Technology Stack ​

Frontend Modern Stack ​

  • Framework: Nuxt 3 (Vue 3 + TypeScript)
  • UI Library: Naive UI
  • Styling: Tailwind CSS with custom SASS
  • State Management: Pinia
  • Internationalization: nuxt-i18n-micro (English, German, Russian)
  • Icons: Iconify + Material Design Icons
  • Charts: Chart.js + vue-chartjs (for health monitoring)

Backend Node.js ​

  • Runtime: Node.js with Nitro server
  • Database: MariaDB (MySQL compatible)
  • Authentication: Steam OpenID + JWT
  • CS2 Integration:
    • cs2-inspect-lib - CS2 item inspection
    • node-cs2 - Steam Game Coordinator integration
    • csgo-fade-percentage-calculator - Fade pattern calculations

DevOps Production Ready ​

  • Build System: Vite
  • Testing: Vitest + Vue Test Utils
  • Linting: ESLint
  • Package Manager: npm
  • Containerization: Docker + Docker Compose (with HEALTHCHECK)
  • Deployment: Vercel (configured)
  • Health Monitoring: Built-in health check system with status dashboard

High-Level Architecture ​

Architecture Overview

This diagram shows how the different layers of the application communicate. Data flows from the browser through the Nuxt frontend to the Nitro backend, which then communicates with external services like Steam and the database.

  • Error logging to console
  • Steam client connection status
  • Database query logging
  • Health check sampling and results

Future Monitoring ​

  • Application Performance Monitoring (APM)
  • Error tracking (e.g., Sentry)
  • User analytics
  • Database query performance
  • Steam API rate limit tracking
  • Alerting system for health check failures