|
1 | | -# MKStack |
| 1 | +# Curator: A simple Nostr client to browse and curate kinds |
2 | 2 |
|
3 | | -**The Complete Framework for Building Nostr Clients with AI** |
| 3 | +Curator is a minimal Nostr client focused on **browsing, inspecting, and curating Nostr events by kind and relay**. It is built with React, Vite, TailwindCSS, shadcn/ui, and Nostrify, and provides a clean starting point for experimenting with Nostr relays, kinds, and client-side curation logic. |
4 | 4 |
|
5 | | -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. |
| 5 | +This repository is a concrete application, not a generic framework. It ships with a ready-to-run Nostr client UI and opinionated defaults for relays and configuration. |
6 | 6 |
|
7 | | -## 🚀 Quick Start |
8 | | - |
9 | | -Build your Nostr app in 3 simple steps: |
10 | | - |
11 | | -### 1. Install & Create |
12 | | -```bash |
13 | | -npm install -g @getstacks/stacks |
14 | | -stacks mkstack |
15 | | -``` |
16 | | - |
17 | | -### 2. Build with AI |
18 | | -```bash |
19 | | -stacks agent |
20 | | -# Tell Dork AI what you want: "Build a group chat application" |
21 | | -``` |
22 | | - |
23 | | -### 3. Deploy Instantly |
24 | | -```bash |
25 | | -npm run deploy |
26 | | -# ✅ App deployed to NostrDeploy.com! |
27 | | -``` |
28 | | - |
29 | | -## ✨ What Makes MKStack Special |
30 | | - |
31 | | -- **🤖 AI-First Development**: Build complete Nostr apps with just one prompt using Dork AI agent |
32 | | -- **⚡ 8 Minutes Average**: From idea to deployed application in minutes, not months |
33 | | -- **🔗 50+ NIPs Supported**: Comprehensive Nostr protocol implementation |
34 | | -- **🎨 Beautiful UI**: 48+ shadcn/ui components with light/dark theme support |
35 | | -- **🔐 Built-in Security**: NIP-07 browser signing, NIP-44 encryption, event validation |
36 | | -- **💰 Payments Ready**: Lightning zaps (NIP-57), Cashu wallets (NIP-60), Wallet Connect (NIP-47) |
37 | | -- **📱 Production Ready**: TypeScript, testing, deployment, and responsive design included |
38 | | - |
39 | | -## 🛠 Technology Stack |
40 | | - |
41 | | -- **React 18.x**: Stable version with hooks, concurrent rendering, and improved performance |
42 | | -- **TailwindCSS 3.x**: Utility-first CSS framework for styling |
43 | | -- **Vite**: Fast build tool and development server |
44 | | -- **shadcn/ui**: 48+ unstyled, accessible UI components built with Radix UI |
45 | | -- **Nostrify**: Nostr protocol framework for Deno and web |
46 | | -- **React Router**: Client-side routing with BrowserRouter |
47 | | -- **TanStack Query**: Data fetching, caching, and state management |
48 | | -- **TypeScript**: Type-safe JavaScript development |
49 | | - |
50 | | -## 🎯 Real-World Examples |
51 | | - |
52 | | -### Built with One Prompt |
| 7 | +--- |
53 | 8 |
|
54 | | -Each of these applications was created with just a single prompt to Dork AI: |
| 9 | +## 🧭 What Curator Does |
55 | 10 |
|
56 | | -- **Group Chat Application**: `"Build me a group chat application"` |
57 | | - - [Live Demo](https://groupchat-74z9j26wq-mks-projects-1f1254c4.vercel.app/) |
| 11 | +- **Relay selection** |
| 12 | + - `RelaySelector` component with a configurable list of popular relays |
| 13 | + - Support for custom relay URLs with basic validation and normalization |
| 14 | + - Persists relay choices via `AppContext` and local storage |
58 | 15 |
|
59 | | -- **Decentralized Goodreads**: `"Build a decentralized goodreads alternative. Use OpenLibrary API for book data."` |
60 | | - - [Live Demo](https://bookstr123-87phkwjcy-mks-projects-1f1254c4.vercel.app/) |
| 16 | +- **Nostr client plumbing** |
| 17 | + - `useNostr` and `useNostrPublish` hooks wired to `@nostrify/react` |
| 18 | + - Automatic `client` tag injection using the deployed hostname |
| 19 | + - Configurable publish mode (current relay vs all write relays) |
61 | 20 |
|
62 | | -- **Chess Game**: `"Build a chess game with NIP 64"` |
63 | | - - [Live Demo](https://chess-l0d7ms7m3-mks-projects-1f1254c4.vercel.app/chess) |
| 21 | +- **Authentication and identity** |
| 22 | + - Nostr login via `@nostrify/react/login` |
| 23 | + - `useCurrentUser` and related hooks for working with the logged-in user |
64 | 24 |
|
65 | | -### Production Apps |
| 25 | +- **App shell and layout** |
| 26 | + - React Router–based routing in `AppRouter` |
| 27 | + - Dark/light/system theme support via `AppContext` and Tailwind |
| 28 | + - shadcn/ui components for buttons, popovers, commands, tooltips, etc. |
66 | 29 |
|
67 | | -Real Nostr applications built using MKStack: |
| 30 | +- **Optional AI helpers** |
| 31 | + - `useShakespeare` hook and patterns in `docs/AI_CHAT.md` for AI chat |
| 32 | + - Designed for AI-assisted features, but not required to run the app |
68 | 33 |
|
69 | | -- **[Chorus](https://chorus.community/)**: Facebook-style groups on Nostr with built-in eCash wallet |
70 | | -- **[Blobbi](https://www.blobbi.pet/)**: Digital pet companions that live forever on the decentralized web |
71 | | -- **[Treasures](https://treasures.to/)**: Decentralized geocaching adventure powered by Nostr |
| 34 | +As you extend Curator, you can add pages and components that focus on specific Nostr kinds (e.g. metadata, notes, relays, classifieds) and use the existing hooks/contexts to query and display them. |
72 | 35 |
|
73 | | -[Browse more apps made with MKStack →](https://nostrhub.io/apps/t/mkstack/) |
| 36 | +--- |
74 | 37 |
|
75 | | -## 🔧 Core Features |
| 38 | +## 🛠 Technology Stack |
76 | 39 |
|
77 | | -### Authentication & Users |
78 | | -- `LoginArea` component with account switching |
79 | | -- `useCurrentUser` hook for authentication state |
80 | | -- `useAuthor` hook for fetching user profiles |
81 | | -- NIP-07 browser signing support |
82 | | -- Multi-account management |
| 40 | +- **React 18.x** – modern React with hooks and Suspense |
| 41 | +- **Vite** – fast dev server and build tool |
| 42 | +- **TypeScript** – type-safe frontend development |
| 43 | +- **TailwindCSS 3.x** – utility-first styling |
| 44 | +- **shadcn/ui** – accessible UI primitives built on Radix UI |
| 45 | +- **Nostrify** – Nostr protocol integration via `@nostrify/react` |
| 46 | +- **React Router** – client-side routing |
| 47 | +- **TanStack Query** – data fetching, caching, and subscriptions |
83 | 48 |
|
84 | | -### Nostr Protocol Support |
85 | | -- **Social Features**: User profiles (NIP-01), follow lists (NIP-02), reactions (NIP-25), reposts (NIP-18) |
86 | | -- **Messaging**: Private DMs (NIP-17), public chat (NIP-28), group chat (NIP-29), encryption (NIP-44) |
87 | | -- **Payments**: Lightning zaps (NIP-57), Cashu wallets (NIP-60), Nutzaps (NIP-61), Wallet Connect (NIP-47) |
88 | | -- **Content**: Long-form articles (NIP-23), file metadata (NIP-94), live events (NIP-53), calendars (NIP-52) |
| 49 | +--- |
89 | 50 |
|
90 | | -### Data Management |
91 | | -- `useNostr` hook for querying and publishing |
92 | | -- `useNostrPublish` hook with automatic client tagging |
93 | | -- Event validation and filtering |
94 | | -- Infinite scroll with TanStack Query |
95 | | -- Multi-relay support |
| 51 | +## 🚀 Getting Started |
96 | 52 |
|
97 | | -### UI Components |
98 | | -- 48+ shadcn/ui components (buttons, forms, dialogs, etc.) |
99 | | -- `NoteContent` component for rich text rendering |
100 | | -- `EditProfileForm` for profile management |
101 | | -- `RelaySelector` for relay switching |
102 | | -- `CommentsSection` for threaded discussions |
103 | | -- Light/dark theme system |
| 53 | +### 1. Install dependencies |
104 | 54 |
|
105 | | -### Media & Files |
106 | | -- `useUploadFile` hook with Blossom server integration |
107 | | -- NIP-94 compatible file metadata |
108 | | -- Image and video support |
109 | | -- File attachment to events |
| 55 | +```bash |
| 56 | +npm install |
| 57 | +``` |
110 | 58 |
|
111 | | -### Advanced Features |
112 | | -- NIP-19 identifier routing (`npub1`, `note1`, `nevent1`, `naddr1`) |
113 | | -- Cryptographic operations (encryption/decryption) |
114 | | -- Lightning payments and zaps |
115 | | -- Real-time event subscriptions |
116 | | -- Responsive design with mobile support |
| 59 | +### 2. Configure environment |
117 | 60 |
|
118 | | -## 🤖 AI Development with Dork |
| 61 | +Copy the example env file and adjust as needed: |
119 | 62 |
|
120 | | -MKStack includes Dork, a built-in AI agent that understands your codebase and Nostr protocols: |
| 63 | +```bash |
| 64 | +cp .env.example .env |
| 65 | +``` |
121 | 66 |
|
122 | | -### Supported AI Providers |
| 67 | +Key variable: |
123 | 68 |
|
124 | | -Configure your AI provider with `stacks configure`: |
| 69 | +- **`VITE_POPULAR_RELAYS`** – JSON array of popular relays used by the `RelaySelector` component. Example (see `.env.example`): |
125 | 70 |
|
126 | | -- **OpenRouter** ([openrouter.ai](https://openrouter.ai/)): Enter your API key from settings |
127 | | -- **Routstr** ([routstr.com](https://www.routstr.com/)): Use Cashu tokens for payment |
128 | | -- **PayPerQ** ([ppq.ai](https://ppq.ai/)): OpenAI-compatible API |
| 71 | +```bash |
| 72 | +VITE_POPULAR_RELAYS='[ |
| 73 | + { "name": "Swarm Hivetalk", "url": "wss://swarm.hivetalk.org" }, |
| 74 | + { "name": "Beeswax Hivetalk", "url": "wss://beeswax.hivetalk.org" } |
| 75 | +]' |
| 76 | +``` |
129 | 77 |
|
130 | | -### How Dork Works |
| 78 | +If `VITE_POPULAR_RELAYS` is not set or is invalid, Curator falls back to a built-in default list. |
131 | 79 |
|
132 | | -- **Context-Aware**: Understands your entire codebase and project structure |
133 | | -- **Nostr Expert**: Built-in knowledge of 50+ NIPs and best practices |
134 | | -- **Instant Implementation**: Makes changes directly to your code following React/TypeScript best practices |
| 80 | +### 3. Run the dev server |
135 | 81 |
|
136 | | -Example prompts: |
137 | 82 | ```bash |
138 | | -"Add user profiles with avatars and bio" |
139 | | -"Implement NIP-17 private messaging" |
140 | | -"Add a dark mode toggle" |
141 | | -"Create a marketplace with NIP-15" |
| 83 | +npm run dev |
142 | 84 | ``` |
143 | 85 |
|
144 | | -## 📁 Project Structure |
| 86 | +Then open the printed URL in your browser. |
145 | 87 |
|
146 | | -``` |
147 | | -src/ |
148 | | -├── components/ # UI components |
149 | | -│ ├── ui/ # shadcn/ui components (48+ available) |
150 | | -│ ├── auth/ # Authentication components |
151 | | -│ └── comments/ # Comment system components |
152 | | -├── hooks/ # Custom React hooks |
153 | | -│ ├── useNostr # Core Nostr integration |
154 | | -│ ├── useAuthor # User profile data |
155 | | -│ ├── useCurrentUser # Authentication state |
156 | | -│ ├── useNostrPublish # Event publishing |
157 | | -│ ├── useUploadFile # File uploads |
158 | | -│ └── useZaps # Lightning payments |
159 | | -├── pages/ # Page components |
160 | | -├── lib/ # Utility functions |
161 | | -├── contexts/ # React context providers |
162 | | -└── test/ # Testing utilities |
163 | | -``` |
| 88 | +--- |
164 | 89 |
|
165 | | -## 🎨 UI Components |
| 90 | +## 🔧 Key Concepts and Modules |
166 | 91 |
|
167 | | -MKStack includes 48+ shadcn/ui components: |
| 92 | +- **`App.tsx`** |
| 93 | + - Wires up all top-level providers: `QueryClientProvider`, `NostrProvider`, `NostrLoginProvider`, `AppProvider`, `NWCProvider`, `UnheadProvider`, and UI providers like `TooltipProvider` and `Toaster`. |
| 94 | + - Defines default relay metadata (NIP-65–style list) and theme. |
168 | 95 |
|
169 | | -**Layout**: Card, Separator, Sheet, Sidebar, ScrollArea, Resizable |
170 | | -**Navigation**: Breadcrumb, NavigationMenu, Menubar, Tabs, Pagination |
171 | | -**Forms**: Button, Input, Textarea, Select, Checkbox, RadioGroup, Switch, Slider |
172 | | -**Feedback**: Alert, AlertDialog, Toast, Progress, Skeleton |
173 | | -**Overlay**: Dialog, Popover, HoverCard, Tooltip, ContextMenu, DropdownMenu |
174 | | -**Data Display**: Table, Avatar, Badge, Calendar, Chart, Carousel |
175 | | -**And many more... |
| 96 | +- **`AppRouter.tsx`** |
| 97 | + - Defines the page routes for Curator. |
| 98 | + - Extend this file when adding new pages for browsing specific kinds. |
176 | 99 |
|
177 | | -## 🔐 Security & Best Practices |
| 100 | +- **Contexts (`src/contexts/`)** |
| 101 | + - `AppContext` – global app configuration (theme, relay metadata, publish mode). |
| 102 | + - `NWCContext` – Nostr Wallet Connect context for Lightning wallets. |
178 | 103 |
|
179 | | -- **Never use `any` type**: Always use proper TypeScript types |
180 | | -- **Event validation**: Filter events through validator functions for custom kinds |
181 | | -- **Efficient queries**: Minimize separate queries to avoid rate limiting |
182 | | -- **Proper error handling**: Graceful handling of invalid NIP-19 identifiers |
183 | | -- **Secure authentication**: Use signer interface, never request private keys directly |
| 104 | +- **Hooks (`src/hooks/`)** |
| 105 | + - `useNostr` – low-level Nostr querying and subscriptions. |
| 106 | + - `useNostrPublish` – publishing events with automatic `client` tagging. |
| 107 | + - `useCurrentUser` / `useAuthor` – identity and profiles. |
| 108 | + - `useLocalStorage` – persisted configuration. |
| 109 | + - `useZaps`, `useWallet`, `useNWC`, `useShakespeare` – optional advanced features. |
184 | 110 |
|
185 | | -## 📱 Responsive Design |
| 111 | +- **Components (`src/components/`)** |
| 112 | + - `RelaySelector` – dropdown + command palette for choosing relays. |
| 113 | + - `NostrProvider` / `NostrSync` – wrap the app with Nostr connections and sync logic. |
| 114 | + - `auth/`, `dm/`, and other folders – building blocks for authentication, messaging, and more. |
186 | 115 |
|
187 | | -- Mobile-first approach with Tailwind breakpoints |
188 | | -- `useIsMobile` hook for responsive behavior |
189 | | -- Touch-friendly interactions |
190 | | -- Optimized for all screen sizes |
| 116 | +For more detailed patterns (e.g. AI chat, comments, infinite scroll, DMs), see the docs in `docs/`. |
| 117 | + |
| 118 | +--- |
191 | 119 |
|
192 | 120 | ## 🧪 Testing |
193 | 121 |
|
194 | | -- Vitest with jsdom environment |
195 | | -- React Testing Library with jest-dom matchers |
196 | | -- `TestApp` component provides all necessary context providers |
197 | | -- Mocked browser APIs (matchMedia, scrollTo, IntersectionObserver, ResizeObserver) |
| 122 | +The project includes a basic testing setup: |
198 | 123 |
|
199 | | -## 🚀 Deployment |
| 124 | +- Vitest with `jsdom` environment |
| 125 | +- React Testing Library + `jest-dom` |
| 126 | +- `TestApp` helper to mount components with all required providers |
200 | 127 |
|
201 | | -Built-in deployment to NostrDeploy.com: |
| 128 | +Run tests with: |
202 | 129 |
|
203 | 130 | ```bash |
204 | | -npm run deploy |
| 131 | +npm test |
205 | 132 | ``` |
206 | 133 |
|
207 | | -Your app goes live instantly with: |
208 | | -- Automatic builds |
209 | | -- CDN distribution |
210 | | -- HTTPS support |
211 | | -- Custom domains available |
| 134 | +--- |
| 135 | + |
| 136 | +## 📦 Deployment |
| 137 | + |
| 138 | +Curator is a standard React/Vite application and can be deployed to any modern static hosting provider (e.g. Vercel, Netlify, Cloudflare Pages, static S3/CloudFront). |
212 | 139 |
|
213 | | -## 📚 Documentation |
| 140 | +Typical Vite deployment steps: |
214 | 141 |
|
215 | | -For detailed documentation on building Nostr applications with MKStack: |
| 142 | +```bash |
| 143 | +npm run build |
| 144 | +``` |
216 | 145 |
|
217 | | -- [Tutorial](https://soapbox.pub/blog/mkstack-tutorial) |
218 | | -- [Nostr Protocol Documentation](https://nostr.com) |
219 | | -- [shadcn/ui Components](https://ui.shadcn.com) |
| 146 | +Then configure your host to serve the `dist/` directory as a static site. |
220 | 147 |
|
221 | | -## 🤝 Contributing |
| 148 | +Make sure to configure your production environment variables (such as `VITE_POPULAR_RELAYS`) in your hosting provider's dashboard. |
222 | 149 |
|
223 | | -MKStack is open source and welcomes contributions. The framework is designed to be: |
| 150 | +--- |
224 | 151 |
|
225 | | -- **Extensible**: Easy to add new NIPs and features |
226 | | -- **Maintainable**: Clean architecture with TypeScript |
227 | | -- **Testable**: Comprehensive testing setup included |
228 | | -- **Documented**: Clear patterns and examples |
| 152 | +## 🙌 Acknowledgements & Links |
229 | 153 |
|
230 | | -## 📄 License |
| 154 | +Curator was originally scaffolded from the MKStack starter but is now its own focused application. |
231 | 155 |
|
232 | | -Open source - build amazing Nostr applications and help grow the decentralized web! |
| 156 | +- **Source code**: [https://github.com/bitkarrot/curator](https://github.com/bitkarrot/curator) |
233 | 157 |
|
234 | 158 | --- |
235 | 159 |
|
236 | | -**"Vibed with MKStack"** - [Learn more about MKStack](https://soapbox.pub/mkstack) |
| 160 | +## 📄 License |
237 | 161 |
|
238 | | -*Build your Nostr app in minutes, not months. Start with AI, deploy instantly.* |
| 162 | +Open source – build, fork, and extend Curator to explore and curate the Nostr ecosystem. |
0 commit comments