A feature-rich collaborative drawing application built with Next.js and modern web technologies. Create, edit, and share drawings in real-time with an intuitive interface and powerful drawing tools.

• Shape Tools: Rectangle, Circle, Diamond, Line, Arrow
• Freehand Drawing: Smooth pencil tool for sketching
• Text Tool: Add and edit text with customizable styles
• Image Support: Import and manipulate images
• Connectors: Create flowcharts with smart connectors
• Selection Tool: Select, move, and modify multiple elements

• Customizable stroke colors and widths
• Fill colors with opacity control
• Different stroke styles (solid, dashed, dotted)
• Text formatting (font, size, alignment, etc.)
• Layer management (move forward/backward)

• Pan and zoom navigation
• Undo/redo functionality
• Keyboard shortcuts for common actions
• Grid and snap alignment
• Canvas reset and clear

• Real-time sharing via unique URLs
• Export drawings as PNG or SVG
• Save drawings locally
• Template library for quick starts

• Clean, minimal design
• Responsive layout for all devices
• Dark/light theme support
• Customizable toolbar
• Context-sensitive panels
• Floating property panels

• Client-side rendering for optimal performance
• Component-based architecture using React
• Custom hooks for business logic
• Utility-first CSS with Tailwind
• TypeScript for type safety

// Main application wrapper
<WhiteboardApp>
  <Toolbar /> // Tool selection and actions
  <StylePanel /> // Element styling controls
  <Canvas /> // Main drawing area
  <TextPanel /> // Text editing interface
  <ZoomControls /> // Canvas navigation
</WhiteboardApp>

• Next.js - React framework
• TypeScript - Type safety
• Tailwind CSS - Styling
• Radix UI - UI Components
• Lucide Icons - Icon library
• shadcn/ui - UI component library

1. Clone the repository:

   git clone https://github.com/yourusername/akshit-draw.git
   cd justdraw

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 in your browser

app/               # Next.js app directory
├── globals.css   # Global styles
├── layout.tsx    # Root layout
├── page.tsx      # Home page
└── draw/         # Drawing feature pages
components/       # React components
├── canvas.tsx    # Drawing canvas
├── library-panel.tsx
├── ShareModal.tsx
└── ui/           # UI components
hooks/            # Custom React hooks
lib/             # Utility functions
public/          # Static assets
styles/          # Additional styles
types/           # TypeScript types
utils/           # Helper functions

• npm dev - Start development server
• npm build - Build for production
• npm start - Start production server
• npm lint - Run ESLint

The project uses various configuration files:

• next.config.mjs - Next.js configuration
• tailwind.config.ts - Tailwind CSS configuration
• components.json - shadcn/ui configuration
• tsconfig.json - TypeScript configuration

Private project - All rights reserved

Created by Akshit Suthar