A modern, feature-rich note-taking application with cloud sync, offline support, and a powerful rich text editor.
Organize your thoughts with folders, tags, templates, and more.
QuickNotes is a browser-based note-taking application built with React and TipTap. It works fully offline using IndexedDB and can optionally sync to a cloud backend. Notes support rich text formatting, code blocks with syntax highlighting, tables, images, checklists, and more.
- Rich Text Editor: Full WYSIWYG editor powered by TipTap with headings, bold, italic, underline, strikethrough, text alignment, font colors, highlights, and more
- Code Blocks: Syntax highlighting for many programming languages via Lowlight
- Tables: Insert and edit tables with a bubble menu for row/column operations, cell merging, header toggling, and cell background colors
- Task Lists: Interactive checklists with checkbox toggling
- Image Support: Upload and embed resizable images directly in notes with drag handles
- Folders & Tags: Organize notes into folders and assign color-coded tags via the Tag Manager
- Favorites & Pins: Star or pin important notes for quick access
- Global Search: Full-text search across all notes by title, content, and tags
- Find & Replace: In-editor find and replace with regex support
- Quick Note: Capture ideas instantly with a floating modal
- Templates: Pre-built note templates for common use cases (empty note, to-do, meeting notes, project plan, code snippet, journal)
- Specialized Note Types: Dedicated editors for brainstorming, meeting notes, project planning, shopping lists, weekly planners, journals, and to-do lists
- Version History: View and restore previous versions of any note (up to 50 versions per note)
- Duplicate Detection: Automatically find similar or duplicate notes
- Focus Mode: Distraction-free writing experience
- Dark / Light / System Theme: Three theme modes with automatic system preference detection
- Drag & Drop Sorting: Reorder notes via drag and drop using @dnd-kit
- Export & Import: Export notes as JSON, Markdown, or HTML; import from JSON
- Reminders: Set reminders for individual notes
- Note Sharing: Share notes with other users via invite links (requires backend)
- Real-Time Collaboration: Live updates on shared notes via realtime subscriptions (requires backend)
- Voice Input: Dictate notes using the Web Speech API
- Translation: Translate note content between multiple languages
- HTML Editor: Direct HTML editing for advanced formatting
- Offline-First: All data stored locally in IndexedDB via Dexie; works without internet
- Cloud Sync: Optional backend sync with automatic conflict resolution and sync queue
- PWA Support: Installable as a Progressive Web App with service worker caching
- Multilingual UI: Interface available in English, German, Spanish, French, Portuguese, Chinese, Hindi, Arabic, and Russian
- Mobile Responsive: Responsive layout with mobile-specific views, touch-friendly targets, and safe area support
- Getting Started
- Project Structure
- Architecture Overview
- Backend — Supabase Integration
- Offline Storage & Sync
- State Management
- Rich Text Editor
- Specialized Note Type Editors
- Internationalization (i18n)
- Theming
- PWA & Service Worker
- Database Schema
- GitHub Actions & Deployment
- Environment Variables
- Dependencies
- Build Instructions
- Contributing
- License
- Screenshots
- Node.js 18 or later
- npm
git clone https://github.com/BerndHagen/QuickNotes-Simple-Note-Manager.git
cd QuickNotes-Simple-Note-Manager
npm install
npm run devThe application will be available at http://localhost:5173. No backend or environment variables are required for local development — QuickNotes runs in offline-only mode by default.
npm run build
npm run previewThe build output is written to dist/. The base path in vite.config.js is set to /QuickNotes-Simple-Note-Manager/ for GitHub Pages deployment.
QuickNotes-Simple-Note-Manager/
├── .env.example # Supabase environment variable template
├── .github/
│ └── workflows/
│ └── release.yml # GitHub Actions: build + create release
├── index.html # HTML entry point
├── package.json # Dependencies and scripts
├── postcss.config.js # PostCSS configuration (Tailwind)
├── tailwind.config.js # Tailwind CSS configuration
├── vite.config.js # Vite build configuration
│
├── public/
│ ├── 404.html # SPA fallback for GitHub Pages
│ ├── manifest.json # PWA manifest
│ ├── sw.js # Service worker for offline caching
│ └── icons/ # PWA icons
│
└── src/
├── App.jsx # Root application component
├── main.jsx # React entry point
├── index.css # Global CSS (Tailwind + custom styles)
│
├── components/
│ ├── index.js # Barrel exports for all components
│ │
│ ├── NoteEditor.jsx # Main note editing view with toolbar
│ ├── RichTextEditor.jsx # TipTap editor wrapper with all extensions
│ ├── NotesList.jsx # Note list panel (list view)
│ ├── NotesGrid.jsx # Note grid panel (grid view)
│ ├── Sidebar.jsx # Navigation sidebar with folders & tags
│ ├── AuthScreen.jsx # Login / signup screen
│ ├── ThemeProvider.jsx # Dark / Light / System theme provider
│ │
│ ├── SettingsModal.jsx # Application settings modal
│ ├── EditorSettingsModal.jsx # Editor-specific settings (font, spacing)
│ ├── TemplateModal.jsx # Quick template selection (Ctrl+T)
│ ├── NoteTemplatesModal.jsx # Full template gallery with 25+ templates
│ ├── NoteTypesModal.jsx # Specialized note type selector
│ ├── ExportModal.jsx # Export notes (JSON / Markdown / HTML)
│ ├── ImportModal.jsx # Import notes from JSON
│ ├── GlobalSearchModal.jsx # Full-text search modal (Ctrl+K)
│ ├── FindReplaceBar.jsx # In-editor find & replace bar
│ ├── QuickNoteModal.jsx # Quick note capture modal (Ctrl+N)
│ ├── FocusMode.jsx # Distraction-free writing mode
│ ├── ShareNoteModal.jsx # Note sharing dialog
│ ├── SharedNotesView.jsx # View of received shared notes
│ ├── ReminderModal.jsx # Note reminder setting
│ ├── VersionHistoryModal.jsx # Note version history viewer
│ ├── DuplicateDetectionModal.jsx # Duplicate note finder
│ ├── TrashView.jsx # Trash management view
│ ├── ArchiveView.jsx # Archive view
│ ├── TagManagerModal.jsx # Tag creation and management
│ ├── TranslateModal.jsx # Note translation between languages
│ ├── HTMLEditorModal.jsx # Direct HTML source editor
│ ├── HelpModal.jsx # FAQ / help modal
│ ├── PrivacyModal.jsx # Privacy policy
│ ├── TermsModal.jsx # Terms of service
│ ├── KeyboardShortcutsModal.jsx # Keyboard shortcut customization
│ ├── SortDropdown.jsx # Note sort options + sort logic
│ ├── VoiceInput.jsx # Voice input via Web Speech API
│ ├── NoteStatistics.jsx # Word/character count display
│ ├── ImageUploadModal.jsx # Image upload dialog
│ ├── LinkInsertModal.jsx # Link insertion dialog
│ ├── NoteLinkPopover.jsx # Internal note link popover
│ ├── NotePreviewPopover.jsx # Note preview on hover
│ ├── TableBubbleMenu.jsx # Table editing bubble menu
│ ├── ResizableImage.jsx # Resizable image component
│ ├── ResizableImageExtension.js # TipTap extension for resizable images
│ ├── CustomTableCell.js # TipTap extension: custom table cell
│ └── CustomTableHeader.js # TipTap extension: custom table header
│
│ └── editors/ # Specialized note type editors
│ ├── index.js # Editor registry + barrel exports
│ ├── noteTypes.js # Note type definitions, configs, defaults
│ ├── BrainstormEditor.jsx # Brainstorming with idea cards + voting
│ ├── JournalEditor.jsx # Daily journal with mood tracking
│ ├── MeetingNotesEditor.jsx # Meeting notes with agenda + action items
│ ├── ProjectPlannerEditor.jsx # Project planning with kanban columns
│ ├── ShoppingListEditor.jsx # Shopping list with categories
│ ├── TodoListEditor.jsx # To-do list with priorities + deadlines
│ └── WeeklyPlannerEditor.jsx # Weekly planner with day-by-day layout
│
├── lib/
│ ├── backend.js # Supabase backend with offline stub fallback
│ ├── db.js # IndexedDB via Dexie (offline storage)
│ ├── i18n.js # Translations for 9 languages (3100+ lines)
│ ├── useCollaboration.js # Real-time collaboration hooks
│ ├── useTranslation.js # Translation hook for components
│ └── utils.js # Utility functions (dates, slugify, etc.)
│
└── store/
└── index.js # Zustand stores (useNotesStore, useUIStore, useThemeStore)
QuickNotes follows an offline-first architecture:
┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ React UI │ ───▶ │ Zustand Store │ ───▶ │ IndexedDB (Dexie)│
│ (Components) │ ◀─── │ (State Mgmt) │ ◀─── │ (Local Storage) │
└──────────────────┘ └────────┬─────────┘ └──────────────────┘
│
┌────────▼─────────┐
│ Backend Layer │ (Optional)
│ (backend.js) │
└────────┬─────────┘
│
┌────────▼─────────┐
│ Cloud Database │ (e.g. Supabase)
└──────────────────┘
- All data is written to IndexedDB first via Dexie, ensuring immediate persistence regardless of network status
- Changes are queued in a
syncQueuetable with the operation type (insert,update,delete) - When online, the sync engine processes the queue and reconciles with the remote backend
- Conflict resolution uses timestamp comparison with a 2-second buffer to determine which version wins
- The backend layer is a stub by default — the app functions fully without any backend configured
The file src/lib/backend.js provides the backend layer using Supabase (@supabase/supabase-js). It uses a PKCE auth flow with auto-refresh tokens and persistent sessions.
The backend operates in two modes depending on whether VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY are configured:
| Mode | Condition | Behavior |
|---|---|---|
| Cloud | Both env vars set and URL contains supabase.co |
Full Supabase client with auth, real-time, cloud sync |
| Offline-only | Env vars missing or invalid | Stub backend — app works fully offline without auth or sync |
When Supabase is not configured, all backend methods return safe no-op results:
| Method | Stub Return |
|---|---|
backend.auth.getSession() |
{ data: { session: null } } |
backend.auth.signUp() |
Error: Backend not configured. Check .env file. |
backend.auth.signInWithPassword() |
Error: Backend not configured. Check .env file. |
backend.from(table).select() |
{ data: [], error: null } |
getSharedNotes() |
[] |
createShareLink() |
Error: Backend not configured |
When configured, the backend exposes the standard Supabase client API:
backend.from('notes').select('*').eq('user_id', userId)
backend.from('notes').upsert(noteData).select()
backend.from('notes').delete().eq('id', noteId)
backend.auth.signInWithPassword({ email, password })
backend.auth.signUp({ email, password })
backend.auth.signOut()
backend.channel('name').on('postgres_changes', filter, callback).subscribe()| Function | Purpose |
|---|---|
backend.auth.* |
Authentication (signup, login, logout, session, password reset) |
backend.from(table) |
CRUD query builder for notes, folders, tags, shared_notes, accepted_shares |
backend.channel() |
Realtime subscriptions for live collaboration |
createShareLink() |
Create share invitation for a note |
acceptShare() |
Accept a share invitation |
declineShare() |
Decline a share invitation |
getSharedNotes() |
Fetch all notes shared with the current user |
getPendingShares() |
Fetch pending share invitations |
removeShare() |
Remove a share |
leaveSharedNote() |
Leave a shared note |
getRemoteNoteVersions() |
Fetch remote version history for a note |
deleteUserAccount() |
Delete user account and all associated data via RPC |
isBackendConfigured() |
Check if Supabase credentials are set |
getRedirectUrl() |
Get OAuth redirect URL (handles localhost vs production) |
QuickNotes uses Dexie (IndexedDB wrapper) with the following tables:
| Table | Indexes | Purpose |
|---|---|---|
notes |
id, title, content, folderId, userId, createdAt, updatedAt, syncStatus |
All notes |
folders |
id, name, parentId, userId, createdAt, updatedAt, syncStatus |
Folder hierarchy |
tags |
id, name, color, userId, syncStatus |
Tag definitions |
noteTags |
[noteId+tagId], noteId, tagId |
Note-tag associations (legacy, not used — tags stored as array in notes) |
noteVersions |
++id, noteId, content, createdAt |
Version history (max 50 per note) |
syncQueue |
++id, table, operation, data, timestamp |
Pending operations for cloud sync |
SyncStatus.SYNCED // Synchronized with backend
SyncStatus.PENDING // Waiting for sync
SyncStatus.CONFLICT // Merge conflict detected
SyncStatus.ERROR // Sync failed- Every local edit sets
syncStatus: PENDINGon the affected record - The edit is also added to the
syncQueuetable syncWithBackend()processes the queue:- Uploads pending folder/tag deletions
- Uploads new/modified folders and tags
- Merges remote folders/tags into local state
- Uploads pending notes
- Downloads remote notes and merges with local state
- Cleans up the sync queue
- Conflict resolution: remote wins if
remote.updated_at > local.updatedAt + 2000ms
The application uses three Zustand stores defined in src/store/index.js:
Core data store for notes, folders, tags, and sync logic.
| State / Action | Description |
|---|---|
notes, folders, tags |
Core data arrays |
selectedNoteId, selectedFolderId, selectedTagFilter |
Current selection state |
searchQuery |
Current search filter |
user, isAuthChecked |
Authentication state |
sharedNotes, pendingShares |
Sharing data |
isSyncing, lastSyncTime, isOnline |
Sync status |
createNote(), updateNote(), deleteNote() |
CRUD operations |
toggleStar(), togglePin(), archiveNote() |
Note state toggles |
createFolder(), updateFolder(), deleteFolder() |
Folder CRUD |
createTag(), updateTag(), deleteTag() |
Tag CRUD (renames propagate to all notes) |
addTagToNote(), removeTagFromNote() |
Tag assignment |
reorderNotes(), moveNote(), duplicateNote() |
Note management |
syncWithBackend() |
Full bidirectional sync |
getFilteredNotes() |
Returns notes filtered by folder, tag, search query |
getSelectedNote() |
Returns the currently selected note (including shared) |
shareNote(), acceptShare(), declineShare() |
Sharing actions |
loadSharedNotes(), leaveSharedNote() |
Sharing management |
initializeStarterContent() |
Creates welcome note, starter folders, and tags for new users |
Persisted fields: notes, folders, tags, lastSyncTime
| State / Action | Description |
|---|---|
theme |
'light', 'dark', or 'system' |
setTheme() |
Update theme preference |
Persisted fields: theme
Manages all UI state: modal visibility, sidebar state, view mode, sync settings, and language.
| Category | States |
|---|---|
| Layout | sidebarOpen, notesListWidth, mobileView, viewMode (list / grid) |
| Modals | settingsOpen, exportModalOpen, importModalOpen, globalSearchOpen, focusModeOpen, shortcutsModalOpen, templatesModalOpen, noteTypesModalOpen, helpModalOpen, privacyModalOpen, termsModalOpen, tagManagerOpen, translateModalOpen, editorSettingsOpen, htmlEditorOpen, shareModalOpen, sharedNotesViewOpen, templateModalOpen, versionHistoryOpen, duplicateModalOpen, reminderModalOpen, imageUploadOpen, linkModalOpen, archiveViewOpen, quickNoteOpen, showTrash, findReplaceOpen |
| Sorting | currentSort (e.g. updated-desc, title-asc, etc.) |
| Selection | multiSelectMode, selectedNoteIds |
| Sync | autoSync, syncInterval, syncOnStartup, showSyncNotifications |
| Preferences | confirmBeforeDelete, spellCheck, showNoteStatistics, trashRetentionDays |
| Language | language (ISO code: en, de, es, fr, pt, zh, hi, ar, ru) |
Persisted fields: language, currentSort, notesListWidth, viewMode, autoSync, syncInterval, syncOnStartup, showSyncNotifications, confirmBeforeDelete, spellCheck, showNoteStatistics, trashRetentionDays
The editor is built on TipTap (ProseMirror wrapper) with the following extensions configured in RichTextEditor.jsx:
| Extension | Purpose |
|---|---|
StarterKit |
Bold, italic, headings, lists, blockquotes, code, history |
Underline |
Underline formatting |
TextAlign |
Left / center / right / justify alignment |
Highlight |
Background highlight with color picker |
Color + TextStyle |
Text foreground color |
FontFamily |
Font family selection |
Link |
Clickable hyperlinks |
Image (custom) |
Resizable images with drag handles (ResizableImageExtension.js) |
Table, TableRow, TableCell, TableHeader (custom) |
Tables with cell colors (CustomTableCell.js, CustomTableHeader.js) |
TaskList + TaskItem |
Interactive checkboxes |
CodeBlockLowlight |
Syntax-highlighted code blocks |
Placeholder |
Placeholder text when editor is empty |
Subscript + Superscript |
Sub/superscript text |
ResizableImageExtension.js— Extends the Image node to support drag-to-resize with handles. Renders viaResizableImage.jsx.CustomTableCell.js— Extends TableCell with abackgroundColorattribute for per-cell coloring.CustomTableHeader.js— Extends TableHeader with abackgroundColorattribute.
TableBubbleMenu.jsx provides a floating toolbar when a table is selected, with operations for:
- Add / delete rows and columns
- Toggle header row / header column
- Merge / split cells
- Set cell / row background color
- Delete table
Beyond the standard rich text editor, QuickNotes provides specialized editors for specific workflows. These are defined in src/components/editors/:
| Type | Editor Component | Key Features |
|---|---|---|
standard |
RichTextEditor.jsx |
Full WYSIWYG rich text |
todo |
TodoListEditor.jsx |
Tasks with priorities (low/medium/high/urgent), deadlines, categories, filtering |
project |
ProjectPlannerEditor.jsx |
Kanban-style columns (To Do / In Progress / Done), task cards with drag support |
meeting |
MeetingNotesEditor.jsx |
Attendees, agenda items, discussion notes, action items with owners |
journal |
JournalEditor.jsx |
Mood tracking, gratitude entries, daily highlights |
brainstorm |
BrainstormEditor.jsx |
Idea cards with voting/rating, grid and list views, category filtering |
shopping |
ShoppingListEditor.jsx |
Items with quantity, category, price, checked state |
weekly |
WeeklyPlannerEditor.jsx |
Day-by-day schedule with time slots and goals |
Each note type has a configuration object with:
{
id: 'todo',
name: 'To-Do List',
description: 'Task management with priorities & deadlines',
icon: CheckSquare, // Lucide icon component
color: '#22c55e',
gradient: 'from-green-500 to-emerald-600',
category: 'Productivity',
features: ['Priorities', 'Deadlines', 'Subtasks', 'Progress'],
}The getDefaultData(type) function generates the initial structured data for each note type. Editor selection is handled by the EDITOR_MAP in editors/index.js.
The i18n system is defined in src/lib/i18n.js (~3100 lines) with full translations for 9 languages:
| Code | Language | Direction |
|---|---|---|
en |
English | LTR |
de |
German | LTR |
es |
Spanish | LTR |
fr |
French | LTR |
pt |
Portuguese | LTR |
zh |
Chinese | LTR |
hi |
Hindi | LTR |
ar |
Arabic | RTL |
ru |
Russian | LTR |
common.* — Generic buttons (save, cancel, delete, etc.)
sidebar.* — Sidebar navigation
nav.* — Navigation items
notes.* — Note-related labels
editor.* — Editor toolbar labels
translate.* — Translation feature
folders.* — Folder management
tags.* — Tag management
trash.* — Trash view
settings.* — Settings modal (all sections)
share.* — Note sharing
templates.* — Template names and labels
help.* — FAQ questions and answers
terms.* — Terms of service
privacy.* — Privacy policy
import { useTranslation } from '../lib/useTranslation'
function Component() {
const { t, language } = useTranslation()
return <span>{t('notes.newNote')}</span>
}src/lib/utils.js includes localized relative time formatting (formatDate, formatSyncTime) for all 9 languages.
QuickNotes supports three theme modes managed by ThemeProvider.jsx and useThemeStore:
| Mode | Behavior |
|---|---|
light |
Light background, dark text |
dark |
Dark background with gray-900/950 tones |
system |
Follows OS preference via prefers-color-scheme |
The theme is applied by toggling the dark class on the <html> element. Tailwind's darkMode: 'class' configuration enables dark: variant classes throughout the app.
The global stylesheet includes extensive custom styles for:
- TipTap editor elements (headings, lists, blockquotes, links, highlights, code blocks)
- Table styles with cell selection, hover effects, resize handles
- Dark mode adjustments for paper backgrounds
- Task list checkbox styling
- Mobile responsive overrides (touch targets, toolbar scrolling, safe area insets)
- Animation keyframes (sync indicator, skeleton loading, dropdowns, modals, sidebar slide-in)
The service worker implements a network-first with cache fallback strategy:
- Attempts to fetch from the network
- On success, caches the response for future offline use
- On failure, falls back to the cached version
- For navigation requests, falls back to the root page (SPA routing)
- Excludes backend API requests from caching
The app is installable as a PWA with:
- App name: QuickNotes
- Theme color and icons
standalonedisplay mode- Start URL pointing to the deployed base path
public/404.html handles GitHub Pages SPA routing by redirecting all 404s back to index.html with the original path encoded as a query parameter.
When using a cloud backend, the following database tables are expected.
| Table | Purpose |
|---|---|
notes |
All notes with title, content, tags (array), note_type, note_data (JSONB), starred, pinned, deleted, archived, reminder |
folders |
Folder hierarchy with name, icon, color, parent_id |
tags |
Tag definitions with name and color |
note_versions |
Version history (max 50 per note, auto-created on content change) |
shared_notes |
Share invitations with permission levels and status |
accepted_shares |
Denormalized accepted shares for fast access |
collaboration_cursors |
Active editor tracking for real-time collaboration |
All tables should have RLS enabled so users can only access:
- Their own notes, folders, and tags
- Notes shared with them (via
accepted_shares) - Share invitations they created or received
| Procedure | Purpose |
|---|---|
accept_share_invitation(share_id) |
Accept share, create accepted_shares entry |
decline_share_invitation(share_id) |
Decline share invitation |
leave_shared_note(note_id) |
Remove user from shared note |
delete_user_account() |
Permanently delete user account and all associated data |
| Trigger | Purpose |
|---|---|
update_updated_at_column() |
Auto-update updated_at on notes, folders, shared_notes |
create_note_version() |
Auto-create version on notes.content change (max 50) |
Triggered on every push to main:
- Checks out code and installs Node.js 20
- Runs
npm ci+npm run build - Generates a timestamped release tag (
release-YYYYMMDD-HHMMSS) - Creates a ZIP of the
dist/output - Creates a GitHub Release with the ZIP artifact and auto-generated release notes from commit messages
To deploy to GitHub Pages:
- Set repository secrets
VITE_SUPABASE_URLandVITE_SUPABASE_ANON_KEY(optional — app works without them) - The
basepath invite.config.jsis set to/QuickNotes-Simple-Note-Manager/ - Enable GitHub Pages in repository settings (source: GitHub Actions)
- Add a deploy workflow that builds and publishes the
dist/directory
| Variable | Required | Description |
|---|---|---|
VITE_SUPABASE_URL |
No | Your Supabase project URL (e.g. https://xxxxx.supabase.co) |
VITE_SUPABASE_ANON_KEY |
No | Your Supabase anon/public key (safe for frontend, protected by RLS) |
When both variables are set and point to a valid Supabase instance, the app enables cloud sync, authentication, and sharing features. Without them, QuickNotes runs in local-only mode with full functionality except sync and auth.
- Copy
.env.exampleto.env - Fill in your Supabase project URL and anon key (found in Supabase Dashboard → Settings → API)
- Restart the dev server
Note: Never expose the
service_rolekey in frontend code — it bypasses Row Level Security and must only be used server-side.
For GitHub Pages deployment, set these as repository secrets named VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY (Settings → Secrets and variables → Actions).
| Package | Version | Purpose |
|---|---|---|
react |
^18.2.0 | UI framework |
react-dom |
^18.2.0 | React DOM renderer |
zustand |
^4.4.7 | State management with persist middleware |
dexie |
^3.2.4 | IndexedDB wrapper for offline storage |
dexie-react-hooks |
^1.1.7 | React hooks for Dexie |
@tiptap/react |
^2.1.13 | Rich text editor (React binding) |
@tiptap/starter-kit |
^2.1.13 | Core TipTap extensions |
@tiptap/pm |
^2.1.13 | ProseMirror core |
@tiptap/extension-* |
Various | TipTap editor extensions (table, image, link, highlight, code-block, task-list, text-align, color, font-family, underline, subscript, superscript, placeholder, text-style) |
@dnd-kit/core |
^6.3.1 | Drag and drop core |
@dnd-kit/sortable |
^10.0.0 | Sortable drag and drop |
@dnd-kit/utilities |
^3.2.2 | Drag and drop utilities |
highlight.js |
^11.9.0 | Syntax highlighting engine |
lowlight |
^3.1.0 | Lowlight adapter for highlight.js |
lucide-react |
^0.294.0 | Icon library |
react-hot-toast |
^2.4.1 | Toast notifications |
uuid |
^9.0.1 | UUID generation |
@supabase/supabase-js |
^2.95.3 | Supabase client for auth, database, and real-time |
| Package | Version | Purpose |
|---|---|---|
vite |
^5.0.0 | Build tool + dev server |
@vitejs/plugin-react |
^4.2.0 | React support for Vite |
tailwindcss |
^3.3.5 | Utility-first CSS framework |
postcss |
^8.4.31 | CSS processing |
autoprefixer |
^10.4.16 | CSS vendor prefixes |
eslint |
^8.53.0 | Linting |
eslint-plugin-react |
^7.33.2 | React linting rules |
eslint-plugin-react-hooks |
^4.6.0 | React hooks linting |
eslint-plugin-react-refresh |
^0.4.4 | React hot refresh linting |
npm install
npm run devnpm run buildOutput is written to dist/. To preview:
npm run previewnpm run lintContributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Backend implementations — Connect the
backend.jsabstraction to providers like Supabase, Firebase, or a custom REST API - New note type editors — Add specialized editors for new workflows
- Additional languages — Extend
i18n.jswith new translations - Accessibility — Improve screen reader support and keyboard navigation
- Performance — Optimize large note lists, editor startup time, and sync batching
- Testing — Add unit and integration tests
Found a bug or have a feature request? Open an issue with:
- Clear description of the problem or feature
- Steps to reproduce (for bugs)
- Expected vs actual behavior
- Screenshots if applicable
This project is licensed under the GNU General Public License v3.0 (GPL-3.0). See the LICENSE file for details.
You are free to use, modify, and distribute this software, provided that any derivative works are also licensed under the GPL-3.0 and made available as open source.
If you'd like a preview of QuickNotes before trying it out, the screenshots below show the application's key features. Note that future updates may introduce additional functionality.
| QuickNotes - Startup | QuickNotes - Editor |
|---|---|
 |
 |
| QuickNotes - Note | QuickNotes - Tags |
 |
 |
| QuickNotes - Meeting Notes | QuickNotes - To-Do List |
 |
 |