The frontend for Project Optima, a credential and company management platform. Ships as both a web application (deployed to Kubernetes) and a cross-platform desktop app (Electron for macOS and Windows).

Built with SvelteKit, TypeScript, Tailwind CSS, and Electron.

Features

Authentication — OAuth-based login flow via the Optima API
Company Management — Browse and manage companies and linked Unifi sites
Credential Management — Create, view, and organize credentials by type
Admin Panel — User management, role & permission assignment, credential type configuration
Dark/Light Theme — Toggle between themes with persistent preference
Desktop App — Native macOS (.dmg) and Windows (.exe/.msi) builds via Electron Forge
Web Deployment — Containerized SvelteKit server deployed to Kubernetes

Tech Stack

Layer	Technology
Framework	SvelteKit
Language	TypeScript
Styling	Tailwind CSS v4
Desktop	Electron + Electron Forge
API Client	Axios
Realtime	Socket.IO
Testing	Vitest + Playwright
Package Manager	Bun

Getting Started

Prerequisites

Bun (package manager & runtime)
Node.js 22+ (for Electron)

Installation

bun install

Note: This project patches @sveltejs/kit via patches/ to work around routing issues.

Development (Desktop)

bun start

Launches Electron with Vite HMR. The app opens to the login page and connects to the Optima API.

Development (Web Server)

bun run build:server
node build/index.js

Builds and runs the SvelteKit server with adapter-node on port 3000.

Building

Desktop — macOS

bun run make:macos

Outputs .dmg and .zip to out/make/.

Desktop — Windows

npm run make -- --platform win32

Outputs .exe, .msi, and .nupkg to out/make/.

Docker (Web Server)

docker build -t optima-ui .
docker run -p 3000:3000 optima-ui

The Dockerfile builds the SvelteKit app, bundles it with bun build into a single file (no node_modules needed at runtime), and serves it on a minimal node:22-alpine image.

Project Structure

├── electron/              # Electron main & preload processes
│   ├── main.ts            # Window creation, IPC handlers
│   └── preload.ts         # Main ↔ Renderer bridge
├── src/
│   ├── components/        # Reusable Svelte components (modals, spinners, etc.)
│   ├── lib/
│   │   ├── optima-api/    # API client modules (auth, companies, credentials, etc.)
│   │   ├── permissions.ts # Permission helpers
│   │   └── theme.ts       # Theme store (dark/light)
│   ├── routes/
│   │   ├── (auth)/        # Auth pages (login)
│   │   ├── admin/         # Admin panel (users, roles, credential types)
│   │   ├── companies/     # Company management
│   │   └── +page.svelte   # Home page
│   └── styles/            # CSS (Tailwind)
├── kubernetes/            # K8s deployment & ingress manifests
├── .github/workflows/     # CI/CD (build, publish, deploy)
├── Dockerfile             # Multi-stage build (bun → node:alpine)
└── forge.config.ts        # Electron Forge config

Testing

# Unit tests (Vitest)
bun run test:unit

# E2E tests (Playwright)
bun run test:e2e

# All tests
bun run test

Deployment

Releases are automated via GitHub Actions. Creating a release triggers:

Docker image build → pushed to ghcr.io/project-optima/ttscm-ui
Desktop builds → macOS and Windows artifacts attached to the release
Kubernetes deploy → rolls out the new image to the optima namespace

Environment Variables

Variable	Description	Default
`PUBLIC_API_URL`	Optima API base URL	`https://opt-api.osdci.net`
`ORIGIN`	Allowed origin for CORS (server)	`https://optima.osdci.net`
`PORT`	Server listen port	`3000`

License

See LICENSE for details.