A dynamic and responsive notes management application built using React JS, TailwindCSS, and localStorage. This app allows users to create, view, organize, and manage notes with features like tagging, filtering, pinning, archiving, and trash recovery — all with local data persistence.
📄 Notes Creation & Listing
-
Create notes with title and description.
-
All notes displayed in a clean card-based layout.
-
Click on a note to expand and view full details in a modal or expanded view.
🔍 Search & Filter
-
Real-time search bar for filtering notes by title or content.
-
Add custom tags to notes.
-
Filter notes by specific tags to stay organized.
📌 Pin, Archive & Trash
-
Pin important notes to keep them at the top.
-
Archive notes instead of deleting — great for decluttering without losing data.
-
Trash section to manage deleted notes:
-
Restore accidentally deleted notes.
-
Permanently delete when you're sure.
-
👤 User Interactions
-
✅ Create, edit, and delete notes.
-
🔎 Search by keyword.
-
🏷️ Filter by tags.
-
📌 Pin notes for priority.
-
🗄️ Archive for later.
-
🗑️ Move to trash, restore, or delete permanently.
| Technology | Purpose |
|---|---|
| React JS | Frontend framework |
| TailwindCSS | Utility-first CSS styling |
| localStorage | Client-side data persistence |
| React Router DOM | For route management (multi-page layout) |
-
✅ All Notes – View all active notes (Home Page).
-
📌 Pinned – Only pinned notes.
-
🗄️ Archived – Archived notes (not deleted).
-
🗑️ Trash – View and restore or permanently delete trashed notes.
-
🎨 Theme support (dark/light mode)
-
🔐 Authentication (e.g., Firebase Auth)
-
☁️ Cloud storage sync (optional backend)
-
📱 PWA support for offline usage
-
🗂️ Drag and drop note reordering
-
Built using TailwindCSS.
-
Fully responsive and mobile-friendly.
-
Customize colors, spacing, and layout via tailwind.config.js.
-
Developed by: Vignesh R
-
GitHub: @VigneshRav
-
Email: vignesh212000@gmail.com