Draftboard is a shared space for teams to post designs, ideas, and work in progress. In distributed teams, meaningful work too often disappears into Slack threads or gets buried inside Figma, making it harder to learn from each other and keep ideas flowing. Draftboard brings that work back into the open with a lightweight, social feed that’s easy to deploy, pleasant to use, and flexible enough to fit into existing workflows.
- Feed — Reverse chronological feed of posts with list and grid views
- Rich Editor — Lexical-based editor with markdown shortcuts, @mentions, slash commands, drag-and-drop, pasting and automatic draft saving.
- Attachments — Images, videos, files, Figma links, and Loom recordings with a carousel viewer
- Projects — Organize posts into projects with cover images, descriptions, and team members
- Comments — Threaded comments with 2 levels of depth and attachment-specific comments
- Reactions — Like, wow, cool reactions plus custom emoji support
- Notifications — Notifications for comments, replies, mentions, and reactions
- Search — Full-text search across posts, projects, and people
- Webhooks — Optional Discord and Slack webhook integrations for new posts
- Admin — User management, invite links, and site settings
- Dark Mode — Full light/dark theme support
- Mobile PWA — Fully mobile-optimized as a Progressive Web App, feels at home on iOS and Android home screens
- Framework: Next.js 15 (App Router, Turbopack)
- API: tRPC v11 + React Query
- Database: PostgreSQL with Prisma ORM
- Auth: NextAuth.js v5 (Credentials provider, JWT sessions)
- Storage: Cloudflare R2 (S3-compatible)
- UI: shadcn/ui + Tailwind CSS v4
- Editor: Lexical
- Testing: Vitest + Storybook
Click the button below to kickstart your deployment — it will clone the repo and prompt you for the required environment variables:
For the full walkthrough (database setup, R2 configuration, CORS, build settings), see the Vercel deployment guide.
- A service that runs Node.js 18+ (e.g. Vercel)
- A PostgreSQL database (Prisma Postgres, Supabase, or Neon)
- S3-compatible storage (Cloudflare R2 or AWS S3)
git clone https://github.com/your-org/draftboard.git
cd draftboard
npm installcp .env.example .envFill in your .env with the following:
| Variable | Description |
|---|---|
DATABASE_URL |
PostgreSQL connection string |
NEXTAUTH_SECRET |
Random secret for signing sessions (openssl rand -base64 32) |
NEXTAUTH_URL |
Your deployment URL (e.g. https://draftboard.yourcompany.com) |
R2_ACCOUNT_ID |
Cloudflare account ID |
R2_ACCESS_KEY_ID |
R2 API key ID |
R2_SECRET_ACCESS_KEY |
R2 API secret |
R2_BUCKET_NAME |
R2 bucket name |
R2_PUBLIC_URL |
Public URL for the R2 bucket |
npm run db:generate
npm run db:migrate# Development
npm run dev
# Production
npm run build:prod
npm run startSee CONTRIBUTING.md for development setup, architecture details, and contribution guidelines.
MIT
This tool stands on the shoulders of earlier tools like Pixelcloud and Campsite, which helped shape many of the ideas explored here. I’ve been fortunate to work closely with both—contributing to Pixelcloud during my time at Facebook and supporting Campsite as an investor—and this project carries forward lessons learned from each.