A fast, local-first productivity workspace — sticky notes, rich pages, drawings, kanban todos, and world clocks in one app.
- Features
- Tech Stack
- Getting Started
- Project Structure
- Environment Variables
- Roadmap
- Contributing
- License
JNote is a multi-mode productivity app. All workspace data stays in your browser (localStorage / IndexedDB) unless you export it.
Infinite canvas with pan/zoom, draggable resizable notes, pastel color picker, pinning, and JSON export/import.
TipTap-powered rich text editor with slash commands, callouts, code blocks, tables, task lists, link previews, notebook view, per-page fonts/icons, and auto-titled pages.
Excalidraw-based whiteboard mode with multiple scenes, autosave, and JSON export/import.
Drag-and-drop kanban board with customizable columns, recycle bin, list management, celebration effects, and optional custom completion/move sounds (IndexedDB).
Interactive 3D globe (amCharts) for picking countries/timezones, floating clock widgets, focus view, and a built-in Pomodoro timer with customizable durations.
- Light/dark theme presets (JNote, Monkeytype-inspired palettes, and more)
- Custom typography (primary + mono secondary fonts)
- Photo, gradient, and custom wallpaper backgrounds with contrast-aware UI tokens
- Magnetic navigation dock with per-mode shortcuts
- Optional eye-tracking decorative widget
Per-mode JSON export/import from Settings → Data (sticky notes, pages, area scenes, todos).
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, Turbopack) |
| Language | TypeScript |
| UI | React 19 |
| Styling | Tailwind CSS v4 |
| State | Zustand |
| Rich text | TipTap |
| Drawings | Excalidraw |
| Globe / maps | amCharts 5 |
| Drag & drop | @dnd-kit |
| Animation | Motion |
| Icons | Lucide |
| Analytics | @vercel/analytics (on Vercel deploys) |
| Linting | ESLint + eslint-config-next |
- Node.js 20+ (LTS recommended)
- Yarn 1.x (project uses
yarn.lock)
git clone https://github.com/jxngrx/notes_apps.git
cd notes_appsyarn installcp .env.example .env.localEdit .env.local and set your public site URL (required for metadata and Open Graph):
NEXT_PUBLIC_SITE_URL=https://your-domain.example.com/Include the scheme (
https://) and a trailing slash.
yarn devOpen http://localhost:3000.
yarn build
yarn startTroubleshooting
Build fails: NEXT_PUBLIC_SITE_URL is required
Copy .env.example → .env.local and set the variable before running yarn build.
Notes not persisting
Ensure browser localStorage is enabled (DevTools → Application → Local Storage).
Import fails
Exports must be valid JSON from JNote's export action for that mode.
notes_apps/
├── app/ # Next.js App Router (layout, page, API routes)
│ ├── api/
│ │ ├── link-preview/ # Server-side OG metadata fetch (SSRF-protected)
│ │ └── location/ # IP-based timezone lookup for world clocks
│ ├── layout.tsx # Root layout, fonts, metadata
│ ├── page.tsx # Main shell — mode switching
│ └── globals.css # Global styles + mode-specific CSS
├── components/
│ ├── pages/ # TipTap editor, slash menu, notebook view
│ ├── pomodoro/ # Pomodoro timer UI
│ ├── settings/ # Settings modal panels
│ ├── world-time/ # Globe picker, clock cards, focus view
│ ├── ui/ # Shared UI (dock, scroll area, eye widget)
│ ├── canvas.tsx # Sticky notes infinite canvas
│ ├── todo-kanban-board.tsx
│ └── ...
├── hooks/ # React hooks (navigation, fonts, location)
├── lib/ # Zustand stores, utilities, theme presets
├── public/ # Static assets (logo, screenshots)
├── THIRD_PARTY_LICENSES/ # Third-party license files (e.g. amCharts)
├── .env.example # Required environment variable template
├── package.json
├── README.md
└── CONTRIBUTING.md
| Variable | Required | Description |
|---|---|---|
NEXT_PUBLIC_SITE_URL |
Yes (local) / Optional (Vercel) | Public canonical URL for metadata, Open Graph, and metadataBase. Example: https://jnote.example.com/. On Vercel, falls back to VERCEL_PROJECT_PRODUCTION_URL or VERCEL_URL when unset. Required for local yarn build / yarn dev. |
No other environment variables are used in the current codebase.
- Multi-mode workspace (sticky notes, pages, area, todo, world time)
- Local-first persistence (
localStorage+ IndexedDB) - Per-mode JSON export/import
- Custom themes, typography, and wallpapers
- Link preview cards in Pages editor
- Kanban todo with column management
- SSRF protection on link-preview API
- Full-text search across notes and pages
- Keyboard shortcut reference in-app (expanded)
- Mobile layout polish
- CI pipeline (lint + build on PRs)
- Privacy policy page (analytics + IP geolocation disclosure)
- Cloud sync with authentication (speculative)
- Real-time collaboration (speculative)
Contributions are welcome. See CONTRIBUTING.md for setup, branch naming, commit style, and PR guidelines.
MIT — see LICENSE for details.
Third-party licenses (including amCharts 5 linkware terms) are in THIRD_PARTY_LICENSES/.