Modern web application built with Svelte 5 and Applesauce Nostr library ecosystem
- Svelte 5: Reactive UI with runes (signals)
- SvelteKit: Full-stack framework
- TypeScript: Strict type checking
- Vite: Build tool and dev server
- Bun: Package manager
- Tailwind CSS v4: Utility-first CSS
- Shadcn Svelte: Component library
- Bits UI: Headless UI components
- Lucide Svelte: Icons
- Applesauce: Core, Loaders, Accounts, Signers, Relay
- Nostr Tools: Protocol implementation
- RxJS: Reactive programming
- Marked: Markdown parsing
- DOMPurify: HTML sanitization
bun run dev # Start dev server
bun run build # Build for production
bun run preview # Preview build
bun run check # TypeScript check
bun run check:watch # Watch & check
bun run format # Format code
bun run lint # Lint code- Use runes:
$state(),$derived(),$effect() - Component props:
$props()with typing - Two-way binding:
$bindable() - Prefer reactive over DOM manipulation
- Components: PascalCase (
ArticleCard.svelte) - Functions/Variables: camelCase (
formatUnixTimestamp) - Constants: UPPER_SNAKE_CASE (
CONTEXTVM_PUBKEY) - Files: kebab-case for routes
- TypeScript strict mode
- Error boundaries in components
- Try-catch for async operations
- Sanitize user content with DOMPurify
Reactive Data Loading:
const blogArticles = eventStore.model(TimelineModel, articlesFilter);RxJS Integration: Svelte 5 consumes RxJS observables with $ prefix.
State Management:
$state()for local state$derived()for computed values$effect()for side effects- Applesauce event store for global Nostr state
Nostr Patterns:
- ReplaceableModel for articles
- Proper event filtering
- Graceful relay handling
- addressLoader for lookups