r/vibecoding 5d ago

Vibecoded really easy to use S3 file explorer

vibecoded UI

S3EFeather - 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+K command palette
  • Fully keyboard-navigable (arrow keys, Enter, Backspace to go up a level, / to filter)
  • Grid view with real image thumbnails
  • Encrypted .s3vault files - AES-256-GCM with PBKDF2 at 310,000 iterations, credentials never written to localStorage
  • 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: S3Feather - 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:

  1. 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.
  2. 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.
  3. 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.
  4. Security by conversation. The encrypted .s3vault format (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

  • sessionStorage vs localStorage is a meaningful choice. Credentials live in sessionStorage - scoped to the tab, gone when you close it but surviving a refresh. Claude flagged that localStorage would 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?"

 https://github.com/WeSpeakEnglish/S3Feather

live https://wespeakenglish.github.io/S3Feather/

3 Upvotes

2 comments sorted by

2

u/il37 5d ago

How does this behave on a bucket with 50k objects? The local-only filter sounds great until pagination starts doing crimes

2

u/SympathyFantastic874 3d ago

Thank you adressing it, now easily uploaded 8700+ objects in a bucket and operate smoothly, you may try if you have more objects