This is a virtual file system, written in and for educational and demonstrational purposes.
A full-stack Single Page Application (SPA) designed as an educational and demonstrational tool that simulates hierarchical file system management. It implements a virtual file system with a tree structure, allowing users to manage files and folders directly in the browser through an intuitive interface. The application mimics traditional file system functionality while leveraging modern web technologies to deliver a responsive, interactive experience with full CRUD (Create, Read, Update, Delete) operations, validation, sorting, and hierarchical organization.
Based on tech stack:
- HTML,
- PHP,
- Laravel,
- Jetstream,
- Sanctum,
- Inertia,
- MySQL,
- JavaScript,
- Vue,
- Pinia,
- Axios,
- CSS,
- TailwindCss,
- Docker,
- Sail,
- Scribe.
- Tree Structure Navigation: Visual folder hierarchy with expandable/collapsible nodes
- Visual Selection: Highlighting of selected files/folders across components
- Parent-Child Relationships: Nested folder structure with proper relationship management
- Real-time Updates: Instant reflection of changes across the file tree
- Folder Management: Create, rename, and delete folders
- File Operations: Create, edit content, rename, and delete files
- Recursive Operations: Automatic handling of nested content during deletions
- Size Calculation: Automatic computation of folder sizes including all nested content
- Metadata Tracking: File counts, folder counts, and storage statistics
- Format Conversion: Human-readable byte formatting (KB, MB, GB, etc.)
- User Authentication: Registration, login, and session management
- Protected Routes: API endpoints secured with Laravel Sanctum
- Profile Management: User settings, password updates, and two-factor authentication
- Live Editing: In-browser file content editing with instant save
- Dynamic Updates: Automatic UI updates without page reloads
- Form Validation: Client-side and server-side validation with error display
- Centralized Store: Pinia-based state management for file system data
- Reactive Components: Vue.js Composition API with reactive data flow
- API Integration: Axios-based communication with Laravel backend
- Laravel Backend: Robust API with RESTful endpoints
- Vue.js Frontend: Component-based architecture with Composition API
- Inertia.js: Seamless SPA experience without building separate API client
- Tailwind CSS: Utility-first styling for consistent design
- Responsive Design: Adaptive interface for desktop, tablet, and mobile devices
- Dual Theme Support: Light and dark modes with persistent user preferences
- Clone the repository:
git clone [repository-url]- Change directory to project:
cd /path/to/virtual-file-system/- Install php dependencies:
composer install- Create .env file:
cp .env.example .env- Generate application key:
php artisan key:generate-
Run Docker Desktop (with wsl - for Windows only)
-
Run wsl (for Windows only):
wsl- Run Sail:
./vendor/bin/sail up- Add new tab in terminal and connect to container:
docker exec -it virtual-file-system-laravel.test-1 bash- Install php dependencies (optional, if missing some required php extension in base system):
composer install- Run migrations:
php artisan migrate- Install node dependencies:
npm install- Build project:
npm run build-
In browser go to welcome page http://localhost/
-
Register new user on http://localhost/register (enter your name, email, password)
-
Or you can seed database with random users (name, email: random - look in database, password: password), folders and files:
php artisan migrate:fresh --seed- Login on http://localhost/login
That's it! Thank you!
The 'Virtual file system' is open-sourced software licensed under the MIT license.
This project uses third-party software components. Their respective licenses can be found in the LICENSE-3rd-party.md file.