File Transfer Pavan: Secure Cloud File Sharing

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 to share files with PIN protection, QR codes, and real-time analytics. The platform supports transfers up to 10 GB on the free tier.

File Sharing

Upload single files or organize them into collections. Drag-and-drop support makes uploading effortless, with up to 10 GB free per transfer.

Security

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.

QR Code Sharing

Generate and scan QR codes for instant sharing. Links are print-friendly so recipients can download even without a direct click.

Analytics & Dashboard

Track downloads, monitor upload trends, and visualize usage with Recharts-powered charts and metrics panels.

Admin Panel

Manage users, moderate files, inspect audit logs, and check system health from a 130 KB admin dashboard.

PWA Support

Install the app on mobile or desktop for a native feel. Service Workers cache assets so core flows work even when connectivity drops.

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.

# 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

# 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

# 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

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

Get Started

Features

Configuration

File Sharing

Security

QR Code Sharing

Analytics & Dashboard

Admin Panel

PWA Support

Architecture

Tech stack

Key pages

Get the code

File Sharing

Security

QR Code Sharing

Analytics & Dashboard

Admin Panel

PWA Support

​Architecture

​Tech stack

​Key pages

​Get the code

Architecture

Tech stack

Key pages

Get the code