DriveDeck is a modern, privacy-respecting, block-based workspace designed for individuals and teams who want the flexibility of tools like Notion without surrendering their data sovereignty.
By using a "Bring Your Own Cloud" (BYOC) architecture, DriveDeck stores all your notes, Kanban boards, project albums, and tasks directly in your personal Google Drive hidden application sandbox (appDataFolder) and local browser IndexedDB.
No external database. No subscription fees. No tracking. Complete data ownership.
-
📝 Modular Block Editor
- Rich text formatting, heading levels (H1, H2, H3), quote blocks, callouts, and dividers.
- Interactive checklists, bullet points, and syntax-highlighted code snippets.
- Drag-and-drop block reordering with keyboard shortcuts and inline slash
/commands. - Full support for page covers, custom emojis, and breadcrumb navigation.
-
📁 Project Albums & Workspaces
- Organize notes and documents into dedicated project spaces.
- Customize each album with distinct color themes, gradient covers, and emoji icons.
- Pin favorite projects to the sidebar for instant one-click access.
-
📌 Interactive Sticky Notes Board
- Freeform, color-coded digital canvas for quick thoughts, brainstorms, and temporary memos.
- Pin, drag, color-code, and organize notes with instant persistence.
-
📋 Integrated Kanban Boards
- Visual task management with customizable columns (To Do, In Progress, Review, Done).
- Priority badges, tags, and due-date reminders with automated status alerts.
- Embed live Kanban boards directly inside any editor document.
-
✅ Google Tasks Two-Way Sync
- Native integration with the official Google Tasks API.
- Create, view, organize, and complete your Google Tasks without leaving your workspace.
-
🖼️ Drive Media & Photo Integration
- Securely browse and embed images and documents stored in your Google Drive.
- No file re-uploading or redundant storage usage.
-
⚡ Offline-First & Lightning-Fast
- Instant page loads and zero-latency typing backed by browser IndexedDB.
- Automatic background synchronization to Google Drive whenever you are connected.
- Seamless offline mode — work on trains, flights, or unstable networks with zero interruptions.
-
🛡️ Absolute Privacy & Data Sovereignty
- All synchronization happens encrypted directly between your browser and Google APIs.
- No proprietary cloud databases, no analytics profiling, and no vendor lock-in.
-
💾 One-Click JSON Data Export
- Download a complete, open, and machine-readable JSON backup of your entire workspace at any time.
-
🌐 Bilingual (English & German)
- Full internationalization support with instant language switching in Settings.
┌─────────────────────────────────────────────────────────────┐
│ Client Browser │
│ │
│ React 19 UI ◄──► IndexedDB (Local Offline Storage) │
│ ▲ │
│ │ Direct Encrypted HTTPS (OAuth 2.0 Bearer Token) │
└─────────┼───────────────────────────────────────────────────┘
▼
┌─────────────────────────────────────────────────────────────┐
│ Google Cloud Platform │
│ │
│ • Google Drive API ──► appDataFolder (Private Sandbox) │
│ • Google Tasks API ──► User Task Lists & Reminders │
│ • Google Picker API ──► File & Photo Selection │
└─────────────────────────────────────────────────────────────┘
- IndexedDB: Serves as the primary local cache for zero-latency UI rendering and full offline availability.
- Google Drive
appDataFolder: Dedicated, user-invisible application sandbox on Google Drive. It keeps your main Drive directory tidy while guaranteeing cloud backup and multi-device sync.
- Node.js (v18.0.0 or higher recommended)
- npm or yarn / pnpm
- A Google Account (to use Google Drive and Google Tasks sync)
git clone https://github.com/your-username/drivedeck.git
cd drivedecknpm installCopy the sample environment file:
cp .env.example .envConfigure your optional environment keys in .env:
# Optional Gemini AI API Key (for server-side AI features)
GEMINI_API_KEY=
# App URL (defaults to http://localhost:3000)
APP_URL="http://localhost:3000"
# Optional Custom Google Picker Credentials (if utilizing custom project keys)
VITE_GOOGLE_PICKER_API_KEY=
VITE_GOOGLE_PICKER_PROJECT_ID=npm run devOpen your browser and navigate to http://localhost:3000.
To enable Google Drive and Google Tasks synchronization in your own Google Cloud project:
- Visit the Google Cloud Console.
- Create a new project (e.g.
DriveDeck Workspace). - Under APIs & Services > Library, enable:
- Google Drive API
- Google Tasks API
- Google Picker API
- Under OAuth consent screen:
- Set User Type to External (or Internal for Workspace organizations).
- Add the scopes:
https://www.googleapis.com/auth/drive.appdatahttps://www.googleapis.com/auth/drive.filehttps://www.googleapis.com/auth/tasks
- Under Credentials > Create Credentials > OAuth client ID:
- Application type: Web application.
- Add your domain to Authorized JavaScript origins (e.g.,
http://localhost:3000andhttps://your-domain.com). - Add your domain to Authorized redirect URIs (e.g.,
http://localhost:3000/Willkommenandhttps://your-domain.com/Willkommen).
| Command | Description |
|---|---|
npm run dev |
Starts the Express server and Vite development server on port 3000 |
npm run build |
Builds the client SPA and bundles server.ts with esbuild |
npm run start |
Runs the compiled production server (dist/server.cjs) |
npm run lint |
Runs TypeScript compiler checks (tsc --noEmit) |
npm run preview |
Previews the built production static client locally |
drivedeck/
├── public/ # Favicons, static brand assets, icons
├── src/
│ ├── components/ # React UI Components
│ │ ├── Editor.tsx # Core block-based document editor
│ │ ├── EmbeddedKanbanBlock.tsx # In-document Kanban block
│ │ ├── GoogleTasks.tsx # Google Tasks management component
│ │ ├── KanbanBoard.tsx # Fullscreen Kanban dashboard
│ │ ├── LandingPage.tsx # Hero landing page & showcase
│ │ ├── Photos.tsx # Google Drive media gallery
│ │ ├── PrivacyPolicyPage.tsx # Legal & privacy policy
│ │ ├── SettingsPage.tsx# Settings, sync status & backup export
│ │ ├── Sidebar.tsx # Project navigation & page tree
│ │ ├── StickyNotes.tsx # Color-coded digital sticky notes
│ │ └── TermsOfServicePage.tsx # Terms of service
│ ├── data/ # Preset covers, emojis, and styling palettes
│ ├── lib/ # Services, API clients, and storage
│ │ ├── db.ts # IndexedDB persistence layer
│ │ ├── driveSync.ts # Google Drive REST API synchronization
│ │ ├── googleAuth.ts # Google Identity Services / Firebase Auth
│ │ ├── googleTasksClient.ts # Google Tasks API integration
│ │ ├── LanguageContext.tsx # i18n localization engine (EN / DE)
│ │ └── notificationService.ts # Due date alert watcher
│ ├── types.ts # Central TypeScript interfaces & data models
│ ├── App.tsx # Root application orchestrator
│ └── main.tsx # React DOM entry point
├── server.ts # Express backend & Vite middleware server
├── metadata.json # App permissions and metadata
├── vite.config.ts # Vite bundler configuration
└── package.json # Project dependencies & build scripts
- Zero Tracking: DriveDeck has no tracking scripts, advertising SDKs, or data broker telemetry.
- Your Data Remains Yours: Content is stored in your local browser and your personal Google Drive account. No third-party database is used.
- Completely Free: No subscription plans, no paywalls, no trial limits. DriveDeck is built for users who value freedom and privacy.
This project is licensed under the MIT License — free for personal and commercial use.
Built with ❤️ for a private, decentralized, and sovereign web workspace.