🎨 Online Whiteboard (Beta)

A lightweight, responsive whiteboard application built with Next.js 14 and TypeScript. Perfect for quick sketches, teaching, and collaborative brainstorming.

✨ Features

• 🖌️ Multiple drawing tools:

  • Pen tool with customizable stroke width
  • Rectangle and ellipse shapes
  • Text input with adjustable size
  • Smart eraser that works with all shapes

• 🎯 Advanced Canvas Features:

  • Smooth panning and zooming
  • Precise shape rendering
  • Optimized performance

• 🔄 History Management:

  • Undo/Redo functionality
  • State persistence

• 💻 Technical Highlights:

  • Lightweight (131kB bundle size)
  • Mobile-responsive
  • SSR-compatible
  • Type-safe

🚀 Quick Start

# Clone the repository
git clone https://github.com/yourusername/online-whiteboard.git

# Install dependencies
npm install

# Run development server
npm run dev

Visit http://localhost:3000 to start drawing!

🛠️ Development

# Run tests
npm test

# Build for production
npm run build

# Start production server
npm start

📦 Tech Stack

• Next.js 14
• TypeScript
• TailwindCSS
• Canvas API

🔜 Roadmap

• Custom shape tools
• Image import/export
• Dark mode
• Touch gesture support
• Layer management

🐛 Known Issues (Beta)

• Text scaling might need adjustment on some zoom levels
• Mobile eraser experience needs optimization
• Some browser extensions might cause hydration warnings

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js team for the amazing framework
• Our contributors and early testers

---

Made with ❤️ by [Your Name/Team]