A private, single-user "digital brain" built with Nuxt 4. Designed for fast capture and easy retrieval of personal knowledge—prompts, projects, links, and notes—all in one unified, beautifully designed interface.
Keep It Together is a personal knowledge management system that helps you:
- Capture prompts — Store and organize reusable AI prompts with tags for quick retrieval
- Track projects — Manage project status, progress, and related notes in one place
- Save links — Bookmark important resources with descriptions and tags
- Take notes — Quick capture for thoughts, snippets, and knowledge
The app is designed for a single user (you!) with all data securely stored in Firebase and isolated by user ID.
- Private & Secure — Single-user deployment with Firebase Auth
- Fast Capture — Quick-add modals for instant item creation
- Prompts — Store and organize reusable prompts with tags
- Projects — Track projects with status and progress
- Links — Bookmark important resources with descriptions
- Notes — General-purpose notes with markdown support
- Light & Dark Themes — Beautiful glassmorphism in light mode, GitHub-style dark mode
- System Theme Detection — Automatically matches your OS preference
- Mobile Friendly — Fully responsive design for all devices
- Modern UI — Clean interface with Element Plus components and Phosphor icons
The app features a comprehensive dual-theme design system:
- iOS-inspired glassmorphism with backdrop blur effects
- Semi-transparent surfaces with subtle borders
- Soft shadows and clean typography
- macOS-style panel aesthetics
- Professional developer-first dark theme
- Solid surfaces (no glass effects in dark mode for clarity)
- High-contrast text with GitHub's color palette
- Reduced eye strain for extended use
Toggle themes using the sun/moon button in the header, or let it follow your system preference.
| Category | Technology |
|---|---|
| Framework | Nuxt 4, Vue 3 |
| Language | TypeScript |
| UI Library | Element Plus |
| Icons | Iconify (Phosphor icon set) |
| State | Composables (minimal Pinia) |
| Auth | Firebase Authentication |
| Database | Cloud Firestore |
| Styling | CSS Variables, Glassmorphism |
- Node.js 18+
- npm or pnpm
- Firebase project with Auth and Firestore enabled
# Clone the repository
git clone <repository-url>
cd keepittogether
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env
# Edit .env with your Firebase credentials
# Start development server
npm run devCreate a .env file with your Firebase configuration:
FIREBASE_API_KEY=your-api-key
FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_STORAGE_BUCKET=your-project.appspot.com
FIREBASE_MESSAGING_SENDER_ID=your-sender-id
FIREBASE_APP_ID=your-app-id- Create a Firebase project at console.firebase.google.com
- Enable Email/Password authentication
- Create a Firestore database
- Create a single user in Firebase Auth (no signup UI in app)
- Add your Firebase config to
.env
app/
├── components/
│ ├── prompt/ # Prompt-related components
│ ├── project/ # Project-related components
│ ├── link/ # Link-related components
│ ├── note/ # Note-related components
│ └── ui/ # Shared UI components
├── composables/
│ ├── useAuth.ts # Authentication logic
│ ├── useFirestore.ts # Generic Firestore operations
│ ├── usePrompts.ts # Prompts collection
│ ├── useProjects.ts # Projects collection
│ ├── useLinks.ts # Links collection
│ └── useNotes.ts # Notes collection
├── layouts/
│ ├── default.vue # Main app layout with sidebar
│ └── auth.vue # Login page layout
├── middleware/
│ └── auth.global.ts # Route protection
├── pages/
│ ├── index.vue # Dashboard
│ ├── login.vue # Login page
│ ├── prompts/ # Prompts feature
│ ├── vault-projects/ # Projects feature
│ ├── links/ # Links feature
│ └── notes/ # Notes feature
├── services/
│ ├── firebase.ts # Firebase initialization
│ └── firestore.ts # User-scoped collections
└── types/
└── vault.ts # TypeScript interfaces
All data is scoped to the authenticated user: users/{uid}/{collection}
| Collection | Fields |
|---|---|
| prompts | title, content, tags[], lastUsedAt, createdAt |
| projects | title, description, status, progress, notes[], createdAt |
| links | url, title, description, tags[], createdAt |
| notes | content, relatedEntity?, createdAt |
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run start # Start production serverThe app is fully responsive and optimized for mobile browsers:
- Collapsible sidebar navigation
- Touch-friendly action buttons
- Stacked layouts on small screens
- Optimized dialog widths
- Safe area support for notched devices
- Add collection name to
UserCollectionNameinservices/firestore.ts - Create interface in
types/vault.ts - Create composable using
useFirestoreCollection - Build UI components/pages
- All routes protected by auth middleware
- No public endpoints
- User data isolated by UID
- XSS protection via DOMPurify
- Firebase security rules recommended
- Composables preferred over heavy stores
- Lazy-load non-critical sections
- CSS transitions over layout animations
- Efficient Firestore queries with ordering
See CHANGELOG.md for version history.
Private project — All rights reserved.
Built by Meezaan Davids