Developer Guide Introduction

Comprehensive guide for developers working on DesQTA

Welcome to DesQTA Development

This developer guide provides comprehensive documentation for contributing to DesQTA, understanding its architecture, and extending its functionality. Whether you're fixing bugs, adding features, or building plugins, this guide will help you understand how DesQTA works under the hood.

What is DesQTA?

DesQTA is a modern desktop application built with:

Frontend: SvelteKit 5 with TypeScript
Backend: Rust with Tauri v2
Styling: TailwindCSS with custom theme system
Desktop Framework: Tauri for native desktop integration

Architecture Overview

DesQTA follows a layered architecture:

┌─────────────────────────────────────┐
│      Frontend (SvelteKit)          │
│  - Components, Routes, Services    │
│  - State Management, UI Logic       │
└──────────────┬──────────────────────┘
               │
┌──────────────▼──────────────────────┐
│      Tauri Command Bridge           │
│  - invoke() calls                  │
│  - Event listeners                 │
└──────────────┬──────────────────────┘
               │
┌──────────────▼──────────────────────┐
│      Rust Backend (Tauri)           │
│  - API Communication               │
│  - File System Operations          │
│  - Session Management              │
└──────────────┬──────────────────────┘
               │
┌──────────────▼──────────────────────┐
│      External APIs                  │
│  - SEQTA Learn API                 │
│  - BetterSEQTA Cloud API           │
└─────────────────────────────────────┘

Technology Stack

Frontend Technologies

SvelteKit 5: Modern web framework with file-based routing
TypeScript: Type-safe JavaScript
TailwindCSS 4: Utility-first CSS framework
Svelte Runes: Reactive state management ($state, $derived, $effect)
Heroicons: Icon library via svelte-hero-icons
TipTap: Rich text editor for content editing
Schedule-X: Calendar/timetable component
D3: Data visualization for charts

Backend Technologies

Rust: Systems programming language
Tauri v2: Desktop application framework
reqwest: HTTP client for API calls
serde: Serialization framework
tokio: Async runtime

Development Tools

Vite: Build tool and dev server
pnpm: Package manager
ESLint: Code linting
Prettier: Code formatting
TypeScript: Type checking

Project Structure

desqta/
├── src/                    # Frontend source code
│   ├── routes/            # SvelteKit routes (pages)
│   ├── lib/               # Shared libraries
│   │   ├── components/    # Reusable UI components
│   │   ├── services/      # Business logic services
│   │   ├── stores/       # Svelte stores
│   │   └── utils/        # Utility functions
│   ├── utils/            # App-level utilities
│   └── app.css           # Global styles
├── src-tauri/            # Rust backend
│   ├── src/              # Rust source code
│   │   ├── auth/         # Authentication logic
│   │   ├── utils/        # Backend utilities
│   │   └── lib.rs        # Main entry point
│   └── Cargo.toml        # Rust dependencies
├── static/               # Static assets
│   └── themes/          # Theme files
├── scripts/             # Build scripts
└── package.json         # Node dependencies

Key Concepts

Frontend-Backend Communication

DesQTA uses Tauri's command system for frontend-backend communication:

Frontend (TypeScript):

import { invoke } from '@tauri-apps/api/core';

const result = await invoke('command_name', { param: 'value' });

Backend (Rust):

#[tauri::command]
fn command_name(param: String) -> Result<String, String> {
    // Implementation
    Ok("result".to_string())
}

State Management

DesQTA uses Svelte 5 runes for reactive state:

$state: Mutable reactive state
$derived: Computed values
$effect: Side effects
Stores: Global state management

Routing

SvelteKit's file-based routing:

+page.svelte: Page component
+layout.svelte: Layout wrapper
+page.ts: Page data loader
[id]: Dynamic route parameters

Development Workflow

Getting Started

Clone Repository
git clone --branch develop https://github.com/betterseqta/desqta cd desqta
Install Dependencies
npm install # or pnpm install
Run Development Server
npm run start # or manually: npm install npm run tauri dev