0
showcase
Shipped: A guide for the next contributor
What I Built
CommandVault — A keyboard-first developer snippet and command cheat sheet (React 19 + TypeScript + Vite) with:
Dual Workspaces: Zed/Helix Terminal TUI and Linear 3-Pane (toggleable via ⌘M).
Craft Light & Dark Themes: High-contrast light mode with visible macOS-style scrollbars and pastel tags (toggleable via ⌘T).
Live Placeholder Substitution: Real-time argument editing for commands containing variables like <container> or <port>.
Zero-Clipping Global Tooltips & Popovers: Portal-rendered tooltips and micro inline delete confirmation bubbles.
100% Viewport-Fit UI: The outer frame stays locked to the visible screen (100dvh) without page scrolling, while lists and inspector panes scroll independently.
How a Reviewer Can Verify Acceptance Criteria
Outer Viewport & Inner Scrollbars: Open the app—the outer window fits on screen with zero whole-page scroll. Scroll the snippet list or inspector to verify smooth inner scrollbars and an unclipped bottom shadow.
Dual Workspaces: Press ⌘M (or click header tabs) to switch between Zed TUI and Linear 3-Pane. Refresh the page to verify it persists.
Light Theme: Press ⌘T (or click Sun/Moon icon) to verify high-contrast light surfaces, visible dark scrollbars, and colored category tags.
Tooltips & Delete Popover: Hover over the Copy button to verify the tooltip floats cleanly below with its arrow centered. Click the Trash icon to verify the inline "Delete snippet?" bubble pops up.
Favorites Filter in Zed TUI: Press ⌘P on a snippet to star it, then click [★ FAVS] in the category bar to filter pinned commands.
Code & Build Checks: Run npm run build in terminal to confirm a passing build with 0 TypeScript errors. Check CONTRIBUTING.md and README.md for full architecture and usage guides.
Repository: https://github.com/aleewains/dev-snippets
Live: https://commandvault-tau.vercel.app/
Built for the Verified Frontend Internship · Documentation
Add a comment
0/2000