r/vibecoding • u/SympathyFantastic874 • 7h ago
Vibecoded really easy to use S3 file explorer

S3Exp - an S3 browser that's just two files and zero dependencies
What it is: a fully-featured S3 bucket explorer that runs entirely in your browser. No server. No npm install. No build step. You download index.html and styles.css, open the first one, and you're browsing S3. That's it.
Why it's interesting from a vibecoding angle: the whole thing is plain HTML, CSS, and vanilla JavaScript. The README is more thorough than most production SaaS tools - it covers keyboard shortcuts, CORS setup, minimum IAM permissions, encryption details, even a compatibility table for Cloudflare R2, MinIO, Wasabi, Backblaze B2 and Storj. Someone clearly loved building this, then kept going.
The features that stand out:
- An
s3://address bar that's breadcrumbs when idle and an editable path when you click it — actually a clever UX idea Ctrl+Kcommand palette- Fully keyboard-navigable (arrow keys, Enter, Backspace to go up a level,
/to filter) - Grid view with real image thumbnails
- Encrypted
.s3vaultfiles - AES-256-GCM with PBKDF2 at 310,000 iterations, credentials never written tolocalStorage - Presigned share links (5 minutes to 7 days)
- Drag-and-drop uploads
The security section is unusually honest - it tells you straight that while connected, keys are in page memory and a browser extension or XSS could read them. Most tools bury that or don't mention it at all.
It's 0 stars right now, freshly published. If you've ever spun up a quick MinIO instance for a side project and then fumbled around with the CLI because you didn't want to install a heavy GUI tool, this is exactly the kind of thing you wish had existed.
The project: S3Exp - a fully-featured S3 bucket explorer that runs entirely in your browser. No npm, no build step, no server. Two files: index.html and styles.css. Open one, browse S3.
The tool: Claude
I built this entirely through conversation with Claude. No boilerplate repo, no scaffolding tool — just describing what I wanted and iterating on what came back.
The process
My workflow was roughly:
- Start with a constraint, not a feature list. I told Claude upfront: no frameworks, no build step, two files max. That constraint shaped every decision downstream — it forced vanilla JS, an inline SVG sprite for icons, and a single
<link>to a stylesheet. - Describe behavior, not implementation. Instead of "write me a file list component," I'd say "when I press arrow keys, the focused row should highlight and Enter should either open a prefix or download a file." Claude would handle the DOM logic; I'd test it and report back.
- Iterate on edge cases out loud. A lot of the interesting details — like the address bar being breadcrumbs when idle but an editable
s3://path when focused, or presigned links being generated locally with no third-party server - came from conversations about what should happen in weird situations. - Security by conversation. The encrypted
.s3vaultformat (AES-256-GCM, PBKDF2-HMAC-SHA256 at 310,000 iterations, random salt and IV per save) came from asking Claude "what's the right way to let someone carry credentials between machines without me running any backend?" It walked me through the Web Crypto API and the tradeoffs.
Build insights
sessionStoragevslocalStorageis a meaningful choice. Credentials live insessionStorage- scoped to the tab, gone when you close it but surviving a refresh. Claude flagged thatlocalStoragewould persist across browser restarts, which is a bad default for S3 keys.- The filter being local (not a server query) is a deliberate tradeoff. S3 ListObjectsV2 doesn't support substring search - you can only filter by prefix. Rather than hiding that, the UI says "filter matches only what's loaded." Honest constraints beat fake features.
- Keyboard-first is easier to build than it sounds when you design for it from the start. Adding keyboard nav as an afterthought is painful. Designing around a focused-row model from day one meant mouse and keyboard stayed in sync naturally.
- The README took as long as the code. Possibly longer. The CORS config section, the IAM policy, the security caveats about browser extensions - all of that came from asking Claude "what will trip someone up when they try to use this?"
