6.4 KiB

Raw Blame History

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)

Go to https://jsonbin.io/
Click Sign Up (free tier available)
Verify your email address
Log in to your dashboard

Step 2: Get Your API Key

After logging in, click on your profile icon (top right)
Select "API Keys"
Copy your Master Key (starts with $2b$ )
Keep this key secure - don't share it publicly!

Step 3: Create a New Bin

Option A: Create via Dashboard (Easiest)

Click "Create Bin" on your dashboard
In the content area, paste this initial data:

{
  "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"
}

Click "Create"
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

Open stories-kanban-shared.html
Click the "Config" button (⚙️)
Paste your API Key and Bin ID
Click "Save Configuration"
The board will automatically load the shared state

🚀 Deploying to tiiny.host

Option 1: Upload Shared Version

# 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!

Edit stories-kanban-shared.html
Find the config object in the script
Add your API key and Bin ID:

let config = {
    apiKey: 'YOUR_API_KEY_HERE',
    binId: 'YOUR_BIN_ID_HERE'
};

Save and upload to tiiny.host
Users won't need to configure anything

💡 Usage Tips

For Team Leaders

Share the URL with your team
Everyone can drag and drop stories
Changes sync automatically when you click Save
Refresh the page to see others' changes

For Daily Standups

Open the board on a shared screen
Move stories as team members report progress
Click Save after the meeting
Everyone sees the updated board

For Sprint Planning

Start with all stories in Backlog
Drag stories to To Do for the sprint
Assign stories to team members (use the View button to add notes)
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:

Use a private bin (paid feature)
Implement a backend proxy that handles authentication
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

Go to your JSONBin dashboard
Click on your bin
View Request Count and Last Updated
Monitor for unusual activity

🎯 Alternative: Self-Hosted Backend

If you need more control, consider:

Firebase Firestore (free tier available)
Supabase (free tier available)
Your own API with Rails backend
WebSocket server for real-time sync

📚 Example: Firebase Alternative

If you prefer Firebase over JSONBin:

// 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

6.4 KiB Raw Blame History