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

# File Transfer Pavan Tech Stack: React, Vite, and Supabase

> React 18 plus Vite 5 frontend, Supabase backend, TypeScript 92.6% coverage. See performance optimizations, manual chunks, deferred loading, and PWA support.

File Transfer Pavan is built with React 18, TypeScript, and Vite 5. The Supabase backend provides PostgreSQL, authentication, storage, and edge functions. This page covers the full technology map, performance optimizations, and the directory layout of the source code.

## Technology Map

| Category | Technology | Purpose |
| - | - | - |
| Language | TypeScript 92.6% | Type safety across the entire codebase |
| Framework | React 18 + Vite 5 | Fast HMR dev server and optimized production builds |
| Routing | React Router DOM | 15+ pages with lazy loading via `React.lazy()` |
| Animations | Framer Motion | Page transitions and UI animations |
| Data Fetching | React Query (TanStack Query) | Caching, background updates, and optimistic UI |
| UI Components | shadcn/ui + Radix UI | Accessible, composable component primitives |
| Icons | Lucide React | SVG icon library |
| Styling | Tailwind CSS 3 | Utility-first, mobile-first design |
| Dark Mode | next-themes | System preference detection with manual toggle |
| Forms | React Hook Form + Zod | Performant forms with schema validation |
| Backend | Supabase | PostgreSQL database, Auth, Storage, and Edge Functions |
| File Handling | React Dropzone | Drag-and-drop upload zones |
| PDF | jsPDF + React PDF | Generate and render PDF files |
| Analytics | Recharts | Charts for upload and download visualization |
| Notifications | Sonner (via shadcn) | Toast notifications |
| QR Codes | qrcode + qr-scanner | Generate and scan QR codes |
| SEO | React Helmet Async | Meta tag management |
| PWA | Vite PWA + Workbox | Service workers, offline caching, and installability |

## Performance Optimizations

File Transfer Pavan uses several techniques to keep bundle sizes small and page loads fast.

### Code Splitting

Every route except the landing page is lazy-loaded with `React.lazy()`. The landing page is eagerly loaded to improve Largest Contentful Paint.

```tsx theme={null}
// App.tsx
const AIChatWidget = lazy(() => import("@/components/chat/AIChatWidget").then(m => ({ default: m.AIChatWidget })));
const Dashboard = lazy(() => import("./pages/Dashboard"));
const AdminDashboard = lazy(() => import("./pages/AdminDashboard"));
```

### Manual Rollup Chunks

Vite splits vendor dependencies into six manual chunks so that changes in your application code do not invalidate the vendor cache.

```ts theme={null}
// vite.config.ts
rollupOptions: {
  output: {
    manualChunks: {
      'vendor-react': ['react', 'react-dom', 'react-router-dom'],
      'vendor-ui': ['lucide-react', 'sonner', 'next-themes'],
      'vendor-motion': ['framer-motion'],
      'vendor-query': ['@tanstack/react-query'],
      'vendor-dropzone': ['react-dropzone'],
      'vendor-qr': ['qrcode'],
    },
  },
},
```

### Terser Minification

Production builds use Terser with aggressive compression: console logs and debugger statements are dropped, two compression passes are applied, and comments are stripped.

```ts theme={null}
// vite.config.ts
build: {
  minify: 'terser',
  terserOptions: {
    compress: {
      drop_console: true,
      drop_debugger: true,
      passes: 2,
    },
    mangle: true,
    format: {
      comments: false,
    },
  },
}
```

### Deferred AI Chat

The AI Chat Widget is deferred with `requestIdleCallback`, which means it only initializes after the browser is idle. This keeps the initial render fast.

### Signed URLs

Supabase Storage signed URLs expire after one hour. This limits exposure windows for shared files.

### Parallel Uploads

The upload service processes three files concurrently.

### PWA Service Worker

The Vite PWA plugin uses Workbox. Google Fonts are cached for one year through a runtime caching strategy. Static assets are cached on install.

```ts theme={null}
// vite.config.ts
workbox: {
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
      handler: 'CacheFirst',
      options: {
        cacheName: 'google-fonts-cache',
        expiration: {
          maxEntries: 10,
          maxAgeSeconds: 60 * 60 * 24 * 365
        },
      },
    },
  ],
}
```

## Project Structure

```text theme={null}
src/
  pages/                    # 15+ route pages
    AdminDashboard.tsx
    Dashboard.tsx
    Auth.tsx
    FileShare.tsx
    CollectionShare.tsx
    PinAccess.tsx
    ScanQR.tsx
    Pricing.tsx
    Profile.tsx
    PaymentHistory.tsx
    Contact.tsx
    Support.tsx
    Install.tsx
    DonorWall.tsx
    NotFound.tsx
    Index.tsx
  components/               # 25+ sub-folders
    ui/                     # shadcn/ui primitives
    upload/
    download/
    share/
    admin/
    chat/
    dashboard/
    history/
    filePreview/
    pin/
    payments/
    nearbyShare/
    preview/
    pricing/
    faq/
    landing/
    animations/
    skeletons/
    trust/
  services/
    uploadService.ts        # Upload orchestration and parallel queue
  contexts/
    AuthContext.tsx         # Global auth state with Supabase
  hooks/
    useAdminAccess.ts
    usePremiumPlan.ts
    useUploadHistory.ts
    useWebRTC.ts
    use-mobile.tsx
    use-toast.ts
  integrations/supabase/
    client.ts               # Supabase client configuration
    types.ts                # Generated TypeScript definitions
  types/
    upload.ts               # Upload-related TypeScript interfaces
    nearbyShare.ts          # Nearby share type definitions
  App.tsx                   # Router, providers, deferred chat widget
  main.tsx                  # Application entry point
supabase/
  migrations/               # PostgreSQL schema migrations
  functions/                # Edge functions (ai-chat, razorpay, etc.)
public/
  manifest.json             # PWA manifest
  icon-192.png
  icon-512.png
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.