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