73 lines
2.5 KiB
Markdown
73 lines
2.5 KiB
Markdown
---
|
|
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
|