Files
427e7578-d7bf-49c8-aee9-2dd…/specs/001-project-setup/README.md
2026-03-16 23:03:27 +13:00

2.8 KiB

status, created, tags, priority, created_at, updated_at, transitions, completed_at, completed
status created tags priority created_at updated_at transitions completed_at completed
complete 2026-03-16
infra
setup
high 2026-03-16T07:51:47.401Z 2026-03-16T10:01:25.930Z
status at
in-progress 2026-03-16T09:49:02.744Z
status at
complete 2026-03-16T10:01:25.930Z
2026-03-16T10:01:25.930Z 2026-03-16

Project Setup & Architecture

Status: Complete · Priority: High · Created: 2026-03-16 · Tags: infra, setup

Overview

Scaffold the SvelteKit project with PeerJS for WebRTC-based P2P communication. This is the foundation all other specs build on. The app is a decentralized polling tool—no central backend for poll data.

Design

  • Framework: SvelteKit (SSR for public sharing pages, SPA for the app itself)
  • P2P: PeerJS (WebRTC data channels for peer communication)
  • Signaling: PeerJS Cloud (free tier to start; can self-host later)
  • State: Svelte stores + IndexedDB (via idb-keyval or similar) for local persistence
  • Styling: Tailwind CSS (mobile-first utility classes)
  • Build/Deploy: Vercel or Cloudflare Pages (static adapter for SPA routes, SSR for public pages)

Mobile-First UI Principles (applies to ALL UI work)

  • Touch targets ≥ 44px
  • Single-column layout on mobile; expand on larger screens
  • Bottom navigation bar (thumb-friendly): Home, Create (+), Profile
  • Minimal chrome—content first
  • Dark mode support (prefers-color-scheme)
  • System font stack for performance
  • Tailwind mobile breakpoints as default (design small → scale up)

Architecture

┌─────────────────────────────────────┐
│  SvelteKit App (runs in browser)    │
│  ├── Svelte Stores (reactive state) │
│  ├── IndexedDB (persistence)        │
│  ├── PeerJS (WebRTC data channels)  │
│  └── Crypto (identity keypairs)     │
└──────────┬──────────────────────────┘
           │ WebRTC
     ┌─────┴─────┐
     │ Other Peers│
     └───────────┘

Plan

  • Init SvelteKit project with TypeScript
  • Install dependencies: peerjs, tailwindcss, idb-keyval
  • Set up Tailwind with mobile-first config
  • Create basic app layout (shell, navigation)
  • Set up IndexedDB persistence layer
  • Configure SvelteKit adapter (adapter-auto for Vercel/CF, SSR mode)

Test

  • npm run dev starts without errors
  • Tailwind classes render correctly
  • IndexedDB read/write works in browser

Notes

  • PeerJS Cloud has rate limits—fine for development, may need self-hosted signaling for production
  • No server-side database; all poll data lives on peers' devices