Detailed Architecture

Detailed system architecture of the Plus261 platform. This document provides an in-depth look at all system components and their interactions.

What You’ll Learn

This guide will help you understand:

✅ System components and their roles
✅ Communication patterns
✅ Data storage strategies
✅ Integration points
✅ Technology stack
✅ Component interactions

Overview

The architecture follows a modular approach with clear separation of responsibilities:

┌─────────────────────────────────────────────────────────┐
│                    Web Client (SvelteKit)               │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐ │
│  │   UI Layer   │  │  Offline DB  │  │ Chat & calls │ │
│  └──────────────┘  └──────────────┘  └──────────────┘ │
└───────────────────────┬─────────────────────────────────┘
                        │ GraphQL + WebSocket
┌───────────────────────▼─────────────────────────────────┐
│                  API Server (GraphQL Yoga)               │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐ │
│  │  Auth/ACL    │  │  Business    │  │  Observability│ │
│  └──────────────┘  └──────────────┘  └──────────────┘ │
└───────────────────────┬─────────────────────────────────┘
                        │
┌───────────────────────▼─────────────────────────────────┐
│              PostgreSQL Database                         │
└─────────────────────────────────────────────────────────┘

Components

API

The GraphQL API exposes all backend functionality:

Component	Technology	Purpose
GraphQL Server	GraphQL Yoga	Request handling
Schema Builder	Type GraphQL Query	Automatic schema generation
ORM	Drizzle ORM	Database access
Authentication	Sessions + Arctic	User authentication
Authorization	ACL system	Access control

Learn more: API Overview

Web Client

The web client provides the complete user interface:

Component	Technology	Purpose
Framework	SvelteKit 5	Web framework
UI	Svelte 5	Component library
Offline Storage	IndexedDB + Drizzle	Local data storage
GraphQL Client	Generated client	Type-safe API access
Chat & calls	GraphQL + LiveKit	Messaging, calls

Learn more: Web Overview

Libraries

Shared libraries provide common functionality:

Library	Purpose
`@lib/db`	Database schema and ORM
`@lib/client`	Generated GraphQL client
`@lib/type-graphql-query`	GraphQL schema builder
`@lib/drizzle-query`	Query helpers
`@lib/utils`	Utility functions

Learn more: Libraries Overview

Communication

GraphQL

Communication between client and server uses GraphQL:

✅ Type-safe queries and mutations
✅ Automatic schema generation
✅ Real-time subscriptions
✅ Efficient data fetching

Learn more: GraphQL Schema

WebSocket

Subscriptions use WebSocket for real-time updates:

✅ Persistent connections
✅ Real-time event delivery
✅ Automatic reconnection
✅ Efficient message handling

Learn more: GraphQL Subscriptions

Database

PostgreSQL stores all persistent data:

✅ ACID compliance
✅ Relational data model
✅ Advanced indexing
✅ Full-text search
✅ JSON support

Learn more: Database Architecture

Integration Points

External Services

Service	Purpose	Integration
LiveKit	Audio/video calls	LiveKit server (SFU)
OAuth Providers	Authentication	Arctic library
Storage	File storage	Custom integration

Quick Reference

Topic	Documentation
🔐 Security	Security Architecture
📊 Data Flow	Data Flow
🚀 Deployment	Deployment Strategies
📈 Scalability	Scalability

Next Steps

Continue learning:

🔐 Security - Security architecture
📊 Data Flow - Data flow patterns
🚀 Deployment - Deployment strategies
📈 Scalability - Scalability strategies

Security - Security architecture
Data Flow - Data flow patterns
Architecture Overview - System overview
API Overview - API architecture