mirror of https://github.com/docusealco/docuseal
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
257 lines
6.4 KiB
257 lines
6.4 KiB
# JSONBin Setup Guide for Shared Kanban Board
|
|
|
|
## 🎯 What is JSONBin?
|
|
|
|
JSONBin is a free service that lets you store JSON data in the cloud and update it via API calls. This allows your Kanban board state to be **shared across all users** in real-time.
|
|
|
|
## 📋 Setup Steps (5 minutes)
|
|
|
|
### Step 1: Sign Up for JSONBin
|
|
|
|
1. Go to **https://jsonbin.io/**
|
|
2. Click **Sign Up** (free tier available)
|
|
3. Verify your email address
|
|
4. Log in to your dashboard
|
|
|
|
### Step 2: Get Your API Key
|
|
|
|
1. After logging in, click on your profile icon (top right)
|
|
2. Select **"API Keys"**
|
|
3. Copy your **Master Key** (starts with `$2b$`)
|
|
4. Keep this key secure - don't share it publicly!
|
|
|
|
### Step 3: Create a New Bin
|
|
|
|
**Option A: Create via Dashboard (Easiest)**
|
|
|
|
1. Click **"Create Bin"** on your dashboard
|
|
2. In the content area, paste this initial data:
|
|
```json
|
|
{
|
|
"1.1": "backlog",
|
|
"1.2": "backlog",
|
|
"1.3": "backlog",
|
|
"2.1": "backlog",
|
|
"2.2": "backlog",
|
|
"2.3": "backlog",
|
|
"2.4": "backlog",
|
|
"2.5": "backlog",
|
|
"2.6": "backlog",
|
|
"2.7": "backlog",
|
|
"2.8": "backlog",
|
|
"3.1": "backlog",
|
|
"3.2": "backlog",
|
|
"3.3": "backlog",
|
|
"3.4": "backlog",
|
|
"4.1": "backlog",
|
|
"4.2": "backlog",
|
|
"4.3": "backlog",
|
|
"4.4": "backlog",
|
|
"4.5": "backlog",
|
|
"4.6": "backlog",
|
|
"4.7": "backlog",
|
|
"4.8": "backlog",
|
|
"4.9": "backlog",
|
|
"4.10": "backlog",
|
|
"5.1": "backlog",
|
|
"5.2": "backlog",
|
|
"5.3": "backlog",
|
|
"5.4": "backlog",
|
|
"5.5": "backlog",
|
|
"6.1": "backlog",
|
|
"6.2": "backlog",
|
|
"7.1": "backlog",
|
|
"7.2": "backlog",
|
|
"7.3": "backlog",
|
|
"7.4": "backlog",
|
|
"7.5": "backlog",
|
|
"8.0": "backlog",
|
|
"8.0.1": "backlog",
|
|
"8.5": "backlog",
|
|
"8.6": "backlog",
|
|
"8.7": "backlog"
|
|
}
|
|
```
|
|
3. Click **"Create"**
|
|
4. Copy the **Bin ID** from the URL (e.g., `abc123xyz`)
|
|
|
|
**Option B: Create via API (Advanced)**
|
|
|
|
Use the "Create New Bin" button in the Kanban board config modal.
|
|
|
|
### Step 4: Configure the Kanban Board
|
|
|
|
1. Open `stories-kanban-shared.html`
|
|
2. Click the **"Config"** button (⚙️)
|
|
3. Paste your **API Key** and **Bin ID**
|
|
4. Click **"Save Configuration"**
|
|
5. The board will automatically load the shared state
|
|
|
|
## 🚀 Deploying to tiiny.host
|
|
|
|
### Option 1: Upload Shared Version
|
|
|
|
```bash
|
|
# Upload stories-kanban-shared.html to tiiny.host
|
|
# This version requires JSONBin configuration
|
|
```
|
|
|
|
### Option 2: Upload with Pre-configured API Key (Advanced)
|
|
|
|
⚠️ **SECURITY WARNING**: Only do this if you control access to the board!
|
|
|
|
1. Edit `stories-kanban-shared.html`
|
|
2. Find the `config` object in the script
|
|
3. Add your API key and Bin ID:
|
|
```javascript
|
|
let config = {
|
|
apiKey: 'YOUR_API_KEY_HERE',
|
|
binId: 'YOUR_BIN_ID_HERE'
|
|
};
|
|
```
|
|
4. Save and upload to tiiny.host
|
|
5. Users won't need to configure anything
|
|
|
|
## 💡 Usage Tips
|
|
|
|
### For Team Leaders
|
|
|
|
1. **Share the URL** with your team
|
|
2. **Everyone can drag and drop** stories
|
|
3. **Changes sync automatically** when you click Save
|
|
4. **Refresh the page** to see others' changes
|
|
|
|
### For Daily Standups
|
|
|
|
1. Open the board on a shared screen
|
|
2. Move stories as team members report progress
|
|
3. Click **Save** after the meeting
|
|
4. Everyone sees the updated board
|
|
|
|
### For Sprint Planning
|
|
|
|
1. Start with all stories in **Backlog**
|
|
2. Drag stories to **To Do** for the sprint
|
|
3. Assign stories to team members (use the View button to add notes)
|
|
4. Save and share the URL
|
|
|
|
## 🔒 Security Considerations
|
|
|
|
### API Key Security
|
|
|
|
- **Never commit** your API key to public repositories
|
|
- **Use environment variables** for production deployments
|
|
- **Consider using a proxy** for API calls in production
|
|
- **Rotate your API key** if it's exposed
|
|
|
|
### Access Control
|
|
|
|
JSONBin free tier doesn't offer access control. For sensitive projects:
|
|
|
|
1. **Use a private bin** (paid feature)
|
|
2. **Implement a backend proxy** that handles authentication
|
|
3. **Use JWT tokens** for user authentication
|
|
|
|
## 💰 Pricing
|
|
|
|
JSONBin offers:
|
|
- **Free tier**: 10,000 requests/month, 100MB storage
|
|
- **Pro tier**: $15/month, unlimited requests
|
|
- **Enterprise**: Custom pricing
|
|
|
|
For most teams, the **free tier is sufficient** for Kanban board usage.
|
|
|
|
## 🔄 Sync Flow
|
|
|
|
```
|
|
User A moves story → Local state updated → Click Save → API call to JSONBin
|
|
↓
|
|
User B refreshes page ← API call to JSONBin ← State saved to cloud
|
|
```
|
|
|
|
## 🐛 Troubleshooting
|
|
|
|
### "No config" error
|
|
- Click **Config** and enter your API Key and Bin ID
|
|
- Make sure you're using the correct Bin ID
|
|
|
|
### "Failed to load from cloud" error
|
|
- Check your API Key is correct
|
|
- Verify the Bin ID exists
|
|
- Check your internet connection
|
|
- Try refreshing the page
|
|
|
|
### Changes not saving
|
|
- Click **Save** button (not just drag and drop)
|
|
- Check sync status shows "Synced"
|
|
- Look for error messages in the browser console
|
|
|
|
### Multiple users seeing different states
|
|
- Each user needs to click **Refresh** to see latest changes
|
|
- Changes only sync when **Save** is clicked
|
|
- Consider implementing auto-refresh every 30 seconds
|
|
|
|
## 📊 Monitoring Usage
|
|
|
|
1. Go to your JSONBin dashboard
|
|
2. Click on your bin
|
|
3. View **Request Count** and **Last Updated**
|
|
4. Monitor for unusual activity
|
|
|
|
## 🎯 Alternative: Self-Hosted Backend
|
|
|
|
If you need more control, consider:
|
|
|
|
1. **Firebase Firestore** (free tier available)
|
|
2. **Supabase** (free tier available)
|
|
3. **Your own API** with Rails backend
|
|
4. **WebSocket server** for real-time sync
|
|
|
|
## 📚 Example: Firebase Alternative
|
|
|
|
If you prefer Firebase over JSONBin:
|
|
|
|
```javascript
|
|
// Firebase configuration
|
|
const firebaseConfig = {
|
|
apiKey: "YOUR_API_KEY",
|
|
authDomain: "YOUR_PROJECT.firebaseapp.com",
|
|
projectId: "YOUR_PROJECT",
|
|
storageBucket: "YOUR_PROJECT.appspot.com",
|
|
messagingSenderId: "YOUR_SENDER_ID",
|
|
appId: "YOUR_APP_ID"
|
|
};
|
|
|
|
// Initialize Firebase
|
|
firebase.initializeApp(firebaseConfig);
|
|
const db = firebase.firestore();
|
|
|
|
// Save to Firebase
|
|
async function saveToFirebase() {
|
|
await db.collection('kanban').doc('board').set(storyStates);
|
|
}
|
|
|
|
// Load from Firebase
|
|
async function loadFromFirebase() {
|
|
const doc = await db.collection('kanban').doc('board').get();
|
|
if (doc.exists) {
|
|
storyStates = doc.data();
|
|
}
|
|
}
|
|
```
|
|
|
|
## 🎉 Success!
|
|
|
|
Once configured, your Kanban board will:
|
|
- ✅ Sync across all users
|
|
- ✅ Persist state in the cloud
|
|
- ✅ Allow real-time collaboration
|
|
- ✅ Work from any device
|
|
- ✅ Update instantly when saved
|
|
|
|
---
|
|
|
|
**Need help?** Contact your team lead or check JSONBin documentation at https://docs.jsonbin.io/
|
|
|
|
**Generated:** 2026-01-15
|