Skip to content

Sticky Notes Desktop App is a cross-platform Electron app built with HTML, CSS, and JavaScript. It features draggable, resizable notes in multiple shapes, editable content, color pickers, and motivational quotes. Notes are stored with localStorage, ensuring persistence and a paper-like user experience in a minimalist, interactive interface.

Notifications You must be signed in to change notification settings

Pusplatasingh/Sticky-Notes

Repository files navigation

🗒️ Sticky Notes Desktop App

A lightweight and visually engaging cross-platform desktop application that mimics real-life sticky notes. Built using HTML, CSS, and JavaScript, and packaged with Electron, this app allows users to create, drag, edit, color, and manage sticky notes with motivational quotes and shape customizations.

✨ Features

  • 📝 Add unlimited sticky notes
  • 🎨 Choose note shapes: rectangle, circle, cloud, blob
  • 🖍️ Pick custom background colors
  • 💡 Each note shows a random motivational quote
  • ✏️ Edit and save notes in-place
  • 🗑️ Delete individual notes or clear all at once
  • 📦 Data saved using localStorage for persistence
  • 🖱️ Drag notes anywhere inside the container
  • 🧠 Lightweight, minimal, and productivity-focused
  • ⚡ Packaged as a cross-platform Electron desktop app

📸 Preview

Sticky Notes App Screenshot

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/Pusplatasingh/Sticky-Notes.git
cd Sticky-Notes

2. Install Dependencies

Make sure Node.js is installed.

npm install

3. Run the App

npm start

4. Build Desktop Package (Optional)

npm run package

📁 Project Structure

Sticky-Notes/
│
├── index.html         # Main HTML file
├── style.css          # App styling
├── script.js          # Notes logic and UI interaction
├── preload.js         # Electron preload script
├── index.js           # Electron main process
├── package.json       # App metadata and dependencies
├── .gitignore         # Ignore node_modules and other unnecessary files
└── README.md          # Project documentation

📚 Tech Stack

  • HTML5
  • CSS3
  • JavaScript (Vanilla)
  • Electron.js
  • LocalStorage (for note persistence)

📌 Topics

Electron, Desktop App, JavaScript, HTML, CSS, Sticky Notes, Draggable UI, LocalStorage, Frontend Project, Motivation App, UI/UX, DOM Manipulation, Note Taking, Productivity Tool, Cross-Platform App

🤖 AI Assistance

Some parts of this project were built with assistance from AI tools like ChatGPT to enhance features and optimize performance.

🙋‍♀️ Author

Pusplata Singh 🔗 GitHub Profile

📝 License

This project is licensed under the MIT License.

About

Sticky Notes Desktop App is a cross-platform Electron app built with HTML, CSS, and JavaScript. It features draggable, resizable notes in multiple shapes, editable content, color pickers, and motivational quotes. Notes are stored with localStorage, ensuring persistence and a paper-like user experience in a minimalist, interactive interface.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published