Segame

Segame is a desktop game library tracker built with Electron, React, and TypeScript. It lets you organize your Steam games and custom non-Steam titles in a single dashboard with local SQLite storage, markdown notes, and metadata pulled from Steam, IGDB, and SteamGridDB.

Inspired by the UI of Seanime, it runs locally on your computer without relying on external web servers to store your personal library data.

Features

• Steam Library Sync: Import your Steam games, total playtime, recent activity, and achievement progress via Steam Web APIs.
• Covers & Banners: Fetch high-resolution 2:3 vertical covers and landscape hero banners automatically from IGDB and SteamGridDB.
• Local Storage: Stores all library data, notes, and ratings locally using LibSQL (SQLite) and Drizzle ORM.
• Track Progress & Notes: Write personal markdown notes, assign 1-10 ratings, and track status (Backlog, Playing, Finished, Completed 100%).
• Non-Steam Games: Search IGDB to add custom games that are not on Steam into your main library.
• Custom Collections: Create named collections to group games and filter by status, favorites, or search query.

Architecture Overview

The app follows a standard Electron setup with a decoupled service and repository layer in the main process:

+---------------------------------------------------------+
|                  React 18 Renderer                      |
|       (TanStack Router, React Query, Tailwind CSS)      |
+----------------------------+----------------------------+
                             | Typed IPC Bridge (preload)
+----------------------------v----------------------------+
|                  Electron Main Process                  |
|                                                         |
|  +---------------------------------------------------+  |
|  │                   AppManager                      │  |
|  +-------------------------+-------------------------+  |
|                            |                            |
|  +-------------------------v-------------------------+  |
|  │                 IpcController                     │  |
|  +--------+----------------+----------------+--------+  |
|           |                |                |           |
|  +--------v-------+  +-----v-------+  +-----v-------+   |
|  │ GameRepository │  │SettingsRepo │  │CollectionRepo│  |
|  +--------+-------+  +-----+-------+  +-----+-------+   |
|           |                |                |           |
|  +--------v────────────────v────────────────v--------+   |
|  │                 LibrarySyncService                │  |
|  +--------+----------------+----------------+--------+  |
|           |                |                |           |
|  +--------v-------+  +-----v-------+  +-----v-------+   |
|  │  SteamService  │  │ IGDBService │  │ SteamGridDB │   |
|  +----------------+  +-------------+  +-------------+   |
+----------------------------+----------------------------+
                             | Drizzle ORM
+----------------------------v----------------------------+
|                Local LibSQL / SQLite DB                 |
+---------------------------------------------------------+

Key Technical Details

• Repositories: GameRepository, CollectionRepository, and SettingsRepository isolate SQLite database queries from Electron IPC handlers.
• Shared Types: Shared TypeScript interfaces in src/shared/types.ts keep the main process, preload script, and React frontend in sync.
• Services: API integrations (SteamService, IGDBService, SteamGridDBService) handle HTTP requests and authentication tokens.

Tech Stack

• Runtime: Electron 31
• Frontend: React 18, TypeScript 5, Tailwind CSS
• Bundler: Rsbuild
• Routing: TanStack Router
• Data Fetching: TanStack React Query
• Database: LibSQL (SQLite), Drizzle ORM

Prerequisites

• Node.js 18 or later
• npm
• Steam Web API Key and 64-bit Steam ID (configurable in settings)

Setup and Running

1. Clone the repository and install dependencies:

   git clone https://github.com/your-username/segame.git
   cd segame
   npm install

2. Start the app in development mode:

   npm run dev

   This compiles the main process TS files, runs the Rsbuild dev server for the renderer, and launches Electron.

3. Add your Steam API key and Steam ID in the Settings tab inside the app to sync your library.

Project Commands

• npm run dev: Start renderer dev server and Electron main process in watch mode.
• npm run build: Build production bundles for both main process and renderer.
• npm run build:main: Compile TypeScript files in src/main.
• npm run build:renderer: Build production static assets for src/renderer.
• npm run db:generate: Generate database migrations using Drizzle Kit.
• npm run db:push: Push schema updates to the local SQLite database.

Project Structure

Segame/
├── src/
│   ├── main/          # Main process (AppManager, Services, Repositories, IPC)
│   ├── preload/       # Preload script exposing window.api
│   ├── renderer/      # React app (Dashboard, GameDetail, Settings)
│   └── shared/        # Shared TypeScript interfaces
├── drizzle.config.ts  # Database config
└── package.json