A React-based image annotation tool that allows users to add, manage, and organize comments on images, similar to Figma's commenting system.

• Upload multiple images (JPEG, PNG)
• Responsive image display
• Gallery view for easy image switching
• Drag and drop support for image uploads

• Click anywhere on images to add comments
• Numbered markers show comment locations
• Comments appear in exact clicked positions
• Smart positioning of comment popups to prevent overflow

• Threaded comments with nested replies
• Edit and delete functionality for comments
• Real-time comment updates
• Comment count badges in gallery view

• Clean, modern Material-UI design
• Sidebar with comment list and quick navigation
• Smooth animations and transitions
• Responsive layout that works on different screen sizes

• Redux for efficient state management
• Local storage persistence
• Debounced input fields for better performance
• Optimized rendering for multiple comments

• Frontend: React.js with Material-UI
• State Management: Redux with Redux Toolkit
• Storage: LocalStorage for data persistence
• Performance: Input debouncing, optimized renders

• ImageViewer: Main image display with annotation functionality
• ImageGallery: Thumbnail view of uploaded images
• CommentDialog: Threaded comment interface
• CommentPanel: Sidebar listing all comments

• Normalized comment storage
• Efficient marker tracking
• Optimized image state management
• Persistent storage handling

1. Upload images using the upload button or drag and drop
2. Click the "Add Comment" button to enter annotation mode
3. Click anywhere on the image to add a comment
4. View and manage comments in the sidebar
5. Click on markers to view and reply to comments

• https://github.com/vishalmuwal/image-annotation

• https://image-annotation-mu.vercel.app/