Docs

Flink - The NextGen File and Text Sharing Platform

React TypeScript Supabase Tailwind CSS Vite </div>

🚀 Overview

Flink is a modern, secure, and responsive web application for sharing files and text snippets with others using simple 6-digit sharing codes. Built with cutting-edge technologies, Flink provides a seamless experience for uploading, sharing, and managing your files and texts with enterprise-grade security features.

✨ Key Features

🏗️ Architecture

Alt text for the image

Technology Stack

Category Technology Version Purpose
Frontend React 18.3.1 UI Framework
Language TypeScript 5.5.3 Type Safety
Styling Tailwind CSS 3.4.0 Utility-first CSS
Build Tool Vite 5.4.2 Fast Development & Build
Backend Supabase Latest Database, Auth, Storage
Routing React Router 6.22.3 Client-side Routing
Animations Framer Motion 11.0.8 Smooth Animations
Rich Text React Quill 2.0.0 WYSIWYG Editor
Icons Lucide React 0.344.0 Modern Icons

Project Structure

flink/
├── public/                     # Static assets
├── src/
│   ├── components/            # Reusable UI components
│   │   ├── Auth/             # Authentication components
│   │   ├── Dashboard/        # Dashboard-specific components
│   │   └── Layout/           # Layout components
│   ├── contexts/             # React Context providers
│   │   ├── AuthContext.tsx   # Authentication state management
│   │   └── ShareContext.tsx  # Share data management
│   ├── lib/                  # Utility libraries
│   │   ├── supabase.ts       # Supabase client configuration
│   │   └── database.types.ts # TypeScript database types
│   ├── pages/                # Page components
│   │   ├── HomePage.tsx      # Landing page
│   │   ├── LoginPage.tsx     # User login
│   │   ├── RegisterPage.tsx  # User registration
│   │   ├── DashboardPage.tsx # User dashboard
│   │   ├── AccessPage.tsx    # Content access page
│   │   └── ShareTextPage.tsx # Full-page text editor
│   ├── App.tsx               # Main application component
│   ├── main.tsx              # Application entry point
│   └── index.css             # Global styles
├── supabase/
│   └── migrations/           # Database migration files
├── package.json              # Dependencies and scripts
├── tailwind.config.js        # Tailwind CSS configuration
├── vite.config.ts            # Vite configuration
└── README.md                 # This file

📊 Data Model

Database Schema

shares Table

The core table that stores all shared files and text content:

CREATE TABLE shares (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id uuid REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
  type text NOT NULL CHECK (type IN ('file', 'text')),
  name text NOT NULL,
  title text,
  content text NOT NULL,
  file_type text,
  file_size bigint,
  access_code text NOT NULL UNIQUE,
  has_password boolean DEFAULT false,
  password_hash text,
  expires_at timestamptz,
  created_at timestamptz DEFAULT now(),
  download_count integer DEFAULT 0,
  file_path text
);

Field Descriptions

Field Type Description
id UUID Primary key, auto-generated
user_id UUID Foreign key to auth.users
type TEXT Either ‘file’ or ‘text’
name TEXT Original filename or text title
title TEXT Custom title (optional)
content TEXT File URL or rich text content
file_type TEXT MIME type for files
file_size BIGINT File size in bytes
access_code TEXT 6-digit unique access code
has_password BOOLEAN Password protection flag
password_hash TEXT SHA256 hashed password
expires_at TIMESTAMPTZ Expiration date (null = never)
created_at TIMESTAMPTZ Creation timestamp
download_count INTEGER Access/download counter
file_path TEXT Storage path for files

TypeScript Interface

interface ShareItem {
  id: string;
  userId: string;
  type: 'file' | 'text';
  name: string;
  title?: string;
  content: string;
  fileType?: string;
  size?: number;
  accessCode: string;
  hasPassword: boolean;
  password?: string;
  expiresAt: string;
  createdAt: string;
  downloadCount: number;
  filePath?: string;
}

🔐 Security Features

Authentication

Data Protection

Access Control

🚀 Getting Started

Prerequisites

Installation

  1. Clone the repository 
    git clone https://github.com/SANIDHYADASH/flink.git
cd flink
  2. Install dependencies 
    npm install
# or
yarn install
  3. Set up Supabase
    • Create a new project at supabase.com
    • Copy your project URL and anon key
    • Run the migration scripts in your Supabase SQL editor
  4. Configure environment variables 
    cp .env.example .env

    Update .env with your Supabase credentials:

    VITE_SUPABASE_URL=your-supabase-url
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key

  5. Run database migrations

    Execute the following SQL files in your Supabase SQL editor:

    • supabase/migrations/20250608144710_navy_feather.sql
    • supabase/migrations/20250608144719_crimson_scene.sql
  6. Start the development server 
    npm run dev
# or
yarn dev

  7. Open your browser

    Navigate to http://localhost:5173

📋 Usage Guide

For Users

1. Registration & Login

2. Sharing Files

3. Sharing Text

4. Managing Shares

5. Accessing Shared Content

For Recipients

1. Accessing Content

2. Content Display

🎨 Features Deep Dive

Rich Text Editor

File Management

Access Control

User Experience

🔧 Configuration

Environment Variables

Variable Description Required
VITE_SUPABASE_URL Your Supabase project URL Yes
VITE_SUPABASE_ANON_KEY Your Supabase anonymous key Yes

Tailwind Configuration

The application uses a custom Tailwind configuration with:

Supabase Configuration

Storage Bucket

Database Policies

🚀 Deployment

Build for Production

npm run build
# or
yarn build

Deployment Options

  1. Connect your GitHub repository
  2. Set environment variables in Vercel dashboard
  3. Deploy automatically on push

Netlify

  1. Build the project locally
  2. Upload dist folder to Netlify
  3. Configure environment variables

Other Platforms

Environment Setup

Ensure your production environment has:

🧪 Development

Available Scripts

Script Description
npm run dev Start development server
npm run build Build for production
npm run preview Preview production build
npm run lint Run ESLint

Development Workflow

  1. Feature Development
    • Create feature branch
    • Implement changes
    • Test thoroughly
    • Submit pull request
  2. Code Quality
    • TypeScript for type safety
    • ESLint for code quality
    • Prettier for formatting
    • Component-based architecture
  3. Testing Strategy
    • Manual testing in development
    • Cross-browser compatibility
    • Mobile responsiveness
    • Security validation

Contributing Guidelines

  1. Fork the repository
  2. Create a feature branch 
    git checkout -b feature/amazing-feature
  3. Commit your changes 
    git commit -m 'Add amazing feature'
  4. Push to the branch 
    git push origin feature/amazing-feature
  5. Open a Pull Request

🔍 API Reference

ShareContext Methods

createTextShare(text, name, expiresInDays, password?)

Creates a new text share with rich formatting.

Parameters:

Returns: Promise<ShareItem>

createFileShare(file, expiresInDays, password?, title?)

Creates a new file share with upload to storage.

Parameters:

Returns: Promise<ShareItem>

getShareByCode(code)

Retrieves a share by its access code.

Parameters:

Returns: Promise<ShareItem | null>

updateShare(id, updatedData)

Updates an existing share.

Parameters:

Returns: Promise<ShareItem>

deleteShare(id)

Deletes a share and associated files.

Parameters:

Returns: Promise<void>

🐛 Troubleshooting

Common Issues

1. Supabase Connection Error

Error: Missing Supabase environment variables

Solution: Ensure .env file has correct VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY

2. File Upload Fails

Error: Failed to upload file

Solutions:

3. Access Code Not Working

Error: Invalid code or content has expired

Solutions:

4. Rich Text Editor Issues

Error: Quill editor not loading

Solutions:

Debug Mode

Enable debug logging by adding to your .env:

VITE_DEBUG=true

Performance Optimization

  1. Image Optimization
    • Use WebP format when possible
    • Implement lazy loading
    • Optimize file sizes
  2. Code Splitting
    • Lazy load pages
    • Split vendor bundles
    • Use dynamic imports
  3. Caching Strategy
    • Browser caching for static assets
    • Service worker for offline support
    • CDN for global distribution

📈 Roadmap

Version 2.0 (Planned)

Version 2.1 (Future)

🤝 Contributing

We welcome contributions from the community! Here’s how you can help:

Ways to Contribute

Development Setup

  1. Fork the repository
  2. Clone your fork
  3. Install dependencies
  4. Set up Supabase
  5. Start development server
  6. Make your changes
  7. Submit a pull request

Code Standards

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2024 Flink

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

📞 Support

Getting Help

Community

🙏 Acknowledgments

Built With Love Using

Special Thanks

Made with ❤️ by Sanidhya

Website • Documentation • GitHub •

**⭐ Star us on GitHub if you find Flink useful!**