Skip to content

Latest commit

 

History

History
107 lines (74 loc) · 4.95 KB

README.md

File metadata and controls

107 lines (74 loc) · 4.95 KB
Draftboard logo

Draftboard

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.

Features

  • 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

Tech Stack

  • 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

Deploying to Vercel

Click the button below to kickstart your deployment — it will clone the repo and prompt you for the required environment variables:

Deploy with Vercel

For the full walkthrough (database setup, R2 configuration, CORS, build settings), see the Vercel deployment guide.

Self-Hosting

Prerequisites

1. Clone and install

git clone https://github.com/your-org/draftboard.git
cd draftboard
npm install

2. Configure environment

cp .env.example .env

Fill 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

3. Set up the database

npm run db:generate
npm run db:migrate

4. Start the app

# Development
npm run dev

# Production
npm run build:prod
npm run start

Contributing

See CONTRIBUTING.md for development setup, architecture details, and contribution guidelines.

License

MIT

Ackgnowledgements

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.