DEV Community

Yanina Trekhleb
Yanina Trekhleb

Posted on

I found my "Magic Wand": Building a Private, Zero-Dependency Journaling PWA 🪄


For years, I’ve had ideas that fizzled out during the "which framework should I use?" phase. I’d get stuck in the setup, and the spark would die. This week, everything changed. I stopped overthinking and went back to the basics.

I built Daily Reflections—a private, offline-first journaling space—using 100% Vanilla JS. No React, no build steps, just pure flow.
The Solution: A Local-First Architecture 🏠
I decided to build a PWA that treats the browser as the destination, not just the interface.

State & Persistence: Everything lives in localStorage. There is no backend. Privacy isn't a feature; it's the architecture.

Zero Dependencies: I challenged myself to skip the heavy libraries.

Charts: Built using the Canvas API (no Chart.js).

Icons: Hand-drawn Inline SVGs to keep the app lightweight and "analog."

Offline-First: A simple Service Worker and Web App Manifest make it fully installable on iOS and Android. It works perfectly at 2 AM in airplane mode.

Feature Highlight: "Then vs. Now" 🕰️
I’m a data person, so I wanted to see my progress. The app automatically resurfaces entries from exactly 1 week, 1 month, or 1 year ago. It’s incredible how much perspective you gain just by reading what "Past You" was worried about seven days ago.

Lessons Learned 🎓
Going "Vanilla" felt like finding a magic wand. Without the abstraction of a framework, I felt closer to the code and finished the MVP in record time.

Check out the live project: https://yaninatrekhleb.com/daily-reflections/

I’d love to hear from other devs—have you experimented with "No-Cloud" or local-first tools lately? How do you handle the 5MB localStorage limit for long-term data?

webdev #javascript #showdev #pwa #claudecode

Top comments (1)

Collapse
 
trinhcuong-ast profile image
Kai Alder

The "Then vs Now" feature is brilliant — that's exactly the kind of thing that makes journaling actually stick. I've tried so many apps that just become a data dump, but having the app resurface past entries adds real value.

For the 5MB localStorage question: IndexedDB is your friend here. Same offline-first vibe but with way higher limits (usually 50-80% of available disk space). The API is more verbose but not too bad once you wrap it. I switched a similar project to IndexedDB and never looked back.

Also appreciate the zero-dependency approach. There's something refreshing about just... shipping without waiting for npm install to finish. Did you find any pain points going pure vanilla for the charts? Animations? That's usually where I cave and reach for a library.