SnippetVault

Hi guys, since the last devlog I focused on polishing the browser extension and finishing a bunch of backend features so your captures actually behave like a proper cloud-first snippet manager.

Highlights

• Browser extension: save any selected text from any page, quick-access floating toolbar + right‑click context menu, automatic language detection, and silent token refresh so sessions don’t randomly die. Download from the releases page. ✅
• Backend & sync: conflict-safe sync flow + conflict metadata, snippet versioning (create/list/restore), and snippet sharing with expiring tokens.
• Device & auth: per-device refresh token support and device fingerprinting for better session control.
• VS Code extension: full sidebar + detail view (copy/insert/search), login commands, and auto-sync settings (snippetvault.autoSync, snippetvault.syncInterval).
  Welcome to SnippetVault v1.2!

Hi guys, since the last devlog I’ve been developing the browser extension that allows you to save any selected text on any webpage that will be then synced to your account’s Vault once you log in. You can download the extension by navigating to the releases page and follow the instructions.
The extension also allows you to have a quick access to SnippetVault and save your snippets to a specific folder.
Last but not least, I’ve worked on a few UI tweaks that I completely missed before, such as:

• Long descriptions that caused the app to error or overflow the snippet card -> Warn the user, then truncate to 100 characters
• The “+ New snippet” button on some screens was floating in the middle of nowhere -> Remove horizontal alignment from the search bar row
• Some scrollbars were overlapping -> Removed them
  For now, I think it’s everything, lemme know what you think. 👀
  Stay tuned for code editor extensions…

I haven’t edited any code since the last devlog except some configuration files for deployment. Currently I’m hosting SnippetVault on my VPS, I don’t have any domain or SSL certificate for now, but I’m proud to introduce you to SnippetVault v1.1. Wish me luck and stay tuned!

So… short status update from the trenches. Auth is done enough to be dangerous: NestJS + JWTs, email verification, sign-in, the whole Postman-grind until the happy path behaved. Then I opened the door to being nice to users and immediately stepped into Hybrid Storage hell.
Guests live in localStorage and it’s instant, offline, zero friction. But the moment someone signs up the app has to act like a translator between a fast local cache and a MySQL-backed source-of-truth. That turned a simple snippets app into a small distributed-data problem.

What I changed, and why it hurt a little:

• Sync model: I added a local operation queue, optimistic updates, timestamps/versioning, and server-side conflict detection so offline edits don’t vanish or silently overwrite newer data.
• Pause-and-resume: If the JWT expires mid-sync, the sync loop now pauses, persists the queue, and won’t retry destructive operations until re-auth. That prevented partial clobbers and saved my sanity.
• Initial Sync heuristics: when a user converts from Guest → Authenticated I added heuristics: push if server empty, attempt diff+merge if both sides have history, and surface ambiguous conflicts to the UI instead of guessing. I also added a lightweight version-vector / lastModified strategy so merges stay deterministic.
• UX for conflicts & migration: I built dialogs to handle per-snippet conflicts and migration previews so users can choose keep-local / keep-cloud / merge rather than being surprised.
• Mobile Navigation
• User settings and account management
  That’s all for now… Enjoy SnippetVault v1.1!

So… as I said in the last devlog, I’ve been creating an entire authentication system from scratch by setting up a nestjs backend with jwt tokens to encrypt session data. After building the basic user authentication flow (Sign Up -> Email verification -> Sign In), I tested it using Postman and after some iterations I managed to get it to work as I expected. But the problems hadn’t even started yet…The real challenge began when I tried to implement what I call “Hybrid Storage.” I didn’t want to force users to create an account just to try the app, but I also wanted power users to have their snippets synced across devices.

My logic became a bit of a branching tree:

• The Guest: If there’s no JWT, useSnippets() talks exclusively to localStorage. Simple, fast, offline.
• The Authenticated User: This is where the “pain” lives. I’m using localStorage as a high-speed cache for offline changes, while the NestJS backend acts as the source of truth.

The headache isn’t just the API calls; it’s the Synchronization. I had to figure out: When does the local data “graduate” to the cloud? If I’m offline and I edit a snippet, I save it to localStorage. But the moment the connection returns (or the user logs in), I have to trigger a sync event that pushes those local changes to my MySQL database without overwriting newer data.

Managing the state between the NestJS JWT guards and the React state has been a balancing act. If the token expires while I’m mid-sync, I have to catch that error, pause the sync, and keep the data safe in localStorage until the user re-authenticates. It’s no longer just a “Code Snippet” app; it’s a data-consistency project.I’m currently wrestling with the “Initial Sync” logic, that moment a user signs up and I have to decide whether to push their existing local snippets to the cloud or fetch what’s already there.

Soooooo… Since the last devlog I’ve been thinking on how to sync your snippets through cloud and dividing each user’s snippets through authentication (I’m also working on a browser extension that allows you to create a new code snippet by selecting text on a page). The thing is that I never worked on authentication and authorization. Probably the best way to learn how those work is by creating a project that forces you to learn them. In the end, I’m here to learn, so here’s what I’ve been up to:

• Frontend (Web Page/Extension) -> Just login/signup interface + Snippet Data collection
• Backend (NestJS + MySQL) -> Gets the data from the frontend, stores it and manages it
  Wish me luck as I’m trying to learn NestJS, MySQL, JWT and session management all at the same time. I’ll be here documenting all the pain along the way.

First question after the first log: “How do I keep every component in sync without prop drilling?” I hit a state-staleness bug: edits and creates updated local state but didn’t reflect across components. The fix was to lift the hook into a single source of truth—SnippetsContext—so useSnippets became a shared provider (SnippetsContext.tsx). Problem solved: list, editor and form now see the same data instantly.

Then I improved UX: replaced textarea with Monaco in the form (SnippetForm) so creation/editing gets full syntax highlighting; added in-place editing in SnippetEditor (toggle to switch read-only → edit). I also wired the form to return the saved snippet ID so the parent can auto-select it after create/update.

Filtering & search became richer with a useSnippetFilters layer: query, tags, language, favorites and sorting. SnippetList now renders filtered results and shows proper empty/loading states.

Finally: import/export JSON, keyboard shortcuts, sonner toasts for feedback, and robust localStorage utilities for persistence. From hook to context to full Monaco-powered editor—snippets feel instantaneous and polished. What’s next? Export presets or cloud sync?

First of all, the first question that came up to my mind when I started this project was: “What is a code snippet?”. To me, it was a block of highly reusable code, easy to maintain and scale, that I use frequently. Where should I save it without using a database? Easy, browser’s local storarge. So I started by defining the schema of a snippet and the hook that I would be using for the next hour to create, update, save and delete snippets: useSnippets()
Then it was the time to develop the UI, quick shadcn components, Monaco Editor to edit and visualize the code properly, a form to create/edit snippets and that’s it. Or is it?