Keep/README.md

# Memento - Your Digital Notepad

A beautiful and functional note-taking app inspired by Google Keep, built with Next.js 16, TypeScript, Tailwind CSS 4, and Prisma.

## 🚀 Project Location

The complete application is in the `keep-notes/` directory.

## ✅ Completed Features

### Core Functionality
- ✅ Create, read, update, delete notes
- ✅ Text notes and checklist notes
- ✅ Pin/unpin notes
- ✅ Archive/unarchive notes
- ✅ Real-time search across all notes
- ✅ Color customization (10 soft pastel themes)
- ✅ Label management
- ✅ Responsive masonry grid layout
- ✅ Drag-and-drop note reordering
- ✅ **Image upload with original size preservation**

### UI/UX Features
- ✅ Expandable note input (Google Keep style)
- ✅ Modal note editor with full editing (`!max-w-[min(95vw,1600px)]`)
- ✅ **Images display at original dimensions** (no cropping, `h-auto` without `w-full`)
- ✅ Hover effects and smooth animations
- ✅ **Masonry layout with CSS columns** (responsive: 1-5 columns)
- ✅ **Soft pastel color themes** (bg-red-50, bg-blue-50, etc.)
- ✅ Dark mode with system preference
- ✅ Mobile responsive design
- ✅ Icon-based navigation with 9 toolbar icons
- ✅ Toast notifications (via shadcn)

### Integration Features
- ✅ **REST API** (4 endpoints: GET, POST, PUT, DELETE)
  - `/api/notes` - List all notes
  - `/api/notes` - Create new note
  - `/api/notes/[id]` - Update note
  - `/api/notes/[id]` - Delete note
- ✅ **MCP Server** (Model Context Protocol) with 9 tools:
  - `getNotes` - Fetch all notes
  - `createNote` - Create new note
  - `updateNote` - Update existing note
  - `deleteNote` - Delete note
  - `searchNotes` - Search notes by query
  - `getNoteById` - Get specific note
  - `archiveNote` - Archive/unarchive note
  - `pinNote` - Pin/unpin note
  - `addLabel` - Add label to note

### Technical Features
- ✅ Next.js 16 with App Router & Turbopack
- ✅ Server Actions for mutations
- ✅ TypeScript throughout
- ✅ Tailwind CSS 4
- ✅ shadcn/ui components (11 components)
- ✅ Prisma ORM 5.22.0 with SQLite
- ✅ Type-safe database operations
- ✅ **Base64 image encoding** (FileReader.readAsDataURL)
- ✅ **@modelcontextprotocol/sdk** v1.0.4

## 🏃 Quick Start

```bash
cd keep-notes
npm install
npx prisma generate
npx prisma migrate dev
npm run dev
```

Then open http://localhost:3000

## 📱 Application Features

### 1. Note Creation
- Click the input field to expand
- Add title and content
- **Upload images** (displayed at original size)
- Switch to checklist mode with one click
- Add labels and choose from 10 soft pastel colors

### 2. Note Management
- **Edit**: Click any note to open the editor (max-width: 95vw or 1600px)
- **Pin**: Click pin icon to keep notes at top
- **Archive**: Move notes to archive
- **Delete**: Remove notes permanently
- **Color**: Choose from 10 beautiful pastel colors
- **Labels**: Add multiple labels
- **Images**: Upload images that preserve original dimensions

### 3. Checklist Notes
- Create todo lists
- Check/uncheck items
- Add/remove items dynamically
- Strike-through completed items

### 4. Search & Navigation
- Real-time search in header
- Search by title or content
- Navigate to Archive page
- Dark/light mode toggle

### 5. API Integration
Use the REST API to integrate with other services:
```bash
# Get all notes
curl http://localhost:3000/api/notes

# Create a note
curl -X POST http://localhost:3000/api/notes \
  -H "Content-Type: application/json" \
  -d '{"title":"API Note","content":"Created via API"}'

# Update a note
curl -X PUT http://localhost:3000/api/notes/1 \
  -H "Content-Type: application/json" \
  -d '{"title":"Updated","content":"Modified via API"}'

# Delete a note
curl -X DELETE http://localhost:3000/api/notes/1
```

### 6. MCP Server for AI Agents
Start the MCP server for integration with Claude, N8N, or other MCP clients:
```bash
cd keep-notes
npm run mcp
```

The MCP server exposes 9 tools for AI agents to interact with your notes:
- Create, read, update, and delete notes
- Search notes by content
- Manage pins, archives, and labels
- Perfect for N8N workflows, Claude Desktop, or custom integrations

Example N8N workflow available in: `n8n-memento-workflow.json`

## 🛠️ Tech Stack

- **Frontend**: Next.js 16, React, TypeScript, Tailwind CSS 4
- **UI Components**: shadcn/ui (11 components: Dialog, Tooltip, Badge, etc.)
- **Icons**: Lucide React (Bell, Image, UserPlus, Palette, Archive, etc.)
- **Backend**: Next.js Server Actions
- **Database**: Prisma ORM 5.22.0 + SQLite (upgradeable to PostgreSQL)
- **Styling**: Tailwind CSS 4 with soft pastel themes (bg-*-50)
- **Layout**: CSS columns for masonry grid (responsive 1-5 columns)
- **Images**: Base64 encoding, original size preservation
- **Integration**: REST API + MCP Server (@modelcontextprotocol/sdk v1.0.4)

## 📂 Project Structure

```
keep-notes/
├── app/
│   ├── actions/notes.ts       # Server actions (CRUD + images)
│   ├── api/notes/             # REST API endpoints
│   ├── archive/page.tsx       # Archive page
│   ├── layout.tsx             # Root layout
│   └── page.tsx               # Home page
├── components/
│   ├── ui/                    # shadcn components
│   ├── header.tsx             # Navigation
│   ├── note-card.tsx          # Note display (masonry, images)
│   ├── note-editor.tsx        # Note editing (!max-w-[95vw])
│   ├── note-input.tsx         # Note creation (image upload)
│   └── note-grid.tsx          # Masonry layout
├── lib/
│   ├── types.ts               # TypeScript types (Note with images)
│   └── utils.ts               # Utilities
├── prisma/
│   ├── schema.prisma          # Database schema (images String?)
│   └── dev.db                 # SQLite database
├── mcp/
│   └── server.ts              # MCP server (9 tools)
└── package.json               # Scripts: dev, build, start, mcp
```
│   ├── note-editor.tsx        # Edit modal
│   ├── note-grid.tsx          # Grid layout
│   └── note-input.tsx         # Note creation
├── lib/
│   ├── prisma.ts              # DB client
│   ├── types.ts               # TypeScript types
│   └── utils.ts               # Utilities
└── prisma/
    ├── schema.prisma          # Database schema
    └── migrations/            # DB migrations
```

## 🎨 Color Themes

The app includes 10 color themes:
- Default (White)
- Red
- Orange  
- Yellow
- Green
- Teal
- Blue
- Purple
- Pink
- Gray

All themes support dark mode!

## 🔧 Configuration

### Database
Currently uses SQLite. To switch to PostgreSQL:

1. Edit `prisma/schema.prisma`:
```prisma
datasource db {
  provider = "postgresql"
}
```

2. Update `prisma.config.ts` with PostgreSQL URL
3. Run: `npx prisma migrate dev`

### Environment Variables
Located in `.env`:
```
DATABASE_URL="file:./dev.db"
```

## 🚀 Deployment

### Vercel (Recommended)
```bash
npm run build
# Deploy to Vercel
```

### Docker
```dockerfile
FROM node:20-alpine
WORKDIR /app
COPY . .
RUN npm install
RUN npx prisma generate
RUN npm run build
CMD ["npm", "start"]
```

## 📝 Development Notes

### Server Actions
All CRUD operations use Next.js Server Actions:
- `createNote()` - Create new note
- `updateNote()` - Update existing note  
- `deleteNote()` - Delete note
- `getNotes()` - Fetch all notes
- `searchNotes()` - Search notes
- `togglePin()` - Pin/unpin
- `toggleArchive()` - Archive/unarchive

### Type Safety
Full TypeScript coverage with interfaces:
- `Note` - Main note type
- `CheckItem` - Checklist item
- `NoteColor` - Color themes

### Responsive Design
- Mobile: Single column
- Tablet: 2 columns
- Desktop: 3-4 columns
- Auto-adjusts with window size

## 🎯 Future Enhancements

Possible additions:
- User authentication (NextAuth.js)
- Real-time collaboration
- Image uploads
- Rich text editor
- Note sharing
- Reminders
- Export to PDF/Markdown
- Voice notes
- Drawing support

## 📄 License

MIT License - feel free to use for personal or commercial projects!

---

**Built with ❤️ using Next.js 16, TypeScript, and Tailwind CSS 4**

Server running at: http://localhost:3000