SnapFile

A retro-futuristic terminal-style file transfer app with a distinctive cyberpunk aesthetic. Upload files from anywhere and retrieve them using a unique code. Files automatically delete after 24 hours for privacy.

Built with Vite + React + UnoCSS ⚡

Made with ❤️ by 3urek4

✨ Features

• 🎨 Retro-futuristic terminal design - Unique cyberpunk aesthetic with neon accents
• 🌓 Dark/Light themes - Toggle between themes with consistent style
• 📤 Drag & drop upload - Simple file upload with progress tracking
• 🔐 Unique 6-character codes - Secure retrieval system
• ⏰ 24-hour auto-deletion - Files expire automatically
• 📋 One-click copy - Copy codes and links instantly
• 📱 QR Code sharing - Scan to access on mobile
• 👀 File preview - Preview images and PDFs before downloading
• ⚡ Smooth animations - Glitch effects, scan lines, and neon glows
• 📱 Fully responsive - Works on all devices

🎨 Design Features

• Terminal aesthetic - Command-line inspired interface
• Neon cyan accents - Electric cyan (#00ff9f) primary color
• ASCII art - Custom terminal-style icons
• Scan line effects - CRT monitor simulation
• Space Mono font - Authentic monospace terminal feel
• Glowing effects - Neon shadows and highlights
• Animated elements - Blinking cursor, glitch text, smooth transitions

🚀 Quick Start

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:5173 in your browser.

🎯 How It Works

Upload Mode

1. Drag & drop a file or click to browse
2. Watch the progress bar as it uploads
3. Get a unique 6-character code
4. Copy code, scan QR, or share the link
5. Files expire after 24 hours

Retrieve Mode

1. Switch to "Retrieve" tab
2. Enter the 6-character code
3. Preview the file (images/PDFs)
4. Download when ready

📦 Deploy to Vercel

1. Push to GitHub

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git
git push -u origin main

2. Import to Vercel

1. Go to vercel.com
2. Click "Add New..." → "Project"
3. Import your GitHub repository
4. Click "Deploy"

3. Enable Blob Storage

1. Go to project dashboard on Vercel
2. Click "Storage" tab
3. Click "Create Database" → "Blob"
4. Click "Create"
5. Redeploy your project

Done! 🎉

🛠️ Tech Stack

• Vite - Fast dev server
• React 18 - Modern UI framework
• TypeScript - Type safety
• UnoCSS - Atomic CSS engine
• Vercel Blob - File storage
• Vercel Functions - Serverless API
• Space Mono - Terminal font from Google Fonts

📁 Project Structure

snapfile/
├── src/
│   ├── App.tsx              # Main component
│   └── main.tsx             # Entry point
├── api/
│   ├── upload.ts            # Upload endpoint
│   └── retrieve.ts          # Retrieve endpoint
├── index.html               # HTML with terminal styles
├── vite.config.ts           # Vite config
├── uno.config.ts            # Theme colors
└── vercel.json              # Deployment config

🎨 Color Palette

Dark Theme

• Background: #0a0a0a
• Surface: #111111
• Text: #e0e0e0
• Accent: #00ff9f (Cyan)

Light Theme

• Background: #f5f5f5
• Surface: #ffffff
• Text: #0a0a0a
• Accent: #00ff9f (Cyan)

Shared Accents

• Cyan: #00ff9f
• Pink: #ff006e
• Amber: #ffbe0b

📝 License

MIT

🤝 Contributing

Issues and PRs welcome!