✅ 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

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

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:

# 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:

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"
}

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

Environment Variables

Located in .env:

DATABASE_URL="file:./dev.db"

🚀 Deployment

Vercel (Recommended)

npm run build
# Deploy to Vercel

Docker

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

Languages

HTML 71.8%

TypeScript 23.3%

JavaScript 4%

CSS 0.6%

PowerShell 0.3%

README.md

Memento - Your Digital Notepad

🚀 Project Location

✅ Completed Features

Core Functionality

UI/UX Features