My Weekend Side Project Stack (Zero Servers, Pure Browser)

A few weekends ago I had an idea for a simple web app — a habit tracker that sends you a nudge when you're about to break a streak. Simple concept. I should have been able to prototype it in an afternoon. But if I'd followed my usual stack, here's what that would have looked like: Set up a Next.js project. Configure Tailwind. Set up a database (which one? decisions, decisions). Wire up authentication. Deploy to Vercel. Set up a CI pipeline. Somewhere in that process I'd get bored, realize I'd spent four hours configuring things instead of building the actual app, and abandon the project. I've done this dance at least a dozen times. I have a GitHub graveyard of half-finished side projects that died during setup. This time I tried something different: no setup. Zero. I decided to build the whole thing with tools that exist entirely in the browser and generate static output. No server, no build step, no deployment pipeline. Just HTML, CSS, and JavaScript in a single file. Here's the stack I used: **Markdown Editor** for writing the content — FAQ, about page, terms of service, onboarding copy. Markdown exported to HTML, pasted into the main file. Took maybe an hour total. **JSON Formatter + Base64 Encoder/Decoder** for data. Since I wasn't using a database, I needed to store everything in localStorage. The data structures — habits, logs, streaks, user settings — were all JSON objects I built and tested using a JSON formatter that showed me the structure clearly. Base64 was useful for encoding small assets directly into the JavaScript. **CSS Animation Tool** for the UI. I wanted the habit tracker to feel rewarding when you checked something off. Confetti particles, a subtle bounce animation on completed items, a progress ring that fills up. I prototyped all the animations in a browser CSS playground, tweaked the timing until it felt right, and copied the keyframes into a style tag. **Regex Tester** for input validation. Habit names, user nicknames, email-ish identifiers — I built all my validation patterns in a regex tester before writing the actual JavaScript. Saved me from the usual cycle of "write regex, test, fails, tweak, test, fails, tweak..." **Image Compress + Image Resize** for the assets. I drew some rough icons using an inline SVG approach (no external files). A few background textures and placeholder images went through compress and resize to stay under 50KB each. I wrote the JavaScript by hand in a plain text editor (yes, I did open a local editor for that, I'm not a masochist). But every piece of content, every design decision, every validation pattern — all done in browser tools first, then pasted into the code. By Sunday evening I had a working app: - A single HTML file (about 400KB, mostly inline CSS and JS) - localStorage for persistence - Service worker for offline support (the only "advanced" thing I did) - Zero dependencies. No npm. No node_modules. No package.json. - Deployed by dragging the file into a static host's web UI The app isn't perfect. It won't scale to a million users. It doesn't have a backend, so "send you a nudge" means a browser notification, not an email or text. But you know what it does have? Users. I shared it with a few friends, and seven of them are actively using it. It works. It loads instantly. It doesn't break. I can add features by editing a single file and re-uploading it. For the last decade, the orthodoxy has been that real apps need real stacks. Servers. Databases. Infrastructure. And for production apps serving thousands of users, that's still true. But for weekend projects? For tools you build for yourself and maybe a dozen friends? Throw the stack away. Open a browser. Build something. See how far you can get before you need anything else. I bet you'll get further than you think.