KrossKopy

KrossKopy is a performant, real-time, cross-device clipboard built for speed and zero friction. It runs entirely in the browser, syncs clips via Firebase, and can be installed as a PWA. The app starts with an anonymous session and upgrades to Google sign-in when users want a permanent account, hence unlocking cross-device syncing.

🔗Try Now: KrossKopy

Screenshot

✨ Highlights

• Real-time clipboard sync across devices using Firestore.
• Anonymous sessions that can be linked to Google accounts without losing data.
• Pin favorites, delete, and edit clips with instant updates.
• Keyboard-first workflow for fast creation and navigation.
• PWA-ready with offline-capable shell and install prompts.
• Theme system (light, dark, glass) stored in local storage.

🧩 Product Behavior (From Code)

• Users land on /home, then are redirected to /app after first visit.
• Anonymous users can start immediately; signing in links data to Google.
• Clips are stored in Firestore under users/{uid}/clips.
• Clipboard cards are limited to 30 items per user session.
• Global paste creates a new card when focus is outside a textarea.
• ... and many more features built for seamless User Experience.

🛠 Tech Stack

• React 19 + Vite 7
• React Router 7
• Firebase (Auth + Firestore)
• Tailwind CSS v4 (via @tailwindcss/vite)
• Masonry layout for adaptive grid
• PWA via vite-plugin-pwa

Local Development

1. Install dependencies

npm install

2. Configure environment

Create a .env file in the project root:

VITE_FIREBASE_API_KEY=your_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id
VITE_FIREBASE_MEASUREMENT_ID=your_measurement_id

3. Start the dev server

npm run dev

Scripts

• npm run dev: Start local dev server
• npm run build: Create production build
• npm run preview: Preview the production build
• npm run lint: Run ESLint

App Architecture

Routing

Routes are defined in src/App.jsx:

• /: Redirects to /home or /app based on localStorage flag
• /home: Landing page
• /app: Main clipboard UI
• /features, /about, /settings
• /privacy, /terms

🔐 Auth Flow

Auth is managed by src/components/AuthProvider.jsx:

• Initializes Firebase auth and persistence
• Creates anonymous users on first visit
• Links anonymous users to Google accounts
• Signs in with Google and persists session

📎 Clipboard Model

Firestore documents under users/{uid}/clips:

{
  "text": "string",
  "pinned": false,
  "createdAt": "serverTimestamp"
}

Realtime updates are subscribed with onSnapshot and ordered by createdAt desc.

🌟 UI Composition

• Clip creation, update, pinning, and deletion live in src/components/CardsManager.jsx.
• Global keyboard shortcuts and paste capture are in src/components/useGlobalEvents.jsx.
• Cards render in a Masonry grid via src/components/CardsGrid.jsx.
• Individual card behavior is in src/components/ClipCard.jsx.

⚡ Keyboard Shortcuts

• Ctrl/Cmd + i: Create a new empty clip
• Ctrl/Cmd + p: Pin or unpin the focused clip
• Ctrl/Cmd + Up/Down: Navigate between clips
• f: Focus the first clip
• Backspace: Delete focused empty clip
• Esc: Unfocus the current textarea
• Ctrl/Cmd + Space: Toggle All vs Favorites

⚠️ Privacy and Security Notes

• Clips are private to the authenticated user, but not end-to-end encrypted.
• Avoid storing sensitive credentials or secrets in the clipboard.
• The app stores basic preferences in localStorage (theme, first visit, add-with-paste).

📱 PWA

PWA configuration is defined in vite.config.js using vite-plugin-pwa. The manifest includes icons and name metadata, and autoUpdate is enabled.

Contributing

Issues and pull requests are welcome. Keep changes focused and include a clear description of behavior changes and tests (if any).

License

The MIT License (MIT) Copyright © 2026 Subrat Dwivedi

See LICENSE for details.