> ## 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: Secure Cloud File Sharing

> File Transfer Pavan is a secure cloud file sharing platform with PIN protection, QR codes, analytics, and PWA support. Built with React 18, TypeScript, Vite 5, and Supabase.

File Transfer Pavan is a modern cloud-based file sharing platform built with React 18, TypeScript, and Vite 5, backed by Supabase. You can use it live at [https://file-share-05.lovable.app](https://file-share-05.lovable.app) to share files with PIN protection, QR codes, and real-time analytics. The platform supports transfers up to 10 GB on the free tier.

<CardGroup cols={2}>
  <Card title="File Sharing" icon="file-arrow-up">
    Upload single files or organize them into collections. Drag-and-drop support makes uploading effortless, with up to 10 GB free per transfer.
  </Card>

  <Card title="Security" icon="shield-halved">
    Protect shares with PIN codes and optional passwords. Credentials are hashed with bcrypt, Supabase Row Level Security (RLS) policies guard data access, and cryptographically secure tokens validate every request.
  </Card>

  <Card title="QR Code Sharing" icon="qrcode">
    Generate and scan QR codes for instant sharing. Links are print-friendly so recipients can download even without a direct click.
  </Card>

  <Card title="Analytics & Dashboard" icon="chart-line">
    Track downloads, monitor upload trends, and visualize usage with Recharts-powered charts and metrics panels.
  </Card>

  <Card title="Admin Panel" icon="lock">
    Manage users, moderate files, inspect audit logs, and check system health from a 130 KB admin dashboard.
  </Card>

  <Card title="PWA Support" icon="mobile-screen">
    Install the app on mobile or desktop for a native feel. Service Workers cache assets so core flows work even when connectivity drops.
  </Card>
</CardGroup>

## Architecture

File Transfer Pavan is structured as a single-page application with a clear separation between UI, routing, authentication, and data services. Here is how the pieces fit together.

React Router manages more than 15 pages, each loaded lazily to keep initial bundle size small. AnimatedRoutes wraps transitions in Framer Motion for smooth page changes. AuthContext and AuthGuard protect sensitive routes so unauthenticated visitors are redirected to the login screen.

The `uploadService.ts` module orchestrates the full upload pipeline: streaming files to Supabase Storage, generating PINs through an RPC call, hashing passwords with bcrypt, and managing collections. Every upload invokes the `validate_file_upload()` RPC, produces cryptographically secure tokens, and stores metadata in PostgreSQL. React Query sits on top, handling data fetching, caching, and background refetching.

Offline resilience comes from the Vite PWA plugin backed by Workbox. It pre-caches static assets and provides a fallback strategy when the network is unavailable.

## Tech stack

| Technology | Role |
| - | - |
| TypeScript (92.6 %) | Primary language across the entire codebase |
| React 18 + Vite 5 | UI framework and build toolchain |
| React Router DOM | Client-side routing with lazy loading |
| Framer Motion | Page transitions and animations |
| React Query | Server-state fetching, caching, and synchronization |
| shadcn/ui + Radix UI | Accessible, composable UI primitives |
| Tailwind CSS 3 | Utility-first styling |
| React Hook Form + Zod | Form handling and schema validation |
| Supabase | PostgreSQL database, Auth, and Storage |
| Recharts | Charting and data visualizations |
| React Dropzone | Drag-and-drop file uploads |
| jsPDF + React PDF | PDF generation for sharing and reporting |
| Vite PWA + Workbox | Progressive web app and offline caching |

## Key pages

| Page | File | Purpose |
| - | - | - |
| Landing | `Index.tsx` | Marketing page with feature overview and call to action |
| Dashboard | `Dashboard.tsx` | File management, uploads, and download history |
| Single share | `FileShare.tsx` | Create and configure a single-file share |
| Bulk share | `CollectionShare.tsx` | Organize multiple files into a shareable collection |
| PIN entry | `PinAccess.tsx` | Recipient enters a PIN to access protected content |
| Admin | `AdminDashboard.tsx` | 130 KB admin panel for moderation and system health |
| Authentication | `Auth.tsx` | Sign-up, sign-in, and password recovery |
| Pricing | `Pricing.tsx` | Plans and feature comparison |
| Support | `Support.tsx` | FAQ and help resources |

## Get the code

You can clone the repository and start the development server in seconds.

<CodeGroup>
  ```bash npm theme={null}
  # Clone the repository
  git clone https://github.com/pavana05/file-transfer-pavan.git
  cd file-transfer-pavan

  # Install dependencies
  npm install

  # Start the dev server
  npm run dev
  ```

  ```bash pnpm theme={null}
  # Clone the repository
  git clone https://github.com/pavana05/file-transfer-pavan.git
  cd file-transfer-pavan

  # Install dependencies
  pnpm install

  # Start the dev server
  pnpm dev
  ```

  ```bash yarn theme={null}
  # Clone the repository
  git clone https://github.com/pavana05/file-transfer-pavan.git
  cd file-transfer-pavan

  # Install dependencies
  yarn install

  # Start the dev server
  yarn dev
  ```
</CodeGroup>

The dev server listens on port 8080, so open [http://localhost:8080](http://localhost:8080) once the command finishes.


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