A simple and interactive web application for creating, managing, and customizing digital sticky notes. Built with modern web technologies, this app allows users to quickly jot down thoughts, reminders, and tasks with an intuitive interface.
- Create Notes: Easily add new sticky notes with a dedicated "Add" button (Plus icon).
- Edit Notes: Click on any note to edit its content.
- Autosave: Notes are automatically saved 2 seconds after you stop typing, preventing excessive save operations while ensuring your work isn't lost.
- Delete Notes: Remove notes you no longer need with a dedicated delete button (Trash icon) on each note.
- Color Customization: Personalize your notes by choosing from a palette of available colors via the note controls.
- Active Note Prioritization: Selected or currently modified notes are automatically brought to the front (z-index management) for better visibility and focus.
- Centralized State Management: Utilizes React Context API for efficient state management and easier access to note data across components.
- Component-Based Architecture: Built with reusable React components for better maintainability and scalability.
- Frontend:
- React.js
- React Context API (for state management)
- JavaScript (ES6+)
- HTML5
- CSS3
- Build Tool / Development Environment:
- Vite
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
- Node.js (v14.x or higher recommended)
- npm or yarn
-
Clone the repository:
git clone https://github.com/BirtukanDegu/StickyNote.git cd StickyNote -
Install dependencies: Using npm:
npm install
Or using yarn:
yarn install
-
Run the development server: Using npm:
npm run dev
Or using yarn:
yarn dev
This will usually open the app in your default browser (often at
http://localhost:5173or the next available port). Check your terminal for the exact address. -
Build for production: Using npm:
npm run build
Or using yarn:
yarn build
This will create a
distfolder with the production-ready assets.