File Explorer is a web-based application designed to simulate a file system interface within a browser, allowing users to manage files and folders as they would on a traditional desktop. This application serves as a personal storage solution where users can upload, organize, rename, delete, and recover files or folders. It includes a recycle bin feature to restore or permanently remove items, mimicking the functionality of desktop operating systems.
- File and Folder Management: Create folders, upload files, rename and delete files and folders.
- Recycle Bin: Temporary storage for deleted items with options to restore or permanently delete.
- UUID-based Navigation: Secure and robust handling of file paths using UUIDs.
- Interactive UI: User-friendly interface with context menus.
- Sorting, Filtering: You can choose to view your files and folders the way you want. Complete control. All options are available to work together
- Demo
- Installation
- Usage Guide
- Edge Cases
- Future Scope
- Dependencies And Technology Stack
- Performance
- Contribution
- Authors
- License
Please Note:
- Use of Google Chrome is recommend.
- Use on laptop/desktop for the best possible experience as of now.
Ensure you have the following installed:
- Node.js (v14.x or later)
- npm (v6.x or later) or yarn (v1.22.x or later)
- A modern web browser (Chrome, Firefox, Edge, or Safari)
-
Clone the repo
git clone https://github.com/devanshdalmia01/LYNC-React-Developer-Task-2.git
-
Install NPM packages
cd LYNC-React-Developer-Task-2 && npm install
-
Run
npm run dev
-
Open http://localhost:5173/ to view it in the browser
- Home: Access the main interface by navigating to the root URL
/. - Recycle Bin: Click on the
recycle bin iconor navigate to/recyclebinto view deleted items. - Folders: You can
double clickon the folders to navigate into them or you cansingle clickon thesidebarto go to that particular folder - Backwards/Forwards: You can navigate across appliation using browser's backward and forward buttons. The built in
Go Backbutton will only take you toprevious directoryof the current path.
Use the Upload File or Add Folder buttons to add files or folders
Right-click on a file or folder from sidebar and select Rename to update its name, or you can select the file/folder from main area and then click Rename button from navbar or you can click on context menu button from file/folder and then click Rename
Right-click on a file or folder from sidebar and select Delete to delete it, or you can select the file/folder from main area and then click Delete button from navbar or you can click on context menu button from file/folder and then click Delete
When inside recycle bin, you can select the file/folder from main area and then click Restore button from navbar or you can click on context menu button from file/folder and then click Rename
When inside recycle bin, you can select the file/folder from main area and then click Permanent Delete from navbar or you can click on context menu button from file/folder and then click Permanent Delete
When inside recycle bin, you can click Empty Recycle Bin from navbar to delete everything
-
Parent-Child Data Consistency: Ensures that all operations (add, delete, restore) maintain consistent parent-child relationships in the database to prevent orphaned records or incorrect hierarchy representations.
-
Nested/Malformed URLs: Redirects excessively nested or malformed URLs to correct paths or to a 404 page if no valid path can be derived.
-
Concurrent Database Access: Handles operations on the database transactionally to prevent race conditions and ensure data integrity, especially during simultaneous accesses or modifications.
-
Drag and Drop: Implement drag-and-drop functionality for moving files and folders within the interface.
-
File Viewing: Add support for viewing different file types directly within the browser, such as PDFs, images, and text files.
-
Copy/Cut/Paste: Introduce functionality to copy, cut, and paste files and folders, enhancing user interaction and usability.
-
Advanced Search: Develop an advanced search feature that allows users to search content within files and across different folder levels.
-
File Information: To develop a sidebar overlay to view all the information related to a file or folder selected
-
Keyboard Support: Implement comprehensive keyboard navigation and shortcuts to enhance accessibility and user efficiency.
-
Multiple Selection: Enable selecting multiple files or folders simultaneously to delete, move, or apply other operations, similar to desktop file managers.
-
Mobile Friendly/Responsive App: Add CSS and make the app responsive according to different devices big or small
I used a tried and tested tech stack. This resulted in a fast, performant, and easily-extensible web app that should be fairly future-proof for the coming next several years. I used:
- React.js - For building the user interface.
- Tailwind CSS - For styling the application.
- Dexie.js - A wrapper for IndexedDB used for client-side storage.
- Headless UI - For accessible UI components, particularly for modals and menu.
- React Router - For handling navigation within the application.
- React Toastify - For intuitive notifications to the user.
- Memoize One - To memoize repeated function call and improve performance.
- React Icons - For adding icons.
- React Tooltip - For adding tooltips to increase user experience.
- Use Double Click - For correctly handling double and single clicks.
- UUID - To get unique Ids
Contributions are welcome! Please fork the repository and submit pull requests to the main branch. For major changes, please open an issue first to discuss what you would like to change.