📁 Directory Browser

A web application for browsing directories and viewing file contents, built with React, Redux Toolkit, and TypeScript.

🌐 Live Demo

https://codingminer.github.io/directory-browser/

✨ Features

• 🗂️ Directory navigation — browse nested directories with breadcrumb path tracking
• 🔍 Search & filter — filter files and directories in real time
• 🧾 Search empty state — shows a clear "No results" message with a quick clear action
• ▦ Grid / list view toggle — switch between icon grid and detailed list
• ⌨️ Keyboard navigation — use arrow keys to move, Enter to open a directory, Backspace to go up
• 🖱️ Context menu — right-click any item to copy its name or path
• 🔀 Drag & drop — reorder files and directories visually
• ⏳ Improved loading state — spinner + skeleton placeholders while directories load
• 🌗 Dark / light theme — toggle between themes
• 🔗 URL routing — deep link directly to any directory (/dir/:id)

🛠️ Technologies

• React 18 + TypeScript
• Redux Toolkit (createAsyncThunk, slices)
• React Router v6
• Jest + Testing Library
• Deployed via GitHub Pages

🚀 Getting Started

Clone the repository and install dependencies:

yarn

Start the development server:

yarn start

The app runs at http://localhost:3000

🧪 Testing

Run the full test suite in interactive watch mode:

yarn test

Run a single test file:

yarn test -- --testPathPattern=<filename>

Update snapshots after component changes:

yarn test -- -u

🏗️ Building

yarn build

Output is in the build/ directory.

🎨 Code Quality

yarn lint     # ESLint
yarn format   # Prettier

⌨️ Keyboard Shortcuts

Key	Action
↑ / ↓	Move selection
Enter	Open selected directory
Backspace	Navigate to parent directory
Esc	Close context menu