React Game Performance Dashboard

A real-time game performance monitoring dashboard built with React + TypeScript + Vite. Monitor FPS, memory usage, and render performance of web applications and games.

Test

Tech Stack

• React 18 - UI Framework
• TypeScript - Type Safety
• Vite - Build Tool
• React Router - Routing
• Tailwind CSS - Styling Framework
• Recharts - Chart Library
• Prettier - Code Formatter
• pnpm - Package Manager

Project Structure

react-game-performance-dashboard/
├── src/
│   ├── components/          # React Components
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   ├── Sidebar.tsx
│   │   ├── Layout.tsx
│   │   ├── MetricCard.tsx
│   │   └── PerformanceChart.tsx
│   ├── pages/              # Page Components
│   │   ├── SlotEngine.tsx  # Test Page (Main)
│   │   ├── Performance.tsx # Performance Analysis
│   │   ├── Analytics.tsx   # Data Analytics
│   │   └── Settings.tsx   # Configuration
│   ├── hooks/              # Custom Hooks
│   │   ├── index.ts
│   │   └── usePerformanceMonitor.ts
│   ├── contexts/           # React Contexts
│   │   └── PerformanceContext.tsx
│   ├── utils/              # Utility Functions
│   │   ├── index.ts
│   │   └── performanceCollector.ts
│   ├── types/              # TypeScript Type Definitions
│   │   ├── index.ts
│   │   └── performance.ts
│   ├── App.tsx             # Main Application Component
│   ├── main.tsx            # Application Entry Point
│   └── index.css           # Global Styles
├── public/                 # Static Assets
├── package.json
├── vite.config.ts
├── tsconfig.json
├── tailwind.config.js
└── README.md

Getting Started

Install Dependencies

pnpm install

Development Mode

pnpm dev

The application will start at http://localhost:5173.

Build Project

pnpm build

Preview Build

pnpm preview

Code Formatting

pnpm format

Features

Performance Monitoring

• Real-time FPS Monitoring - Track frames per second using requestAnimationFrame
• Memory Usage Tracking - Monitor JavaScript heap size using Performance Memory API
• Render Time Analysis - Measure frame render time
• Performance Charts - Real-time charts for FPS, memory, and render time
• Performance Statistics - Calculate averages, min/max, standard deviation, and stability metrics

Configuration

You can configure the performance monitoring system in Settings:

• Sample Interval: 500ms - 5000ms (default: 1000ms)
• Max Samples: 30 - 300 (default: 60)
• Memory Tracking: Enable/disable memory monitoring

License

MIT License