A canvas drawing application built with React, TypeScript, and Vite.
- Brush Tool: Freehand drawing with customizable brush sizes (1-20px)
- Shape Tools: Draw lines, rectangles, and circles
- Flood Fill: Bucket tool to fill enclosed areas with color
- Eraser: Remove parts of your drawing
- Undo Functionality
- Clear Canvas
- Save as Image
- Error Boundary
- History Management
Ctrl+Z/Cmd+Z: Undo last actionCtrl+S/Cmd+S: Save canvas as imageCtrl+Delete/Cmd+Delete: Clear entire canvas1-5: Switch between tools (Brush, Line, Rectangle, Circle, Fill)E: Toggle eraser mode
- Node.js (version 20 or higher)
- npm or yarn package manager
-
Clone the repository
git clone https://github.com/utk09-NCL/ghw-doodle-platform cd ghw-doodle-platform -
Install dependencies
npm install # or yarn install -
Start the development server
npm run dev # or yarn dev -
Open your browser Navigate to
http://localhost:5173to start doodling!
npm run dev- Start development server with hot reloadnpm run build- Build production-ready applicationnpm run preview- Preview the production build locallynpm run lint- Run ESLint to check code quality
src/
├── components/ # Reusable React components
│ └── ErrorBoundary.tsx
├── config/ # Application configuration
│ └── app.ts
├── hooks/ # Custom React hooks
│ ├── useCanvasHistory.ts
│ └── useDrawing.ts
├── types/ # TypeScript type definitions
│ └── canvas.ts
├── utils/ # Utility functions
│ ├── canvasUtils.ts
│ ├── floodFillUtils.ts
│ └── shapeUtils.ts
├── App.tsx # Main application component
├── CanvasComponent.tsx # Canvas drawing component
└── ToolbarComponent.tsx # Tool selection interface
Contributions are welcome! Here are some ways you can help improve the Doodle Platform:
- Performance Optimization: Optimize for large canvas operations
- Color Picker: Implement a color picker for custom colors
- Zoom In/Out: Canvas zoom functionality
- Color Palette Import: Load custom color palettes
- Drawing Templates: Pre-made templates and backgrounds
- Collaborative Drawing: Real-time collaboration features
- Animation Support: Simple frame-by-frame animation
- Accessibility Improvements: ARIA labels, keyboard navigation
-
Fork the repository
-
Create a feature branch
git checkout -b feature/your-feature-name
-
Make your changes
-
Follow the coding standards
- Use TypeScript for type safety
- Follow existing code formatting
- Add JSDoc comments for new functions
- Write meaningful commit messages
-
Test your changes
npm run lint npm run build
-
Submit a pull request
- Code Style: Follow the existing TypeScript/React patterns
- Testing: Test your changes across different browsers
- Documentation: Update README.md if adding new features
- Performance: Consider performance impact of new features
- Accessibility: Ensure new features are accessible (ARIA labels, keyboard navigation)
Open an issue with the label "enhancement" and describe:
- What feature you'd like to see
- Why it would be useful
- Any implementation ideas you have
This project is licensed under the MIT License. Feel free to use, modify, and distribute as needed.
Built with ❤️ as part of MLH Global Hack Week
Happy doodling! 🎨✨