> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/SudhansuuRanjan/clipsync/llms.txt
> Use this file to discover all available pages before exploring further.

# Tech Stack

> Technologies powering ClipSync and the rationale behind each choice

## Overview

ClipSync is built with modern web technologies focused on performance, real-time capabilities, and progressive web app features. The stack prioritizes developer experience and production readiness.

## Core Technologies

### React 19

<Card title="React" icon="react" href="https://react.dev">
  **Version**: 19.0.0

  The latest version of React with improved performance and new features.
</Card>

#### Why React 19?

<AccordionGroup>
  <Accordion title="Latest Features" icon="sparkles">
    * Automatic batching improvements
    * Enhanced concurrent features
    * Better server component support
    * Improved hydration performance
  </Accordion>

  <Accordion title="Component Architecture" icon="sitemap">
    React's component-based architecture allows for:

    * Easy state management with hooks
    * Reusable UI patterns
    * Efficient re-rendering
  </Accordion>

  <Accordion title="Ecosystem" icon="puzzle-piece">
    Rich ecosystem with mature libraries:

    * React Query for server state
    * Extensive component libraries
    * Strong TypeScript support
  </Accordion>
</AccordionGroup>

#### Key React Features Used

```jsx theme={null}
import { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";

// Hooks for state management
const [sessionCode, setSessionCode] = useState("");

// Effects for side effects and subscriptions
useEffect(() => {
    const channel = supabase.channel("clipboard").subscribe();
    return () => supabase.removeChannel(channel);
}, [sessionCode]);
```

Reference: `src/App.jsx:1-2`, `src/App.jsx:7`

### Vite

<Card title="Vite" icon="bolt" href="https://vitejs.dev">
  **Version**: 6.2.0

  Next-generation frontend build tool with lightning-fast HMR.
</Card>

#### Why Vite?

<Tabs>
  <Tab title="Speed">
    **Instant Server Start**

    Vite serves code via native ES modules, no bundling required during development.

    **Lightning Fast HMR**

    Hot Module Replacement updates instantly regardless of app size.
  </Tab>

  <Tab title="Modern">
    **Native ESM**

    Leverages browser native ES modules for faster development.

    **Optimized Build**

    Uses Rollup for production builds with advanced optimizations.
  </Tab>

  <Tab title="Plugin Ecosystem">
    **Rich Plugins**

    * `@vitejs/plugin-react`: React Fast Refresh
    * `vite-plugin-pwa`: Progressive Web App support
    * Easy integration with other tools
  </Tab>
</Tabs>

#### Vite Configuration

```js vite.config.js:1-52 theme={null}
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      workbox: {
        globPatterns: ["**/*"],
      },
      manifest: {
        name: "ClipSync",
        short_name: "ClipSync",
        description: "A web app for syncing clipboard across devices.",
        theme_color: "#000000",
        background_color: "#000000",
        display: "standalone"
      }
    })
  ],
})
```

Reference: `vite.config.js:1-52`

### Supabase

<Card title="Supabase" icon="database" href="https://supabase.com">
  **Version**: @supabase/supabase-js 2.49.1

  Open source Firebase alternative providing backend-as-a-service.
</Card>

#### Why Supabase?

<CardGroup cols={3}>
  <Card title="Real-time" icon="bolt">
    Built-in WebSocket support for instant synchronization
  </Card>

  <Card title="Storage" icon="folder">
    Integrated file storage with CDN delivery
  </Card>

  <Card title="Database" icon="table">
    PostgreSQL database with REST API
  </Card>

  <Card title="Auth Ready" icon="lock">
    Authentication system (not used yet, but ready for future)
  </Card>

  <Card title="Open Source" icon="code">
    Self-hostable with no vendor lock-in
  </Card>

  <Card title="Developer DX" icon="terminal">
    Excellent TypeScript support and documentation
  </Card>
</CardGroup>

#### Supabase Features Used

<Steps>
  <Step title="Client Initialization">
    ```js src/config/supabase.js:1-7 theme={null}
    import { createClient } from "@supabase/supabase-js";

    const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL;
    const SUPABASE_ANON_KEY = import.meta.env.VITE_SUPABASE_ANON_KEY;

    const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
    ```
  </Step>

  <Step title="Database Operations">
    ```js theme={null}
    // Query data
    await supabase.from("clipboard").select("*").eq("session_code", code);

    // Insert data
    await supabase.from("clipboard").insert([{...}]);

    // Delete data
    await supabase.from("clipboard").delete().eq("id", id);
    ```
  </Step>

  <Step title="Realtime Subscriptions">
    ```js theme={null}
    const channel = supabase
        .channel("clipboard")
        .on("postgres_changes", { event: "*", schema: "public", table: "clipboard" }, callback)
        .subscribe();
    ```
  </Step>

  <Step title="File Storage">
    ```js theme={null}
    // Upload file
    await supabase.storage.from("clipboard").upload(path, file);

    // Delete file
    await supabase.storage.from("clipboard").remove([filename]);
    ```
  </Step>
</Steps>

## UI & Styling

### TailwindCSS

<Card title="Tailwind CSS" icon="paintbrush" href="https://tailwindcss.com">
  **Version**: 3.x

  Utility-first CSS framework for rapid UI development.
</Card>

#### Why Tailwind?

<Tabs>
  <Tab title="Utility-First">
    Build complex interfaces without writing custom CSS:

    ```jsx theme={null}
    <div className="flex items-center gap-2 p-4 rounded-lg 
                    bg-gray-900 text-white hover:bg-gray-800 
                    active:scale-95 transition">
      <Send size={18} /> Send to Clipboard
    </div>
    ```

    Reference: `src/App.jsx:613`
  </Tab>

  <Tab title="Responsive">
    Built-in responsive modifiers:

    ```jsx theme={null}
    className="md:text-3xl text-2xl md:p-6 p-4"
    ```

    Adapts seamlessly to mobile and desktop.
  </Tab>

  <Tab title="Dark Mode">
    Easy dark mode implementation:

    ```jsx theme={null}
    className={`${
      isDarkMode 
        ? 'bg-gray-900 text-gray-200' 
        : 'bg-white text-gray-900'
    }`}
    ```
  </Tab>

  <Tab title="Production">
    **Tiny Bundle Size**

    PurgeCSS removes unused styles automatically.

    Only the classes you use are included in production.
  </Tab>
</Tabs>

#### Tailwind Configuration

```js tailwind.config.js:1-11 theme={null}
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

Reference: `tailwind.config.js:1-11`

### Lucide React

<Card title="Lucide React" icon="icons" href="https://lucide.dev">
  **Version**: 0.477.0

  Beautiful, consistent icon library with 1000+ icons.
</Card>

#### Icons Used

```jsx src/App.jsx:2 theme={null}
import { 
    Copy, ClipboardList, Trash2, Send, 
    ChevronDown, ChevronRight, LogOut, 
    Moon, Sun, Edit, FileUp, FileImage, 
    Paperclip, Search, Share 
} from "lucide-react";
```

<Info>
  **Tree-shakeable**: Only icons you import are included in the bundle.

  **Customizable**: Size, color, and stroke width can be adjusted:

  ```jsx theme={null}
  <Copy size={19} className="text-blue-500" />
  ```
</Info>

## State Management

### React Query (TanStack Query)

<Card title="TanStack React Query" icon="sync" href="https://tanstack.com/query">
  **Version**: @tanstack/react-query 5.68.0

  Powerful data synchronization for React.
</Card>

#### Why React Query?

<AccordionGroup>
  <Accordion title="Server State Management" icon="server">
    Handles caching, background updates, and stale data automatically.

    ```jsx src/App.jsx:375-383 theme={null}
    const { data } = useQuery({
        queryKey: ["counter"],
        queryFn: updateCounter,
        enabled: true,
        refetchOnWindowFocus: false,
        refetchOnReconnect: false,
        retry: 2,
        refetchInterval: 1000 * 60 * 5  // Refetch every 5 minutes
    })
    ```
  </Accordion>

  <Accordion title="Automatic Background Updates" icon="arrows-rotate">
    Keeps data fresh without manual intervention:

    * Configurable refetch intervals
    * Window focus refetching
    * Network reconnect refetching
  </Accordion>

  <Accordion title="Loading & Error States" icon="circle-notch">
    Built-in loading and error state management:

    * No need for manual loading flags
    * Automatic retry logic
    * Error boundaries support
  </Accordion>
</AccordionGroup>

#### Setup

```jsx src/main.jsx:1-14 theme={null}
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient()

createRoot(document.getElementById('root')).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
)
```

Reference: `src/main.jsx:1-14`

## PWA Features

### vite-plugin-pwa

<Card title="vite-plugin-pwa" icon="mobile" href="https://vite-pwa-org.netlify.app">
  **Version**: 0.21.1

  Zero-config PWA plugin for Vite.
</Card>

#### PWA Capabilities

<CardGroup cols={2}>
  <Card title="Installable" icon="download">
    Users can install ClipSync as a native app on any device
  </Card>

  <Card title="Offline Support" icon="wifi">
    Service Worker caches assets for offline access
  </Card>

  <Card title="Auto Updates" icon="arrows-rotate">
    Automatically updates when new version is available
  </Card>

  <Card title="Native Feel" icon="mobile-screen">
    Standalone display mode without browser chrome
  </Card>
</CardGroup>

#### Configuration

```js vite.config.js:9-49 theme={null}
VitePWA({
  registerType: 'autoUpdate',  // Auto-update service worker
  workbox: {
    globPatterns: ["**/*"],    // Cache all assets
  },
  includeAssets: ["**/*"],
  manifest: {
    name: "ClipSync",
    short_name: "ClipSync",
    description: "A web app for syncing clipboard across devices.",
    icons: [
      {
        src: "/favicon/web-app-manifest-512x512.png",
        sizes: "512x512",
        type: "image/png",
        purpose: "maskable"
      }
    ],
    start_url: "/",
    display: "standalone",
    theme_color: "#000000",
    background_color: "#000000"
  }
})
```

Reference: `vite.config.js:9-49`

## Utility Libraries

### File & Image Handling

<Tabs>
  <Tab title="browser-image-compression">
    <Card title="browser-image-compression" icon="file-zipper">
      **Version**: 2.0.2

      Client-side image compression using Web Workers.
    </Card>

    **Usage:**

    ```jsx src/compressedFileUpload.jsx:1-17 theme={null}
    import imageCompression from "browser-image-compression";

    export async function compressImage(
        imageFile,
        maxSizeMB = 0.2,
        maxWidthOrHeight = 1920,
        useWebWorker = true
    ) {
        const options = { maxSizeMB, maxWidthOrHeight, useWebWorker }
        const compressedFile = await imageCompression(imageFile, options);
        return new File([compressedFile], imageFile.name, {...});
    }
    ```

    **Benefits:**

    * Reduces upload bandwidth by 90%
    * Non-blocking compression using Web Workers
    * Maintains image quality while reducing size
  </Tab>
</Tabs>

### UI Enhancement Libraries

<Tabs>
  <Tab title="react-hot-toast">
    <Card title="react-hot-toast" icon="bell">
      **Version**: 2.5.2

      Lightweight, customizable toast notifications.
    </Card>

    **Usage:**

    ```jsx src/App.jsx:3 theme={null}
    import toast, { Toaster } from 'react-hot-toast';

    // Show notifications
    toast.success("Clipboard updated successfully!");
    toast.error("An error occurred");
    const toastId = toast.loading("Uploading file...");
    toast.success("Done!", { id: toastId });
    ```

    **Features:**

    * Promise-based for async operations
    * Dark mode support
    * Customizable styling
  </Tab>

  <Tab title="react-countup">
    <Card title="react-countup" icon="chart-line">
      **Version**: 6.5.3

      Animated number counting for statistics.
    </Card>

    **Usage:**

    ```jsx src/App.jsx:6,695-696 theme={null}
    import CountUp from 'react-countup';

    <CountUp end={totalVisitor} enableScrollSpy={true} />
    <CountUp end={uniqueVisitor} enableScrollSpy={true} />
    ```

    **Features:**

    * Smooth number animations
    * Scroll-triggered animations
    * Performance optimized
  </Tab>
</Tabs>

## Development Tools

### ESLint

<Card title="ESLint" icon="shield-check" href="https://eslint.org">
  **Version**: 9.21.0

  Code quality and consistency enforcement.
</Card>

#### Configuration

```js eslint.config.js:7-38 theme={null}
export default [
  { ignores: ['dist'] },
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      react,
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...react.configs.recommended.rules,
      ...react.configs['jsx-runtime'].rules,
      ...reactHooks.configs.recommended.rules,
      'react/jsx-no-target-blank': 'off',
    },
  },
]
```

Reference: `eslint.config.js:7-38`

#### Plugins Used

<AccordionGroup>
  <Accordion title="eslint-plugin-react" icon="react">
    React-specific linting rules for best practices
  </Accordion>

  <Accordion title="eslint-plugin-react-hooks" icon="hook">
    Enforces Rules of Hooks (dependencies, no conditional hooks, etc.)
  </Accordion>

  <Accordion title="eslint-plugin-react-refresh" icon="arrows-rotate">
    Ensures Fast Refresh works correctly
  </Accordion>
</AccordionGroup>

### PostCSS & Autoprefixer

<Card title="PostCSS" icon="css3">
  **Versions**: postcss 8.5.3, autoprefixer 10.4.20

  CSS transformation and vendor prefix automation.
</Card>

<Info>
  Automatically adds browser vendor prefixes to ensure cross-browser compatibility:

  ```css theme={null}
  /* Input */
  .box { display: flex; }

  /* Output */
  .box { 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
  }
  ```
</Info>

## Package Scripts

Reference: `package.json:6-10`

<CodeGroup>
  ```json package.json theme={null}
  {
    "scripts": {
      "dev": "vite",
      "build": "vite build",
      "lint": "eslint .",
      "preview": "vite preview"
    }
  }
  ```
</CodeGroup>

<CardGroup cols={2}>
  <Card title="npm run dev" icon="terminal">
    Start development server with hot reload
  </Card>

  <Card title="npm run build" icon="hammer">
    Build optimized production bundle
  </Card>

  <Card title="npm run lint" icon="magnifying-glass">
    Check code for errors and style issues
  </Card>

  <Card title="npm run preview" icon="eye">
    Preview production build locally
  </Card>
</CardGroup>

## Technology Decisions Summary

<AccordionGroup>
  <Accordion title="Why React over Vue/Svelte?" icon="react">
    * Larger ecosystem and community
    * Better TypeScript support
    * More mature tooling (React Query, testing libraries)
    * Team familiarity
  </Accordion>

  <Accordion title="Why Vite over Webpack/CRA?" icon="bolt">
    * 10-100x faster dev server startup
    * Instant HMR regardless of app size
    * Simpler configuration
    * Better DX with native ESM
  </Accordion>

  <Accordion title="Why Supabase over Custom Backend?" icon="database">
    * Faster development (no backend code needed)
    * Built-in realtime via WebSockets
    * Integrated file storage
    * Free tier suitable for MVP
    * Easy to migrate to self-hosted later
  </Accordion>

  <Accordion title="Why Tailwind over CSS-in-JS?" icon="paintbrush">
    * Smaller bundle size (no runtime)
    * Faster development with utilities
    * Consistent design system
    * Better performance (no runtime styles)
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Architecture" icon="sitemap" href="/development/architecture">
    Understand the system architecture
  </Card>

  <Card title="Local Setup" icon="laptop-code" href="/development/local-setup">
    Set up your development environment
  </Card>
</CardGroup>