Skip to content

README.md

Latest commit

 

History

History
195 lines (132 loc) · 5.98 KB

README.md

File metadata and controls

195 lines (132 loc) · 5.98 KB

Banner

An open source virtual hand-drawn style whiteboard.
Collaborative and end-to-end encrypted.

Screenshot

Skechidraw Home

🎯 About

SketchIDraw is a powerful, free collaborative whiteboard that brings the charm of hand-drawn sketches to digital collaboration. Built with modern web technologies, it offers real-time collaboration with end-to-end encryption, making it perfect for brainstorming, design thinking, and visual communication.

✨ Why SketchIDraw?

  • 🎨 Hand-drawn aesthetics - Beautiful, organic-looking shapes and lines
  • 🔒 Secure collaboration - End-to-end encrypted real-time collaboration
  • ⚡ Lightning fast - Optimized canvas engine with smooth performance
  • 🌐 Free forever - Open source and completely free to use
  • 🎯 Feature-rich - Everything you need for visual collaboration

🚀 Features

🎨 Drawing & Shapes 🔧 Tools & Controls 🌟 Collaboration
Rectangle ▫️ Instant property updates ⚡ Real-time cursor tracking 🖱️
Ellipse ⭕ Shape resizing & dragging 🔄 End-to-end encryption 🔒
Diamond 🔷 Text editing ✏️ Secure authentication 🔑
Lines & Arrows ➖➡️ Pencil tool 🖊️ Multi-user support 👥

🎨 Drawing Tools

  • Shape Rendering: Create perfect rectangles, ellipses, diamonds, lines, and arrows
  • Pencil Tool: Free-hand drawing with smooth curves
  • Text Tool: Add, edit, resize, and move text elements
  • Smart Controls: Instant property updates for all elements

⚡ Canvas Experience

  • Infinite Canvas: Pan seamlessly across unlimited workspace
  • Zoom Support: Programmatic and pinch gesture zooming
  • Smooth Performance: Butter-smooth interactions with optimized rendering
  • Shape Manipulation: Easy resizing, dragging, and deleting

🌟 User Experience

  • Light/Dark Mode: Beautiful themes powered by next-themes
  • Local Storage Sync: Never lose your work
  • Type-safe: Built with TypeScript for reliability
  • Responsive Design: Works perfectly on all devices

🔒 Security & Collaboration

  • End-to-end Encryption: Your data stays private
  • Real-time Collaboration: See changes instantly
  • Secure Authentication: Powered by NextAuth.js
  • Postgres Database: Reliable data persistence

🛠️ Tech Stack

Next.js TypeScript React Zustand PostgreSQL Tailwind CSS

Frontend:

  • ⚛️ Next.js - React framework with SSR
  • 🎯 TypeScript - Type-safe development
  • 🎨 Tailwind CSS - Utility-first styling
  • 🌍 Zustand - Global state management
  • 🌗 next-themes - Theme management

Backend:

  • 🔑 NextAuth.js - Authentication
  • 🗄️ PostgreSQL - Database
  • 🔒 End-to-end encryption - Secure collaboration

Canvas Engine:

  • 🧑‍💻 Custom OOP Architecture - Modular and maintainable
  • ⚡ Optimized Rendering - Smooth 60fps performance
  • 📱 Touch Support - Mobile-friendly interactions

🚀 Getting Started

Prerequisites

Make sure you have the following installed:

  • Docker and Docker Compose
  • Git

📦 Quick Start with Docker

  1. Clone the repository
  git clone https://github.com/markande98/sketchidraw.git
  cd sketchidraw
  1. Set up environment variables for the main app
  cd apps/sketchidraw
  cp .env.example .env
  cd ../..
  1. Set up environment variables for the WebSocket server
  cd apps/ws
  cp .env.example .env
  cd ../..
  1. Start the application
docker compose up -d
  1. Open your browser Navigate to http://localhost:3000 and start sketching! 🎨

Note: Make sure to update the .env files in both apps/sketchidraw and apps/ws directories with your specific configuration before running the application.

🤝 Contributing

We love contributions! Here's how you can help make SketchIDraw even better:

🐛 Found a Bug?

  1. Check if it's already reported in Issues
  2. Create a new issue with detailed steps to reproduce
  3. Include screenshots or videos if helpful

💡 Have an Idea?

  1. Open an issue to discuss your idea
  2. Fork the repository
  3. Create a feature branch: git checkout -b feature/amazing-feature
  4. Make your changes
  5. Commit: git commit -m 'Add amazing feature'
  6. Push: git push origin feature/amazing-feature
  7. Open a Pull Request

📝 Development Guidelines

  • Follow TypeScript best practices
  • Write clean, self-documenting code
  • Add tests for new features
  • Update documentation as needed
  • Ensure all tests pass before submitting

📄 License

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

🙏 Acknowledgments

  • Inspired by Excalidraw for the hand-drawn aesthetic
  • Built with amazing open-source technologies
  • Thanks to all contributors and users! 💙