Tech Stack - ClipSync

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

React

Version: 19.0.0The latest version of React with improved performance and new features.

Why React 19?

Latest Features

Automatic batching improvements
Enhanced concurrent features
Better server component support
Improved hydration performance

Component Architecture

React’s component-based architecture allows for:

Easy state management with hooks
Reusable UI patterns
Efficient re-rendering

Ecosystem

Rich ecosystem with mature libraries:

React Query for server state
Extensive component libraries
Strong TypeScript support

Key React Features Used

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

Version: 6.2.0Next-generation frontend build tool with lightning-fast HMR.

Why Vite?

Speed
Modern
Plugin Ecosystem

Instant Server StartVite serves code via native ES modules, no bundling required during development.Lightning Fast HMRHot Module Replacement updates instantly regardless of app size.

Rich Plugins

@vitejs/plugin-react: React Fast Refresh
vite-plugin-pwa: Progressive Web App support
Easy integration with other tools

Vite Configuration

vite.config.js:1-52

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

Version: @supabase/supabase-js 2.49.1Open source Firebase alternative providing backend-as-a-service.

Why Supabase?

Real-time

Built-in WebSocket support for instant synchronization

Storage

Integrated file storage with CDN delivery

Database

PostgreSQL database with REST API

Auth Ready

Authentication system (not used yet, but ready for future)

Open Source

Self-hostable with no vendor lock-in

Developer DX

Excellent TypeScript support and documentation

Supabase Features Used

Client Initialization

src/config/supabase.js:1-7

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);

Database Operations

// 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);

Realtime Subscriptions

const channel = supabase
    .channel("clipboard")
    .on("postgres_changes", { event: "*", schema: "public", table: "clipboard" }, callback)
    .subscribe();

File Storage

// Upload file
await supabase.storage.from("clipboard").upload(path, file);

// Delete file
await supabase.storage.from("clipboard").remove([filename]);

UI & Styling

TailwindCSS

Tailwind CSS

Version: 3.xUtility-first CSS framework for rapid UI development.

Why Tailwind?

Utility-First
Responsive
Dark Mode
Production

Build complex interfaces without writing custom CSS:

<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

Built-in responsive modifiers:

className="md:text-3xl text-2xl md:p-6 p-4"

Adapts seamlessly to mobile and desktop.

Easy dark mode implementation:

className={`${
  isDarkMode 
    ? 'bg-gray-900 text-gray-200' 
    : 'bg-white text-gray-900'
}`}

Tailwind Configuration

tailwind.config.js:1-11

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Reference: tailwind.config.js:1-11

Lucide React

Version: 0.477.0Beautiful, consistent icon library with 1000+ icons.

Icons Used

src/App.jsx:2

import { 
    Copy, ClipboardList, Trash2, Send, 
    ChevronDown, ChevronRight, LogOut, 
    Moon, Sun, Edit, FileUp, FileImage, 
    Paperclip, Search, Share 
} from "lucide-react";

Tree-shakeable: Only icons you import are included in the bundle.Customizable: Size, color, and stroke width can be adjusted:

<Copy size={19} className="text-blue-500" />

State Management

React Query (TanStack Query)

TanStack React Query

Version: @tanstack/react-query 5.68.0Powerful data synchronization for React.

Why React Query?

Server State Management

Handles caching, background updates, and stale data automatically.

src/App.jsx:375-383

const { data } = useQuery({
    queryKey: ["counter"],
    queryFn: updateCounter,
    enabled: true,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false,
    retry: 2,
    refetchInterval: 1000 * 60 * 5  // Refetch every 5 minutes
})

Automatic Background Updates

Keeps data fresh without manual intervention:

Configurable refetch intervals
Window focus refetching
Network reconnect refetching

Loading & Error States

Built-in loading and error state management:

No need for manual loading flags
Automatic retry logic
Error boundaries support

Setup

src/main.jsx:1-14

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

Version: 0.21.1Zero-config PWA plugin for Vite.

PWA Capabilities

Installable

Users can install ClipSync as a native app on any device

Offline Support

Service Worker caches assets for offline access

Auto Updates

Automatically updates when new version is available

Native Feel

Standalone display mode without browser chrome

Configuration

vite.config.js:9-49

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

browser-image-compression

browser-image-compression

Version: 2.0.2Client-side image compression using Web Workers.

Usage:

src/compressedFileUpload.jsx:1-17

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

UI Enhancement Libraries

react-hot-toast
react-countup

react-hot-toast

Version: 2.5.2Lightweight, customizable toast notifications.

Usage:

src/App.jsx:3

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

react-countup

Version: 6.5.3Animated number counting for statistics.

Usage:

src/App.jsx:6,695-696

import CountUp from 'react-countup';

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

Features:

Smooth number animations
Scroll-triggered animations
Performance optimized

Development Tools

ESLint

Version: 9.21.0Code quality and consistency enforcement.

Configuration

eslint.config.js:7-38

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

eslint-plugin-react

React-specific linting rules for best practices

eslint-plugin-react-hooks

Enforces Rules of Hooks (dependencies, no conditional hooks, etc.)

eslint-plugin-react-refresh

Ensures Fast Refresh works correctly

PostCSS & Autoprefixer

PostCSS

Versions: postcss 8.5.3, autoprefixer 10.4.20CSS transformation and vendor prefix automation.

Automatically adds browser vendor prefixes to ensure cross-browser compatibility:

/* Input */
.box { display: flex; }

/* Output */
.box { 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; 
}

Package Scripts

Reference: package.json:6-10

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  }
}

npm run dev

Start development server with hot reload

npm run build

Build optimized production bundle

npm run lint

Check code for errors and style issues

npm run preview

Preview production build locally

Technology Decisions Summary

Why React over Vue/Svelte?

Larger ecosystem and community
Better TypeScript support
More mature tooling (React Query, testing libraries)
Team familiarity

Why Vite over Webpack/CRA?

10-100x faster dev server startup
Instant HMR regardless of app size
Simpler configuration
Better DX with native ESM

Why Supabase over Custom Backend?

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

Why Tailwind over CSS-in-JS?

Smaller bundle size (no runtime)
Faster development with utilities
Consistent design system
Better performance (no runtime styles)

Next Steps

Architecture

Understand the system architecture

Local Setup

Set up your development environment

Getting Started

Core Features

Guides

Development

​Overview

​Core Technologies

​React 19

React

​Why React 19?

​Key React Features Used

​Vite

Vite

​Why Vite?

​Vite Configuration

​Supabase

Supabase

​Why Supabase?

Real-time

Storage

Database

Auth Ready

Open Source

Developer DX

​Supabase Features Used

​UI & Styling

​TailwindCSS

Tailwind CSS

​Why Tailwind?

​Tailwind Configuration

​Lucide React

Lucide React

​Icons Used

​State Management

​React Query (TanStack Query)

TanStack React Query

​Why React Query?

​Setup

​PWA Features

​vite-plugin-pwa

vite-plugin-pwa

​PWA Capabilities

Installable

Offline Support

Auto Updates

Native Feel

​Configuration

​Utility Libraries

​File & Image Handling

browser-image-compression

​UI Enhancement Libraries

react-hot-toast

react-countup

​Development Tools

​ESLint

ESLint

​Configuration

​Plugins Used

​PostCSS & Autoprefixer

PostCSS

​Package Scripts

npm run dev

npm run build

npm run lint

npm run preview

​Technology Decisions Summary

​Next Steps

Architecture

Local Setup

Build docs developers (and LLMs) love

Overview

Core Technologies

React 19

Why React 19?

Key React Features Used

Vite

Why Vite?

Vite Configuration

Supabase

Why Supabase?

Supabase Features Used

UI & Styling

TailwindCSS

Why Tailwind?

Tailwind Configuration

Lucide React

Icons Used

State Management

React Query (TanStack Query)

Why React Query?

Setup

PWA Features

vite-plugin-pwa

PWA Capabilities

Configuration

Utility Libraries

File & Image Handling

UI Enhancement Libraries

Development Tools

ESLint

Configuration

Plugins Used

PostCSS & Autoprefixer

Package Scripts

Technology Decisions Summary

Next Steps