---
status: complete
created: '2026-03-16'
tags:
  - infra
  - setup
priority: high
created_at: '2026-03-16T07:51:47.401Z'
updated_at: '2026-03-16T10:01:25.930Z'
transitions:
  - status: in-progress
    at: '2026-03-16T09:49:02.744Z'
  - status: complete
    at: '2026-03-16T10:01:25.930Z'
completed_at: '2026-03-16T10:01:25.930Z'
completed: '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