initial maddafacka

2026-08-18 15:26:02 +02:00 · 2026-08-18 15:26:02 +02:00 · 57a252b983
commit 57a252b983
16 changed files with 4135 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+node_modules
+package-lock-json
+*.pem
+dist/
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Relay Template - Nostr</title>
+    <meta name="description" content="Create and share Nostr relay templates for your community" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,22 @@
+{
+  "name": "relay-template-app",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "nostr-tools": "^2.0.0",
+    "react-router-dom": "^6.20.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.0.8"
+  }
+}
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1,336 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  background: #f5f5f5;
+  color: #333;
+}
+
+.app {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 0;
+  border-bottom: 2px solid #e0e0e0;
+  margin-bottom: 30px;
+}
+
+.app-header h1 {
+  font-size: 24px;
+}
+
+.app-header nav {
+  display: flex;
+  gap: 20px;
+}
+
+.app-header nav a {
+  color: #666;
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.app-header nav a:hover {
+  color: #000;
+}
+
+.user-badge {
+  background: #e8f5e9;
+  padding: 8px 12px;
+  border-radius: 20px;
+  font-size: 14px;
+  color: #2e7d32;
+}
+
+main {
+  min-height: 400px;
+}
+
+footer {
+  margin-top: 50px;
+  padding-top: 20px;
+  border-top: 1px solid #e0e0e0;
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+}
+
+/* Form Styles */
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: #555;
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  font-size: 14px;
+  transition: border-color 0.2s;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: #7c4dff;
+}
+
+/* Button Styles */
+.btn-primary {
+  background: #7c4dff;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+  width: 100%;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #6c3fdb;
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  background: #e0e0e0;
+  color: #333;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 8px;
+}
+
+.btn-secondary:hover {
+  background: #d0d0d0;
+}
+
+.btn-danger {
+  background: #ff5252;
+  color: white;
+  border: none;
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: #d32f2f;
+}
+
+.btn-danger:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.btn-nostr {
+  background: #ff6b00;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.btn-nostr:hover:not(:disabled) {
+  background: #e85a00;
+}
+
+/* Relay List */
+.relay-list {
+  margin-bottom: 10px;
+}
+
+.relay-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  margin-bottom: 8px;
+}
+
+.relay-item .relay-input {
+  flex: 1;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.relay-item label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  font-weight: normal;
+}
+
+/* Share Box */
+.share-box {
+  margin-top: 20px;
+  padding: 20px;
+  background: #e8f5e9;
+  border-radius: 8px;
+  border-left: 4px solid #4caf50;
+}
+
+.share-box input {
+  width: 100%;
+  padding: 8px;
+  margin: 8px 0;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.share-box button {
+  background: #4caf50;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* Template Applier */
+.template-preview {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  margin: 20px 0;
+  border: 1px solid #e0e0e0;
+}
+
+.template-preview h3 {
+  margin-bottom: 8px;
+}
+
+.relay-preview ul {
+  list-style: none;
+  padding: 0;
+}
+
+.relay-preview li {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.relay-url {
+  font-family: monospace;
+}
+
+.relay-permissions {
+  font-size: 18px;
+}
+
+.error-box, .warning {
+  padding: 20px;
+  background: #ffebee;
+  border-radius: 8px;
+  border-left: 4px solid #f44336;
+  color: #c62828;
+}
+
+.warning {
+  background: #fff3e0;
+  border-left-color: #ff9800;
+  color: #e65100;
+}
+
+.success-box {
+  margin-top: 20px;
+  padding: 20px;
+  background: #e8f5e9;
+  border-radius: 8px;
+  border-left: 4px solid #4caf50;
+}
+
+.loading {
+  text-align: center;
+  padding: 40px;
+  color: #999;
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+  .app-header {
+    flex-direction: column;
+    gap: 10px;
+    text-align: center;
+  }
+  
+  .app-header nav {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .relay-item {
+    flex-wrap: wrap;
+  }
+  
+  .relay-item label {
+    font-size: 12px;
+  }
+}
+
+/* Connection status */
+.connection-status {
+  margin: 16px 0;
+}
+
+.connection-status .warning {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.connection-status .warning .btn-nostr {
+  flex-shrink: 0;
+}
+
+/* Info box for connection status */
+.info-box {
+  background: #e3f2fd;
+  border-left: 4px solid #2196f3;
+  color: #0d47a1;
+  padding: 12px 16px;
+  border-radius: var(--radius);
+}
+
+.info-box code {
+  background: rgba(0,0,0,0.08);
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+}
--- a/src/App.jsx
+++ b/src/App.jsx
@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { HashRouter, Routes, Route, Link } from 'react-router-dom';
+import TemplateCreator from './components/TemplateCreator';
+import TemplateApplier from './components/TemplateApplier';
+import './App.css';
+
+function App() {
+  const [connectedPubkey, setConnectedPubkey] = useState(null);
+
+  return (
+    <HashRouter>
+      <div className="app">
+        <header className="app-header">
+          <h1>⚡ Relay Template</h1>
+          <nav>
+            <Link to="/">🏠 Create Template</Link>
+            {/* Remove the broken link - users will access /apply/:encoded via generated links */}
+          </nav>
+          {connectedPubkey && (
+            <div className="user-badge">
+              ✅ {connectedPubkey.slice(0, 8)}...
+            </div>
+          )}
+        </header>
+        <main>
+          <Routes>
+            <Route path="/" element={
+              <TemplateCreator setConnectedPubkey={setConnectedPubkey} />
+            } />
+            <Route path="/apply/:encoded" element={
+              <TemplateApplier connectedPubkey={connectedPubkey} setConnectedPubkey={setConnectedPubkey} />
+            } />
+          </Routes>
+        </main>
+        <footer>
+          <p>Self-contained • Built with Nostr</p>
+        </footer>
+      </div>
+    </HashRouter>
+  );
+}
+
+export default App;
--- a/src/components/NostrConnect.jsx
+++ b/src/components/NostrConnect.jsx
@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+
+const NostrConnect = ({ setConnectedPubkey }) => {
+  const [pubkey, setPubkey] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const connect = async () => {
+    setLoading(true);
+    try {
+      if (!window.nostr) {
+        throw new Error('Please install a Nostr extension (Alby, Nos2x, etc.)');
+      }
+      
+      const pubkey = await window.nostr.getPublicKey();
+      setPubkey(pubkey);
+      setConnectedPubkey(pubkey);
+    } catch (error) {
+      alert('Failed to connect: ' + error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    // Check if already connected
+    if (window.nostr) {
+      window.nostr.getPublicKey().then(pk => {
+        setPubkey(pk);
+        setConnectedPubkey(pk);
+      }).catch(() => {});
+    }
+  }, []);
+
+  if (pubkey) {
+    return (
+      <div className="nostr-connected">
+        ✅ Connected: {pubkey.slice(0, 8)}...{pubkey.slice(-8)}
+      </div>
+    );
+  }
+
+  return (
+    <button onClick={connect} disabled={loading} className="btn-nostr">
+      {loading ? 'Connecting...' : '🔑 Connect Nostr'}
+    </button>
+  );
+};
+
+export default NostrConnect;
--- a/src/components/RelayList.jsx
+++ b/src/components/RelayList.jsx
@ -0,0 +1,44 @@
+import React from 'react';
+
+const RelayList = ({ relays, onUpdate, onRemove }) => {
+  return (
+    <div className="relay-list">
+      {relays.map((relay, index) => (
+        <div key={index} className="relay-item">
+          <input
+            type="text"
+            value={relay.url}
+            onChange={(e) => onUpdate(index, 'url', e.target.value)}
+            placeholder="wss://relay.example.com"
+            className="relay-input"
+          />
+          <label>
+            <input
+              type="checkbox"
+              checked={relay.read}
+              onChange={(e) => onUpdate(index, 'read', e.target.checked)}
+            />
+            Read
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              checked={relay.write}
+              onChange={(e) => onUpdate(index, 'write', e.target.checked)}
+            />
+            Write
+          </label>
+          <button 
+            onClick={() => onRemove(index)}
+            className="btn-danger"
+            disabled={relays.length === 1}
+          >
+            ✕
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default RelayList;
--- a/src/components/TemplateApplier.jsx
+++ b/src/components/TemplateApplier.jsx
@ -0,0 +1,273 @@
+import React, { useState, useEffect } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { decodeTemplate, validateTemplate } from '../utils/templates';
+import useNostr from '../hooks/useNostr';
+
+const TemplateApplier = ({ connectedPubkey, setConnectedPubkey }) => {
+  const { encoded } = useParams();
+  const [template, setTemplate] = useState(null);
+  const [error, setError] = useState('');
+  const [applying, setApplying] = useState(false);
+  const [results, setResults] = useState(null);
+  const [publishResults, setPublishResults] = useState(null);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const { publishKind10002, isConnected, connect, pubkey } = useNostr();
+
+  useEffect(() => {
+    if (!encoded) {
+      setError('No template provided');
+      return;
+    }
+
+    try {
+      // Decode and validate the template
+      const decoded = decodeTemplate(encoded);
+      validateTemplate(decoded);
+      setTemplate(decoded);
+      setError('');
+    } catch (err) {
+      console.error('Template decode error:', err);
+      setError('Invalid template: ' + err.message);
+    }
+  }, [encoded]);
+
+  // Update parent when connection changes
+  useEffect(() => {
+    if (pubkey && !connectedPubkey) {
+      setConnectedPubkey(pubkey);
+    }
+  }, [pubkey, connectedPubkey, setConnectedPubkey]);
+
+  const handleConnect = async () => {
+    setIsConnecting(true);
+    try {
+      const pk = await connect();
+      setConnectedPubkey(pk);
+      setError('');
+    } catch (err) {
+      setError('Failed to connect: ' + err.message);
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  const handleApplyTemplate = async () => {
+    if (!template) return;
+
+    setApplying(true);
+    setError('');
+    setPublishResults(null);
+
+    try {
+      // Get pubkey from parent or hook
+      let pubkeyToUse = connectedPubkey || pubkey;
+      
+      if (!pubkeyToUse) {
+        // Try to connect
+        try {
+          pubkeyToUse = await connect();
+          setConnectedPubkey(pubkeyToUse);
+        } catch (err) {
+          throw new Error('Please connect your Nostr extension first');
+        }
+      }
+
+      if (!pubkeyToUse) {
+        throw new Error('No Nostr public key available. Please connect your extension.');
+      }
+
+      // Publish the kind 10002 event
+      const result = await publishKind10002(template.relays, pubkeyToUse);
+      
+      setPublishResults({
+        success: true,
+        eventId: result.event.id,
+        publishedTo: result.results.filter(r => r.success).length,
+        totalRelays: result.results.length,
+        details: result.results
+      });
+
+      setResults({
+        success: true,
+        eventId: result.event.id,
+        published: result.event
+      });
+
+    } catch (err) {
+      setError('Failed to apply template: ' + err.message);
+      setPublishResults({
+        success: false,
+        error: err.message
+      });
+    } finally {
+      setApplying(false);
+    }
+  };
+
+  // Handle case where template fails to decode
+  if (error && !template) {
+    return (
+      <div className="template-applier">
+        <h2>Apply Relay Template</h2>
+        <div className="error-box">
+          <h3>❌ Error Loading Template</h3>
+          <p>{error}</p>
+          <p style={{ marginTop: '10px', fontSize: '14px', color: '#666' }}>
+            The link you clicked may be malformed or expired. Please try generating a new template.
+          </p>
+          <Link to="/" className="btn-primary" style={{ display: 'inline-block', marginTop: '10px', width: 'auto' }}>
+            ← Go Back to Create
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  if (!template) {
+    return (
+      <div className="template-applier">
+        <div className="loading">Loading template...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="template-applier">
+      <h2>Apply Relay Template</h2>
+      
+      <div className="template-preview">
+        <h3>{template.name}</h3>
+        {template.description && <p>{template.description}</p>}
+        {template.created_at && (
+          <p style={{ fontSize: '14px', color: '#999', marginTop: '4px' }}>
+            Created: {new Date(template.created_at * 1000).toLocaleDateString()}
+          </p>
+        )}
+        
+        <div className="relay-preview">
+          <h4>📡 Relays in this template ({template.relays.length}):</h4>
+          <ul>
+            {template.relays.map((relay, index) => (
+              <li key={index}>
+                <span className="relay-url">{relay.url}</span>
+                <span className="relay-permissions">
+                  {relay.read ? '📖 Read' : '🔒 No Read'} 
+                  {relay.write ? ' ✍️ Write' : ' 🔒 No Write'}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+
+      {/* Connection Status & Button */}
+      <div className="connection-status" style={{ marginBottom: '16px' }}>
+        {(connectedPubkey || pubkey) ? (
+          <div className="info-box">
+            ✅ Connected as: <code>{(connectedPubkey || pubkey).slice(0, 8)}...{(connectedPubkey || pubkey).slice(-8)}</code>
+          </div>
+        ) : (
+          <div className="warning" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '10px' }}>
+            <span>⚠️ Not connected to Nostr. Please connect your extension to publish.</span>
+            <button 
+              onClick={handleConnect}
+              disabled={isConnecting}
+              className="btn-nostr"
+              style={{ width: 'auto' }}
+            >
+              {isConnecting ? '⏳ Connecting...' : '🔑 Connect Nostr'}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Publish Button */}
+      {!results && (connectedPubkey || pubkey) && (
+        <button 
+          onClick={handleApplyTemplate}
+          className="btn-primary"
+          disabled={applying}
+          style={{ 
+            fontSize: '18px',
+            padding: '16px',
+            marginTop: '10px'
+          }}
+        >
+          {applying ? (
+            '⏳ Publishing...'
+          ) : (
+            '✅ Apply Template & Publish to Relays'
+          )}
+        </button>
+      )}
+
+      {/* Error Display */}
+      {error && !results && (
+        <div className="error-box" style={{ marginTop: '16px' }}>
+          <strong>Error:</strong> {error}
+        </div>
+      )}
+
+      {/* Success Results */}
+      {publishResults && publishResults.success && (
+        <div className="success-box" style={{ marginTop: '20px' }}>
+          <h3>✅ Template Applied Successfully!</h3>
+          <p style={{ marginTop: '8px' }}>
+            Published to <strong>{publishResults.publishedTo}</strong> of {publishResults.totalRelays} relays
+          </p>
+          <p style={{ fontSize: '13px', color: '#555', marginTop: '4px' }}>
+            Event ID: <code style={{ fontSize: '12px', wordBreak: 'break-all' }}>
+              {publishResults.eventId}
+            </code>
+          </p>
+          
+          <details style={{ marginTop: '12px' }}>
+            <summary style={{ cursor: 'pointer', color: '#2e7d32' }}>
+              📊 Publication Details
+            </summary>
+            <ul style={{ marginTop: '8px', fontSize: '13px' }}>
+              {publishResults.details.map((result, index) => (
+                <li key={index} style={{ 
+                  padding: '4px 0',
+                  color: result.success ? '#2e7d32' : '#c62828'
+                }}>
+                  {result.success ? '✅' : '❌'} {result.url}
+                  {result.error && ` - ${result.error}`}
+                </li>
+              ))}
+            </ul>
+          </details>
+
+          <div style={{ marginTop: '16px', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+            <Link to="/" className="btn-secondary">
+              ← Create Another Template
+            </Link>
+            <button 
+              onClick={() => window.location.reload()}
+              className="btn-secondary"
+            >
+              🔄 Apply Again
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Error Results */}
+      {publishResults && !publishResults.success && (
+        <div className="error-box" style={{ marginTop: '20px' }}>
+          <h3>❌ Failed to Publish</h3>
+          <p>{publishResults.error}</p>
+          <button 
+            onClick={() => setPublishResults(null)}
+            className="btn-secondary"
+            style={{ marginTop: '10px' }}
+          >
+            Try Again
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TemplateApplier;
--- a/src/components/TemplateCreator.jsx
+++ b/src/components/TemplateCreator.jsx
@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { encodeTemplate, generateTemplateId, validateTemplate } from '../utils/templates';
+import RelayList from './RelayList';
+import NostrConnect from './NostrConnect';
+
+const TemplateCreator = ({ setConnectedPubkey }) => {
+  const navigate = useNavigate();
+  const [templateName, setTemplateName] = useState('');
+  const [description, setDescription] = useState('');
+  const [relays, setRelays] = useState([
+    { url: 'wss://relay.dyne.org', read: false, write: true },
+    { url: 'wss://relay.dyne.org/inbox', read: true, write: false },
+    { url: 'wss://basspistol.org', read: false, write: true },
+    { url: 'wss://basspistol.org/inbox', read: true, write: false },
+    { url: 'wss://spatia-arcana.com', read: false, write: true },
+    { url: 'wss://spatia-arcana.com/inbox', read: true, write: false },
+    { url: 'wss://nestr.nedao.ch', read: false, write: true },
+    { url: 'wss://nestr.nedao.ch/inbox', read: true, write: false },
+    { url: 'wss://pyramid.fiatjaf.com', read: false, write: true },
+    { url: 'wss://pyramid.fiatjaf.com/inbox', read: true, write: false },
+    { url: 'wss://relay.ditto.pub', read: true, write: true },
+    { url: 'wss://nos.lol', read: true, write: true }
+  ]);
+  const [error, setError] = useState('');
+  const [shareUrl, setShareUrl] = useState('');
+
+  const handleCreateTemplate = () => {
+    try {
+      const template = {
+        id: generateTemplateId(),
+        name: templateName,
+        description: description,
+        relays: relays,
+        created_at: Math.floor(Date.now() / 1000)
+      };
+
+      validateTemplate(template);
+
+      const encoded = encodeTemplate(template);
+      // Use HashRouter format
+      const url = `${window.location.origin}${window.location.pathname}#/apply/${encoded}`;
+      setShareUrl(url);
+
+      // Copy to clipboard automatically
+      navigator.clipboard?.writeText(url).catch(() => {
+        // Fallback - just show the URL
+      });
+
+      setError('');
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  const addRelay = () => {
+    setRelays([...relays, { url: '', read: true, write: true }]);
+  };
+
+  const removeRelay = (index) => {
+    setRelays(relays.filter((_, i) => i !== index));
+  };
+
+  const updateRelay = (index, field, value) => {
+    const updated = [...relays];
+    updated[index][field] = value;
+    setRelays(updated);
+  };
+
+  return (
+    <div className="template-creator">
+      <h2>Create Relay Template</h2>
+      
+      <NostrConnect setConnectedPubkey={setConnectedPubkey} />
+
+      <div className="form-group">
+        <label>Template Name *</label>
+        <input
+          type="text"
+          value={templateName}
+          onChange={(e) => setTemplateName(e.target.value)}
+          placeholder="e.g., Nostr Plebs Default Relays"
+        />
+      </div>
+
+      <div className="form-group">
+        <label>Description</label>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="Describe this relay set for new users"
+          rows="3"
+        />
+      </div>
+
+      <div className="form-group">
+        <label>Relays *</label>
+        <RelayList
+          relays={relays}
+          onUpdate={updateRelay}
+          onRemove={removeRelay}
+        />
+        <button onClick={addRelay} className="btn-secondary">
+          + Add Relay
+        </button>
+      </div>
+
+      {error && <div className="error">{error}</div>}
+
+      <button 
+        onClick={handleCreateTemplate} 
+        className="btn-primary"
+        disabled={!templateName || relays.some(r => !r.url)}
+      >
+        Generate Shareable Template
+      </button>
+
+      {shareUrl && (
+        <div className="share-box">
+          <h3>✅ Template Created!</h3>
+          <p>Share this link with your community:</p>
+          <input type="text" value={shareUrl} readOnly />
+          <button onClick={() => navigator.clipboard?.writeText(shareUrl)}>
+            Copy Link
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TemplateCreator;
--- a/src/hooks/useNostr.js
+++ b/src/hooks/useNostr.js
@ -0,0 +1,258 @@
+import { useState, useEffect, useCallback } from 'react';
+
+export const useNostr = () => {
+  const [pubkey, setPubkey] = useState(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [error, setError] = useState(null);
+  const [extension, setExtension] = useState(null);
+
+  useEffect(() => {
+    const checkExtension = async () => {
+      try {
+        if (window.nostr) {
+          setExtension(window.nostr);
+          try {
+            const pk = await window.nostr.getPublicKey();
+            setPubkey(pk);
+            setIsConnected(true);
+          } catch (err) {
+            console.log('Extension available but not authorized');
+          }
+        }
+      } catch (err) {
+        setError('No Nostr extension found');
+      }
+    };
+    checkExtension();
+  }, []);
+
+  const connect = useCallback(async () => {
+    try {
+      if (!window.nostr) {
+        throw new Error('Please install a Nostr extension (Alby, Nos2x, etc.)');
+      }
+      const pk = await window.nostr.getPublicKey();
+      setPubkey(pk);
+      setIsConnected(true);
+      setExtension(window.nostr);
+      setError(null);
+      return pk;
+    } catch (err) {
+      setError(err.message);
+      setIsConnected(false);
+      throw err;
+    }
+  }, []);
+
+  const signEvent = useCallback(async (event) => {
+    if (!extension) {
+      throw new Error('No Nostr extension connected');
+    }
+    return await extension.signEvent(event);
+  }, [extension]);
+
+  /**
+   * Publish to a single relay using native WebSocket
+   * Relays are passed in from the template - nothing hardcoded
+   */
+  const publishToSingleRelay = useCallback((url, event) => {
+    return new Promise((resolve) => {
+      let ws = null;
+      let resolved = false;
+      let timeoutIds = [];
+      
+      try {
+        console.log(`Connecting to ${url}...`);
+        ws = new WebSocket(url);
+        
+        // Connection timeout
+        const connectTimeout = setTimeout(() => {
+          if (!resolved) {
+            resolved = true;
+            console.log(`⏰ Connection timeout for ${url}`);
+            if (ws && ws.readyState !== WebSocket.CLOSED) {
+              try { ws.close(); } catch (e) {}
+            }
+            resolve({ url, success: false, error: 'Connection timeout' });
+          }
+        }, 10000);
+        timeoutIds.push(connectTimeout);
+        
+        ws.onopen = () => {
+          console.log(`Connected to ${url}, sending event...`);
+          
+          // Send the event as a JSON-RPC message
+          const message = JSON.stringify(['EVENT', event]);
+          ws.send(message);
+          
+          // Publish timeout
+          const publishTimeout = setTimeout(() => {
+            if (!resolved) {
+              resolved = true;
+              console.log(`⏰ Publish timeout for ${url}`);
+              try { ws.close(); } catch (e) {}
+              resolve({ url, success: false, error: 'Publish timeout' });
+            }
+          }, 15000);
+          timeoutIds.push(publishTimeout);
+          
+          // Listen for responses
+          ws.onmessage = (msg) => {
+            try {
+              const data = JSON.parse(msg.data);
+              // Check for OK response for our event
+              if (Array.isArray(data) && data[0] === 'OK' && data[1] === event.id) {
+                if (!resolved) {
+                  resolved = true;
+                  console.log(`✅ Published to ${url}`);
+                  // Clear all timeouts
+                  timeoutIds.forEach(id => clearTimeout(id));
+                  try { ws.close(); } catch (e) {}
+                  resolve({ url, success: true });
+                }
+              }
+              // Check for error response
+              if (Array.isArray(data) && data[0] === 'OK' && data[1] !== event.id && data[2] === false) {
+                if (!resolved) {
+                  resolved = true;
+                  console.log(`❌ Relay rejected event for ${url}:`, data[3]);
+                  timeoutIds.forEach(id => clearTimeout(id));
+                  try { ws.close(); } catch (e) {}
+                  resolve({ url, success: false, error: data[3] || 'Event rejected' });
+                }
+              }
+            } catch (e) {
+              // Ignore parse errors for non-OK messages
+            }
+          };
+          
+          ws.onerror = (error) => {
+            if (!resolved) {
+              resolved = true;
+              console.log(`❌ WebSocket error for ${url}:`, error);
+              timeoutIds.forEach(id => clearTimeout(id));
+              try { ws.close(); } catch (e) {}
+              resolve({ url, success: false, error: 'WebSocket error' });
+            }
+          };
+          
+          ws.onclose = () => {
+            if (!resolved) {
+              resolved = true;
+              console.log(`⚠️ Connection closed for ${url}`);
+              timeoutIds.forEach(id => clearTimeout(id));
+              resolve({ url, success: false, error: 'Connection closed' });
+            }
+          };
+        };
+        
+        ws.onerror = (error) => {
+          if (!resolved) {
+            resolved = true;
+            console.log(`❌ Connection error for ${url}:`, error);
+            timeoutIds.forEach(id => clearTimeout(id));
+            resolve({ url, success: false, error: 'Connection error' });
+          }
+        };
+        
+      } catch (err) {
+        if (!resolved) {
+          resolved = true;
+          console.log(`❌ Error with ${url}:`, err.message);
+          timeoutIds.forEach(id => clearTimeout(id));
+          if (ws) {
+            try { ws.close(); } catch (e) {}
+          }
+          resolve({ url, success: false, error: err.message });
+        }
+      }
+    });
+  }, []);
+
+  /**
+   * Publish to multiple relays (all from the user's template)
+   */
+  const publishToRelays = useCallback(async (event, relayUrls) => {
+    console.log(`Publishing to ${relayUrls.length} relays...`);
+    
+    // Filter out invalid URLs
+    const validUrls = relayUrls.filter(url => {
+      try {
+        new URL(url);
+        return url.startsWith('wss://') || url.startsWith('ws://');
+      } catch {
+        return false;
+      }
+    });
+    
+    if (validUrls.length === 0) {
+      return [{ url: 'none', success: false, error: 'No valid relay URLs' }];
+    }
+    
+    // Publish to each relay in parallel
+    const publishPromises = validUrls.map(url => publishToSingleRelay(url, event));
+    const results = await Promise.all(publishPromises);
+    
+    const successCount = results.filter(r => r.success).length;
+    console.log(`Published to ${successCount}/${results.length} relays`);
+    
+    return results;
+  }, [publishToSingleRelay]);
+
+  const publishKind10002 = useCallback(async (relays, pubkey) => {
+    if (!extension) {
+      throw new Error('No Nostr extension connected');
+    }
+
+    // relays comes from the user's template - NOT hardcoded
+    const validRelays = relays.filter(r => r.url && r.url.trim() !== '');
+    
+    if (validRelays.length === 0) {
+      throw new Error('No valid relays to publish to');
+    }
+
+    const tags = validRelays.map(relay => {
+      const params = [];
+      if (!relay.read) params.push('read');
+      if (!relay.write) params.push('write');
+      return ['r', relay.url, ...params];
+    });
+
+    const event = {
+      kind: 10002,
+      pubkey: pubkey,
+      created_at: Math.floor(Date.now() / 1000),
+      tags: tags,
+      content: ''
+    };
+
+    console.log('Signing kind 10002 event...');
+    const signedEvent = await extension.signEvent(event);
+    console.log('Event signed successfully');
+
+    // Extract URLs from the user's relay list
+    const relayUrls = [...new Set(validRelays.map(r => r.url))];
+    console.log('Publishing to relay URLs:', relayUrls);
+    
+    const results = await publishToRelays(signedEvent, relayUrls);
+    console.log('Final results:', results);
+    
+    return {
+      event: signedEvent,
+      results: results
+    };
+  }, [extension, publishToRelays]);
+
+  return {
+    pubkey,
+    isConnected,
+    error,
+    extension,
+    connect,
+    signEvent,
+    publishToRelays,
+    publishKind10002
+  };
+};
+
+export default useNostr;
--- a/src/main.jsx
+++ b/src/main.jsx
@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles/index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
--- a/src/styles/index.css
+++ b/src/styles/index.css
@ -0,0 +1,569 @@
+/* Reset and base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --primary: #7c4dff;
+  --primary-dark: #6c3fdb;
+  --secondary: #e0e0e0;
+  --success: #4caf50;
+  --danger: #ff5252;
+  --warning: #ff9800;
+  --text: #333;
+  --text-light: #666;
+  --background: #f5f5f5;
+  --white: #ffffff;
+  --border: #e0e0e0;
+  --shadow: 0 2px 4px rgba(0,0,0,0.1);
+  --radius: 8px;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  background: var(--background);
+  color: var(--text);
+  line-height: 1.6;
+}
+
+/* App Layout */
+.app {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Header */
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 0 16px;
+  border-bottom: 2px solid var(--border);
+  margin-bottom: 30px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.app-header h1 {
+  font-size: 24px;
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--primary), #b388ff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.app-header nav {
+  display: flex;
+  gap: 20px;
+}
+
+.app-header nav a {
+  color: var(--text-light);
+  text-decoration: none;
+  transition: color 0.2s;
+  font-weight: 500;
+}
+
+.app-header nav a:hover {
+  color: var(--primary);
+}
+
+.user-badge {
+  background: #e8f5e9;
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 14px;
+  color: #2e7d32;
+  font-family: monospace;
+}
+
+/* Main content */
+main {
+  flex: 1;
+}
+
+/* Footer */
+footer {
+  margin-top: 50px;
+  padding-top: 20px;
+  border-top: 1px solid var(--border);
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+}
+
+/* Form elements */
+.form-group {
+  margin-bottom: 24px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 6px;
+  font-weight: 600;
+  color: var(--text);
+  font-size: 14px;
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-size: 14px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  font-family: inherit;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.1);
+}
+
+.form-group textarea {
+  resize: vertical;
+  min-height: 60px;
+}
+
+/* Buttons */
+.btn-primary {
+  background: var(--primary);
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: var(--radius);
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s, transform 0.1s;
+  width: 100%;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--primary-dark);
+  transform: translateY(-1px);
+}
+
+.btn-primary:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.btn-secondary {
+  background: var(--secondary);
+  color: var(--text);
+  border: none;
+  padding: 8px 16px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  font-weight: 500;
+  transition: background 0.2s;
+}
+
+.btn-secondary:hover {
+  background: #d0d0d0;
+}
+
+.btn-danger {
+  background: var(--danger);
+  color: white;
+  border: none;
+  padding: 4px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.2s;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: #d32f2f;
+}
+
+.btn-danger:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.btn-nostr {
+  background: #ff6b00;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: var(--radius);
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.btn-nostr:hover:not(:disabled) {
+  background: #e85a00;
+}
+
+.btn-success {
+  background: var(--success);
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: var(--radius);
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.btn-success:hover:not(:disabled) {
+  background: #388e3c;
+}
+
+/* Relay List */
+.relay-list {
+  margin-bottom: 10px;
+}
+
+.relay-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: var(--white);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  margin-bottom: 8px;
+  transition: border-color 0.2s;
+}
+
+.relay-item:hover {
+  border-color: #bbb;
+}
+
+.relay-item .relay-input {
+  flex: 1;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: monospace;
+}
+
+.relay-item .relay-input:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.1);
+}
+
+.relay-item label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: normal;
+  color: var(--text-light);
+  cursor: pointer;
+}
+
+.relay-item label input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  accent-color: var(--primary);
+}
+
+/* Template Creator */
+.template-creator {
+  background: var(--white);
+  padding: 30px;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+
+.template-creator h2 {
+  margin-bottom: 24px;
+  font-size: 22px;
+}
+
+/* Template Applier */
+.template-applier {
+  background: var(--white);
+  padding: 30px;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+
+.template-applier h2 {
+  margin-bottom: 24px;
+  font-size: 22px;
+}
+
+.template-preview {
+  background: #fafafa;
+  padding: 20px;
+  border-radius: var(--radius);
+  margin: 20px 0;
+  border: 1px solid var(--border);
+}
+
+.template-preview h3 {
+  margin-bottom: 6px;
+  font-size: 18px;
+}
+
+.template-preview > p {
+  color: var(--text-light);
+  margin-bottom: 16px;
+}
+
+.relay-preview h4 {
+  font-size: 14px;
+  color: var(--text-light);
+  margin-bottom: 8px;
+}
+
+.relay-preview ul {
+  list-style: none;
+  padding: 0;
+}
+
+.relay-preview li {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.relay-preview li:last-child {
+  border-bottom: none;
+}
+
+.relay-url {
+  font-family: monospace;
+  font-size: 13px;
+}
+
+.relay-permissions {
+  font-size: 16px;
+}
+
+/* Status boxes */
+.error-box,
+.warning,
+.success-box,
+.info-box {
+  padding: 16px 20px;
+  border-radius: var(--radius);
+  margin: 16px 0;
+}
+
+.error-box {
+  background: #ffebee;
+  border-left: 4px solid var(--danger);
+  color: #c62828;
+}
+
+.warning {
+  background: #fff3e0;
+  border-left: 4px solid var(--warning);
+  color: #e65100;
+}
+
+.success-box {
+  background: #e8f5e9;
+  border-left: 4px solid var(--success);
+  color: #2e7d32;
+}
+
+.info-box {
+  background: #e3f2fd;
+  border-left: 4px solid #2196f3;
+  color: #0d47a1;
+}
+
+/* Share Box */
+.share-box {
+  margin-top: 24px;
+  padding: 20px;
+  background: #e8f5e9;
+  border-radius: var(--radius);
+  border-left: 4px solid var(--success);
+}
+
+.share-box h3 {
+  color: #2e7d32;
+  margin-bottom: 8px;
+}
+
+.share-box p {
+  color: #1b5e20;
+  margin-bottom: 8px;
+}
+
+.share-box input {
+  width: 100%;
+  padding: 10px;
+  margin: 8px 0;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: monospace;
+  background: var(--white);
+}
+
+.share-box .btn-success {
+  width: auto;
+}
+
+/* Nostr Connect */
+.nostr-connected {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: #e8f5e9;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 14px;
+  color: #2e7d32;
+  font-family: monospace;
+}
+
+/* Loading */
+.loading {
+  text-align: center;
+  padding: 40px;
+  color: var(--text-light);
+}
+
+.loading::after {
+  content: '...';
+  animation: dots 1.5s steps(4, end) infinite;
+}
+
+@keyframes dots {
+  0% { content: ''; }
+  25% { content: '.'; }
+  50% { content: '..'; }
+  75% { content: '...'; }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .app {
+    padding: 12px;
+  }
+
+  .app-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+    text-align: center;
+  }
+
+  .app-header nav {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .app-header h1 {
+    font-size: 20px;
+  }
+
+  .template-creator,
+  .template-applier {
+    padding: 20px;
+  }
+
+  .relay-item {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .relay-item .relay-input {
+    flex: 1 1 100%;
+    order: 1;
+  }
+
+  .relay-item label {
+    font-size: 12px;
+  }
+
+  .relay-item .btn-danger {
+    order: 2;
+    margin-left: auto;
+  }
+
+  .user-badge {
+    font-size: 12px;
+    text-align: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .relay-item label {
+    font-size: 11px;
+  }
+
+  .relay-item label input[type="checkbox"] {
+    width: 14px;
+    height: 14px;
+  }
+
+  .btn-primary {
+    font-size: 14px;
+    padding: 10px 16px;
+  }
+
+  .share-box input {
+    font-size: 12px;
+  }
+}
+
+/* Utility classes */
+.text-center {
+  text-align: center;
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+.mb-20 {
+  margin-bottom: 20px;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gap-10 {
+  gap: 10px;
+}
+
+.gap-20 {
+  gap: 20px;
+}
--- a/src/utils/nostr.js
+++ b/src/utils/nostr.js
@ -0,0 +1,59 @@
+import { finalizeEvent, generateSecretKey, getPublicKey } from 'nostr-tools';
+
+export const getNostrExtension = async () => {
+  if (window.nostr) {
+    return window.nostr;
+  }
+  throw new Error('No Nostr extension found. Please install Alby, Nos2x, or another NIP-07 extension.');
+};
+
+export const signAndPublishKind10002 = async (relays, pubkey) => {
+  const nostr = await getNostrExtension();
+  
+  // Build kind 10002 tags
+  const tags = relays.map(relay => {
+    const params = [];
+    if (!relay.read) params.push('read');
+    if (!relay.write) params.push('write');
+    return ['r', relay.url, ...params];
+  });
+
+  const event = {
+    kind: 10002,
+    pubkey: pubkey,
+    created_at: Math.floor(Date.now() / 1000),
+    tags: tags,
+    content: ''
+  };
+
+  // Sign with extension
+  const signedEvent = await nostr.signEvent(event);
+  
+  // Publish to all relays in the template
+  const relayUrls = relays.map(r => r.url);
+  await publishToRelays(signedEvent, relayUrls);
+  
+  return signedEvent;
+};
+
+export const publishToRelays = async (event, relayUrls) => {
+  const publishPromises = relayUrls.map(async (url) => {
+    try {
+      const relay = await getRelayConnection(url);
+      await relay.publish(event);
+      return { url, success: true };
+    } catch (error) {
+      console.error(`Failed to publish to ${url}:`, error);
+      return { url, success: false, error: error.message };
+    }
+  });
+  
+  return Promise.all(publishPromises);
+};
+
+// Simple relay connection (in production, use a relay pool)
+export const getRelayConnection = async (url) => {
+  const relay = await relayInit(url);
+  await relay.connect();
+  return relay;
+};
--- a/src/utils/templates.js
+++ b/src/utils/templates.js
@ -0,0 +1,368 @@
+/**
+ * ============================================
+ * ENCODING / DECODING FUNCTIONS
+ * ============================================
+ */
+
+/**
+ * Encode a template object into a URL-safe base64 string
+ * Using btoa with proper UTF-8 handling
+ */
+export const encodeTemplate = (template) => {
+  try {
+    const json = JSON.stringify(template);
+    // Proper UTF-8 encoding for btoa
+    const utf8Encoded = encodeURIComponent(json);
+    const base64 = btoa(utf8Encoded);
+    return base64;
+  } catch (error) {
+    throw new Error('Failed to encode template: ' + error.message);
+  }
+};
+
+/**
+ * Decode a URL-safe base64 string back to a template object
+ */
+export const decodeTemplate = (encoded) => {
+  try {
+    // First, make sure the string is clean
+    const clean = encoded.trim();
+    // Decode from base64
+    const decoded = atob(clean);
+    // Decode the URI component
+    const json = decodeURIComponent(decoded);
+    return JSON.parse(json);
+  } catch (error) {
+    console.error('Decode error:', error);
+    throw new Error('Failed to decode template: ' + error.message);
+  }
+};
+
+/**
+ * Generate a short unique ID for templates
+ */
+export const generateTemplateId = () => {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).substring(2, 8);
+  return `${timestamp}-${random}`;
+};
+
+/**
+ * ============================================
+ * VALIDATION FUNCTIONS
+ * ============================================
+ */
+
+/**
+ * Validate template structure and data
+ */
+export const validateTemplate = (template) => {
+  if (!template || typeof template !== 'object') {
+    throw new Error('Template must be an object');
+  }
+
+  if (!template.name || typeof template.name !== 'string' || template.name.trim().length === 0) {
+    throw new Error('Template must have a name');
+  }
+
+  if (!Array.isArray(template.relays) || template.relays.length === 0) {
+    throw new Error('Template must have at least one relay');
+  }
+
+  template.relays.forEach((relay, index) => {
+    if (!relay.url || typeof relay.url !== 'string') {
+      throw new Error(`Relay ${index + 1} must have a URL`);
+    }
+    
+    // Validate URL format
+    try {
+      const url = new URL(relay.url);
+      if (url.protocol !== 'wss:' && url.protocol !== 'ws:') {
+        throw new Error(`Relay ${index + 1} must use wss:// or ws:// protocol`);
+      }
+    } catch (error) {
+      throw new Error(`Relay ${index + 1} has invalid URL: ${relay.url}`);
+    }
+
+    if (typeof relay.read !== 'boolean') {
+      throw new Error(`Relay ${index + 1} must specify read as boolean`);
+    }
+
+    if (typeof relay.write !== 'boolean') {
+      throw new Error(`Relay ${index + 1} must specify write as boolean`);
+    }
+  });
+
+  return true;
+};
+
+/**
+ * Check if a template has duplicate relay URLs
+ */
+export const hasDuplicateRelays = (template) => {
+  const urls = template.relays.map(r => r.url);
+  return new Set(urls).size !== urls.length;
+};
+
+/**
+ * ============================================
+ * DEFAULT / PRESET TEMPLATES
+ * ============================================
+ */
+
+/**
+ * Get default relay template
+ */
+export const getDefaultTemplate = () => {
+  return {
+    id: generateTemplateId(),
+    name: 'Default Relays',
+    description: 'Standard Nostr relay set for beginners',
+    relays: [
+      { url: 'wss://relay.damus.io', read: true, write: true },
+      { url: 'wss://nos.lol', read: true, write: true },
+      { url: 'wss://relay.snort.social', read: true, write: true }
+    ],
+    created_at: Math.floor(Date.now() / 1000)
+  };
+};
+
+/**
+ * Get popular community templates
+ */
+export const getCommunityTemplates = () => {
+  return {
+    'nostr-punks': {
+      id: 'nostr-punks',
+      name: 'Nostr Punks',
+      description: 'Relay set for the Nostr Punks community',
+      relays: [
+        { url: 'wss://relay.nostr-punks.com', read: true, write: true },
+        { url: 'wss://relay.damus.io', read: true, write: true },
+        { url: 'wss://nostr-pub.wellorder.net', read: true, write: true }
+      ]
+    },
+    'plebchain': {
+      id: 'plebchain',
+      name: 'PlebChain',
+      description: 'Relay set for PlebChain community',
+      relays: [
+        { url: 'wss://relay.damus.io', read: true, write: true },
+        { url: 'wss://nos.lol', read: true, write: true },
+        { url: 'wss://relay.snort.social', read: true, write: true },
+        { url: 'wss://offchain.pub', read: true, write: true }
+      ]
+    },
+    'minimal': {
+      id: 'minimal',
+      name: 'Minimal Set',
+      description: 'Just the essentials to get started',
+      relays: [
+        { url: 'wss://relay.damus.io', read: true, write: true }
+      ]
+    }
+  };
+};
+
+/**
+ * ============================================
+ * TEMPLATE MANIPULATION FUNCTIONS
+ * ============================================
+ */
+
+/**
+ * Add a relay to a template
+ */
+export const addRelayToTemplate = (template, relay) => {
+  if (!relay.url) {
+    throw new Error('Relay must have a URL');
+  }
+  
+  // Check if relay already exists
+  if (template.relays.some(r => r.url === relay.url)) {
+    throw new Error('Relay already exists in template');
+  }
+  
+  return {
+    ...template,
+    relays: [
+      ...template.relays,
+      {
+        url: relay.url,
+        read: relay.read !== undefined ? relay.read : true,
+        write: relay.write !== undefined ? relay.write : true
+      }
+    ]
+  };
+};
+
+/**
+ * Remove a relay from a template by URL
+ */
+export const removeRelayFromTemplate = (template, relayUrl) => {
+  return {
+    ...template,
+    relays: template.relays.filter(r => r.url !== relayUrl)
+  };
+};
+
+/**
+ * Update a relay in a template
+ */
+export const updateRelayInTemplate = (template, relayUrl, updates) => {
+  return {
+    ...template,
+    relays: template.relays.map(r => 
+      r.url === relayUrl ? { ...r, ...updates } : r
+    )
+  };
+};
+
+/**
+ * Clone a template (deep copy)
+ */
+export const cloneTemplate = (template) => {
+  return JSON.parse(JSON.stringify(template));
+};
+
+/**
+ * ============================================
+ * CONVERSION FUNCTIONS
+ * ============================================
+ */
+
+/**
+ * Convert template relays to kind 10002 tags format
+ */
+export const templateToKind10002Tags = (template) => {
+  return template.relays.map(relay => {
+    const params = [];
+    if (!relay.read) params.push('read');
+    if (!relay.write) params.push('write');
+    return ['r', relay.url, ...params];
+  });
+};
+
+/**
+ * Convert kind 10002 tags to template format
+ */
+export const kind10002TagsToTemplate = (tags, name = 'Imported Relays') => {
+  const relays = tags
+    .filter(tag => tag[0] === 'r')
+    .map(tag => {
+      const url = tag[1];
+      const params = tag.slice(2);
+      return {
+        url: url,
+        read: !params.includes('read'),
+        write: !params.includes('write')
+      };
+    });
+
+  return {
+    id: generateTemplateId(),
+    name: name,
+    description: `Imported from existing relay set`,
+    relays: relays,
+    created_at: Math.floor(Date.now() / 1000)
+  };
+};
+
+/**
+ * ============================================
+ * STORAGE FUNCTIONS (LocalStorage)
+ * ============================================
+ */
+
+/**
+ * Save template to localStorage
+ */
+export const saveTemplateToStorage = (template) => {
+  const history = JSON.parse(localStorage.getItem('templateHistory') || '[]');
+  const entry = {
+    ...template,
+    saved_at: Date.now()
+  };
+  // Remove duplicates
+  const filtered = history.filter(h => h.id !== template.id);
+  filtered.unshift(entry);
+  // Keep last 50 templates
+  localStorage.setItem('templateHistory', JSON.stringify(filtered.slice(0, 50)));
+  return entry;
+};
+
+/**
+ * Get template history from localStorage
+ */
+export const getTemplateHistory = () => {
+  return JSON.parse(localStorage.getItem('templateHistory') || '[]');
+};
+
+/**
+ * Clear template history
+ */
+export const clearTemplateHistory = () => {
+  localStorage.removeItem('templateHistory');
+};
+
+/**
+ * Get recently applied templates
+ */
+export const getRecentTemplates = (limit = 5) => {
+  const history = getTemplateHistory();
+  return history.slice(0, limit);
+};
+
+/**
+ * ============================================
+ * SHARE FUNCTIONS
+ * ============================================
+ */
+
+/**
+ * Generate a shareable URL for a template
+ */
+export const generateShareUrl = (template, baseUrl = window.location.origin) => {
+  const encoded = encodeTemplate(template);
+  return `${baseUrl}/apply/${encoded}`;
+};
+
+/**
+ * Extract template from share URL
+ */
+export const extractTemplateFromUrl = (url) => {
+  const match = url.match(/\/apply\/([^/?]+)/);
+  if (!match) {
+    throw new Error('Invalid share URL');
+  }
+  return decodeTemplate(match[1]);
+};
+
+/**
+ * ============================================
+ * EXPORT ALL
+ * ============================================
+ */
+
+// Default export for convenience
+export default {
+  encodeTemplate,
+  decodeTemplate,
+  generateTemplateId,
+  validateTemplate,
+  hasDuplicateRelays,
+  getDefaultTemplate,
+  getCommunityTemplates,
+  addRelayToTemplate,
+  removeRelayFromTemplate,
+  updateRelayInTemplate,
+  cloneTemplate,
+  templateToKind10002Tags,
+  kind10002TagsToTemplate,
+  saveTemplateToStorage,
+  getTemplateHistory,
+  clearTemplateHistory,
+  getRecentTemplates,
+  generateShareUrl,
+  extractTemplateFromUrl
+};
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,30 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import fs from 'fs';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    open: true,
+    // Enable HTTPS with self-signed certificate
+    https: {
+      key: fs.readFileSync('./localhost-key.pem'),
+      cert: fs.readFileSync('./localhost.pem'),
+    }
+  },
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+    sourcemap: false,
+    minify: true,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom'],
+          nostr: ['nostr-tools']
+        }
+      }
+    }
+  }
+});