How I built a Local-first, Zero-Server Note-taking App with Next.js and Google Drive API

Luan Hang — Wed, 22 Apr 2026 08:01:53 +0000

Most note-taking apps today have a "privacy tax." You either give your data to their servers or pay a hefty subscription to keep it private. I wanted something different: A professional workspace where I own the data, and the performance is instant.

That’s why I built OwnSync Note. Here is the technical breakdown of how I made it happen.

The Architecture: Local-First is the Future ⚡
To achieve sub-second load times and offline support, I went with a Local-first architecture.

Persistence: I used IndexedDB to store notes directly in the browser. This ensures that even with thousands of notes, the UI remains snappy.
Sync Engine: Instead of building a custom backend (and becoming another "data landlord"), I leveraged the Google Drive API. The app syncs .json files directly from the browser to the user's personal drive.
Conflict Resolution: One of the biggest challenges was handling sync conflicts. I implemented a version-checking logic that prompts users when a remote change is detected, ensuring no data loss.

The Tech Stack 🛠️

Framework: Next.js (App Router) for the core structure.
Styling: Tailwind CSS for that clean, 3-column professional UI.
Editor: A custom WYSIWYG Markdown editor with native JSON auto-formatting (a lifesaver for devs!).
Deployment: Vercel (with a heavy focus on security and rotated API keys).

Key Features for Developers
Beyond privacy, I added things that I personally needed as a developer:

JSON Auto-formatting: Just paste a minified JSON, and it beautifies instantly.
3-Column Layout: Efficient navigation inspired by classic IDEs.
PWA Support: It feels like a native desktop app but stays lightweight.

Why go "Zero-Server"? 🛡️
By removing the middleman (the database), I removed the risk. If my app goes down, your notes are still in your Google Drive. If you want to switch apps, your notes are already standard Markdown files. No lock-in, ever.

Wrapping Up
Building OwnSync Note taught me that we don't always need complex backends to create powerful tools. Sometimes, empowering the user to own their infrastructure is the best feature you can build.

I’d love to hear your thoughts on the architecture or any features you'd like to see!

👉 Check it out: https://ownsyncnote.com
👉 Follow the journey on X: @OwnSyncNote

productivity #webdev #nextjs #javascript #buildinpublic

TurboUtil: A Free, Offline-First Collection of Dev Tools That Run Entirely in Your Browser

Luan Hang — Tue, 24 Feb 2026 03:25:01 +0000

Hey dev community! 👋
If you're tired of online tools that:

Require uploading your sensitive JSON/JWT/data to some random server
Track you with ads or analytics
Break when you're offline (airplane mode, spotty Wi-Fi, remote work)

...then I built something for you.
I created TurboUtil — a completely free, browser-based suite of developer utilities. Everything runs client-side in your browser — no data leaves your device, no servers involved, no sign-up, no limits.
Why I Built This
As a developer, I use JSON formatters, JWT decoders, regex testers, and ID generators daily. But most popular tools (jwt.io, jsonformatter.org, etc.) send your payload to their servers. Privacy concerns + occasional offline needs pushed me to create an alternative that's fast, secure, and always available.
TurboUtil is 100% offline-capable (after the initial page load) and privacy-first by design.
Core Features

Zero server roundtrips → Instant results, no latency
Privacy guaranteed → Your JSON, tokens, regex patterns — never uploaded
Free forever, no ads, no accounts
Mobile-friendly and works offline
30+ tools across categories: JSON/Data, Encoding, Time/Date, Code Generation, DevOps, etc.

Popular Tools Right Now
Here are some highlights (all live and ready to use):

JSON Formatter & Validator
Beautify, minify, validate JSON with syntax highlighting and error details.
JWT Decoder & Generator
Decode/inspect JWT tokens (header, payload, signature) or create new ones — fully offline.
JSON to TypeScript Converter
Paste any JSON → instantly get TypeScript interfaces (handles nested objects, arrays, optional fields). Perfect for API typing without third-party uploads.
Nano ID & UUID Generator
Generate secure, URL-friendly Nano IDs (custom length) or standard UUIDs — great for database keys.
Base64 Encode/Decode, Regex Tester, Timestamp Converter, Cron Parser, Docker Compose Generator, Hash Generator (MD5/SHA), and more...

Full list on the homepage: https://www.turboutil.app/

How It Works (Technically)
All tools are powered by pure JavaScript (no backend). For example:

JSON parsing/validation → native JSON.parse() + custom error handling
JWT decoding → atob() for base64 + manual signature check
TypeScript inference → recursive type generation logic (no external libs needed for core)

Everything is bundled and optimized for fast load. Once cached, most tools work fully offline.
Try It Out
Head over to: https://www.turboutil.app/
Pick any tool, paste your data, and see it work instantly — no tabs to external sites, no worries about data leaks.
What's Next?
I'm actively adding tools based on feedback:

More converters (YAML ↔ JSON, SQL Formatter)
PWA support for better offline experience
Favorite tools saving (localStorage)

If you have ideas or want a specific tool (e.g., GraphQL to TS, env validator), drop a comment below or tweet me!
What do you think? Have you switched to offline/privacy-focused tools yet? Share your thoughts — would love to hear from the community. ❤️
Thanks for reading, and happy coding!

Forem: Luan Hang

How I built a Local-first, Zero-Server Note-taking App with Next.js and Google Drive API

productivity #webdev #nextjs #javascript #buildinpublic

TurboUtil: A Free, Offline-First Collection of Dev Tools That Run Entirely in Your Browser