SkyDrop (Clipboard)

SkyDrop is a secure file and text sharing application (also known as Clipboard) built with a Vue 3 frontend and a Flask backend. It allows users to quickly share files and text snippets with customizable access controls such as expiration dates, download limits, and secure access keys.

Features

• Secure File Sharing: Upload files and share them via access keys.
• Text Sharing (Clipboard): Save and retrieve text snippets effortlessly.
• Access Controls: Set expiration dates and maximum download limits on shared content.
• User Authentication: Register and log in securely via JWT.
• Role-based Access: Native support for Pro/Admin users for extended limits and capabilities.
• Auto-Cleanup: Content automatically expires and becomes inaccessible based on defined limits.

Tech Stack

Frontend

• Framework: Vue 3 (Composition API)
• Build Tool: Vite
• Routing: Vue Router
• HTTP Client: Axios

Backend

• Framework: Flask, Flask-RESTful
• Database: SQLAlchemy (SQLite for Development, PostgreSQL for Production)
• Authentication: Flask-JWT-Extended, Flask-Bcrypt
• Other Tools: Flask-Migrate, Flask-Limiter, Flask-Cors, Waitress, Celery, Redis.

Project Structure

clipboard/
├── backend/            # Flask REST API backend
│   ├── app/            # Application factory, models, resources, and utils
│   ├── instance/       # Local database storage
│   ├── uploads/        # Directory for uploaded files
│   ├── run.py          # Entry point for the backend
│   ├── requirements.txt# Python dependencies
│   └── .env            # Environment configuration
│
├── frontend/           # Vue 3 Vite application
│   ├── src/            # Components, views, router, and assets
│   ├── public/         # Static assets
│   ├── package.json    # Node dependencies and scripts
│   └── vite.config.js  # Vite integration configuration
│
└── README.md           # Project documentation

Setup Instructions

Prerequisites

• Node.js (v18+)
• Python (3.9+)
• (Optional) Redis server running if using Celery backgrounds tasks.

1. Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Create and activate a virtual environment:

   • Windows:

     python -m venv venv
     venv\Scripts\activate

   • Mac/Linux:

     python3 -m venv venv
     source venv/bin/activate

3. Install dependencies:

   pip install -r requirements.txt

4. Environment Variables: Create a .env file in the backend directory based on the .env template provided:

   # Development DB (SQLite)
   DEV_DATABASE_URI=sqlite
   
   # Production DB (PostgreSQL)
   PROD_DATABASE_URI=postgresql
   
   # Flask environment
   FLASK_ENV=development,production
   
   
   # Allowed CORS Origin

5. Initialize Database: Ensure FLASK_ENV is set to development. By default, running the server automatically triggers the database creation. If using Flask-Migrate, run:

   flask db upgrade

6. Run the Backend Server:

   python run.py

   The backend will typically run on http://127.0.0.1:5000 (Waitress or Flask Dev Server based on environment).

2. Frontend Setup

1. Navigate to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Run the Development Server:

   npm run dev

   The frontend will be available at http://localhost:5173. By default, it accesses the backend running locally.

API Documentation

• POST /api/auth/register - Create a new user
• POST /api/auth/login - Authenticate users and receive a JWT
• POST /api/FileUpload - Upload a file securely
• GET /api/FileDownload - Download an uploaded file securely using access key
• POST /api/clipboard/save - Save text to clipboard securely
• GET /api/clipboard/retrieve - Retrieve text from clipboard safely

Deployment

Production Ready Best-Practices

• Backend: Serve using a reliable WSGI server like Waitress (Windows) or Gunicorn (Linux). For robust production instances, bind it behind reverse proxies (Nginx/Apache). Configure properly PROD_DATABASE_URI for production databases like PostgreSQL.
• Frontend: Build the Vue 3 app using npm run build to get the production bundled output dist/, which is then served statically via Vercel, Netlify, or Nginx. Update CORS_ORIGINS in backend configuration as needed for your deployed domains.