Skip to content

Developer Overview

Technical documentation for ZapTracker developers.

Learn how ZapTracker is built and how to contribute to the project.

Technology Stack

Frontend Framework

Vue.js 3.4Composition API
Vite 5Build tool
Tailwind CSS 3Styling

Nostr & Bitcoin

nostr-tools Nostr protocol implementation
@getalby/bitcoin-connect Wallet connection
@getalby/sdk Alby integration

UI & Visualization

ECharts Charts and visualizations
Lucide Vue Icons
FullCalendar Calendar component

PWA

vite-plugin-pwa Progressive Web App support

Architecture Overview

ZapTracker is a client-side Vue 3 application that connects directly to Nostr relays and Lightning wallets.

┌─────────────────────────────────────────────────┐
│                   Browser                        │
│  ┌─────────────────────────────────────────┐   │
│  │            ZapTracker App                │   │
│  │  ┌─────────┐  ┌────────┐  ┌─────────┐  │   │
│  │  │  Pages  │  │Compos- │  │  Utils  │  │   │
│  │  │         │  │ables   │  │         │  │   │
│  │  └────┬────┘  └───┬────┘  └────┬────┘  │   │
│  │       │           │            │        │   │
│  │       └───────────┼────────────┘        │   │
│  │                   │                      │   │
│  │           ┌───────┴───────┐              │   │
│  │           │ Local Storage │              │   │
│  │           └───────────────┘              │   │
│  └─────────────────────────────────────────┘   │
│                      │                          │
│  ┌───────────────────┼───────────────────┐     │
│  │     NIP-07        │       NWC         │     │
│  │   Extension       │     Protocol      │     │
│  └───────────────────┼───────────────────┘     │
└──────────────────────┼──────────────────────────┘

        ┌──────────────┼──────────────┐
        ▼              ▼              ▼
   ┌─────────┐   ┌─────────┐   ┌─────────┐
   │  Nostr  │   │  Nostr  │   │Lightning│
   │  Relay  │   │  Relay  │   │ Wallet  │
   └─────────┘   └─────────┘   └─────────┘

Key Concepts

No Backend

ZapTracker has no server component:

  • All data in browser localStorage
  • Direct connection to Nostr relays
  • NWC for wallet communication

Privacy First

User data never leaves the browser:

  • Profile data from Nostr
  • Preferences in localStorage
  • No analytics or tracking

Real-Time Updates

Live data through:

  • WebSocket connections to relays
  • NWC event subscriptions
  • Reactive Vue state

Documentation Sections