Technology Stack

​

Overview

​

Frontend Stack

​

Svelte 5

• Runes-based reactivity: New $state, $derived, $effect primitives
• Compilation approach: Framework logic compiled away at build time
• Minimal runtime: ~3KB gzipped for core runtime
• Performance: No virtual DOM overhead
• Developer experience: Less boilerplate than React/Vue

<script>
  let count = $state(0)  // New Svelte 5 runes syntax
  let doubled = $derived(count * 2)
  
  $effect(() => {
    console.log(`Count is now ${count}`)
  })
</script>

<button onclick={() => count++}>
  {count} (doubled: {doubled})
</button>

​

SvelteKit

• File-based routing (src/routes/)
• Server-side rendering (SSR)
• API routes (+server.ts files)
• Load functions (+page.server.ts, +page.ts)
• Hooks for request interception
• Form actions for progressive enhancement

import adapter from '@sveltejs/adapter-node'
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter(),
    alias: { $types: 'src/types' }
  }
}

​

Tailwind CSS v4

• Vite-first architecture: No PostCSS required
• Performance: Faster builds with Rust-based engine
• CSS-first config: Configure via CSS variables
• Smaller footprint: Optimized bundle size

• @tailwindcss/forms - Better form styling defaults
• @tailwindcss/typography - Prose content styling

• tailwind-merge (v3.4.0) - Merge Tailwind classes intelligently
• tailwind-variants (v1.0.0) - Create component variants
• tw-animate-css (v1.4.0) - Extended animation utilities

​

Backend Stack

​

PocketBase

• Database: Embedded SQLite with migrations
• Authentication: Email/password, OAuth2, SSO
• File Storage: Automatic thumbnails and serving
• Realtime: WebSocket subscriptions
• Admin UI: Built-in dashboard at /_/
• Access Rules: SQL-like permission system

import PocketBase from 'pocketbase'

const pb = new PocketBase('http://localhost:8090')

// Authentication
await pb.collection('users').authWithPassword(email, password)

// CRUD operations
const posts = await pb.collection('posts').getList(1, 20, {
  sort: '-created',
  expand: 'author'
})

// Realtime subscriptions
pb.collection('posts').subscribe('*', (e) => {
  console.log(e.action, e.record)
})

• SQLite 3 (pb_data/data.db)
• Migrations in pb_migrations/ (JavaScript files)
• Server-side hooks in pb_hooks/ (optional JavaScript)

​

Bun Runtime

• Speed: 3-4x faster than npm/yarn
• Built-in TypeScript: No separate transpilation
• Native bundler: Fast builds without extra tools
• Web API compatibility: Fetch, WebSocket, etc.
• Drop-in replacement: Works with existing Node packages

bun install           # Install dependencies
bun run dev          # Start dev server
bun run build        # Build for production

​

UI Component Libraries

​

Bits UI

• Unstyled primitives (bring your own styles)
• WAI-ARIA compliant
• Keyboard navigation
• Focus management

• Dialog/Modal
• Dropdown Menu
• Tabs
• Switch (toggle)
• Form elements with labels

<script>
import { Dialog } from 'bits-ui'
</script>

<Dialog.Root>
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Title>Title</Dialog.Title>
      <Dialog.Description>Content</Dialog.Description>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

​

Lucide Icons

• 1000+ consistent SVG icons
• Tree-shakeable (only import what you use)
• Customizable size, color, stroke width

<script>
import { Calendar, User, Settings } from 'lucide-svelte'
</script>

<Calendar size={24} strokeWidth={1.5} />

​

Mode Watcher

• Automatic system preference detection
• Local storage persistence
• Smooth transitions
• SSR-safe

​

Svelte Sonner

• Beautiful default styles
• Promise-based API
• Dismissible and stackable
• Accessible

​

Form Handling & Validation

​

Sveltekit Superforms

• Server-side and client-side validation
• Progressive enhancement
• Zod schema integration
• Error handling
• Loading states

// +page.server.ts
import { superValidate } from 'sveltekit-superforms'
import { zod } from 'sveltekit-superforms/adapters'
import { postSchema } from '$lib/schemas'

export const load = async () => {
  const form = await superValidate(zod(postSchema))
  return { form }
}

export const actions = {
  default: async ({ request, locals }) => {
    const form = await superValidate(request, zod(postSchema))
    if (!form.valid) return fail(400, { form })
    // Process valid data...
  }
}

​

Zod

• Type inference
• Runtime validation
• Composable schemas
• Custom error messages

• post.js - Post creation/editing
• comment.js - Comment validation
• space.js - Space creation
• group.js - Group creation
• material.js - Material uploads

​

Utility Libraries

​

date-fns

• Modular (tree-shakeable)
• Immutable
• TypeScript support
• Timezone handling

• Format event dates
• Calculate relative time (“2 hours ago”)
• Parse calendar dates

​

linkify-it

• Email addresses
• URLs without protocol
• Customizable schemas

​

sanitize-html

• Whitelist tags and attributes
• Strip malicious content
• Preserve safe formatting

import sanitizeHtml from 'sanitize-html'

const clean = sanitizeHtml(userInput, {
  allowedTags: ['b', 'i', 'em', 'strong', 'a', 'p', 'br'],
  allowedAttributes: { a: ['href'] }
})

​

clsx

import clsx from 'clsx'

const buttonClass = clsx(
  'btn',
  isActive && 'btn-active',
  disabled && 'btn-disabled'
)

​

Media Processing

​

Sharp

• Resize images
• Generate thumbnails
• Format conversion
• Optimize file sizes

​

Mediabunny

• MIME type detection
• File validation
• Upload helpers

​

Development Tools

​

Biome

• Linter: Fast JavaScript/TypeScript linting
• Formatter: Opinionated code formatting
• Built in Rust: 10-100x faster than ESLint

{
  "biome:check": "biome check --write",
  "biome:format": "biome format --write",
  "biome:lint": "biome lint --write"
}

​

TypeScript

• Catch errors at compile time
• Enhanced autocomplete
• Refactoring confidence

​

Vite

• Lightning-fast HMR: Hot module replacement
• Native ESM: No bundling in dev
• Optimized builds: Rollup under the hood
• Plugin ecosystem: SvelteKit, Tailwind integration

export default defineConfig({
  plugins: [sveltekit(), tailwindcss()],
  server: { port: 5173 },
  build: {
    target: 'es2022',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: { /* split vendors */ }
      }
    }
  }
})

​

Additional Utilities

​

Internationalization

• Calendar systems
• Timezone conversions
• Format according to user locale

​

State Management

• writable, readable, derived stores
• Context API for component trees
• $state runes (Svelte 5)

• src/lib/stores/queryCache.ts - Query result caching
• src/lib/stores/connection.ts - Network status

​

Runtime Environments

​

Development

# Frontend dev server (Vite + SvelteKit)
bun run dev              # http://localhost:5173

# Backend server (PocketBase)
./pocketbase serve       # http://localhost:8090

​

Production

# Build SvelteKit app
bun run build

# Run production server (Node.js via adapter-node)
node build/index.js      # Port 3000

# Run PocketBase
./pocketbase serve --http="0.0.0.0:8090"

​

Version Compatibility

​

Dependency Tree Size

• Core SvelteKit + Svelte: ~40KB gzipped
• PocketBase SDK: ~25KB gzipped
• Tailwind CSS: ~10-15KB (purged)
• UI Components (Bits UI): ~20KB
• Icons (Lucide): ~3KB per 20 icons
• Form handling: ~15KB
• Total: ~120-150KB gzipped (first load)

​

Package Manager

​

Build Output

• build/_app/ - Client-side JavaScript bundles
• build/_app/immutable/ - Hashed static assets
• static/ - Copied as-is to build root

​

Performance Budget

• First Contentful Paint: < 1.5s
• Time to Interactive: < 3.5s
• Bundle size: < 200KB initial load
• Lighthouse score: > 90

• Code splitting by route
• Manual vendor chunks (vite.config.ts:32)
• Tree-shaking unused code
• Image optimization via Sharp
• CSS purging via Tailwind