Flat File Explorer

A responsive file explorer web application built with intuitive interface for managing files and folders with features like drag-and-drop, dark mode, and file previews.

Features

• Modern, responsive UI with dark/light mode
• Intuitive file and folder management
• Drag and drop file operations
• Text file preview and editing
• File search functionality
• Trash management with restore capability
• Responsive design for various screen sizes
• Fast and efficient performance

Tech Stack

• React 18
• TypeScript
• Vite
• Tailwind CSS
• Lucide React Icons

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/yourusername/flat-file-explorer.git
cd flat-file-explorer

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Build for production:

npm run build

Usage

File Operations

• Navigate: Double-click folders to open them
• Move Files: Drag and drop files between folders
• Create Folders: Click the "New Folder" button
• Delete Files: Drag files to the Trash folder
• Restore Files: Click the restore button on files in Trash
• Search: Use the search bar to filter files and folders

View Modes

• Toggle between grid and list views using the view mode button
• Dark/light mode toggle available in the header

File Preview

• Double-click text files to preview and edit their contents
• Supported file types include: txt, md, json, js, jsx, ts, tsx, css, html, and more

Project Structure

src/
├── components/         # React components
├── types/             # TypeScript type definitions
├── App.tsx            # Main application component
└── main.tsx          # Application entry point

Creator

Ed Bates (TECHBLIP LLC)

Acknowledgments

Some sections of this code were generated with the assistance of AI tools. These contributions were reviewed and integrated by the project creator(s).

License

Apache-2.0 license - see the LICENSE file for details