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.

// 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.

// 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.

// 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.

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

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