Whiteboard

A simple digital whiteboard built with Next.js and Tailwind CSS — draw, sketch, and organize your ideas visually.

Comment

🧠 Whiteboard App

A sleek and intuitive digital whiteboard app built with Next.js and Tailwind CSS. Perfect for sketching ideas, diagrams, flows, and everything in between—right in your browser.

Whiteboard Screenshot

✨ Features

  • 🖊️ Freehand Drawing with Multiple Colors
  • 🔲 Shapes (Rectangle, Circle, Diamond)
  • ➡️ Arrow Drawing & Connectors
  • 📝 Text Tool
  • ♻️ Undo/Redo Support
  • 🎨 Color Palette Tool
  • 💾 Save and Export Whiteboard
  • 🔁 Grid Background with Snapping

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/hariop12/whiteboard.git
cd whiteboard

2. Install Dependencies

npm install

If you encounter peer dependency issues, try with:
npm install --legacy-peer-deps

3. Configure Environment Variables

  1. Rename the sample.env file to .env
  2. Fill in the following environment variables:
NEXTAUTH_SECRET=your_generated_nextauth_secret
MONGODB_URI=your_mongodb_connection_string

🔐 Generating a NEXTAUTH_SECRET

You can generate a secure secret using node with crypto:

node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

Paste the output as your NEXTAUTH_SECRET.

4. Start the Dev Server

npm run dev

Then open http://localhost:3000 in your browser.

🛠️ Tech Stack

  • Framework: Next.js (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS + PostCSS
  • State Management: React + Custom Contexts
  • Canvas Logic: Custom hooks and drawing logic

🗂 Folder Structure

whiteboard/
│
├── app/                 # Next.js App Router pages & layout
├── components/          # Reusable UI components (Toolbars, Buttons, etc.)
├── contexts/            # React Contexts (Drawing, Theme, etc.)
├── hooks/               # Custom hooks (drawing, shape logic, etc.)
├── lib/                 # Utility functions and helpers
├── types/               # TypeScript types
├── public/              # Static assets
├── styles/              # Global styles and Tailwind base
│
├── .env                 # Environment variables
├── tailwind.config.ts   # Tailwind config
├── postcss.config.mjs   # PostCSS config
├── next.config.mjs      # Next.js config
├── package.json
├── tsconfig.json
├── package-lock.json

🔮 Roadmap

  • [ ] 🎯 Real-time Multiplayer Collaboration
  • [ ] 👥 Authentication & Persistent Boards
  • [ ] 📊 Whiteboard Templates (Mindmap, Flowchart, etc.)
  • [ ] 🕒 Version Control & History Playback
  • [ ] 📥 Import/Export Boards as JSON

💬 Contributing

Currently a solo project, but contributions are welcome in the future! Feel free to fork the repo and explore 💙

📃 License

This project is licensed under the MIT License

🙋 Author

Made with ☕ and ☁️ by Harish

Share this project:

Updates