Skip to content

README.md

Latest commit

 

History

History
116 lines (86 loc) · 2.57 KB

README.md

File metadata and controls

116 lines (86 loc) · 2.57 KB

MyBoard

Personal whiteboard and drawing tool. PostgreSQL backend, no SaaS dependencies.

Quick Start

git clone https://github.com/ttpss930141011/myboard.git
cd myboard
pnpm install
cp .env.example .env  # Edit DATABASE_URL and AUTH_SECRET
pnpm exec prisma migrate dev
pnpm dev

Open http://localhost:3000

Requirements

  • Node.js 18+
  • PostgreSQL database
  • pnpm or npm

Environment Setup

Create .env file:

DATABASE_URL="postgresql://user:password@localhost:5432/myboard"
AUTH_SECRET="generate-with-openssl-rand-base64-32"

# Email auth (recommended)
AUTH_RESEND_KEY="re_xxxxxxxxxxxx"  # Get from resend.com

# OAuth (optional)
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"
GITHUB_ID="your-github-id"
GITHUB_SECRET="your-github-secret"

Features

  • Freehand drawing, shapes, text, sticky notes
  • Canvas with zoom/pan, unlimited workspace
  • Board management with favorites
  • Auto-save to PostgreSQL
  • Authentication via email magic links or OAuth
  • Public board sharing

Tech Stack

  • Next.js 15 + TypeScript
  • PostgreSQL + Prisma ORM
  • Auth.js v5 (NextAuth)
  • Zustand for state management
  • Tailwind CSS + Shadcn/UI
  • TanStack Query

Development

# Database
pnpm exec prisma studio          # View database
pnpm exec prisma generate        # Generate client
pnpm exec prisma migrate dev     # Run migrations

# Code quality
pnpm run lint                    # ESLint
pnpm exec tsc --noEmit          # Type check

# Production
pnpm run build                   # Build
pnpm start                       # Production server

Project Structure

app/                    # Next.js app router
├── (auth)/            # Auth pages
├── (dashboard)/       # Dashboard and boards
├── board/[boardId]/   # Canvas editor
└── api/               # API routes
components/            # UI components
hooks/                 # React hooks
lib/                   # Utilities
prisma/               # Database schema
stores/               # Zustand stores

Security

OWASP Top 10 compliant with:

  • CSRF protection and rate limiting
  • Input sanitization and XSS prevention
  • Secure headers and CSP
  • Canvas data validation

See docs/SECURITY.md for details.

Contributing

  1. Fork the repo
  2. Create feature branch
  3. Make changes
  4. Run tests: pnpm test
  5. Submit PR

License

MIT License - see LICENSE file.

Based on board-wex by aftabrehan