A feature-rich, Google Keep-inspired note-taking application built with React, TypeScript, Material-UI, and Vite.
- Rich Note Creation: Create notes with titles, content, and multiple media types
- Interactive Checkboxes: Add draggable todo lists within notes with completion tracking
- Image Support: Upload and manage images with drag & drop functionality
- Link Previews: Automatic detection and preview generation for URLs in notes
- Color Coding: Choose from 12 beautiful colors to organize your notes
- Pin Notes: Keep important notes at the top of your workspace
- Labels System: Create, manage, and filter notes by custom labels
- Archive & Trash: Archive notes for later or move them to trash with restore options
- Search Functionality: Real-time search across titles, content, and checkboxes
- Advanced Filtering: Filter by labels, pinned status, archived/deleted states
- Drag & Drop: Reorder notes and checkbox items with intuitive drag & drop
- Material-UI Design: Modern, clean interface following Material Design principles
- Dual View Modes: Switch between grid and list view layouts
- Responsive Design: Fully responsive design optimized for desktop, tablet, and mobile
- Sidebar Navigation: Collapsible sidebar with filtering and organization tools
- History Tracking: Undo/redo functionality with note edit history
- Auto-save: Automatic saving of all changes with real-time persistence
- Node.js (v16 or higher)
- npm or yarn
-
Clone the repository
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open http://localhost:5173 in your browser
npm run build- Basic Note: Click "Take a note..." or the floating + button
- Add Content: Enter title and content with support for line breaks
- Add Checkboxes: Click the checkbox icon to create interactive todo lists
- Upload Images: Drag & drop images or use the image upload button
- Organize: Choose colors, add labels, and pin important notes
- Save: Notes auto-save as you type
- Click the checkbox icon in any note to add todo items
- Drag and drop to reorder checkbox items
- Check/uncheck items to track completion
- Add new items with the "Add item" button
- Drag & drop images directly into notes
- Click images to view in full size
- Delete images using the X button overlay
- Images are automatically resized and optimized
- Paste any URL into note content
- Automatic link detection and preview generation
- Click previews to open links in new tabs
- Rich previews show title, description, and thumbnail
- Create custom labels from the sidebar
- Filter notes by one or multiple labels
- Assign labels to notes during creation or editing
- Delete unused labels (removes from all notes)
- Search: Use the search bar to find notes by title, content, or checkbox text
- Pin Filter: Toggle to show only pinned notes
- View Modes: Switch between grid and list layouts
- Archive/Trash: Navigate between active, archived, and deleted notes
- Clear Filters: Reset all active filters at once
- All Notes: View all active notes
- Archive: Access archived notes
- Trash: Manage deleted notes with restore options
- Labels: Filter by custom labels with note counts
- Responsive: Auto-collapses on mobile, persistent on desktop
- React 19 - Modern UI framework with latest features
- TypeScript - Type safety and enhanced developer experience
- Material-UI (MUI) - Comprehensive React component library
- Vite - Fast build tool and development server
- @dnd-kit - Modern drag and drop toolkit for React
- React Dropzone - File upload with drag & drop support
- Linkify React - Automatic link detection and preview generation
- Local Storage - Client-side data persistence
- CSS-in-JS - Styled components with Material-UI's emotion-based styling
src/
├── components/
│ ├── AddNote.tsx # Enhanced note creation with media support
│ ├── DraggableCheckbox.tsx # Sortable checkbox component
│ ├── EditNoteModal.tsx # Full-screen note editing modal
│ ├── LinkPreview.tsx # URL link preview component
│ ├── Note.tsx # Individual note display component
│ ├── NoteDisplay.tsx # Note content rendering component
│ ├── NotesGrid.tsx # Grid/list layout with drag & drop
│ ├── SearchBar.tsx # Expandable search functionality
│ ├── Sidebar.tsx # Navigation and filtering sidebar
│ └── SortableNote.tsx # Drag & drop wrapper for notes
├── types/
│ └── Note.ts # TypeScript interfaces for notes, labels, history
├── utils/
│ ├── colorUtils.ts # Color scheme and theme utilities
│ ├── linkUtils.ts # URL detection and preview generation
│ └── localStorage.ts # Data persistence utilities
├── App.tsx # Main application with state management
├── index.css # Global styles and Material-UI theme
└── main.tsx # Application entry point
- Material-UI Components: Professional, accessible UI components
- Responsive Layout: Seamlessly adapts from mobile to desktop
- Dark/Light Theme Support: Consistent with system preferences
- Touch-Optimized: Gesture-friendly interface for mobile devices
- Real-time Auto-save: Never lose your work with instant persistence
- Offline Support: Full functionality without internet connection
- Fast Loading: Optimized bundle size and lazy loading
- Cross-browser Compatible: Works on all modern browsers
- Keyboard Navigation: Full keyboard support for all features
- Screen Reader Friendly: ARIA labels and semantic HTML
- High Contrast: Clear visual hierarchy and readable text
- Focus Management: Intuitive tab order and focus indicators
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
This project is open source and available under the MIT License.