A modern, feature-rich notes application built with React, featuring rich text editing, image support, dark mode, and smooth animations. Perfect for organizing your thoughts, ideas, and tasks with a beautiful, responsive interface.
- React Quill powered rich text editor
- Full formatting support: headers, lists, links, colors, fonts
- Code blocks and blockquote support
- Table creation and advanced formatting
- Drag & drop or click to add images
- Automatic image compression and optimization
- Support for JPEG, PNG, GIF, and WebP formats
- Smart resizing for large images (max 2048px dimension)
- No file size limits - images are optimized automatically
- Categories: Personal, Work, Ideas, Todo, Archive
- Color Coding: 6 beautiful color themes for notes
- Pin Important Notes: Keep important notes at the top
- Search & Filter: Find notes instantly with powerful search
- Sorting: Sort by date or title
- Loading Screen: Beautiful animated loading experience on app start
- Dark Mode: Beautiful dark theme with smooth transitions
- Responsive Design: Works perfectly on desktop, tablet, and mobile
- Smooth Animations: Polished transitions and micro-interactions
- URL Routing: Shareable links for individual notes
- Local Storage: Your notes are saved locally and persist
- Installable: Add to home screen on mobile devices
- Offline Ready: Works without internet connection
- Native App Feel: Standalone experience with app-like interface
- Fast Loading: Optimized for quick startup times
- Fast Performance: Built with Vite for lightning-fast development
- Modern Stack: React 18, Tailwind CSS, Lucide Icons
- TypeScript Ready: Proper type definitions included
- ESLint: Code quality and consistency
- Hot Reload: Instant updates during development
- Node.js (v16 or higher)
- npm or yarn
-
Clone the repository
git clone https://github.com/yourusername/notes-app.git cd notes-app -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser
http://localhost:9000
To enable Progressive Web App features:
-
Generate App Icons
# Convert SVG icons to PNG (requires ImageMagick or similar) # Place icon-192.png and icon-512.png in the public/ folder
-
Test PWA Features
- Open DevTools → Application → Manifest
- Check "Add to Home Screen" functionality on mobile
# Create optimized production build
npm run build
# Preview the production build
npm run preview- React 18 - Modern React with concurrent features
- Vite - Fast build tool and development server
- Tailwind CSS - Utility-first CSS framework
- Lucide React - Beautiful, consistent icons
- Custom CSS - Smooth animations and transitions
- React Quill - Powerful rich text editor
- Quill - Core editor library
- ESLint - Code linting and quality
- TypeScript - Type definitions for better DX
Edit the CATEGORIES array in src/App.jsx:
const CATEGORIES = ["Personal", "Work", "Ideas", "Todo", "Archive", "Custom"];Extend the COLORS array in src/App.jsx:
const COLORS = [
// existing colors...
{
name: "Custom",
bg: "bg-custom-100",
border: "border-custom-300",
dot: "bg-custom-500",
text: "text-custom-600"
}
];Modify src/animations.css to adjust animation timings and effects:
.animate-fade-in-up {
animation: fadeInUp 0.5s ease-out forwards; /* Adjust duration */
}The app runs on port 9000 by default. To change this, edit vite.config.js:
export default defineConfig({
plugins: [react(), tailwindcss()],
server: {
port: 3000 // Change port here
}
})Image compression settings can be modified in src/imageHandler.js:
const MAX_DIMENSION = 2048; // Maximum image dimension
const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];- Click the "Create" button
- Add a title and select a category
- Choose a color theme
- Write your content using the rich text editor
- Add images using the image button in the toolbar
- Click "Save" to store your note
- Pin Notes: Click the pin icon to keep notes at the top
- Search: Use the search bar to find notes by title or content
- Filter: Click category buttons to filter notes
- Sort: Choose between recent or alphabetical sorting
- View: Click on a note card to view in full screen
- Edit: Click the title or "Edit" button to modify notes
- Duplicate: Create copies of existing notes
- Delete: Remove notes with confirmation
Enterin title field: Save note (when editing)Ctrl/Cmd + S: Save note (when editing)
- Lazy loading and code splitting
- Efficient image compression
- Optimized bundle size
- Fast cold start times
- Modern, clean interface
- Consistent design language
- Smooth micro-interactions
- Accessible color schemes
- Automatic saving to localStorage
- No data loss on refresh
- Export/import capabilities (future feature)
- Cross-device sync ready (future feature)
- All data stored locally
- No external API calls
- No user tracking
- Complete privacy control
We welcome contributions! Please follow these steps:
- 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
- Follow the existing code style
- Add tests for new features
- Update documentation
- Ensure responsive design
- Test on multiple browsers
This project is licensed under the GPL License - see the LICENSE file for details.
- React Quill for the excellent rich text editor
- Tailwind CSS for the utility-first styling approach
- Lucide for the beautiful icon set
- Vite for the blazing fast development experience
If you have any questions or need help:
- Open an issue on GitHub
- Check the documentation
- Join our community discussions
Made with ❤️ using React & Vite