--- status: planned created: '2026-03-16' tags: - infra - setup priority: high created_at: '2026-03-16T07:51:47.401Z' --- # Project Setup & Architecture > **Status**: πŸ“… Planned Β· **Priority**: High Β· **Created**: 2026-03-16 ## 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