Skip to main content
Segra is an open-source project, and we welcome contributions from the community! Whether you’re fixing bugs, adding features, or improving documentation, this guide will help you get started.

Before You Start

Segra is built with C#/.NET for the backend and React/TypeScript for the frontend. Familiarity with these technologies is helpful but not required for all contributions.

Ways to Contribute

Report Bugs

Found an issue? Report it on GitHub Issues

Suggest Features

Have an idea? Open a feature request on GitHub

Fix Issues

Browse open issues and submit pull requests

Improve Docs

Help us improve guides and documentation

Development Setup

Requirements

  • Windows 10 (build 19041 / 20H1) or newer
  • .NET SDK 10.0.x with Windows targeting
  • Git for version control
  • Bun v1.1+ for frontend tooling and git hooks

Repository Structure

First-Time Setup

1

Clone the Repository

Or clone your fork if you’re contributing:
2

Install Root Dev Tools

Install Husky and lint-staged for git hooks:
3

Install Frontend Dependencies

4

Verify .NET SDK

Ensure .NET SDK 10 is installed:
Should show Version: 10.x and OS: Windows

Development Workflow

Running the Application

Segra has two parts that run during development:
The frontend dev server runs on http://localhost:2882:Using Bun (recommended):
Using Node/npm:

Making Changes

1

Create a Branch

Branch naming conventions:
  • feature/ - New features
  • fix/ - Bug fixes
  • docs/ - Documentation changes
  • refactor/ - Code refactoring
2

Make Your Changes

Edit code in your preferred IDE:
  • Visual Studio 2022: Open Segra.sln
  • VS Code: Open folder, install C# Dev Kit extension
Hot reload is supported for frontend (Vite) and backend (.NET 10).
3

Test Your Changes

  • Manual testing: Run the application and verify functionality
  • Check the log file at %AppData%/Segra/logs.log for errors
  • Test on a clean Windows installation if possible
4

Commit Your Changes

Git hooks will automatically run:
  • Pre-commit: Formats C# code with dotnet format, runs Prettier/ESLint on frontend
  • Pre-push: Verifies no formatting drift in solution
Commit message format:
  • feat: - New feature
  • fix: - Bug fix
  • docs: - Documentation
  • refactor: - Code refactoring
  • perf: - Performance improvement
  • test: - Test changes

Code Style and Formatting

Code formatting is enforced automatically via EditorConfig and git hooks.

EditorConfig Settings

Global (all files):
  • Line endings: CRLF
  • Indent: 2 spaces
C# files:
  • Line endings: CRLF
  • Indent: 4 spaces

C# Formatting

Formatting is handled by dotnet format:
Formats staged *.cs files automatically before commit

Frontend Formatting

The frontend uses Prettier + ESLint with Bun:

Building for Release

Backend Build

Frontend Build

This creates optimized production files in Frontend/dist/.

Key Architecture Concepts

Backend Architecture

Located in Backend/Recorder/OBSService.csResponsibilities:
  • OBS context initialization
  • Scene and source management
  • Encoder configuration
  • Recording/replay buffer outputs
Key Methods:
  • InitializeAsync() - Initialize OBS
  • StartRecording() - Start recording session
  • StopRecording() - Stop and cleanup
  • SaveReplayBuffer() - Save replay buffer
Located in Backend/Games/GameDetectionService.csResponsibilities:
  • Monitor Windows processes
  • Detect game launches
  • Auto-start recording
Uses WMI event watchers for process monitoring.
Located in Backend/Core/SettingsService.csResponsibilities:
  • Load/save user settings
  • Content folder management
  • Display/audio device enumeration
Located in Backend/Media/ContentService.csResponsibilities:
  • Metadata file creation
  • Thumbnail generation
  • Waveform generation
  • Content library management

Frontend Architecture

The frontend is built with:
  • React 19 - UI framework
  • TypeScript - Type safety
  • Vite - Build tool and dev server
  • Tailwind CSS - Styling
  • DaisyUI - Component library
Communication with backend uses:
  • WebSockets for real-time updates. The server runs at ws://localhost:44030/.
  • A local content HTTP server at http://localhost:2222/ exposing /api/content and /api/thumbnail.
  • Per-game local listeners such as the Counter-Strike 2 GSI endpoint at http://127.0.0.1:1340/ and the Dota 2 GSI endpoint at http://127.0.0.1:1341/.
  • IPC for Photino.NET integration.

Common Development Tasks

Adding a New OBS Source Type

1

Add Source Creation

In OBSService.cs, create the source:
2

Add to Scene

3

Cleanup on Stop

Add disposal in DisposeSources() method

Adding a New Game Integration

1

Create Integration Class

Create new file in Backend/Games/YourGame/YourGameIntegration.cs:
2

Implement Integration Logic

Override methods from Integration base class for event detection
3

Register in GameIntegrationService

Add your integration to the service initialization

Adding a New Setting

1

Add Property to Settings Model

In Backend/Core/Models/Settings.cs:
2

Add UI in Frontend

Create settings component in Frontend/src/components/Settings/
3

Wire Up Setting

Connect frontend UI to backend setting via IPC

Debugging

Backend Debugging

  1. Open Segra.sln
  2. Set breakpoints in code
  3. Press F5 to start debugging
  4. Debugger attaches automatically

Frontend Debugging

  • Browser DevTools: Inspect elements, console, network
  • React DevTools: Install browser extension for component inspection
  • Vite HMR: Hot Module Replacement for instant feedback

Git Hooks

Segra uses Husky + lint-staged for automated code quality:
Runs on git commit:
  • Formats staged *.cs files with dotnet format
  • Runs Prettier on frontend staged files
  • Runs ESLint on frontend staged files
If hooks don’t run, ensure Bun is on PATH in your Git shell:

Pull Request Guidelines

Before Submitting

1

Keep PRs Focused

  • One feature or fix per PR
  • Small, reviewable changes
  • Avoid mixing refactoring with features
2

Run Format and Lint

3

Test Thoroughly

  • Test your changes manually
  • Verify no regressions in existing features
  • Include steps to reproduce in PR description
4

Update Documentation

If your change affects user-facing features, update docs

PR Description Template

Community

GitHub Discussions

Ask questions and discuss ideas

Issues

Report bugs and request features

Discord

Join the community chat

Twitter

Follow for updates

Code of Conduct

Segra follows the Contributor Covenant Code of Conduct. Be respectful, inclusive, and collaborative.

License

By contributing to Segra, you agree that your contributions will be licensed under the GPLv2 License.
Segra is licensed under GPLv2, which means:
  • You can use, modify, and distribute the software
  • Modifications must also be GPLv2
  • Source code must be made available

Getting Help

If you need help contributing:
  1. Check existing documentation and guides
  2. Search GitHub Issues for similar questions
  3. Ask in GitHub Discussions
  4. Join the Discord community
Thank you for contributing to Segra!