📝 Sticky Notes App

A modern, interactive sticky notes application built with React, TypeScript, and Vite. Create, edit, organize, and delete notes with a beautiful drag-and-drop interface.

---

✨ Features

📌 Note Management

• Create notes - Click anywhere on the dashboard to create a new note
• Edit text - Double-click on a note to edit its content
• Move notes - Drag and drop notes anywhere on the screen
• Resize notes - Drag the bottom-right corner to resize (150-400px)
• Delete notes - Drag notes to the trash area at the bottom to delete

🎨 Customization

• 5 colors - Choose from yellow, green, blue, pink, or purple
• 3 sizes - Small (150x150), Medium (200x200), Large (300x300)
• Persistent storage - Notes are saved to localStorage automatically
• Z-index management - Click a note to bring it to front

🗑️ Trash System

• Visual feedback - Notes turn red when hovering over trash
• Easy deletion - Drag and drop to delete
• Trash indicator - Pink background shows trash area

💡 Help System

• Interactive guide - Click the "?" button for instructions
• 7 steps tutorial - Learn all features quickly

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/programistka/stickynotes.git
cd stickynotes

# Install dependencies
npm install

# Start development server
npm run dev

The app will be available at http://localhost:5173

---

📖 How to Use

Creating a Note

1. Select a color from the color picker (top-left)
2. Select a size: Small, Medium, or Large
3. Click anywhere on the dashboard
4. A new note appears at the clicked position

Editing a Note

1. Double-click on any note
2. Type your text
3. Click outside or press ESC to save/cancel

Moving a Note

1. Click and hold on a note
2. Drag it to the desired position
3. Release to drop

Resizing a Note

1. Hover over the bottom-right corner (⇲ icon appears)
2. Click and drag to resize
3. Minimum: 150x150px, Maximum: 400x400px

Deleting a Note

1. Click and drag a note
2. Move it to the pink "Trash area" at the bottom
3. Note turns red when over trash
4. Release to delete

Clearing All Notes

• Click the "Clear All" button in the top-right corner
• Button is disabled when there are no notes

---

🧪 Testing

Run Tests

# Run all tests
npm test

# Run tests in watch mode
npm test -- --watch

# Run tests with UI
npm run test:ui

# Generate coverage report
npm run test:coverage

Test Coverage

Test Files  8 passed (8)
     Tests  58 passed (58)
  Coverage  ~56%

- Statements: 56.33% (160/284)
- Branches: 45.74% (43/94)
- Functions: 49.39% (41/83)
- Lines: 58.42% (156/267)

Test Structure

src/
├── components/
│   ├── Dashboard/
│   │   ├── Dashboard.test.tsx
│   │   └── Note/
│   │       └── Note.test.tsx
│   └── Toolbar/
│       ├── Toolbar.test.tsx
│       ├── Help/
│       │   └── Help.test.tsx
│       ├── NoteColor/
│       │   └── NoteColor.test.tsx
│       └── NoteSize/
│           └── NoteSize.test.tsx
├── hooks/
│   └── useNoteManagement.test.ts
└── reducers/
    └── notesReducer.test.ts

---

🛠️ Tech Stack

Core

• React 19.2 - UI framework
• TypeScript 5.9 - Type safety
• Vite 7.2 - Build tool & dev server

State Management

• React Context API - Global state
• useReducer - Complex state logic
• Custom hooks - Business logic encapsulation

Styling

• CSS Modules - Scoped styling
• Classnames - Dynamic CSS classes

Testing

• Vitest - Unit test framework
• React Testing Library - Component testing
• @testing-library/user-event - User interaction simulation

Code Quality

• ESLint - Code linting
• Prettier - Code formatting
• Husky - Git hooks
• Commitlint - Commit message linting

---

📁 Project Structure

stickynotes/
├── src/
│   ├── components/
│   │   ├── Dashboard/       # Main workspace
│   │   │   ├── Note/        # Individual note component
│   │   │   └── Trash/       # Trash area component
│   │   └── Toolbar/         # Top toolbar
│   │       ├── NoteColor/   # Color picker
│   │       ├── NoteSize/    # Size selector
│   │       └── Help/        # Help modal
│   ├── contexts/
│   │   └── NotesContext.tsx # Global state management
│   ├── hooks/
│   │   ├── useNoteManagement.ts  # Note interaction logic
│   │   ├── useNotesApi.ts        # Mock API
│   │   └── useLocalStorage.ts    # Persistent storage
│   ├── reducers/
│   │   └── notesReducer.ts       # State reducer
│   ├── test/
│   │   ├── setup.ts         # Test configuration
│   │   └── test-utils.tsx   # Test helpers
│   ├── types.ts             # TypeScript types
│   ├── utils.ts             # Utility functions
│   ├── App.tsx              # Root component
│   └── main.tsx             # Entry point
├── vitest.config.ts         # Test configuration
├── vite.config.ts           # Build configuration
├── tsconfig.json            # TypeScript config
├── eslint.config.js         # ESLint config
└── package.json

---

🎨 UI/UX Features

Visual Feedback

• ✅ Hover effects on buttons
• ✅ Note turns red when over trash
• ✅ Shadow effects for depth
• ✅ Smooth animations (transitions)
• ✅ Gradient buttons

Responsive Design

• ✅ Fixed toolbar (100px height)
• ✅ Fixed trash area (100px height)
• ✅ Flexible dashboard area
• ✅ Works on all screen sizes

---

🔧 Development

Available Scripts

# Development
npm run dev          # Start dev server

# Building
npm run build        # Build for production
npm run preview      # Preview production build

# Code Quality
npm run lint         # Run ESLint

# Testing
npm test             # Run tests
npm run test:ui      # Open test UI
npm run test:coverage # Generate coverage report

Environment Setup

1. Install dependencies:

   npm install

2. Start development:

   npm run dev

3. Run tests:

   npm test

4. Build for production:

   npm run build