Pix3lNote

Pix3lNote is a Google Keep-inspired note-taking app for the Pix3lTools suite. It shares the same database and authentication as Pix3lBoard and Pix3lWiki, so you log in once and your notes sync across all your devices.

Repository: github.com/Pix3ltools-lab/pix3lnote

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript (strict mode)
• Database: Turso (LibSQL / SQLite) — shared with Pix3lBoard
• File Storage: Vercel Blob
• Authentication: JWT with bcryptjs — shared with Pix3lBoard
• Styling: Tailwind CSS
• Validation: Zod
• Search: SQLite FTS5 with prefix wildcards

Features

Notes

• Title, content, and 11 background colors
• Pin important notes to keep them at the top
• Archive notes without deleting them
• Color-coded labels with sidebar filtering
• Full-text search across titles and content
• Responsive masonry grid layout
• Image attachments via Vercel Blob

Checklists

• Add checkbox items to a note, independent of the free-text content
• Check, edit, or remove items inline
• Checklist preview shown directly on the note card

Sharing

• Share any note with another Pix3lTools user by email
• Two access levels: Viewer (read-only) or Editor (can edit content)
• Shared notes appear in a dedicated “Shared with you” section

User Experience

• Dark / light theme toggle, preference saved locally
• Inline note creation, auto-save on blur
• Optimistic updates for pin, archive, and label actions

Admin Panel

• User management with note counts
• Approve pending registrations, create pre-approved accounts
• Reset passwords, delete users

Environment Variables

# Database (same as Pix3lBoard)
TURSO_DATABASE_URL=libsql://your-database.turso.io
TURSO_AUTH_TOKEN=your-auth-token

# Authentication (same JWT_SECRET as Pix3lBoard for token compatibility)
JWT_SECRET=your-random-secret-key-at-least-32-characters-long

# File uploads
BLOB_READ_WRITE_TOKEN=your-vercel-blob-token

# Integration
PIX3LBOARD_URL=https://your-board.vercel.app

Important: JWT_SECRET must be identical to the one used by Pix3lBoard so that login tokens are valid across both apps.

Running Locally

git clone https://github.com/Pix3ltools-lab/pix3lnote.git
cd pix3lnote

# Use the same Turso database as Pix3lBoard
cp .env.example .env
# Edit .env with the same credentials used for Pix3lBoard

npm install
npm run db:setup

npm run dev   # http://localhost:3000

Deployment

Vercel

1. Push to GitHub
2. Import the repository in Vercel
3. Set Framework Preset to Next.js
4. Add environment variables: TURSO_DATABASE_URL, TURSO_AUTH_TOKEN, JWT_SECRET, BLOB_READ_WRITE_TOKEN, PIX3LBOARD_URL
5. Deploy

Docker

git clone https://github.com/Pix3ltools-lab/pix3ltools-deploy.git
cd pix3ltools-deploy
./setup.sh
# Pix3lNote runs on http://localhost:3003

The Docker image uses a multi-stage build, runs as a non-root user, and exposes port 3000 internally (mapped to 3003 in the shared stack).

npm Scripts

npm run dev          # Development server
npm run build        # Production build
npm run start        # Start production server
npm run lint         # ESLint
npm run type-check   # TypeScript type checking
npm run db:setup     # Initialize database tables
npm run db:init      # Setup + create CI test user (reads E2E_USER_*)
npm run test         # Playwright E2E tests
npm run test:ui      # Playwright interactive UI