DockVault 🗄️

Your personal document vault — browse, search, preview, and organize your Google Drive files from anywhere. Password-locked. No Google login required.

---

Features

• 🔒 Password lock screen (default: dockvault), with hashed storage + login throttling + auto-lock after inactivity
• 📁 Connect any public Google Drive folder
• 🔍 Search, filter by type, sort files
• 📂 Auto-categories: Certificates, Notes, Resume, Semester, Projects, Images
• ⭐ Star favorites, track recently opened files
• 👁️ Preview PDFs, Docs, Sheets, Slides, and Images inline
• 🔄 Auto-refresh every 30 seconds — new files appear automatically
• 📱 Fully responsive (mobile, tablet, desktop)
• 🌙 Automatic dark mode
• 🛡️ Security headers (CSP, X-Frame-Options, etc.) on deploy, sandboxed preview iframe, crash-proof error boundary

---

Quick Start

1. Clone & install

git clone <your-repo>
cd dockvault
npm install

2. Get a Google Drive API Key (free)

1. Go to console.cloud.google.com
2. Create a new project (or use an existing one)
3. Go to APIs & Services → Library → search Google Drive API → Enable it
4. Go to APIs & Services → Credentials → Create Credentials → API Key
5. Click Restrict Key:
   • Under API restrictions: select Google Drive API
   • Under Website restrictions: add your deployed domain (e.g. your-app.web.app)
6. Copy the key

3. Add the key to your project

cp .env.example .env
# Edit .env and replace the placeholder:
VITE_DRIVE_API_KEY=AIzaSy...your_key_here

4. Make your Drive folder public

1. Open Google Drive
2. Right-click your documents folder → Share
3. Change from "Restricted" to "Anyone with the link" (Viewer)
4. Click Copy link — you'll paste this into the app on first launch

⚠️ Only connect a folder you'd be comfortable sharing via link. See Security model below for why.

5. Run locally

npm run dev
# Opens at http://localhost:3000

---

Deploy to Firebase Hosting

One-time setup

# Install Firebase CLI
npm install -g firebase-tools

# Login
firebase login

# Initialize (select Hosting, use 'dist' as public directory, SPA: yes)
firebase init hosting

Edit .firebaserc and replace the project ID with your actual Firebase project ID.

Deploy

# Build the app
npm run build

# Deploy
firebase deploy --only hosting

Your app will be live at https://your-project.web.app 🚀

CI/CD (GitHub Actions)

Two workflows are included under .github/workflows/ (auto-generated by the Firebase CLI, then fixed up here) that build and deploy on push to main and preview on pull requests. Add your Drive API key as a repository secret named VITE_DRIVE_API_KEY so CI builds include it — otherwise the deployed preview will show the "API key missing" banner.

---

Security model — please read before deploying

DockVault is intentionally a client-only, serverless app: there's no backend, no database, and no real user accounts. That keeps it free and simple to host, but it means the password screen is a convenience lock on this browser's UI, not real access control. Concretely:

• The Drive folder itself is public. For the app to read your files without a Google login, the folder must be shared as "Anyone with the link." Anyone who has that link (with or without ever opening DockVault) can view the same files directly in Drive.
• The API key ships in the browser bundle. Environment variables baked in at build time (VITE_DRIVE_API_KEY) are visible to anyone who opens dev tools on the deployed site. Restricting the key by HTTP referrer and to the Drive API scope (step 2 above) limits what someone can do with a copied key, but it's not secret.
• The password lock can be bypassed by anyone with JavaScript console access to the page, since the check ultimately runs in client-side code they control. To reduce casual risk, the password is hashed (not stored in plain text), unlock attempts are throttled with an escalating delay, and the vault auto-locks after 20 minutes of inactivity — but none of this replaces real authentication.

Bottom line: treat DockVault like a personal, convenient bookmarking layer over a Drive folder you're already fine sharing by link — not a place to gate genuinely sensitive documents. If you need real access control (per-user auth, private files, audit logs), you'd want a backend component, e.g. a Firebase Cloud Function that holds the API key server-side and checks Firebase Auth before returning file data.

---

Project Structure

dockvault/
├── index.html               # Vite entry HTML (CSP, favicon, manifest)
├── vite.config.js
├── public/
│   ├── favicon.svg
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── components/
│   │   ├── ApiKeyBanner.jsx   # Setup guide banner
│   │   ├── Components.jsx     # Shared UI (Button, Toast, Toggle…)
│   │   ├── ErrorBoundary.jsx  # Crash-proof fallback screen
│   │   ├── FileBrowser.jsx    # Search + filter + grid/list view
│   │   ├── FileCard.jsx       # File card & list item
│   │   ├── PreviewModal.jsx   # Inline file preview (sandboxed iframe)
│   │   └── Sidebar.jsx        # Navigation sidebar
│   ├── hooks/
│   │   └── useVault.js        # All app state, auth, and Drive API logic
│   ├── pages/
│   │   ├── Auth.jsx           # Password lock screen
│   │   ├── Dashboard.jsx      # Stats + recent files
│   │   ├── Setup.jsx          # First-time Drive folder setup
│   │   └── Settings.jsx       # Settings page
│   ├── styles/
│   │   └── global.css         # CSS variables & reset
│   ├── utils/
│   │   └── index.js           # Drive API, password hashing, file utils, storage
│   ├── App.jsx                # Main shell
│   └── index.jsx              # Entry point
├── .env.example
├── firebase.json              # Hosting config + security headers
└── package.json

---

Changing the Default Password

The default password is dockvault. Change it after first login:

• Go to Settings → Password → New password

The password is hashed (SHA-256 + salt) before being stored in localStorage — there's no plaintext password saved on disk after first launch.

---

How File Fetching Works

The app calls the Google Drive Files.list API directly from the browser using your API key. This works for public folders (Anyone with the link). No backend required.

Auto-categorization is done client-side by matching filenames against patterns.

---

License

MIT