Intro

A React-based drawing application that allows users to create, edit, and save drawings with various brush tools. Originally built with HTML, CSS, and JavaScript, this project was refactored in 2025 into React using modern state management and component-based architecture.

Features

• Drawing tools including brush, eraser, and background fill
• Undo and clear canvas functionality
• Save and load drawings from localStorage
• Download drawings as an image
• Responsive UI optimized for larger screens

React Features & Best Practices

• Component-based architecture with reusable UI components
• Context API with custom hooks for centralized state management
• useState and useRef for handling canvas interactions and persistent state
• useCallback and useMemo for optimized rendering and performance improvements
• CSS Modules for scoped styles and maintainability
• Vite for a fast and efficient development environment

Tech Stack

• React with TypeScript
• CSS Modules
• Vite
• React Canvas Draw

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})