mroxso e7cf9c4677 feat: local draft notes with a blank "new note" entry point (#28)
* feat: local draft notes with a blank "new note" entry point

Writing was tied to publishing: the Feed composer either sits empty
or fires a note straight to relays, with nowhere to keep something
you're not ready to publish yet.

The Note app now supports a draft mode when opened without an id: a
blank note kept in localStorage until you publish it or discard it,
reachable via a new "New note" button in the Feed toolbar, the Go
menu, or the command palette (all already open the Note app with no
params).

Closes #19

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BYiUtZMQeA5RHggQw73wto

* fix: guard against double-publish and dropped relay params

Per review:
- handlePublish now also checks publish.isPending itself, not just
  the button's disabled state — a second click landing before React
  re-renders could otherwise fire mutateAsync twice.
- Publishing a draft now merges into the existing params instead of
  replacing them outright, so relay hints (or anything else already
  in params) survive the id being added.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BYiUtZMQeA5RHggQw73wto

* docs: mark notes app's id param as optional

Per review — the draft mode added by this PR means id is no longer
required to open the Note app.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BYiUtZMQeA5RHggQw73wto

* fix: sync useLocalStorage across same-tab consumers of one key

Per review: the Notes app is explicitly non-singleton, so opening two
"New Note" windows meant two DraftNote instances writing the same
localStorage key independently — the native `storage` event only
fires in *other* tabs/documents, never the one that wrote, so the two
windows would silently diverge (discard/publish in one wouldn't
update the other).

useLocalStorage now also dispatches a same-document custom event on
every write, and every instance sharing that key listens for it —
verified live with two open draft windows staying in sync as one is
typed into.

Also dropped a redundant `{}` params argument on an openApp() call
that every other call site omits when opening with no parameters.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BYiUtZMQeA5RHggQw73wto

---------

Co-authored-by: highperfocused <highperfocused@pm.me>
Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
2026-09-06 18:40:40 +02:00
2026-09-06 11:37:43 +02:00
2025-12-27 21:42:31 +01:00
2025-12-27 21:42:31 +01:00
2026-09-06 11:37:43 +02:00
2026-09-06 11:37:43 +02:00
2025-12-27 21:42:31 +01:00
2025-12-27 21:42:31 +01:00
2026-09-06 11:37:43 +02:00
2026-09-06 11:37:43 +02:00
2026-09-06 11:37:43 +02:00
2026-09-06 11:37:43 +02:00
2026-09-06 11:37:43 +02:00
2026-09-06 11:37:43 +02:00
2026-09-06 11:37:43 +02:00
2026-09-06 11:37:43 +02:00
2026-09-06 11:37:43 +02:00
2026-09-06 11:37:43 +02:00

MKStack

The Complete Framework for Building Nostr Clients with AI

MKStack is an AI-powered framework for building Nostr applications with React 18.x, TailwindCSS 3.x, Vite, shadcn/ui, and Nostrify. Build powerful Nostr applications with AI-first development - from social feeds to private messaging, MKStack provides everything you need to create decentralized apps on the Nostr protocol.

🚀 Quick Start

Build your Nostr app in 3 simple steps:

1. Install & Create

npm install -g @getstacks/stacks
stacks mkstack

2. Build with AI

stacks agent
# Tell Dork AI what you want: "Build a group chat application"

3. Deploy Instantly

npm run deploy
# ✅ App deployed to NostrDeploy.com!

What Makes MKStack Special

  • 🤖 AI-First Development: Build complete Nostr apps with just one prompt using Dork AI agent
  • 8 Minutes Average: From idea to deployed application in minutes, not months
  • 🔗 50+ NIPs Supported: Comprehensive Nostr protocol implementation
  • 🎨 Beautiful UI: 48+ shadcn/ui components with light/dark theme support
  • 🔐 Built-in Security: NIP-07 browser signing, NIP-44 encryption, event validation
  • 💰 Payments Ready: Lightning zaps (NIP-57), Cashu wallets (NIP-60), Wallet Connect (NIP-47)
  • 📱 Production Ready: TypeScript, testing, deployment, and responsive design included

🛠 Technology Stack

  • React 18.x: Stable version with hooks, concurrent rendering, and improved performance
  • TailwindCSS 3.x: Utility-first CSS framework for styling
  • Vite: Fast build tool and development server
  • shadcn/ui: 48+ unstyled, accessible UI components built with Radix UI
  • Nostrify: Nostr protocol framework for Deno and web
  • React Router: Client-side routing with BrowserRouter
  • TanStack Query: Data fetching, caching, and state management
  • TypeScript: Type-safe JavaScript development

🎯 Real-World Examples

Built with One Prompt

Each of these applications was created with just a single prompt to Dork AI:

  • Group Chat Application: "Build me a group chat application"

  • Decentralized Goodreads: "Build a decentralized goodreads alternative. Use OpenLibrary API for book data."

  • Chess Game: "Build a chess game with NIP 64"

Production Apps

Real Nostr applications built using MKStack:

  • Chorus: Facebook-style groups on Nostr with built-in eCash wallet
  • Blobbi: Digital pet companions that live forever on the decentralized web
  • Treasures: Decentralized geocaching adventure powered by Nostr

Browse more apps made with MKStack →

🔧 Core Features

Authentication & Users

  • LoginArea component with account switching
  • useCurrentUser hook for authentication state
  • useAuthor hook for fetching user profiles
  • NIP-07 browser signing support
  • Multi-account management

Nostr Protocol Support

  • Social Features: User profiles (NIP-01), follow lists (NIP-02), reactions (NIP-25), reposts (NIP-18)
  • Messaging: Private DMs (NIP-17), public chat (NIP-28), group chat (NIP-29), encryption (NIP-44)
  • Payments: Lightning zaps (NIP-57), Cashu wallets (NIP-60), Nutzaps (NIP-61), Wallet Connect (NIP-47)
  • Content: Long-form articles (NIP-23), file metadata (NIP-94), live events (NIP-53), calendars (NIP-52)

Data Management

  • useNostr hook for querying and publishing
  • useNostrPublish hook with automatic client tagging
  • Event validation and filtering
  • Infinite scroll with TanStack Query
  • Multi-relay support

UI Components

  • 48+ shadcn/ui components (buttons, forms, dialogs, etc.)
  • NoteContent component for rich text rendering
  • EditProfileForm for profile management
  • RelaySelector for relay switching
  • CommentsSection for threaded discussions
  • Light/dark theme system

Media & Files

  • useUploadFile hook with Blossom server integration
  • NIP-94 compatible file metadata
  • Image and video support
  • File attachment to events

Advanced Features

  • NIP-19 identifier routing (npub1, note1, nevent1, naddr1)
  • Cryptographic operations (encryption/decryption)
  • Lightning payments and zaps
  • Real-time event subscriptions
  • Responsive design with mobile support

🤖 AI Development with Dork

MKStack includes Dork, a built-in AI agent that understands your codebase and Nostr protocols:

Supported AI Providers

Configure your AI provider with stacks configure:

  • OpenRouter (openrouter.ai): Enter your API key from settings
  • Routstr (routstr.com): Use Cashu tokens for payment
  • PayPerQ (ppq.ai): OpenAI-compatible API

How Dork Works

  • Context-Aware: Understands your entire codebase and project structure
  • Nostr Expert: Built-in knowledge of 50+ NIPs and best practices
  • Instant Implementation: Makes changes directly to your code following React/TypeScript best practices

Example prompts:

"Add user profiles with avatars and bio"
"Implement NIP-17 private messaging"
"Add a dark mode toggle"
"Create a marketplace with NIP-15"

📁 Project Structure

src/
├── components/           # UI components
│   ├── ui/              # shadcn/ui components (48+ available)
│   ├── auth/            # Authentication components
│   └── comments/        # Comment system components
├── hooks/               # Custom React hooks
│   ├── useNostr         # Core Nostr integration
│   ├── useAuthor        # User profile data
│   ├── useCurrentUser   # Authentication state
│   ├── useNostrPublish  # Event publishing
│   ├── useUploadFile    # File uploads
│   └── useZaps          # Lightning payments
├── pages/               # Page components
├── lib/                 # Utility functions
├── contexts/            # React context providers
└── test/                # Testing utilities

🎨 UI Components

MKStack includes 48+ shadcn/ui components:

Layout: Card, Separator, Sheet, Sidebar, ScrollArea, Resizable Navigation: Breadcrumb, NavigationMenu, Menubar, Tabs, Pagination Forms: Button, Input, Textarea, Select, Checkbox, RadioGroup, Switch, Slider Feedback: Alert, AlertDialog, Toast, Progress, Skeleton Overlay: Dialog, Popover, HoverCard, Tooltip, ContextMenu, DropdownMenu Data Display: Table, Avatar, Badge, Calendar, Chart, Carousel **And many more...

🔐 Security & Best Practices

  • Never use any type: Always use proper TypeScript types
  • Event validation: Filter events through validator functions for custom kinds
  • Efficient queries: Minimize separate queries to avoid rate limiting
  • Proper error handling: Graceful handling of invalid NIP-19 identifiers
  • Secure authentication: Use signer interface, never request private keys directly

📱 Responsive Design

  • Mobile-first approach with Tailwind breakpoints
  • useIsMobile hook for responsive behavior
  • Touch-friendly interactions
  • Optimized for all screen sizes

🧪 Testing

  • Vitest with jsdom environment
  • React Testing Library with jest-dom matchers
  • TestApp component provides all necessary context providers
  • Mocked browser APIs (matchMedia, scrollTo, IntersectionObserver, ResizeObserver)

🚀 Deployment

Built-in deployment to NostrDeploy.com:

npm run deploy

Your app goes live instantly with:

  • Automatic builds
  • CDN distribution
  • HTTPS support
  • Custom domains available

📚 Documentation

For detailed documentation on building Nostr applications with MKStack:

🤝 Contributing

MKStack is open source and welcomes contributions. The framework is designed to be:

  • Extensible: Easy to add new NIPs and features
  • Maintainable: Clean architecture with TypeScript
  • Testable: Comprehensive testing setup included
  • Documented: Clear patterns and examples

📄 License

MKStack is dedicated to the public domain.

To the extent possible under law, the authors have waived all copyright and related or neighboring rights to MKStack. You are free to copy, modify, distribute, and use this software for any purpose, commercial or non-commercial, without asking permission and without attribution.

Build amazing Nostr applications and help grow the decentralized web!


"Vibed with MKStack" - Learn more about MKStack

Build your Nostr app in minutes, not months. Start with AI, deploy instantly.

Description
No description provided
Readme 1.6 MiB
Languages
TypeScript 98.1%
CSS 1%
JavaScript 0.8%
HTML 0.1%