Command Center

A desktop command hub built with Electron, React, and TypeScript. Features a liquid glass UI that acts as a central launch point for games, apps, social platforms, and workflow modes.

Features

Dashboard

• Recent Games -- Displays the 5 most recently played games, polled from Steam, Epic Games, Battle.net, and standalone installs
• System Diagnostics -- Real-time CPU usage, memory usage, and per-drive storage stats (3-second polling interval)
• Mode Buttons -- One-click workflow launchers:
  • Developer Mode -- Opens VS Code on monitor 1, Claude + ChatGPT on monitor 2, GitHub on monitor 3
  • Game Mode -- Opens Steam, Epic Games, Discord, and Beyond All Reason
  • Study Time -- Opens Google Docs on one monitor, Spotify on another, and a productivity gate script

Games Library

• Auto-detects installed games from Steam (VDF/ACF manifests), Epic Games (JSON manifests), and Battle.net (registry + known paths)
• Support for adding custom/standalone games with manual exe paths
• Search and platform filtering
• Click to launch any game directly

Applications

• Scans all installed Windows applications from the Start Menu
• Auto-categorizes into Productivity, Creativity, and Misc using pattern matching
• Collapsible category sections with search
• Click to launch any application
• User-overridable categories (persisted)

Social Hub

• Embedded webviews for Discord, Facebook Messenger, and Gmail
• Persistent sessions -- login once and stay logged in across app restarts
• Instant tab switching (all webviews stay mounted)
• Reload and open-in-browser actions

Installation

Option 1: Installer

Download and run Command Center Setup 1.0.0.exe from the Releases page. It will create desktop and Start Menu shortcuts automatically.

Option 2: Build from Source

git clone https://github.com/Connor-Sandall/CommandCenter.git
cd CommandCenter
npm install

Run in development mode (hot reload):

npm run dev

Build and run (production):

npm run start

Build installer (.exe):

npm run dist

The installer will be at release/Command Center Setup 1.0.0.exe.

Build portable (unpacked directory):

npm run pack

The portable exe will be at release/win-unpacked/Command Center.exe.

Scripts

Script	Description
npm run dev	Start webpack dev server + Electron with hot reload
npm run build	Build renderer (webpack) + electron (TypeScript)
npm run start	Build everything then launch Electron
npm run pack	Build + package as unpacked directory
npm run dist	Build + package as NSIS installer (.exe)

Tech Stack

Layer	Technology
Runtime	Electron 40.x
Frontend	React 19.x + TypeScript
Bundler	Webpack 5
Styling	CSS with glassmorphism (custom liquid glass theme)
System Info	systeminformation
Persistence	electron-store
Icons	lucide-react
Routing	react-router-dom v7 (HashRouter)
Packaging	electron-builder (NSIS target)

Project Structure

CommandCenter/
├── electron/                  # Electron main process (Node.js)
│   ├── main.ts                # App entry point, window creation, IPC registration
│   ├── preload.ts             # Context bridge (exposes electronAPI to renderer)
│   └── services/              # Backend service modules
│       ├── systemInfo.ts      # CPU, memory, disk monitoring (3s polling)
│       ├── gameDetector.ts    # Steam/Epic/Battle.net/custom game detection
│       ├── appDetector.ts     # Start Menu scanning + app categorization
│       └── appLauncher.ts     # Mode launchers + multi-monitor app positioning
│
├── src/                       # React renderer process (browser)
│   ├── App.tsx                # Root component with HashRouter
│   ├── index.tsx              # React DOM entry point
│   ├── index.html             # HTML template
│   ├── styles/
│   │   └── glass.css          # Liquid glass theme (variables, animations, glassmorphism)
│   ├── types/
│   │   └── global.d.ts        # ElectronAPI types, Window augmentation, webview JSX
│   └── components/
│       ├── Layout/
│       │   ├── AppLayout.tsx  # Sidebar nav + page container
│       │   └── TitleBar.tsx   # Custom frameless title bar
│       ├── Dashboard/
│       │   ├── Dashboard.tsx  # Dashboard page container
│       │   ├── RecentGames.tsx
│       │   ├── SystemDiagnostics.tsx
│       │   └── ModeButtons.tsx
│       ├── Games/
│       │   ├── GamesPage.tsx  # Full game library with search/filters
│       │   └── GamesPage.css
│       ├── Apps/
│       │   ├── AppsPage.tsx   # Categorized app library
│       │   └── AppsPage.css
│       ├── Social/
│       │   ├── SocialPage.tsx # Discord/Messenger/Gmail webviews
│       │   └── SocialPage.css
│       └── common/            # Reusable glass-themed UI primitives
│           ├── GlassCard.tsx
│           ├── GlassButton.tsx
│           ├── GlassPanel.tsx
│           ├── ProgressBar.tsx
│           ├── AnimatedNumber.tsx
│           └── SearchBar.tsx
│
├── package.json               # Dependencies, scripts, electron-builder config
├── tsconfig.json              # TypeScript config (renderer)
├── tsconfig.electron.json     # TypeScript config (main process)
├── webpack.config.js          # Webpack config (renderer bundling)
└── DEVLOG.md                  # Development journal with milestone history

Architecture

The app follows Electron's two-process model:

• Main process (electron/) -- Runs in Node.js. Manages the window, handles system-level operations (file scanning, process launching, hardware monitoring), and exposes functionality to the renderer via IPC handlers.
• Renderer process (src/) -- Runs in a Chromium browser context. All UI is React. Communicates with the main process exclusively through window.electronAPI (defined in the preload script with contextIsolation: true).

IPC channels are cached for expensive operations (games:getAll at 60s TTL, apps:getAll at 120s TTL) to avoid redundant system scans.

License

ISC