Architecture

🏗️ Deployment Architecture 🚀

From local development to production deployment

Development & Deployment Workflow

How code flows from your Mac to production

macOS Development

Local development environment

Code Editor Terminal Git

npm Dev Server

Vite-powered local server

npm run dev
Hot Module Replacement localhost:5173

GitHub Repository

Version control & CI/CD trigger

git push origin main
GitHub Actions Automated Tests

Vercel Platform

Build, deploy & host

Auto Build Edge Network SSR Support

Production

Live on the internet

demo.thauptmann.ch

Technology Stack

Development Machine

  • macOS
  • Node.js 20.x
  • npm package manager
  • Git version control
  • Code editor (VS Code / Cursor)

Dev Server

  • Vite development server
  • Hot Module Replacement (HMR)
  • SvelteKit framework
  • TypeScript support
  • Runs on localhost:5173

GitHub

  • Repository hosting
  • GitHub Actions CI/CD
  • Automated testing
  • Pull request reviews
  • Webhook triggers to Vercel

Vercel

  • Automatic builds on push
  • Preview deployments per PR
  • Global Edge Network CDN
  • Server-Side Rendering
  • Serverless functions

Common Commands

Local Development

npm run dev

Start the Vite dev server with HMR

Run Tests

npm run test:unit

Execute unit tests with Vitest

Type Check

npm run check

Run SvelteKit sync and type checks

Production Build

npm run build

Create optimized production build

Push to Deploy

git push origin main

Triggers automatic deployment

E2E Tests

npm run test:e2e

Run Playwright browser tests

Explore the Demo

HTML5 Version Svelte 5 Version Comparison View