📝 Stick Your Notes

A beautiful, interactive sticky notes web app with drag-and-drop functionality, customizable backgrounds, and persistent storage. Perfect for organizing your thoughts, tasks, and ideas!

🌐 Live Demo: stickyournotes.com

✨ Features

📌 Sticky Notes

• Create & Customize: Add colorful sticky notes in 5 different colors
• Drag & Drop: Move notes anywhere on the board with smooth animations
• Editable Content: Click to edit note content with a handwriting-style font
• Titles: Double-click the header to add custom titles to your notes
• Stacking: Click any note to bring it to the front
• Subtle Wiggle: Notes wiggle when dragged for a playful touch
• Delete: Remove notes with the X button

🎨 Stickers

• 12 Emoji Stickers: Express yourself with emojis
  • General: 👍 ❤️ 🔥 🎉 🚀 🐛 ✅
  • Work-Related: ⚠️ 📌 💡 ⏰ 📝
• Drag & Drop: Place stickers anywhere
• Delete Animation: Double-click stickers for a fun "poof" animation

🎭 Backgrounds

Choose from 6 unique backgrounds:

• Wood: Classic wooden desk texture
• Blank: Clean, minimal white
• Cork: Traditional cork board
• Grid: Graph paper for organized notes
• Dots: Playful pink polka dots
• Retro: Animated gradient with vibrant colors

🌙 Dark Mode

Toggle between light and dark themes with a smooth animated switch

💾 Persistence

All your notes, stickers, settings, and preferences are automatically saved to local storage

📱 Responsive Design

Works seamlessly across different screen sizes

🛠️ Tech Stack

• React 18 - UI framework
• Vite 4 - Build tool and dev server
• react-draggable - Drag and drop functionality
• lucide-react - Beautiful icons
• uuid - Unique ID generation
• CSS3 - Custom animations and styling
• Google Fonts - Indie Flower (handwriting) & Montserrat

🚀 Getting Started

Prerequisites

• Node.js 16.10.0 or higher
• npm or yarn

Installation

1. Clone the repository

git clone https://github.com/eddyalder/stickyournotes.git
cd stickyournotes

2. Install dependencies

npm install

3. Start the development server

npm run dev

4. Open your browser and navigate to http://localhost:5173

Build for Production

npm run build

The built files will be in the dist directory.

📖 Usage

Creating Notes

1. Click any color button in the "Add Note" section
2. A new sticky note will appear at a random position
3. Click the note to edit its content
4. Double-click the header to add a title

Adding Stickers

1. Click any emoji in the "Stickers" section
2. The sticker will appear at a random position
3. Drag it to your desired location
4. Double-click to remove with a fun animation

Changing Backgrounds

1. Click any background option in the "Background" section
2. The active background is highlighted in blue
3. Enjoy smooth transitions between backgrounds

Dark Mode

Click the theme toggle switch to enable/disable dark mode

Organizing Your Board

• Drag: Click and drag notes or stickers to reposition them
• Stack: Click any item to bring it to the front
• Delete: Use the X button on notes or double-click stickers

🎨 Customization

The app uses CSS custom properties and modular components, making it easy to customize:

• Colors: Modify the color palette in Controls.jsx
• Backgrounds: Add new backgrounds in index.css
• Fonts: Change fonts in the Google Fonts import
• Animations: Adjust animation timings in index.css

🤝 Contributing

Contributions are welcome! Feel free to:

• Report bugs
• Suggest new features
• Submit pull requests

👨‍💻 Author

Eddy Alder

• GitHub: @eddyalder
• Email: edwardalder011@gmail.com
• Portfolio

🙏 Acknowledgments

• Built with React and Vite
• Icons by Lucide
• Fonts by Google Fonts
• Inspired by the classic sticky note experience

---

Made with ❤️ for better note-taking