📚 Bookmark Manager (LocalStorage)

Pure HTML + CSS + JavaScript দিয়ে বানানো রেসপনসিভ বুকমার্ক ম্যানেজার।
লগইন/রেজিস্টার, লাইট/ডার্ক থিম, ট্যাগ ফিল্টার, সার্চ, সোর্টিং, পিন/আর্কাইভ—সবকিছুই localStorage এ সেভ হয় (ব্যাকএন্ড ছাড়াই)।

🔗 Live: https://devrejaul.github.io/bookmark-manager-localstorage/

---

✨ ফিচার লিস্ট

• ✅ Login / Register (localStorage-এ সেভ)
• ✅ + Add Bookmark (Title, URL, Description, Tags)
• ✅ Edit / Archive / Unarchive
• ✅ Pin / Unpin (পিন করা আইটেম শীর্ষে)
• ✅ Tag ভিত্তিক ফিল্টার (checkbox + count)
• ✅ Search by title (লাইভ ফিল্টার)
• ✅ Sort by: Recently added / Recently visited / Most visited
• ✅ 3-dot (⋮) মেনু: Visit • Copy URL • Pin/Unpin • Edit • Archive
• ✅ Light / Dark Theme (প্রোফাইল মেনু থেকে)
• ✅ Responsive layout (মোবাইল-ফ্রেন্ডলি)
• ✅ সব ডেটা ব্রাউজারের localStorage এ সংরক্ষিত

---

🖼️ প্রিভিউ

এখানে একটা স্ক্রিনশট যোগ করলে সুন্দর দেখাবে
screenshot.png নামে ফাইল আপলোড করে নিচের লাইনটা আনকমেন্ট করে দাও।

---

🗂️ ফোল্ডার স্ট্রাকচার

bookmark-manager-localstorage/ ├── index.html # UI skeleton (sidebar, header, grid, modals) ├── style.css # থিম, লেআউট, কার্ড, dropdown ইত্যাদির স্টাইল ├── app.js # সব লজিক (auth, CRUD, filter, sort, 3-dot menu) └── README.md

---

⚙️ লোকালভাবে চালাতে চাইলে-

1. এই রিপোটি ডাউনলোড/ক্লোন করো
2. ফোল্ডারের ভেতরের index.html ফাইলটা ব্রাউজারে ওপেন করো
   (কোনো সার্ভার লাগবে না; সব localStorage-এ)

---

🧭 কীভাবে ব্যবহার করবেন (Step by step)

1) লগইন/রেজিস্টার

• ডানপাশের Login বাটনে ক্লিক → “Create new account”
• Name, Email, Password (ঐচ্ছিক Photo URL) দিন → Register
• সফল হলে আপনার প্রোফাইল দিয়ে লগইন হয়ে যাবে

2) বুকমার্ক যোগ করা

• উপরের ডানদিকে + Add Bookmark → ফর্ম পূরণ করুন
• Tags কমা দিয়ে লিখুন: html, css, js
• Save চাপুন → নতুন কার্ড গ্রিডে দেখাবে

3) কার্ড মেনু (⋮) দিয়ে অ্যাকশন

• কার্ডের ডানদিকে ⋮ এ ক্লিক করলে মেনু খুলবে:
  • Visit — নতুন ট্যাবে লিঙ্ক ওপেন (view count বৃদ্ধি, last visited সেভ)
  • Copy URL — লিংক কপি
  • Pin / Unpin — গুরুত্বপূর্ণ হলে পিন করুন (শীর্ষে থাকবে)
  • Edit — তথ্য আপডেট
  • Archive / Unarchive — আর্কাইভে পাঠানো/ফিরিয়ে আনা

4) ফিল্টার, সার্চ ও সোর্ট

• Sidebar → Tags: চেকবক্সে এক বা একাধিক ট্যাগ সিলেক্ট করুন (count দেখাবে)
  Reset filters দিয়ে ফিল্টার ক্লিয়ার করা যায়
• Search বক্সে টাইপ করলে টাইটেল অনুযায়ী লাইভ ফিল্টার হয়
• All bookmarks → Sort by:
  • Recently added (নতুন যোগ)
  • Recently visited (সর্বশেষ ভিজিট)
  • Most visited (সর্বাধিক ভিউ)

5) থিম পরিবর্তন

• ডানপাশের প্রোফাইল(dropdown) → Theme সুইচ → Light/Dark
• পছন্দটি localStorage-এ সেভ থাকে

---

💾 ডেটা কোথায় থাকে?

সব users, current user, এবং bookmarks—এই রিপোতে নয়, আপনার ব্রাউজারের localStorage এ স্টোর হয়।
প্রতিটি ইউজারের জন্য আলাদা কী ব্যবহার করা হয়:

• bm:users – সকল ইউজারের লিস্ট
• bm:current – বর্তমানে লগইন করা ইমেইল
• bm:items:<email> – ঐ ইউজারের বুকমার্কগুলোর লিস্ট
• bm:theme – Light/Dark

ব্রাউজার/ডিভাইস বদলালে ডেটা সাথে যাবে না—কারণ সব লোকাল।

---

🚀 GitHub Pages (লাইভ হোস্ট)

এই সাইটটি GitHub Pages দিয়ে লাইভ:
https://devrejaul.github.io/bookmark-manager-localstorage/

আপনিও যদি সেটআপ করতে চান:

1. Settings → Pages
2. Source: Deploy from a branch
3. Branch: main • Folder: / (root)
4. Save → ১–২ মিনিট অপেক্ষা করুন → “Your site is live” লিংক দেখাবে

---

❓সাধারণ প্রশ্ন

Q: 3-dot আইকন না দেখালে?
A: Font Awesome লোড না থাকলে Unicode ⋮ fallback কাজ করে। তবু না হলে ব্রাউজার হার্ড-রিফ্রেশ করুন।

Q: ডেটা মুছতে চাইলে?
A: ব্রাউজারের DevTools → Application → Local Storage থেকে bm:* কীগুলি ক্লিয়ার করুন, বা Logout করে নতুন ইউজার তৈরি করুন।

Q: ব্যাকএন্ড লাগবে?
A: না। পুরো অ্যাপটি localStorage ভিত্তিক—pure HTML/CSS/JS।

---

🧑‍💻 টেক স্ট্যাক

• HTML5
• CSS3 (Flexbox + Grid)
• Vanilla JavaScript (ES6)
• LocalStorage API
• GitHub Pages (Hosting)

---

📝 লাইসেন্স

শেখা ও ব্যক্তিগত কাজে ব্যবহার করতে সম্পূর্ণ ফ্রি। কাস্টমাইজ করে নিতে পারেন—ক্রেডিট দিলে খুশি হবো 💚

---

👤 Author

Rejaul Karim
GitHub: https://github.com/devrejaul

⭐ যদি প্রজেক্টটি ভালো লাগে, একটি স্টার দিতে ভুলবেন না!