Skip to content

[FEATURE]: Zero-Auth Offline Roadmap Bookmarking System via LocalStorage API #462

@shivani11jadhav

Description

@shivani11jadhav

🧩 Problem Description

Right now, DevPath has a wonderful "no-nonsense, direct learning" philosophy where students can browse roadmaps instantly without creating an account. But there's a practical catch—if a student filters through projects and finds the perfect guide or roadmap, they can't save it. The moment they close the browser tab or refresh, their selection disappears, and they have to re-filter everything from scratch the next time they visit.

🧠 Proposed Feature / Solution

To maintain the zero-auth, instant-access ecosystem of DevPath, we can build a lightweight Offline Bookmarking System that saves favorite roadmaps locally using the browser's native localStorage API.

My Core Implementation Strategy:

  1. Interactive UI Trigger: Add a subtle, clean Bookmark icon (using Lucide React icons) directly on the roadmap grid cards or sub-page headers.
  2. Local Sync State: Create a reactive custom hook or state layer to read/write a JSON array (like devpath_saved_roadmaps) into the browser's storage safely.
  3. Sliding Drawer/Menu: Build a sleek, retractable drawer component that lists all bookmarked roadmaps with a single-click remove action.
  4. Next.js Hydration Guard: Wrap the loading logic cleanly within a useEffect layout block to prevent Next.js SSR (Server-Side Rendering) mismatch flashes or compilation crashes.

🎬 Expected Behavior

  • Clicking the bookmark icon instantly toggles its state (from outline to filled) and triggers a fast, non-intrusive notification ("Saved to your bookmarks! 💾").
  • Saved items stay intact across sessions and can be accessed seamlessly anytime via the floating drawer menu.
  • The UI will be 100% fluid and responsive on both desktop grid viewports and mobile layouts.

Please assign this to me under GSSoC 2026!

Metadata

Metadata

Labels

gssoc26This is a official GirlScript Summer of Code label.level:intermediateIntermediate level issuestype:feature

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions