Keep Sticky Notes is a sophisticated, feature-rich note-taking application that combines the simplicity of sticky notes with the power of modern web technologies. Inspired by Google Keep's elegant design philosophy, this application delivers a seamless experience for capturing, organizing, and managing your thoughts across all devices.
- 🎨 Beautiful Design - Google Keep-inspired interface with masonry layout
- 🌓 Theme System - Sophisticated dark/light mode with automatic color adaptation
- 🎨 11 Color Palettes - Each note can be customized with 11 beautiful color themes
- 📱 Fully Responsive - Optimized for desktop, tablet, and mobile devices
- ⚡ Lightning Fast - Built with React 19 and optimized performance
- 📝 Auto-Save - Automatic sessionStorage persistence for your notes
- ♿ Accessible - WCAG compliant with semantic HTML and ARIA labels
- 🔒 Privacy-First - All data stored locally in your browser
| Technology | Version | Purpose |
|---|---|---|
 |
19.2.0 |
Modern UI Framework with Hooks |
 |
7.1.0 |
Premium Icon Library |
 |
ES6+ |
Core Programming Language |
 |
Modern |
Advanced Styling & Theming System |
 |
2.0.2 |
Unique Note Identifiers |
 |
15.8.1 |
Runtime Type Validation |
 |
5.0.1 |
Build Configuration |
| Category | Score | Tools |
|---|---|---|
| 🎯 Performance | 100 | Google Lighthouse |
| ♿ Accessibility | 100 | WAVE, Lighthouse |
| 🎨 Best Practices | 100 | Lighthouse |
| 🔍 SEO | 100 | Lighthouse, SEMrush |
| 📱 PWA Ready | ✅ | manifest.json configured |
WAVE Accessibility Test: Zero errors, Zero contrast errors, Full WCAG 2.1 AA compliance:
|
|
|
|
- Node.js 16.0.0 or higher
- npm 7.0.0 or higher (or yarn equivalent)
- Modern web browser (Chrome, Firefox, Safari, Edge)# 1️⃣ Clone the repository
git clone https://github.com/damianczer/to-do.git
# 2️⃣ Navigate to project directory
cd to-do/application
# 3️⃣ Install dependencies
npm install
# 4️⃣ Start development server
npm start
# 🎉 Application will open at http://localhost:3000# Create optimized production build
npm run build
# Production files will be in the 'build' folder
# Deploy the entire build folder to your web hosting
# Optional: Preview production build locally
npx serve -s build -l 3000The application uses increased memory allocation for optimal development experience:
{
"scripts": {
"start": "set NODE_OPTIONS=--max-old-space-size=4096 && react-scripts start",
"build": "react-scripts build"
}
}keep-sticky-notes/
├── application/
│ ├── public/
│ │ ├── index.html # HTML template with comprehensive SEO
│ │ ├── manifest.json # PWA manifest for installability
│ │ ├── robots.txt # Search engine crawling rules
│ │ ├── sitemap.xml # SEO sitemap for indexing
│ │ └── favicon.ico # Application icon
│ │
│ ├── src/
│ │ ├── components/
│ │ │ ├── Task.js # Accessible note card (article, h2)
│ │ │ ├── TaskWrapper.js # Main container with state management
│ │ │ ├── NoteModal.js # Modal with focus trap & ARIA
│ │ │ ├── TopBar.js # Application header
│ │ │ ├── Footer.js # Social links & theme toggle
│ │ │ └── FloatingActionButton.js # Material Design FAB
│ │ │
│ │ ├── constants/
│ │ │ ├── index.js # App constants (colors, modes, keys)
│ │ │ └── exampleNotes.js # Default demo notes
│ │ │
│ │ ├── hooks/
│ │ │ └── useTheme.js # Cookie-based theme persistence
│ │ │
│ │ ├── utils/
│ │ │ └── storage.js # sessionStorage helpers
│ │ │
│ │ ├── styles/
│ │ │ ├── index.css # Main CSS orchestrator
│ │ │ ├── variables.css # CSS custom properties & tokens
│ │ │ ├── base.css # Reset, accessibility utilities
│ │ │ ├── layout.css # Grid, masonry, responsive
│ │ │ ├── note-card.css # Note styling & color themes
│ │ │ ├── modal.css # Modal animations & styles
│ │ │ ├── floating-action-button.css
│ │ │ └── footer.css # Footer layout (CSS Grid)
│ │ │
│ │ ├── App.js # Root component
│ │ └── index.js # React DOM rendering
│ │
│ ├── package.json # Dependencies & scripts
│ └── .gitignore
│
├── LICENSE # MIT License
└── README.md # This file
This application is built with accessibility as a core principle, achieving 100% WCAG 2.1 Level AA compliance.
- ✅ Skip Link - Jump to main content (visible on Tab focus)
- ✅ Full Keyboard Support - All interactive elements accessible via Tab/Shift+Tab
- ✅ Focus Indicators - Clear
:focus-visibleoutlines (3px solid blue) - ✅ Modal Focus Trap - Tab cycles within modal, Escape to close
- ✅ Return Focus - Focus returns to triggering element after modal close
- ✅ Semantic HTML -
<header>,<main>,<footer>,<article>,<nav> - ✅ Proper Heading Hierarchy -
<h1>→<h2>structure - ✅ ARIA Landmarks -
role="main",aria-labelledby,aria-modal - ✅ ARIA States -
aria-pressed,aria-expanded,aria-haspopup - ✅ Descriptive Labels - All buttons have
aria-labelattributes - ✅ Visually Hidden Labels - Form inputs have associated
<label>elements - ✅ Live Regions - Dynamic content updates announced
- ✅ Color Contrast - All text meets WCAG AA (4.5:1 minimum)
- ✅ Focus Indicators - 3px outlines with 2px offset
- ✅ No Color-Only Information - Icons + text labels
- ✅ Responsive Text - Scales with browser font size
- ✅ Theme Support - Light/dark modes for visual comfort
- ✅ Button Elements - All clickable items are
<button>(not<div onclick>) - ✅ Keyboard Handlers - Enter/Space activate buttons
- ✅ Touch Targets - Minimum 44×44px (WCAG 2.5.5)
- ✅ No Keyboard Traps - Users can navigate in/out freely
| Tool | Result | Details |
|---|---|---|
| WAVE | 0 errors | Zero accessibility errors detected |
| axe DevTools | 100% | All automated tests passed |
| Lighthouse | 100 | Perfect accessibility score |
| NVDA | ✅ Passed | Tested with screen reader |
| Keyboard Only | ✅ Passed | Full navigation without mouse |
- ✅ React.memo() - Prevent unnecessary re-renders (Task, NoteModal, FloatingActionButton, Footer)
- ✅ useCallback() - Memoized callback functions in TaskWrapper
- ✅ PropTypes - Runtime type validation for all components
- ✅ Virtual DOM - Efficient reconciliation and updates
- ✅ sessionStorage - Notes persist across page reloads
- ✅ Cookie-Based Theme - Theme preference cached (365 days)
- ✅ Browser Caching - Static assets cached by default
- ✅ Minification - JavaScript and CSS automatically minified in production
- ✅ Code Splitting - Automatic chunking (runtime, vendors, main)
- ✅ Tree Shaking - Unused code eliminated during build
- ✅ Asset Optimization - Images and static files optimized
Static files (after build):
- CSS: ~3.6 kB (gzipped)
- JS Runtime: ~1.2 kB (gzipped)
- JS Vendors: ~80 kB (gzipped)
- JS Main: ~3 kB (gzipped)
Total: ~88 kB (gzipped)
✅ Title: "Keep Sticky Notes - Simple & Elegant Note-Taking App"
✅ Description: Comprehensive 160-character description
✅ Keywords: 10+ relevant keywords
✅ Author: Damian Czerwiński
✅ Canonical URL: https://www.damianczerwinski.pl/keep-sticky-notes/
✅ Theme Color: #0d6efd
✅ Viewport: width=device-width, initial-scale=1, shrink-to-fit=no✅ og:type: website
✅ og:url: https://www.damianczerwinski.pl/keep-sticky-notes/
✅ og:title: Keep Sticky Notes - Simple & Elegant Note-Taking App
✅ og:description: Beautiful note-taking application...
✅ og:site_name: Keep Sticky Notes
✅ og:locale: en_US✅ twitter:card: summary_large_image
✅ twitter:title: Keep Sticky Notes...
✅ twitter:description: A beautiful note-taking application...
✅ twitter:creator: @damianczer{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "Keep Sticky Notes",
"description": "A simple and elegant note-taking application",
"url": "https://www.damianczerwinski.pl/keep-sticky-notes/",
"applicationCategory": "ProductivityApplication",
"operatingSystem": "Any",
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
"author": { "@type": "Person", "name": "Damian Czerwiński" }
}User-agent: *
Allow: /
Sitemap: https://www.damianczerwinski.pl/keep-sticky-notes/sitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.damianczerwinski.pl/keep-sticky-notes/</loc>
<lastmod>2025-10-30</lastmod>
<changefreq>monthly</changefreq>
<priority>1.0</priority>
</url>
</urlset>{
"short_name": "Keep Notes",
"name": "Keep Sticky Notes",
"description": "A simple and elegant note-taking app",
"icons": [{ "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16" }],
"start_url": ".",
"display": "standalone",
"theme_color": "#0d6efd",
"background_color": "#ffffff",
"categories": ["productivity", "utilities"],
"lang": "en-US"
}- ✅ DNS Prefetch -
<link rel="dns-prefetch" href="https://fonts.googleapis.com"> - ✅ Preconnect -
<link rel="preconnect" href="https://fonts.googleapis.com"> - ✅ Canonical URL - Prevents duplicate content issues
- ✅ Semantic HTML5 - Better crawling and indexing
- ✅ Responsive Images - Proper sizing and formats
| Command | Description | Use Case |
|---|---|---|
npm start |
Development server with hot reload | Active development |
npm run build |
Production-optimized build | Deployment preparation |
npm test |
Run test suite | Quality assurance |
npx serve -s build -l 3000 |
Preview production build | Pre-deployment testing |
| Browser | Version | Status |
|---|---|---|
| Chrome | Latest 3 versions | ✅ Fully Supported |
| Firefox | Latest 3 versions | ✅ Fully Supported |
| Safari | Latest 2 versions | ✅ Fully Supported |
| Edge | Latest 3 versions | ✅ Fully Supported |
| Mobile Safari | iOS 12+ | ✅ Fully Supported |
| Chrome Mobile | Android 8+ | ✅ Fully Supported |
Copyright © 2025 Damian Czerwiński
This project is copyrighted and proprietary software.
All rights reserved.
Unauthorized copying, modification, distribution, or use of this software,
via any medium, is strictly prohibited without explicit written permission
from the copyright holder.
For licensing inquiries or permission requests:
📧 Email: [email protected]
🌐 Web: https://www.damianczerwinski.pl
This is a proprietary project, but feedback and suggestions are welcome!
Found a bug? Open an issue
Have an idea? Request a feature
Like the project? ⭐ Star this repository!
Made with ❤️ and ☕ by Damian Czerwiński
Building beautiful, functional web experiences one component at a time