nvidia-oc/frontend

NVIDIA OC Web Frontend

React-based web interface for NVIDIA GPU overclocking control.

Setup

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

Environment Variables

Copy .env.example to .env and configure:

• VITE_API_URL: Backend API URL (default: http://localhost:8000/api)
• VITE_WS_URL: WebSocket URL (default: ws://localhost:8000/ws)

Development

The dev server runs on http://localhost:5173 and proxies API requests to the backend at http://localhost:8000.

Architecture

• React 19 with TypeScript
• Vite for fast builds and HMR
• styled-components for CSS-in-JS
• @lilith/ui-* workspace packages** for UI components

Directory Structure

src/
├── api/            # API client and endpoints
├── components/     # React components
├── hooks/          # Custom React hooks
├── types/          # TypeScript type definitions
├── App.tsx         # Root component
└── main.tsx        # Entry point

Key Features

• Real-time GPU telemetry via WebSocket
• GPU overclock settings control
• Profile management
• Responsive dark theme
• Type-safe API client

Dependencies

UI Components (@lilith/ui-*)

• ui-layout: Layout primitives
• ui-primitives: Basic UI elements
• ui-data: Data display components
• ui-charts: Charting components
• ui-forms: Form components
• ui-feedback: Notifications and alerts
• ui-theme: Theme provider
• ui-navigation: Navigation components

All workspace dependencies use workspace:* protocol.