✨ Draggable Notes

A beautiful, interactive note-taking app with drag & drop functionality, dark mode, and smooth animations!

Demo • Installation • Usage • Tech Stack

📸 Screenshots

Light Mode

Dark Mode

✨ Features

🎯 Drag & Drop - Freely move notes anywhere on the canvas
🌓 Dark Mode - Toggle between light and dark themes
💾 Local Storage - All notes persist across sessions
🚫 Collision Detection - Notes automatically avoid overlapping
🎨 Animated Bubbles - Beautiful floating background animations
📌 Pin Icon - Auto-added to every note
❌ Easy Delete - Remove notes with a single click
⚡ Smooth Animations - Gorgeous transitions and hover effects
📱 Responsive Design - Works on all screen sizes

🚀 Installation

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Steps

1. Clone the repository

git clone https://github.com/akashasahu07/draggable-notes.git
cd draggable-notes

2. Install dependencies

npm install

3. Start the development server

npm start

4. Open your browser

http://localhost:3000

💻 Usage

1. Add a Note: Type in the input box and click "Add Note" or press Enter
2. Drag Notes: Click and hold any note to drag it around
3. Delete Notes: Click the ❌ button on any note to remove it
4. Toggle Dark Mode: Click the 🌙/☀️ button in the top right
5. Auto-Save: All changes are automatically saved to localStorage

🛠️ Tech Stack

Languages & Frameworks

Libraries & Tools

📂 Project Structure

draggable-notes/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.js          # Main component
│   ├── App.css         # Styles
│   ├── index.js        # Entry point
│   └── index.css       # Global styles
├── package.json
└── README.md

🎨 Key Features Explained

Drag & Drop Implementation

• Uses onMouseDown, onMouseMove, and onMouseUp events
• Calculates offset to maintain grip point
• Bounds checking to keep notes within container

Collision Detection

• Calculates bounding rectangles for each note
• Checks for overlaps with padding
• Automatically repositions overlapping notes

Dark Mode

• Toggle state saved in localStorage
• Smooth CSS transitions between themes
• Dynamic class switching

Local Storage

• Auto-saves notes on every change
• Loads saved notes on app mount
• Persists dark mode preference

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a new branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Your Name

🌟 Show Your Support

Give a ⭐️ if you like this project!

📞 Contact

Have questions or suggestions? Feel free to reach out!

📧 Email: akashasahu2001@gmail.com 📱 Instagram: @flashcode07

Made with ❤️ and React

🎯 Roadmap

• Add note colors customization
• Implement search functionality
• Add export/import notes feature
• Add rich text editor
• Implement categories/tags
• Add cloud sync feature
• Mobile app version

📊 Stats

---

💖 Thank you for checking out this project!

If you found this helpful, please consider:

• ⭐ Starring the repository
• 🍴 Forking the project
• 📢 Sharing it with others
• 🐛 Reporting bugs
• 💡 Suggesting new features

Happy Coding! 🚀