Skip to content

README.md

Latest commit

 

History

History
97 lines (72 loc) · 3.74 KB

README.md

File metadata and controls

97 lines (72 loc) · 3.74 KB
Raw

BoardFlow

Personal board and whiteboard app — infinite canvas, AI, real-time collaboration, PWA, 15 languages, 35+ templates, 27 features.

Built with vanilla HTML/CSS/JS (ES6+). No build step. No credit card. No server.

Features

  • Canvas — infinite pan/zoom, dot grid, minimap, touch gestures
  • Items — sticky notes, rich notes, sketches, link cards, roadmaps, files, images, audio, video
  • AI (Puter.js) — chat, image generation, OCR, text-to-speech, speech-to-text
  • Collaboration — real-time board chat, share by email or link, viewer/editor roles
  • PWA — installable, offline support, mobile-friendly
  • i18n — 15 languages (Arabic, Chinese, English, French, German, Hindi, Indonesian, Italian, Japanese, Korean, Dutch, Portuguese, Russian, Spanish, Turkish) with RTL support
  • Templates — 35+ boards across 7 categories
  • Search — find items by title/content with Ctrl+F
  • Export — board as PNG or PDF
  • Themes — light and dark

Quick Start

# Serve the project (no install required)
npx serve .

# Open http://localhost:3000

The app runs in demo mode by default — boards are saved to localStorage. No signup, no API keys.

Production Setup (Optional)

To use cloud sync, AI, and file uploads:

  1. Supabase (auth + database)

    • Create a project at supabase.com
    • Run the SQL from AGENTS.md (Database Schema)
    • Copy your URL and anon key

  2. Puter.js (AI + file storage) — works out of the box, no setup

  3. ImgBB (image hosting)

Copy config.example.js to js/config.js and fill in your keys.

Note: the Supabase publishable key (sb_publishable_...) is safe to commit (even in public repos) — it's RLS-protected. The only key that must never be exposed is the service_role / sb_secret_* key.

Deploy to Cloudflare Pages

# Install wrangler (one-time)
npm install -g wrangler

# Login
wrangler login

# Deploy
wrangler pages deploy . --project-name boardflow

The first deploy creates the project. Subsequent deploys update it. URL will be https://boardflow.pages.dev.

Project Structure

boardflow/
├── index.html
├── manifest.json
├── sw.js                          # Service worker
├── _headers                       # Cloudflare headers (CSP, X-Frame-Options, etc.)
├── _redirects                     # SPA fallback
├── config.example.js              # Template for user's config
├── css/                           # 21 CSS files (variables, components, themes, responsive)
├── js/                            # 42 JS files
│   ├── app.js                     # Main entry
│   ├── pwa.js                     # Service worker registration + install prompt
│   ├── auth/                      # Login, signup, auth state
│   ├── board/                     # Canvas, items, drag-drop, history, connections
│   ├── components/                # Sticky notes, sketches, file manager, etc.
│   ├── ai/                        # Puter.js AI integration
│   ├── sharing/                   # Share manager, permissions
│   ├── templates/                 # 35+ templates
│   ├── i18n/                      # Translation engine + 15 locale files
│   ├── ui/                        # Modal, toast, sidebar, search, context menu
│   └── utils/                     # Helpers, storage, image utils, dom
└── assets/icons/                  # favicon, PWA icons

See AGENTS.md for the full design plan. Visit the interactive Design System for live tokens and component documentation.

License

MIT