Back to battles
mediumupcoming
File Explorer UI
A file explorer interface with tree view, breadcrumbs, and file operations.
35 min limit0 participants
javascriptcssui
PRD
# File Explorer UI PRD ## Overview Build a file explorer interface with a tree view sidebar, breadcrumb navigation, file operations (create, rename, delete, move), drag-and-drop, and multiple view modes. ## Requirements - Tree view sidebar with expandable and collapsible folders - Main content area with file and folder grid or list display - Breadcrumb navigation showing current path - Create new folders and files (with name and type) - Rename files and folders via double-click or F2 key - Delete files and folders with confirmation dialog - Move files via drag-and-drop between folders - Cut, copy, and paste support (Ctrl+X, Ctrl+C, Ctrl+V) - Multi-select with Ctrl+click and Shift+click - Sort by name, size, date modified, or type - Search by filename across the file system - File type icons based on extension - File size and modified date display in list view - Context menu on right-click with file operations - Grid view and list view toggle - Keyboard navigation with arrows and Enter to open - Back and forward navigation buttons - Persist virtual file system to localStorage ## Tech Stack - JavaScript or any frontend framework - CSS for layout, icons, and context menus - No file explorer or tree view libraries ## Scoring Criteria - **Functional (40%)**: File operations work, tree view navigates, drag-and-drop moves files - **Quality (20%)**: Smooth interactions, proper keyboard support, no state bugs - **Fidelity (25%)**: All features present including context menu, multi-select, and both view modes - **Speed (15%)**: Time bonus
Battle Stats
Time Limit35 min
Participants0
Statusupcoming
Rules
- AI-assisted coding tools only -- no manual edits
- Stay within the time limit
- Scoring based on correctness, code quality, and speed
- Session must be recorded via the CLI