Drive Frontend

A modern, cloud storage web application frontend built with SolidJS, similar to Nextcloud and Google Drive.

Tech Stack

• Framework: SolidJS (reactive UI)
• UI Components: ArkUI (accessible, unstyled components)
• Styling: UnoCSS (atomic CSS)
• Routing: TanStack Router (file-based routing)
• Validation: Kanon (from Pithos)
• Error Handling: Zygos Result pattern (from Pithos)
• HTTP Client: redaxios
• Package Manager: Bun
• Linter/Formatter: oxc (oxlint, oxformat)
• Test Framework: Vitest

Getting Started

Prerequisites

• Bun (latest version)
• Node.js 18+ (for tooling)

Installation

bun install

Development

bun run dev

The application will start on http://localhost:3000

Build

bun run build

Production

bun run serve

Features

Implemented (Phase 1 & 2)

• ✅ Authentication (Password, Passkey, OIDC)
• ✅ File browser with list/grid view
• ✅ File operations (create, rename, delete, copy, move)
• ✅ File upload with drag & drop
• ✅ File download (single file, folder as ZIP, bulk download)
• ✅ File preview (images, videos, audio, PDF)
• ✅ Text editor for code files
• ✅ Full-text search
• ✅ Favorites system
• ✅ Trash/recycle bin
• ✅ File versioning
• ✅ File locking
• ✅ Bulk operations
• ✅ Breadcrumb navigation
• ✅ Notification system
• ✅ Loading states and skeletons

Coming Soon (Phase 3+)

• 🔄 File sharing (users, groups, public links)
• 🔄 Comments on files
• 🔄 Activity feed
• 🔄 Tags/labels
• 🔄 File metadata sidebar
• 🔄 Group folders
• 🔄 External storage mounts
• 🔄 Storage quota management
• 🔄 Photo gallery with EXIF data
• 🔄 Office integration (Collabora/OnlyOffice)
• 🔄 Federation (share with other instances)
• 🔄 E2EE (client-side encryption)
• 🔄 User settings and admin dashboard

Project Structure

src/
├── components/          # UI components
│   ├── auth/           # Authentication components
│   ├── files/          # File management components
│   └── common/         # Shared components
├── services/           # API services
│   ├── api.ts         # Base API client
│   ├── auth.ts        # Authentication service
│   ├── files.ts       # File operations
│   ├── download.ts    # Download service
│   ├── search.ts      # Search service
│   ├── favorites.ts   # Favorites service
│   ├── trash.ts       # Trash service
│   ├── versions.ts    # Version history
│   └── lock.ts        # File locking
├── types/              # TypeScript type definitions
├── utils/              # Utility functions
└── routes/             # File-based routes

Configuration

Environment Variables

Create a .env file in the root directory:

VITE_API_URL=http://localhost:8080

Backend API

This frontend requires the Drive backend API running at the configured VITE_API_URL. See the backend documentation at ../drive_backend/AGENTS.md for API details.

Code Style

• NO COMMENTS - Code must be self-documenting
• TypeScript strict mode - All code must pass strict type checking
• SolidJS best practices - Reactive primitives, proper effects
• UnoCSS - Atomic CSS utilities
• Component segmentation - Keep files under 150 lines
• Pithos (Kanon + Zygos) - For validation and error handling

Testing

bun test                    # Run all tests
bun test <file-pattern>     # Run specific test file
bun test --watch           # Watch mode
bun test --coverage        # Run with coverage

Linting & Formatting

bunx oxlint                # Run linter
bunx oxlint --fix          # Auto-fix issues
bunx oxformat              # Format code
bunx oxformat --check      # Check formatting

Documentation Resources

• SolidJS Docs
• ArkUI Docs
• UnoCSS Docs
• Pithos Docs
• TanStack Router
• oxc
• Vitest

License

MIT

Contributing

1. Follow the code style guidelines in AGENTS.md
2. Write self-documenting code (no comments)
3. Ensure all tests pass
4. Run linting and formatting before committing