Collaborative Notes Board

A real-time collaborative sticky notes application built with multiplayer middleware for Zustand. Multiple users can create, edit, and move notes simultaneously with live cursor tracking.

🎯 Live Demo

Features

• 🤝 Real-time collaboration - Multiple users editing simultaneously
• 👀 Live cursors - See where other users are working
• 📝 Drag & drop notes - Instant sync across all clients
• 🎨 Color customization - Real-time visual updates
• 📱 Mobile responsive - Touch-friendly interface
• 📊 Viewport controls - Zoom and pan functionality
• 🔐 Bot protection - Cloudflare Turnstile integration

Tech Stack

• Next.js 15 - React framework
• Zustand - State management
• @hpkv/zustand-multiplayer - Real-time multiplayer middleware
• Tailwind CSS - Styling
• TypeScript - Type safety
• Cloudflare Pages - Deployment

Local Setup

Prerequisites

• Node.js and npm
• HPKV API account - Get one free at hpkv.io

Installation

1. Clone and install:

git clone https://github.com/hpkv-io/showcase-multiplayer-notesboard.git
cd showcase-multiplayer-notesboard
npm install

2. Environment setup:

Create .env.local:

HPKV_API_BASE_URL=your-hpkv-api-base-url
NEXT_PUBLIC_HPKV_API_BASE_URL=your-hpkv-api-base-url
HPKV_API_KEY=your-hpkv-api-key
# Performance and Throttling parameters. Adjust for best results
NEXT_PUBLIC_HPKV_RPS_LIMIT=50  # Set this based on your HPKV subscription rate limit
NEXT_PUBLIC_THROTTLE_DEFAULT_DELAY_MS=30
NEXT_PUBLIC_TARGET_LATENCY_MS=50
NEXT_PUBLIC_BASE_RATE = 29
NEXT_PUBLIC_MIN_RATE =  2

3. Run development server:

npm run dev

Open http://localhost:3000 and test collaboration with multiple browser windows!

Learn More

• HPKV Multiplayer Docs - Full middleware documentation
• Zustand Docs - State management guide
• HPKV Dashboard - Get your API key