A modern, collaborative sticky note application built with React and TypeScript.

• NotesPage: Main container managing notes display and member-based filtering
• NoteCard: Interactive note component with drag-and-drop and member colors
• Controls: Member selection and filtering with visual feedback
• Button: Multi-variant button system with consistent styling
• ColorPalette: Member color selection with real-time preview

• Global contexts for notes and members state
• Local storage persistence for data
• Member-based filtering with useMemo optimization
• Proper event propagation control

// Button variants with consistent transitions (0.2s ease)
type ButtonVariant = 'primary' | 'secondary' | 'add' | 'delete' | 'close'

// Primary/Secondary
- Primary: Green (#66bb6a), rectangular
- Secondary: Transparent with border
- Both support text content
- 6px border radius

// Icon Buttons
- Add: 40px circular, gray (rgba(107, 107, 107, 1))
- Delete: Transparent with trash icon, 4px padding
- Close: Circular with dark/light modes, 8px padding

interface Member {
  id: string
  name: string
  colorHeader: string
  colorBody: string
  colorText: string
}

// Active Member Features
- Visual selection with white outline
- Click to select/deselect
- New notes inherit member colors
- Real-time note filtering

npm install
npm run dev

https://sticky-note-roan.vercel.app/

1. Add members with custom colors
2. Create notes (inherits member colors)
3. Set priorities (low/medium/high)
4. Filter by member
5. Filter by notes body
6. Mark notes complete
7. Assign notes to members
8. Drag notes to reorder
9. Delete notes
10. Save notes to local storage
11. Search member

• Memoized components (React.memo)
• Debounced note updates (500ms)
• Lazy-loaded modals
• Efficient filtering (useMemo)
• Local storage caching

• Event delegation
• Proper cleanup
• Smart re-rendering
• Consistent transitions

1. Role based permissions
2. Rich text editing
3. Categories/tags
4. Search functionality
5. Note sharing
6. Member management
7. Note history
8. Note notifications
9. Note reminders
10. Note collaboration

1. Real-time collaboration
2. Offline support
3. Backend integration
4. Keyboard shortcuts

1. E2E tests (Playwright & Cucumber)
2. Visual regression
3. Performance metrics
4. Accessibility testing
5. Coverage increase

• React 18: Frontend framework
• TypeScript: Type safety and better developer experience
• Vite: Fast build tool and development server
• Styled Components: CSS-in-JS styling
• Vitest: Unit testing framework
• React Testing Library: Component testing
• ESLint: Code linting and style enforcement

src/
├── components/         # React components
│   ├── __tests__/       # Modal components
├── context/          # Business logic and hooks
├── utils/            # Helper functions and types
├── styles/           # Global styles
└── App.tsx           # Main application component

• Node.js (v16 or higher)
• npm or yarn

1. Clone the repository:

git clone <repository-url>

2. Install dependencies:

npm install
# or
yarn install

3. Start the development server:

npm run dev
# or
yarn dev

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

The main component for displaying and managing individual notes.

• Props:
  • note: Note data (position, colors, content)
  • onDelete: Callback for note deletion
  • onUpdate: Callback for note updates
• Features:
  • Real-time content editing
  • Drag and drop positioning
  • Member color inheritance
  • Completion status toggle
  • Priority selection

Manages member selection and note creation.

• Features:
  • Add new members
  • Select/deselect active member
  • Member color customization
  • Local state management
  • Callback propagation to parent
  • Visual feedback for member selection

Color selection component with predefined color options.

• Props:
  • selectedColor: Currently selected color
  • onColorSelect: Color selection callback
• Features:
  • Grid layout of color options
  • Visual selection feedback
  • Hover and active states
  • Smooth transitions

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

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